웹 사이트에서 사용자가 입력한 정보를 서버로 전송하는 형태의 레이아웃을 만들 때 사용되는 태그들이 있습니다.
그 중 사용자의 입력을 받는 레이아웃을 만드는 input 태그가 있습니다.
input 태그로 만들어지는 가장 흔한 예로 아이디, 비밀번호를 입력하는 상자가 있습니다.
이렇게 input 태그로 생성되는 한 줄 짜리 입력을 받는 상자죠.
그런데 사용자의 입력을 받는 형태는 텍스트를 받는 상자만 있는 것이 아닙니다. 예를들어 체크박스나 라디오 버튼, 그냥 버튼 등 다양한 형태가 될 수도 있습니다. 이런 형태를 지정할 때는 type속성을 사용하면 됩니다.
또한 아디와 비밀번호를 입력할 때 아이디에 입력된 텍스트는 그대로 보여지는 반면 비밀번호에 입력되는 텍스트는 "*****"와 같은 형태로 가려져 보이지 않습니다. 이 것 역시 input 태그의 type 속성으로 결정할 수 있습니다.
이렇게 input 태그로 사용자 입력은 받은 후 서버로 전송하기 위해서는 form 태그를 사용하는데 form 태그에 대한 설명은 따로 정리하고 여기에서는 input 태그의 특성에 대해서만 다루겠습니다.
input 태그
<input type = "text">
일반적인 한줄 짜리 사용자 입력 상자를 만든다. type이 "text"이므로 사용자의 입력을 그대로 표시
<input type = "password">
일반적인 한줄 짜리 사용자 입력 상자를 만든다. type이 "password"이므로 사용자의 입력을 숨긴다.
<input type = "checkbox">
type이 "checkbox"면 체크박스를 생성
<input type = "button" value="click!">
type이 button이면 버튼을 만들고 value 속성으로 버튼의 라벨(label)을 지정할 수 있음.
input 태그의 type 속성으로는 다음과 같은 것들이 있습니다.
button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week
참고:
type="image"
submit 타입과 같은 기능을 하지만 라벨 대신 이미지를 지정해 넣을 수 있습니다.
type="reset"
form 태그 내에서 이루어진 사용자 입력을 모두 초기화 합니다.
type="hidden"
숨겨진 영역으로 서버로 전송할 데이터를 설정할 수 있습니다.
위 그림은 각 type들에 대한 모습을 보여줍니다. 대부분 직관적으로 어떤 것인지 이해할 수 있는데 어떤 방식으로 서버에 입력이 전달되는지는 form 태그를 공부하면서 구체적으로 배울 것입니다.