type 속성 (input)

정의

input 요소의 type 속성은 데이터 타입과 연관된 컨트롤들을 조절합니다.

속성 값

키워드와 속성 상태

키워드와 속성 상태입니다. 아래 표는 type 속성 별 키워드와 속성의 상태를 열거합니다. 데이터 타입은 type 속성값의 형태를 열거합니다. 컨트롤 타입은 데이터 타입에 대응하는 type 속성의 형태를 나타내며, 키워드가 정의되지 않았다면 기본 Text state입니다.

키워드 상태 데이터 타입 컨트롤 타입
hidden Hidden 임의의 문자열 n/a
text Text 줄바꿈 없는 텍스트 Text field
search Search 줄바꿈 없는 텍스트 Search field
tel Telephone 줄바꿈 없는 텍스트 A text field
url URL IRI 절대경로 A text field
email E-mail 이메일주소, 혹은 그것의 목록 A text field
password Password 줄바꿈없는 텍스트(민감한 정보) Text field that obscures data entry (입력된 데이터를 감추는 텍스트 필드)
datetime Date and Time 타임존이 국제표준시(UTC)로 설정된 날짜와 시간(년, 월, 일, 시, 분, 초, 분할된 초) A date and time control
date Date 타임존 없는 날짜(년, 월, 일) A date control
month Month 년월을 구성하는 타임존 없는 날짜 A month control
week Week 주 를 나타내는 타임존 없는 주-년 및 주 번호 A week control
time Time 타임존 없는 시간(시, 분, 초, 분할된 초) A time control
datetime-local Local Date and Time 타임존 없는 날짜와 시간(년, 월, 일, 시, 분, 초, 분할된 초) A date and time control
number Number 숫자 A text field or spinner control
range Range 숫자이면서, 정확한 값이 큰 의미가 없다는 의미를 내포함 A slider control or similar
color Color 8비트 RGB로 구성된 sRGB 색상 A color well
checkbox Checkbox 미리 정의된 목록에서 가져온 0개 이상의 값 A checkbox
radio Radio Button 열거된 값 A radio button
file File Upload MIME 타입과, (선택적으로)파일명을 갖는 파일들 A label and a button
submit Submit Button 열거된 값. 폼 제출을 시작하므로, 이것을 선택한 후에는 다른 값을 선택할 수 없음을 암시합니다. A button
image Image Button 특정 이미지의 크기와 관련된 좌표. 폼 제출을 시작하므로, 이것을 선택한 후에는 다른 값을 선택할 수 없음을 암시합니다. Either a clickable image, or a button
reset Reset Button n/a A button
button Button n/a A button

Hidden state

  • 사용자에 의해 시험되거나 조작되지 않게끔 의도된 값을 나타냅니다.
  • name 속성이 존재하고, 그 값이 charset 문자열과 대소문자 구분한 아스키 값과 일치한다면, 요소의 value 속성은 반드시 생략되어야 합니다.

Text state and Search state

  • 값을 편집할 수 있는 한줄의 평범한 텍스트입니다.
  • value 속성을 사용했다면 값은 줄바꿈 문자를 포함할 수 없습니다.

Text state와 Search state의 차이는 일차적으로는 스타일 문제입니다: 검색 필드가 일반적인 텍스트 필드들과 구분되는 플랫폼이라면 Search state는 일반적인 텍스트 필드와는 외관상의 차이를 가지게 될 것입니다.

Telephone state

  • 편집 가능한 전화번호를 포함하는 요소입니다.
  • value 속성을 사용했다면 그 값은 줄바꿈 문자를 포함할 수 없습니다.

URL stateE-mail state와는 다르게 Telephone state는 특정한 문법을 강제하지 않습니다. 이것은 의도된 것입니다 - 사실, 전화번호에는 수없이 많은 형태가 있기에, 이 필드는 정형화 될 수 없습니다. 필드의 값을 정형화할 필요가 있다면, pattern 속성을 사용하거나 setCustomValidity() 메소드를 사용해서 클라이언트 사이드 유효성 검사 메커니즘을 사용하지 않도록 하는 것이 좋습니다.

URL state

