[HTML] 사용자 입력 태그
*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.
우리는 사용자의 입력을 받아야하는 다양한 상황이 존재한다.
예를 들면 회원가입이나, 로그인 등
이럴 때 사용할 수 있는것이 input 태그이다.
입력 양식을 받을 때 기본적인 구조는 <form>태그 안에 다양한 <input>태그들을 넣어서 사용한다.
1. <form> 태그
입력 양식의 영역을 생성하는 태그이다.
<form action="/action_page.php" method="post">
form 태그의 속성을 이용해서 데이터를 어디로 어떻게 전송할지를 설정할 수 있다.
기억해야 될 것은, form태그 안에 form이 들어갈 수 없다는 것이다. 즉. 중첩될 수 없다.
form태그 안에는 다양한 속성이 있는데 주로 사용하는 속성은 아래와 같다.
| 속성 | 설명 |
| action | 입력값이 제출되었을 때, 데이터를 보낼 URL을 지정한다. ** submit 타입의 input 태그 또는 button 태그가 있을 때만 동작한다. |
| method | 폼 데이터를 제출할 때, 어떤 방식으로 전송할 지에 대한 속성이다. 속성값으로는 get, post가 있다. get과 post방식의 차이는 이전에 다룬 적이 있으므로 간단하게 말하면, 개인정보 등과 같이 중요한 정보는 post로, 그렇지 않은 정보는 get으로 전송하면 된다. |
| target | 폼 데이터를 제출한 후 응답을 받을 창이나 프레임을 지정하는데 사용된다. 창이나 프레임의 name속성의 값을 입력하거나 _self, _blank, _parent, _top 등을 사용할 수 있다. |
위 속성들 외에 accept-charset, autocomplete, enctype, novalidate, rel 등의 속성이 있는데, 이는 w3schools의 HTML Form Attributes 문서를 참고하면 된다.
2. <input> 태그
가장 많이 사용하는 태그이다.
input의 type에 어떤 값을 설정하느냐에 따라서 모양과 입력할 수 있는 값이 달라진다.
<input type="text" id="fname" name="fname">
type에 들어갈 수 있는 값은 다음과 같다.
| text |  |
image |  |
| password |  |
file |  |
| submit |  |
month |  |
| reset |  |
number |  |
| radio |  |
week |  |
| checkbox |  |
time |  |
| button |  |
range |  |
| color |  |
search |  |
| date |  |
tel |  |
| datetime-local |  |
url |  |
 |
hidden |  |
대부분 속성값을 읽어보면 어떤 내용인지 감이 올 것이다.
내가 공부하면서 헷갈렸던 것들이 있었다.
(1) text, tel, url, email, hidden은 다 똑같이 생겼는데 굳이 다르게 한 이유가 무엇일까?
(2) image 타입은 image를 첨부하는 것인가? (NO)
(3) submit과 reset은 button타입에 부가적인 기능을 더한 것인가? (YES)
(4) search 옆의 x는 어떤 표시인가? 단순히 x를 누르면 입력한 내용을 삭제한다.
이에 대한 해답은 접은글에 남겨두겠다.
(1)
text : 일반적인 텍스트를 입력한다.
<input type="text" id="fname" name="fname">
tel : 전화번호를 입력하고, 유효성 검사를 진행한다.
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
url : 웹 주소를 입력하며, URL 형식의 유효성 검사를 진행한다.
<input type="url" id="homepage" name="homepage">
email : 이메일 주소를 입력하고, 이메일 형식 유효성을 검사한다.
<input type="email" id="email" name="email">
hidden : 사용자에게 보이지 않는 데이터를 폼과 함께 전송한다. 사용자 인터페이스에는 표시되지 않는다.
<input type="hidden" id="userid" name="userid" value="12345">
(2)
이미지를 submit 버튼 대신 사용한다.
(3)
submit : 폼 데이터를 서버로 전송하며, 폼이 제출되고 페이지가 새로 고침된다.
reset : 폼 내의 모든 입력 값들이 초기 상태로 되돌아간다.
button : 아무런 기본 동작이 없어서 javascript를 통해 동작을 정의해야 한다.
3. <select> 태그
지정된 옵션을 선택할 수 있는 입력양식이다.
<select> 태그 안에 <option> 태그를 사용하여 옵션을 추가할 수 있다.
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
옵션 중의 가장 첫번째 옵션이 선택된 상태가 된다.
만약에 다른 옵션을 선택한 상태로 시작하고 싶다면 selected속성을 사용하면 된다.
select옵션에 다양한 속성을 사용할 수 있다.
주요한 속성은 다음과 같다.
| 속성 | 설명 |
| size | 한번에 보여질 옵션의 개수를 설정할 수 있다. 위의 예제로 보면 옵션의 개수는 4인데, 사이즈를 3으로 설정하면 스크롤바가 생성되고 최대 3개만 보이게 된다. |
| multiple | 중복 선택이 가능하게 하는 속성이다. |
4. <textarea> 태그
여러줄의 text를 입력 받을 수 있는 태그이다.
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<input type="text">는 아무리 많은 문자열을 입력해도 한줄로 입력된다.
<textarea>를 이용하면 긴 문자열을 입력받고 그 영역을 벗어나면 자동으로 줄바꿈 된다.
5. <button> 태그
버튼을 생성하는 태그이다.
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
button태그에서 기본적으로 type을 submit으로 설정한다.
그래서 type을 따로 설정하지 않고 버튼을 누르면 폼의 데이터가 전송된다.
주의 ! 따라서 반드시 type="button"을 함께 사용하는 것을 습관화 해야 한다.
onclick속성은 onclick이벤트가 발생했을 때(클릭되었을 때) 어떤 행동을 할 지를 정의할 수 있다.
javascript에 대해서 아직 다루지는 않았지만, 속성값은 javascript 함수이다.
onclick외에도 사용할 수 있는 이벤트는 다양하다.
6. <fieldset> 태그와 <legend>태그
fieldset태그는 폼 태그내의 요소들을 그룹화하는데 사용되며, 사각형 테두리를 그린다.
legend태그는 fieldset으로 지정한 그룹의 제목을 표시한다.
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
7. <label> 태그
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<label>태그 내에 존재하는 값을 누르면 input태그에 초점이 맞추어진다.
label 태그가 없으면 input태그 영역을 눌렀을 때만 입력을 할 수 있지만,
위 예제로 보면 First name:을 클릭해도 입력을 할 수 있다.
for 속성의 값으로 연결할 input 태그의 id값을 넣어주면 된다.