form
사용자가 입력한 정보를 서버로 전송할 때 사용
input type ="text"
사용자로부터 정보를 입력받아 올 때 input을 이용한다.
https://alvine.tistory.com/161
HTML 강좌 input 태그 총정리
안녕하세요 엘빈입니다. 저번 포스팅에서는 form 구조에 대해서 간략히 알아보았습니다. 이번 포스팅에서는 Form 태그 안에서 대부분이 차지하는 input 태그에 대해서 알아보겠습니다. Input 태그는
alvine.tistory.com
input에 대해 잘 설명해 놓은 블로그가 있어서 첨부한다.input쓸때는 반드시 "type"을 명시해줘야 한다.
|
1
2
3
4
5
6
|
<html>
<body>
<p>아이디 : <input type="text"></p>
<p>비밀번호 :<input type="text"></p>
</body>
</html>
|
cs |
음 근데 문제점은 비밀번호가 보인다는 것이다! 보통 비밀번호 입력할때는 땡땡 무늬가 있어서 유출되지 않는데, 이를 사용하려면 어떻게 해야할까?
<input type ="password">
요거를 이용해주면 비밀번호 입력할 때 땡땡무늬가 뜬다!
|
1
2
3
4
5
6
|
<html>
<body>
<p>아이디 : <input type="text"></p>
<p>비밀번호 : <input type="password"></p>
</body>
</html>
|
cs |
<input type="submit">
아이디와 비밀번호를 입력하고 난 다음에 '확인' 버튼이 필요한데, 이 확인 버튼 역할을 하는게 submit 이다
사용자로부터 아이디, 비밀번호를 입력받은 다음 이 정보를 어딘가에 보내줄 것인가를 정해준다.
<form action="">태그
우리가 입력한 정보가 어디로 전송되는지 정해준다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body>
<form action="http://localhost/login.php">
<p>아이디 : <input type="text"></p>
<p>비밀번호 : <input type="password"></p>
<p>주소 : <input type="text"></p>
<input type="submit">
</form>
</body>
</html>
|
cs |
form action ="이동할 url" 을 하면 그 url로 정보가 이동한다.
아이디,비밀번호,주소를 입력하고 submit 버튼을 눌렀더니
localhost 창이 뜬것을 확인할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body>
<form action="http://localhost/login.php">
<p>아이디 : <input type="text",name="id"></p>
<p>비밀번호 : <input type="password",name="pwd"></p>
<p>주소 : <input type="text",name="address"></p>
<input type="submit">
</form>
</body>
</html>
|
cs |
여기서 추가된건 name="id" ,name="pwd" 이런건데 만약에 내가 아이디를 입력하면, 이게 localhost로 갈 때 id라는 변수에 담겨서 간다는 것이다.
이걸 사진으로 첨부하려 했으나 크롬이랑 엣지에서 localhost 접근을 막아서 첨부하지 못했다.
하지만 상단을 보면 id=meaning pwd=1111 address=seoul로 잘 담겨있는 것을 발견할 수 있다!
텍스트 입력
name이라는 속성은 모든 form태그에서 필수이다.
value="default value" 를 추가해주면
"default value"라는 글자가 기본적으로 적혀져있게 된다.
<text area>
위에 text나 password와 달리 여러줄을 입력받고 싶으면 <textarea> 태그를 이용하면 된다.
근데 textarea가 너무 작은 것 같다. 이걸 크게 수정하려면
cols라는 속성을 이용하면 50글자가 입력될 수 있게 바뀐다.
확실히 길어졌다.
rows도 10으로 조정해주면 10줄을 쓸 수 있게 크게 바뀐다!
최종코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<body>
<form action="">
<p> text: <input type="text" name="id" value="default value"></p>
<!--사용자로부터 입력받는거-->
<p>password: <input type="password" name="pwd" value="default value"></p>
<p> textarea:
<textarea cols="50"rows="10">default value</textarea>
</textarea>
</p>
</form>
</body>
</html>
|
cs |
input type의 경우 괄호 안에 value가 들어가는데
text area의 경우 괄호 밖에 value가 들어간다고 보면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<body>
<form action="">
<p> text: <input type="text" name="id" value="텍스트를 입력하세요"></p>
<!--사용자로부터 입력받는거-->
<p>password: <input type="password" name="pwd" value="비밀번호를 입력하세요"></p>
<p> textarea:
<textarea cols="50"rows="10">쓰고 싶은 말 적으셈! 이건 길게 적어도 된당</textarea>
</textarea>
</p>
</form>
</body>
</html>
|
cs |
'HTML > 생활코딩' 카테고리의 다른 글
| [HTML 기초] 입력양식 -form(3) label/method/post (0) | 2021.11.12 |
|---|---|
| [HTML 기초] 입력양식 - form (2) 콤보박스/체크박스/radio/버튼/hidden (0) | 2021.11.10 |
| [HTML 기초] table (0) | 2021.11.03 |
| [HTML기초] p태그,br태그,img태그 (0) | 2021.10.22 |
| [HTML기초] 웹사이트 만들기 (0) | 2021.10.11 |
댓글