E-mail state

  • 이 상태의 동작은 multiple 속성의 여부에 따라 다릅니다.
  • multiple 속성이 없을 때, 요소는 하나의 이메일 주소를 편집할 수 있는 컨트롤을 나타냅니다. 또한 value 속성을 사용했다면 값은 반드시 하나의 유효한 이메일 주소여야 합니다.
  • multiple 속성이 있다면, 요소 값으로 주어진 이메일 주소들을 추가하고, 제거하고, 편집할 수 있는 컨트롤을 표시합니다. 또한 value 속성을 사용했다면 값은 반드시 하나의 유효한 이메일 주소여야 합니다.

유효한 이메일 주소란 ABNF 표현식, 1*( atext / ”.” ) ”@” ldh-str 1*( ”.” ldh-str )에 해당하는 것입니다. 여기서 atext는 RFC5322 3.2.3 절의 내용을 말하며, ldh-str이란 RFC1034 3.5절에 해당하는 것입니다. 유효한 이메일 주소 목록은 콤마로 구분된 유효한 이메일 주소들의 목록입니다.

이러한 요구 사항은 RFC5322에 대한 의도된 위반입니다. RFC5322는 이메일 주소에 대한 문법을 정의하는데, 이것은 @ 앞의 문자열에 대해 지나치게 완고하고 @ 뒤의 문자열에 대해서는 지나치게 모호하며, 여기에서 실제적인 의미를 가지기에는 너무 느슨합니다. 느슨함이란 주석, 공백문자, 대부분의 사용자에게 친숙하지 않은 따옴표 사용법의 허용 등을 말합니다.

Password state

  • 한줄의 평범한 텍스트를 나타냅니다. 사용자 에이전트는 다른 사람이 이 값을 볼 수 없도록 숨겨야 합니다.
  • 값은 줄바꿈 문자를 포함할 수 없습니다.

Date and Time state

Date state

Month state

Week state

Time state

Local Date and Time state

Number state

Range state

Color state

Checkbox state

  • checked 상태를 나타내는 두가지 상태 컨트롤을 나타냅니다. checked 상태가 참(ture)이면 긍정적 선택을 거짓(false)이라면 부정적 선택을 나타냅니다. IDL 속성 중 indeterminate가 참(ture)이면 컨트롤의 선택은 마치 제 3의 상태, 모호한 상태인 것 처럼 감추어져야 합니다.

컨트롤 자체는 세가지 상태 컨트롤이 아닙니다. 설령 IDL 속성 중 indeterminate가 참(ture)로 설정되어 있다 해도 그렇습니다. 해당 IDL 속성은 단지 외관상으로만 제 3의 상태를 부여할 뿐입니다.

Radio Button state

라디오 버튼 그룹에 포함된 라디오 버튼들 중 어느 하나도 문서에 삽입되는 시점에서 체크되어 있지 않았다면, 그것들은 그중 하나가 체크(사용자에 의해서든, 스크립트에 의해서든)될 때 까지 인터페이스에서 체크되지 않은 상태입니다.

File Upload state

  • 선택된 파일들의 목록을 나타냅니다. 각각의 파일들은 파일 이름, 파일 타입, 그리고 파일 몸체(파일 내용)으로 구성됩니다.
  • accept 속성을 사용하여, 서버에서 수용하는 파일의 타입에 대해 사용자 에이전트가 힌트를 주게 할 수 있습니다. 명시 하였다면 이 속성은 콤마로 구분된 예약어의 목록입니다. 각각의 예약어들은 다음 중 하나와 매치되어야 합니다. (대소문자는 구분하지 않습니다.)
  • 예약어들은 중복될 수 없습니다. 이 중복을 체크할때는 대소문자를 구분하지 않습니다. (audio/x-audio 와 Audio/x-audio 는 중복입니다)

Submit Button state

formnovalidate 속성을 사용해서 제출 버튼이 유효성 검사를 활성화시키지 않도록 할 수 있습니다.

Image Button state

이 상태는 많은 면에서 img 요소의 그것과 흡사합니다. 해당 섹션을 읽길 권합니다. 같은 요구사항들이 좀 더 자세하게 기록되어 있습니다.

Reset Button state

  • input 요소가 활성화 되었을 때 리셋하는 버튼을 나타냅니다. 요소는 버튼입니다.

