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> )의 모든 컨트롤의 값을 제출합니다. 텍스트가 아닌 이미지 형식을 취하는 제출 버튼을 만드는데 사용됩니다. src 속성으로 지정된 이미지를 표시합니다. src 속성이 누락된 경우에는 alt 속성의 값이 표시됩니다. <input type="submit"> 과 동일한 기능을 합니다. |
|
<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
속성 값에 따른 컨트롤의 인터페이스나 스타일이 조금씩 다를 수 있습니다.
브라우저 호환성
속성 값 |
데스크탑 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
속성으로, 앞서 다양한 예시로 설명했습니다. 모든 <input>
태그는 같은 기본 속성들을 가지고 있지만, 실제로는 특정한 type
속성에만 영향을 미치는 속성들이 많습니다. 또한, 일부 속성은 type
속성에 따라 다르게 작동하기도 합니다.
<input>
태그는 모든 글로벌 속성을 사용할 수 있습니다.
여기에서는 <input>
태그의 주요 속성을 간단히 설명하는 표를 제공하고, 각 속성을 더 자세히 설명하면서 어떤 입력 유형과 관련이 있는지 설명합니다.
속성 | 관련된 type 속성 |
설명 |
---|---|---|
accept |
file |
파일 업로드 컨트롤의 허용되는 파일 형식을 지정합니다. |
alt |
image |
src 속성에 대한 대체 텍스트입니다. src 속성이 누락된 경우에는 alt 속성의 값이 표시되며, 접근성을 위해 필수입니다. |
autocapitalize |
text , search , tel |
이 속성은 글로벌 속성입니다.
사용자가 입력하거나 수정하는 텍스트를 자동으로 대문자로 바꾸는 방식을 지정합니다. 물리적인 키보드에서 입력하는 경우 아무런 영향도 주지 않으며, 대신 음성 입력이나 모바일 장치의 가상 키보드 등에만 적용됩니다. 이 속성은 열거형 속성으로 가능한 값은 다음과 같습니다.
|
autocomplete |
checkbox , radio 그리고 버튼과 관련된 값을 제외한 모든 값 |
컨트롤 양식에 자동 완성 기능의 사용 여부를 지정합니다.
|
checked |
checkbox , radio |
체크박스가 기본적으로 체크되어 있는지 여부를 나타내는 속성입니다. 페이지가 처음 로드될 때 체크박스가 체크된 상태로 시작하려면 checked 속성을 사용합니다. 하지만 페이지가 로드된 후 사용자가 체크박스를 체크하거나 체크 해제해도 checked 속성은 변하지 않습니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다. |
disabled |
모든 값 | 컨트롤이 비활성된 상태임을 나타냅니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다. |
max |
date , time , datetime-local , number , range |
컨트롤의 최댓값을 지정합니다. |
maxlength |
text , search , url , tel , email , password |
허용되는 최대 글자 개수를 지정합니다. |
min |
date , time , datetime-local , number , range |
컨트롤의 최솟값을 지정합니다. |
minlength |
text , search , url , tel , email , password |
허용되는 최소 글자 개수를 지정합니다. |
name |
모든 값 | 컨트롤의 이름을 나타냅니다.
양식이 제출될 때 이 이름이 컨트롤을 식별하는데 사용됩니다. |
pattern |
text , search , url , tel , email , password |
컨트롤의 텍스트 값을 검사할 때 사용되는 정규 표현식(regular expression)을 지정합니다. |
placeholder |
text , search , url , tel , email , password , number |
값이 설정되지 않은 경우 컨트롤에 표시되는 텍스트를 지정합니다. 이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다. |
readonly |
hidden , range , color , checkbox , radio 그리고 버튼과 관련된 값을 제외한 모든 값 |
컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다. |
required |
hidden , range , color 그리고 버튼과 관련된 값을 제외한 모든 값 |
양식을 제출하기 전에 사용자가 컨트롤의 입력 값을 지정해야 함을 나타냅니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다. |
size |
text , search , url , tel , email , password |
컨트롤의 너비를 지정합니다.
이는 0 보다 크고 음수가 아닌 유효한 정수여야 합니다. 이 값은 사용자가 볼 수 있도록 허용하는 문자수를 정의합니다. |
src |
image |
이미지의 경로를 지정합니다. |
step |
date , time , datetime-local , number , range |
컨트롤 숫자 값의 증감 간격을 지정합니다. |
value |
모든 값 | 컨트롤의 초깃값을 지정합니다.
단, type="button" 이나 type="reset" , type="submit" 에서는 버튼의 레이블에 사용될 문자열을 지정합니다. |
기본 예제
위 표에서 설명한 속성들의 몇 가지 간단한 기본 예제입니다.
checked
체크박스가 기본적으로 선택되어 있는지 여부를 나타내는 속성입니다. 페이지가 처음 로드될 때 체크박스가 선택된 상태로 시작하려면 checked
속성을 사용합니다. 하지만 페이지가 로드된 후 사용자가 체크박스를 선택하거나 선택 해제해도 checked
속성은 변하지 않습니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.
disabled
컨트롤이 비활성된 상태임을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.
placeholder
값이 설정되지 않은 경우 컨트롤에 표시되는 텍스트를 지정합니다. 이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다.
value
, min
, max
, step
value
속성은 컨트롤의 초깃값을 지정합니다.
min
속성은 컨트롤의 최솟값을 지정합니다.
max
속성은 컨트롤의 최댓값을 지정합니다.
step
속성은 컨트롤 숫자 값의 증감 간격을 지정합니다.
브라우저 호환성
마지막 업데이트 정보: 2024-06-18
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
accept
|
1 | 12 | 1 | 1 |
alt
|
1 | 12 | 1 | 1 |
autocapitalize
|
4 | 79 | 111 | 지원하지 않음 |
autocomplete
|
14 | 79 | 4 | 6 |
checked
|
1 | 12 | 1 | 1 |
disabled
|
1 | 12 | 1 | 1 |
max
|
4 | 12 | 16 | 5 |
maxlength
|
1 | 12 | 1 | 1 |
min
|
4 | 12 | 16 | 5 |
minlength
|
40 | 17 | 51 | 10.1 |
name
|
1 | 12 | 1 | 1 |
pattern
|
4 | 12 | 4 | 5 |
placeholder
|
3 | 12 | 4 | 4 |
readonly
|
1 | 12 | 1 | 1 |
required
|
4 | 12 | 4 | 5 |
size
|
1 | 12 | 1 | 1 |
src
|
1 | 12 | 1 | 1 |
step
|
5 | 12 | 16 | 5 |
접근성 고려사항
컨트롤 요소란
사용자가 웹 페이지와 상호작용할 수 있도록 하는 요소들을 의미합니다.
<input>
, <textarea>
, <button>
, <select>
등 사용자가 데이터를 입력하고, 선택하고, 제출하는 등의 작업을 할 수 있는 요소들이 해당됩니다.
<input>
, <textarea>
, <select>
태그와 같은 컨트롤 요소를 사용할 때에는 <label>
을 함께 사용해야 합니다.
이것은 접근성의 최소 요구 사항입니다.
단, <input>
태그의 버튼과 관련된 type
값(button
, image
, reset
, submit
)은 <label>
을 함께 사용하지 않습니다. 이것은 버튼의 텍스트가 <label>
을 대신하기 때문입니다.
그리고, 사용자가 화면에서 보지 못하게 숨겨진 입력 필드인 type="hidden"
도 <label>
을 함께 사용하지 않습니다.
<label>
태그를 컨트롤 요소에 사용하면 좋은 이점
컨트롤 요소에 <label>
태그를 사용하지 않는다고 해서 틀린 문법은 아닙니다. 하지만, <label>
태그를 컨트롤 요소에 연결하는 것은 웹 접근성과 사용자 경험을 향상시키는 데 중요한 역할을 합니다.
- 웹 접근성을 위한 스크린 리더 지원:
<label>
태그의for
속성과 연결된 컨트롤 요소의id
를 매칭하여 매칭된 컨트롤 요소의 이름표라는 것을 명확히 파악하게 해줍니다. - 사용자 편의성 증대:
<label>
을 클릭하면 매칭된 컨트롤 요소가 포커스되거나 접근 가능하게 해줍니다.
<label>
과 컨트롤 요소의 연결
<label>
태그와 연결하여 매칭할 컨트롤 요소의 id
값을 <label>
태그의 for
속성의 값으로 지정하면 이 <label>
태그와 컨트롤 요소는 연결되어 매칭하게 됩니다.
이렇게 연결하면 <label>
의 텍스트("저를 클릭하세요.")를 클릭하면 연결된 체크박스가 포커스됩니다.
이 방식 외에도, <label>
태그와 연결하여 매칭할 컨트롤 요소의 id
값을 <label>
태그의 for
속성의 값으로 지정하지 않고 다음과 같이 <label>
태그와 매칭할 컨트롤 요소를 연결할 수도 있습니다.
위의 두 방식 모두 명세서에서는 유효한 예제로 보여주고 있습니다.
명세서
명세서 사양 | |
---|---|
<input>
|
HTML Standard #the-input-element |
같이 보기
- HTML <input> type 속성 - 다양한 컨트롤 유형을 제공
- HTML <label> 태그 - 올바른 이해와 사용 방법
- HTML <textarea> 태그 - 올바른 이해와 사용 방법
- HTML <select> 태그 - 올바른 이해와 사용 방법
- HTML <form> 태그 - 올바른 이해와 사용 방법
- HTML <fieldset> 태그 - 올바른 이해와 사용 방법
- CSS placeholder 텍스트에 스타일 적용하기
- CSS :checked 가상 클래스 선택자 사용 방법
- CSS appearance 속성 - 브라우저에서 제공하는 기본 UI 요소 모양을 제어