Input Tag 정리
: 오늘은 html 태그중에서도 내가 실제로 개발자로 일할 때 가장 많이 썼던 태그이기도 한..ㅎ(물론 div, span을 이길 수 없지만 ㅎㅎ) input 태그에 대해서 알아보고자 한다.
Input 태그란? :
: 주로 Form 태그 안에서 유저로부터 특정 정보를 받고자 할 때 쓰는 입력창을 표시하는 마크업 요소이다. 유저와의 인터랙션에 아주 적합하고, 유용한 요소이다.
알아두어야 할 것들
- Input 태그의 주된 속성(attribute)
- type 속성 : input 태그는 여러가지 쓰임새와 모양으로 제공되는데, 그러한 input의 목적 혹은 모양새를 정의해놓는 부분 혹은 유형화해서 적어두는 부분이 type 속성이다. 이러한 type 속성에 어떤걸 적느냐에 따라 실제로 input 요소가 제공하는 기능, UI가 완전히 달라지기도 한다. 다양한 input type들 예시 : 실제로 어떤 타입의 input 들이 있는지 간단한 예시와 함께 살펴보면 다음과 같다.
- text type input
- number type input
- password type input
- email type input
- range type input
- tel type input
- checkbox type input
- radio type input
- 날짜 관련 input
- 추가적으로 input type="reset"이 있는데, 해당 타입을 사용하면 같은 form 태그 내의 모든 input 입력을 초기화할 수 있는 버튼이 생성된다.
: 실제로 input type에 text를 준 input은 위와 같다. 문자열을 받을 수 있기 때문에 숫자도 타이핑 할 수 있고, 사실상 키보드의 모든 문자를 칠 수 있다.
| No | 특징 |
|---|---|
| 1 | disabled(boolean) 속성을 줘서 입력을 막고, 서버로 보내지도 못하게 할 수 있다. |
| 2 | disabled와 유사하지만, 서버에는 보낼 수 있는 디폴트로 선택된 옵션과 같은 것으로 readonly 속성을 줄 수 있다(boolean). 선택을 하지 못하지만, 서버에는 보내진다. |
| 3 | minlength, maxlength 속성을 줘서 최대 길이와 최소 길이에 제한을 줄 수 있다. 만약 최대 길이를 넘기면 브라우저마다 설정해놓은 유효성 검사 팝업이 뜬다(submit도 막는다). |
: 위와 같이 넘버 타입 input은 숫자만 입력할 수 있도록 자체적으로 규율을 적용시키며, 옆에 컨트롤러(화살표)가 자동으로 표시된다. 문자가 한음절까지는 타이핑되는 것을 볼 수 있는데, 어차피 실제 이 input 값을 서버로 보내거나 할 때는 반영이 되지 않는다.
| No | 특징 |
|---|---|
| 1 | max, min 속성을 줘서 최대값, 최소값을 제한 할 수 있다. |
| 2 | step 속성으로 한번에 몇씩 숫자를 변경할건지 세팅할 수 있다. |
: 우리가 흔히 로그인할 때 비밀번호를 치면 자동으로 마스킹 처리가 돼서 보이는데, 그러한 기능을 제공하는 type이다. 하지만 실제로 form 태그 내에서 password type input으로 submit하면 그대로 보여지게된다(GET요청인 경우).
| No | 특징 |
|---|---|
| 1 | text type과 마찬가지로 minlength, maxlength를 정해놓고 규제를 할 수 있다. |
: 이메일 형식을 치도록 유도하는 기능이 있는 이메일 input 태그
| No | 특징 |
|---|---|
| 1 | 여기서는 확인할 수 없지만, 실제로 form 태그안에 email type의 input을 쓰고 이메일 형식이 아닌 형식을 타이핑 한다음 제출하려하면 유효성 검사 팝업이 뜬다. |
: 소리의 볼륨 혹은 수치적인 정도에 대한 입력을 받을 때 쓰는 range type
| No | 특징 |
|---|---|
| 1 | number와 똑같이 min, max 속성을 통해 최소값과 최대값을 조절할 수 있다. |
| 2 | 또한, number와 똑같이 step 속성을 줘서 조절 가능한 간격을 세팅할 수 있다. |
: 전화번호(telephone의 tel)를 받는 input인 tel type input은 기능상으로는 일반 input 태그와 별차이가 없다. 문자도 칠 수 있고, 전화번호 형식이 아니더라도 타이핑이 된다. 그러나, 모바일로 접근했을 때, tel type input을 누르면 번호 키패드가 팝업되는 기능이 있다.
: 설문 조사 등을 할 때 한번쯤은 눌러봤을 checkbox type input은 name을 여러개로 설정해놓고, 다중 선택이 가능한 인터랙션에 쓰인다. 좋아하는 음식1,2,3을 해놓고 다중 선택하도록 하는 설문 등에 쓰일만한 input.
| No | 특징 |
|---|---|
| 1 | checked 속성을 주면 디폴트로 선택되어 놓도록 할 수 있다. 물론 체크 해제할 수 있다(disabled나 readonly와는 다른 개념) |
: checkbox input과 달리, name을 통일시켜놓고, 선택지중 하나만 고르는 경우에 쓰인다. 한명의 대표를 뽑는 선거에 쓰일만한 input.
| No | 특징 |
|---|---|
| 1 | checked 속성을 주면 디폴트로 선택되어 놓도록 할 수 있다. 물론 체크 해제할 수 있다(disabled나 readonly와는 다른 개념) |
: 연도, 월, 일, 시간을 선택할 수 있는 'datetime-local' type input
: 연도, 월, 일을 선택할 수 있는 'date' type input
: 연, 월을 선택할 수 있는 'month' type input
: 주를 선택할 수 있는 'week' type input
: 시간을 선택할 수 있는 'time' type input
완벽함 보다는 최선의 결과를 위해 끊임없이 노력하는 개발자