Button state

  • 아무런 기본 행동을 갖지 않는 버튼을 나타냅니다. 버튼의 레이블은 value 속성으로 제공되어야 합니다. 요소는 버튼입니다.

콘트롤은 사용자에게 보이는 형태는 제출시에 사용되는 형태와는 무관합니다. 브라우저 제작자들은 사용자가 선호하는 지역의 관습에 맞게 날짜와 시간을 표현하는 인터페이스를 사용할 것을 권장합니다.

키워드별 내용속성

Hidden Text, Search URL, Telephone E-maill Password Date and Time,date|Date, Month, Week, Time Local Date and Time, Number Range Color Checkbox, Radio Button File Upload Submit Button Image Button Reset Button, Button
accept - - - - - - - - - - Yes - - -
alt - - - - - - - - - - - - Yes -
autocomplete - Yes Yes Yes Yes Yes Yes Yes - - - - - -
checked - - - - - - - - - Yes - - - -
dirname - Yes - - - - - - - - - - - -
formaction - - - - - - - - - - - Yes Yes -
formenctype - - - - - - - - - - - Yes Yes -
formmethod - - - - - - - - - - - Yes Yes -
formnovalidate - - - - - - - - - - - Yes Yes -
formtarget - - - - - - - - - - - Yes Yes -
height - - - - - - - - - - - - Yes -
list - Yes Yes Yes - Yes Yes Yes Yes - - - - -
max - - - - - Yes Yes Yes - - - - - -
maxlength - Yes Yes Yes Yes - - - - - - - - -
min - - - - - Yes Yes Yes - - - - - -
multiple - - - Yes - - - - - - Yes - - -
pattern - Yes Yes Yes Yes - - - - - - - - -
placeholder - Yes Yes Yes Yes - - - - - - - - -
readonly - Yes Yes Yes Yes Yes Yes - - - - - - -
required - Yes Yes Yes Yes Yes Yes - - Yes Yes - - -
size - Yes Yes Yes Yes - - - - - - - - -
src - - - - - - - - - - - - Yes -
step - - - - - Yes Yes Yes - - - - - -
width - - - - - - - - - - - - Yes -

키워드별 IDL 속성과 메서드

Hidden Text, Search URL, Telephone E-maill Password Date and Time,date|Date, Month, Week, Time Local Date and Time, Number Range Color Checkbox, Radio Button File Upload Submit Button Image Button Reset Button, Button
checked - - - - - - - - - Yes - - - -
files - - - - - - - - - - Yes - - -
value default value value value value value value value value default/on filename default default default
valueAsDate - - - - - Yes - - - - - - - -
valueAsNumber - - - - - Yes Yes Yes - - - - - -
list - Yes Yes Yes - Yes Yes Yes Yes - - - - -
selectedOption - Yes Yes Yes† - Yes Yes Yes Yes - - - - -
select() - Yes Yes - Yes - - - - - - - - -
selectionStart - Yes Yes - Yes - - - - - - - - -
selectionEnd - Yes Yes - Yes - - - - - - - - -
setSelectionRange() - Yes Yes - Yes - - - - - - - - -
stepDown() - - - - - Yes Yes Yes - - - - - -
stepUp() - - - - - Yes Yes Yes - - - - - -

키워드별 이벤트

Hidden Text, Search URL, Telephone E-maill Password Date and Time,date|Date, Month, Week, Time Local Date and Time, Number Range Color Checkbox, Radio Button File Upload Submit Button Image Button Reset Button, Button
input event - Yes Yes Yes Yes Yes Yes Yes Yes - - - - -
change event - Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes - - -

† 기호는 해당 기능이 multiple 속성이 사용된 경우에만 적용됨을 나타냅니다.

참조

기준 명세를 바탕으로 명세 번역과 레퍼런스 제작이 이루어졌습니다. 최근 내용은 최신 명세를 확인해 주세요. * 최신 명세

 
html5/attribute/type_input.txt · 마지막 수정: 2013/11/19 13:35 (외부 편집기)
이 레퍼런스는 클리어보스가 제작/운영하고 있으며, 다음의 라이센스를 따릅니다 :CC 저작자표시-비영리-동일조건변경허락 2.0
Recent changes RSS feed World Wide Web Consortium Driven by DokuWiki