<input> 태그의 type 속성
<input> 태그의 type 속성은
입력 받는 데이터의 컨트롤 유형을 지정합니다.
<input> 태그는 type 속성의 값에 따른 다양한 컨트롤 유형이 있으며, 유형에 따른 입력 필드의 동작과 표시 방식이 달라집니다.
type 속성 값
아래에 사용 가능한 각 type 속성 값과 그 설명을 정리하였습니다.
type 속성이 지정되어 있지 않을 경우 type 속성의 기본값은 text입니다.
주요 브라우저 중에서 일부 브라우저가 지원하지 않는 type 속성 값은 포함시키지 않았습니다.
type |
설명 | 기본 예제 |
|---|---|---|
<input type="button"> |
일반 버튼입니다.
자바스크립트와 함께 사용하여 다양한 동작을 수행할 수 있습니다. |
|
<input type="checkbox"> |
체크박스입니다.
단일한 값으로 체크와 취소를 할 수 있습니다. 일반적으로 정사각형이지만 모서리가 둥글게 되어 있을 수도 있습니다. |
|
<input type="color"> |
사용자가 색상을 선택하거나 입력할 수 있는 컬러 피커 형태의 입력 필드를 나타냅니다.
브라우저에서 활성화되면 컬러 피커를 엽니다. |
|
<input type="date"> |
날짜 입력 컨트롤입니다.
브라우저에서 활성화된 연도, 월, 일에 대한 날짜 선택기 또는 숫자 휠을 엽니다. |
|
<input type="datetime-local"> |
사용자가 날짜와 시간을 한 번에 쉽게 입력할 수 있도록 날짜와 시간 선택 인터페이스를 제공하는 입력 필드입니다. | |
<input type="email"> |
이메일 주소 입력 필드입니다.
텍스트 입력처럼 보이지만, 동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 @ 문자 및 . 문자와 같은 이메일 주소 입력에 도움이 되는 키패드를 지원합니다. |
|
<input type="file"> |
사용자가 디바이스에서 파일을 선택하고 업로드할 수 있는 입력 필드입니다. | |
<input type="hidden"> |
숨겨진 입력 필드로, 사용자에게 보이지 않지만 데이터를 양식과 함께 전송할 수 있습니다. | |
<input type="image"> |
텍스트가 아닌 이미지로 표시되는 양식(<form>) 제출 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤의 값을 제출합니다. |
|
<input type="number"> |
숫자 입력 필드입니다.
스피너를 표시하고 숫자만을 입력할 수 있도록 유효성 검사를 합니다. 동적인 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 숫자 키패드를 표시합니다. |
|
<input type="password"> |
비밀번호 입력 필드입니다.
값이 가려져 있는 한 줄 텍스트 입력 컨트롤입니다. 브라우저는 입력되는 민감한 정보를 화면에서 보이지 않게 텍스트 문자를 점("•")과 같은 기호로 대체하여 읽을 수 없게 처리합니다. |
|
<input type="radio"> |
라디오 버튼입니다.
일반적으로 작은 원으로 렌더링되며 선택 시 채워지거나 강조 표시됩니다. |
|
<input type="range"> |
범위 슬라이더로, 설정된 숫자 범위 내에서 값을 선택할 수 있습니다. | |
<input type="reset"> |
양식(<form>) 초기화 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤의 값을 초기화합니다. |
|
<input type="search"> |
검색어 입력 필드입니다.
한 줄 텍스트 입력 컨트롤이며, 동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 검색 아이콘을 표시합니다. 브라우저에 따라 필드를 지우는 데 사용할 수 있는 삭제 아이콘을 포함할 수 있습니다. |
|
<input type="submit"> |
양식(<form>) 제출 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤의 값을 제출합니다. |
|
<input type="tel"> |
전화번호 입력 필드입니다.
한 줄 텍스트 입력 컨트롤이며, 전화번호 형식을 검증하지는 않습니다. |
|
<input type="text"> |
type 속성의 기본값이며, 일반 텍스트 입력 필드입니다.
한 줄 텍스트 입력 컨트롤입니다. |
|
<input type="time"> |
시간을 쉽게 입력할 수 있도록 시간 선택 인터페이스를 제공하는 입력 컨트롤입니다. | |
<input type="url"> |
URL 입력 필드입니다.
텍스트 입력처럼 보이지만, 동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 / 및 . 문자와 같은 URL 입력을 보조하기 위한 키 및 www. 또는 .com과 같은 도메인 이름에서 일반적으로 발견되는 문자열의 빠른 입력을 위한 키와 같은 URL 입력에 도움이 되는 키패드를 지원합니다. |
알아두세요!
브라우저와 운영 체제에 따라 type 속성 값에 따른 컨트롤의 인터페이스나 스타일이 조금씩 다를 수 있습니다.
<input> 태그는 type 속성 이외에도 여러 가지 속성들이 있습니다.
브라우저 호환성
| 속성 값 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
type="button"
|
1 | 12 | 1 | 1 |
type="checkbox"
|
1 | 12 | 1 | 1 |
type="color"
|
20 | 14 | 29 | 12.1 |
type="date"
|
20 | 12 | 53 | 14.1 |
type="datetime-local"
|
20 | 12 | 93 | 14.1 |
type="email"
|
5 | 12 | 1 | 5 |
type="file"
|
1 | 12 | 1 | 1 |
type="hidden"
|
1 | 12 | 1 | 1 |
type="image"
|
1 | 12 | 1 | 1 |
type="number"
|
7 | 12 | 29 | 5.1 |
type="password"
|
1 | 12 | 1 | 1 |
type="radio"
|
1 | 12 | 1 | 1 |
type="range"
|
4 | 12 | 23 | 3.1 |
type="reset"
|
1 | 12 | 1 | 1 |
type="search"
|
5 | 12 | 4 | 10.6 |
type="submit"
|
1 | 12 | 1 | 1 |
type="tel"
|
3 | 12 | 1 | 4 |
type="text"
|
1 | 12 | 1 | 1 |
type="time"
|
20 | 12 | 57 | 14.1 |
type="url"
|
1 | 12 | 1 | 1 |
명세서
| 명세서 사양 | |
|---|---|
<input type="value">
|
HTML Standard #attr-input-type |