입력 방식이 지정된 데이터 필드를 나타내며 일반적으로 사용자가 편집할 수 있는 양식 컨트롤을 나타낸다.
<input> 요소는 양식 지원(form associated) 요소이며 type 애트리뷰트에 따라 다음과 같이 세분화 된다.
hidden이 아닌 경우 : 레이블 가능(labelable), 나열(listed)된 콘텐츠, 제출 가능(submittable), 재설정 가능(resettable), 인터랙티브 콘텐츠(interactive content), 명확한 콘텐츠(palpable content), 자동 대문자 상속(autocapitalize-inheriting)으로 세분류 된다.hidden인 경우 : 나열(listed)된 콘텐츠, 제출 가능(submittable), 재설정 가능(resettable), 자동 대문자 상속(autocapitalize-inheriting)으로 세분류 된다구문 콘텐츠(phrasing-content)가 예상되는 위치
[Exposed=Window]
interface HTMLInputElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString accept;
[CEReactions] attribute DOMString alt;
[CEReactions] attribute DOMString autocomplete;
[CEReactions] attribute boolean defaultChecked;
attribute boolean checked;
[CEReactions] attribute DOMString dirName;
[CEReactions] attribute boolean disabled;
readonly attribute HTMLFormElement? form;
attribute FileList? files;
[CEReactions] attribute USVString formAction;
[CEReactions] attribute DOMString formEnctype;
[CEReactions] attribute DOMString formMethod;
[CEReactions] attribute boolean formNoValidate;
[CEReactions] attribute DOMString formTarget;
[CEReactions] attribute unsigned long height;
attribute boolean indeterminate;
readonly attribute HTMLDataListElement? list;
[CEReactions] attribute DOMString max;
[CEReactions] attribute long maxLength;
[CEReactions] attribute DOMString min;
[CEReactions] attribute long minLength;
[CEReactions] attribute boolean multiple;
[CEReactions] attribute DOMString name;
[CEReactions] attribute DOMString pattern;
[CEReactions] attribute DOMString placeholder;
[CEReactions] attribute boolean readOnly;
[CEReactions] attribute boolean required;
[CEReactions] attribute unsigned long size;
[CEReactions] attribute USVString src;
[CEReactions] attribute DOMString step;
[CEReactions] attribute DOMString type;
[CEReactions] attribute DOMString defaultValue;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString value;
attribute object? valueAsDate;
attribute unrestricted double valueAsNumber;
[CEReactions] attribute unsigned long width;
undefined stepUp(optional long n = 1);
undefined stepDown(optional long n = 1);
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
boolean reportValidity();
undefined setCustomValidity(DOMString error);
readonly attribute NodeList? labels;
undefined select();
attribute unsigned long? selectionStart;
attribute unsigned long? selectionEnd;
attribute DOMString? selectionDirection;
undefined setRangeText(DOMString replacement);
undefined setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
undefined setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
undefined showPicker();
// also has obsolete members
};
HTMLInputElement includes PopoverInvokerElement;<input>
허용되는 파일 유형에 대한 힌트를 유저 에이전트에게 제공하기 위해 지정될 수 있다. type 애트리뷰트가 file인 경우에 사용이 가능하다.
아래에 예시된 유형 이외의 유효한 MIME 유형을 지정하거나 세부적인 파일 확장자를 지정할 수도 있다. 파일 확장자의 경우는 첫 문자가 닷(.)이어야 한다.
콤마(,)로 구분된 토큰 목록을 나타낸다.
공통으로 사용하는 애트리뷰트의 경우 구문에 사용된 요소가 다를 수 있다.
accept="[audio/* | image/* | video/* | <MIMEType> | <FILE_EXTENSION>]#"
오디오 파일이 허용됨을 나타낸다.
이미지 파일이 허용됨을 나타낸다.
비디오 파일이 허용됨을 나타낸다.
지정된 요소의 대체 텍스트를 나타낸다.
type 애트리뷰트가 image인 경우에 이미지를 가져올 수 없을 때 대체 텍스트를 나타낸다.
양식(form) 내에 있는 입력 요소들의 자동 채우기 설정을 지정한다. 자동 채우기는 다음과 같이 두 가지 방식이 가능하다.
on 키워드는 활성되고 off 키워드는 비활성된다. 생략될 수 있으며 생략되거나 유효하지 않은 경우에 기본값은 on이다. type 애트리뷰트가 hidden이 아닌 경우 사용된다.on과 off 키워드는 사용할 수 없다. type 애트리뷰트가 hidden인 경우 사용된다.지금까지의 내용은 HTML Standard 표준 사양에 나와있는 내용이지만 자동 완성 앵커 맨틀(autofill anchor mentle)에 대해 다음과 같은 이슈가 있다.
type이 hidden인 요소에게 자동 완성 기능 적용이 올바른가? [open issue]현재로서는 이 이슈에 대해 앞으로 시간을 두고 확인이 필요해 보이며 일반적인 자동 완성 기능인 자동 완성 기대 맨틀(autofill expectation mantle)의 구현을 위한 애트리뷰트라고 보는 편이 나을 것 같다.
<input type="text" autocomplete="off">type 애트리뷰트가 checkbox이거나 radio일 때 유저 에이전트는 해당 요소가 선택된 상태로 처리한다.
불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.
<input disabled>, <input disabled="disabled">, <input disabled="">
<input type="checkbox" checked>양식(form)을 제출시 입력된 텍스트의 쓰기 방향(dir 애트리뷰트)을 참조한다. 유저 에이전트는 이 값을 사용하여 사용자가 입력한 값을 전송시 쓰기 방향 값도 함께 전송한다. 지정되지 않은 경우 유저 에이전트는 상위 요소의 dir을 사용한다. 그래도 명시된 방향을 알 수 없다면 유저 에이전트는 문서의 기본 방향을 사용한다.
이 애트리뷰트가 명시되면 양식 요소의 값은 빈 문자열이 아니어야 한다.
dirname은 "<attribute-name-value>-dir"로 설정한다.
<form>
<input type="text" name="username" dirname="username-dir">
</form>dir 애트리뷰트 값은 명시되지 않았다는 전제로 기본 값인 ltr로 전송된다.)
username=tom&username-dir=ltr요소를 비활성화한다.
불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.
<input disabled>, <input disabled="disabled">, <input disabled="">
<form> 요소와 연결할 때 연결하고자 하는 <form> 요소의 id를 지정한다.
문서에서 요소를 식별하는 유일무이한 문자열 값을 나타낸다.
양식(form)이 제출될 때 서버쪽 처리 페이지 URL을 해당 <form> 요소가 아닌 지정 가능한 요소에서 지정한다. 명시되지 않은 경우 해당 <form> 요소에 명시된 action 애트리뷰트의 서버쪽 처리 페이지 URL로 전송된다.
문자열에서 선행 및 후행 ASCII 공백을 제거한 후 유효한 비공백 URL인 경우 문자열은 공백으로 둘러싸일 수 있는 유효한 비공백 URL을 나타낸다.
양식(form)이 제출될 때 값의 인코딩 유형을 해당 <form> 요소가 아닌 지정 가능한 입력 요소에서 지정한다. 명시되지 않은 경우 해당 <form> 요소의 enctype 애트리뷰트에서 지정된 인코딩 유형으로 전송된다.
양식 전송의 기본 유형이다. 텍스트를 인코딩(encoding)하여 전송한다. 공백은 +, 알파벳과 숫자가 아닌 특수 문자들은 모두 퍼센트 인코딩(percent encoding)을 한다.
<form>
<input type="text" name="name" value="Eric Clapton">
<input type="text" name="formula" value="a + b == 13%!">
</form>
name=Eric%20Clapton&formula=a%20%2B%20b%20%3D%3D%2013%25%21데이터 전송시 텍스트를 포함하여 바이너리(binary) 데이터를 함께 전송한다. 문자열은 인코딩(encoding)하지 않고 바이너리(binary) 데이터와 함께 헤더(header)에 포함하여 전송한다.
GET 방식으로 전송할 수 없으며 POST 방식으로만 가능하다.
텍스트만 전송이 가능하며 공백만 +로 인코딩한다.
양식(form)이 제출될 때 전송 방식을 해당 <form> 요소가 아닌 지정 가능한 입력 요소에서 지정한다. 명시되지 않은 경우 해당 <form> 요소의 method 애트리뷰트에서 지정된 인코딩 유형으로 전송된다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
양식(form)이 있는 <dialog> 요소에서 지정할 수 있으며 사용자가 누른 전송 버튼에 따라 처리를 분기하고자 할 때 사용할 수 있다.
사용자가 누른 전송 버튼의 값은 HTMLDialogElement 인터페이스의 returnValue 프로퍼티로 접근이 가능하다.
양식(form)의 action URL 뒤에 붙여 쿼리 스트링(query string) 형식으로 전송한다. 기본 URL을 포함하여 최대 255개의 문자를 전송할 수 있다.
데이터가 노출되어 전송이 되기 때문에 보안에 취약하니 보안이 필요한 데이터는 절대 피한다. 캐시(cache)가 되므로 재전송이 가능하며 똑같은 결과를 가져온다. URL의 일부이기 때문에 특정 데이터에 따라 차별되는 웹페이지를 호출할 수 있다.
전송 프로토콜(protocol)의 헤더(header)에 정해진 규약에 따라 데이터가 포함되어 전송된다. 외부에 직접적으로 노출되지 않기 때문에 GET 방식보다는 보안이 덜 취약하다. 바이너리(binary) 데이터를 전송할 수 있는 환경을 제공하기 때문에 파일을 전송하고자 할 때는 enctype을 multipart/form-data로 설정하면 된다.
GET과 달리 캐시(cache)가 안되며 재전송을 암묵적(보통 유저 에이전트의 확인 절차가 있으나 절대 금지가 아님)으로 금지하지만 정상적인 재전송이 이루어지는 경우 중복처리가 될 수 있으므로 재전송을 방지하는 인터페이스가 필요하다.
명시된 요소의 입력된 값이 제출될 때 입력된 데이터의 유효성 검사를 하지 않는다. 명시되지 않은 경우 상위 <form> 요소의 설정을 따라간다.
불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.
<input disabled>, <input disabled="disabled">, <input disabled="">
양식(form)이 제출될 때 action 또는 formaction 애트리뷰트에 설정된 서버쪽 처리 페이지를 여는 방식을 해당 <form> 요소가 아닌 지정 가능한 입력 요소에서 지정한다. 명시되지 않은 경우 해당 <form> 요소의 target 애트리뷰트에서 지정된 방식으로 연다.
새로 생성한 창(또는 탭)에 보여준다.
현재 페이지가 프레임 안에 존재하는 경우 부모 프레임(창)에서 보여준다.
현재 창에서 보여준다.
현재 문서가 프레임 안에 존재하는 경우를 포함하여 다수의 프레임이 연관되어 있다면 최상위 프레임(창)에서 보여준다.
요소의 시각적 세로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.
입력 요소의 입력 방식을 미리 정의된 목록(<datalist>)으로 지정한다.
문서에서 요소를 식별하는 유일무이한 문자열 값을 나타낸다.
요소에게 입력이 허용된 범위에서 최대값을 나타낸다. 입력된 값이 최대값을 벗어나는 경우 제약 조건 유효성 검사는 양식(form) 제출을 차단한다.
값이 최대값을 초과하면 스크립트에서는 validationState.rangeOverflow가 true가 되고 CSS에서는 :out-of-range 및 :invalid 가상 클래스와 일치한다.
| 유형 | 형식 | 값 | 예 |
|---|---|---|---|
date | yyyy-mm-dd | 1(day) |
|
datetime-local | yyyy-mm-ddThh:mm | 1(second) |
|
month | yyyy-mm | 1(month) |
|
number | [0-9] | 1 |
|
range | [0-9] | 1 |
|
time | hh:mm | 60(seconds) |
|
week | yyyy-W## | 1(week) |
|
입력된 값을 대상으로 내부적으로 필요에 따라 형 변환 알고리즘이 작동한다. 값의 형태에 따라 범위에 대한 연산이 필요하거나 증감되는 연산이 필요한 경우에 다음과 같이 알고리즘이 동작한다.
string에서 number로 number에서 string으로 변환string에서 Date 오브젝트로 Date 오브젝트에서 string으로 변환이러한 연산으로 제약 기준을 지정하는 애트리뷰트는 max, min, step이 있다.
최대 입력 길이를 나타낸다.
음수가 아닌 유효한 정수를 나타낸다.
요소에게 입력이 허용된 범위에서 최소값을 나타낸다. 입력된 값이 최소값보다 작은 경우 제약 조건 유효성 검사는 양식(form) 제출을 차단한다.
값이 최소값을 미만이면 유효하지 않으므로 CSS에서는 :out-of-range 및 :invalid 가상 클래스와 일치한다.
| 유형 | 형식 | 값 | 예 |
|---|---|---|---|
date | yyyy-mm-dd | 1(day) |
|
datetime-local | yyyy-mm-ddThh:mm | 1(second) |
|
month | yyyy-mm | 1(month) |
|
number | [0-9] | 1 |
|
range | [0-9] | 1 |
|
time | hh:mm | 60(seconds) |
|
week | yyyy-W## | 1(week) |
|
입력된 값을 대상으로 내부적으로 필요에 따라 형 변환 알고리즘이 작동한다. 값의 형태에 따라 범위에 대한 연산이 필요하거나 증감되는 연산이 필요한 경우에 다음과 같이 알고리즘이 동작한다.
string에서 number로 number에서 string으로 변환string에서 Date 오브젝트로 Date 오브젝트에서 string으로 변환이러한 연산으로 제약 기준을 지정하는 애트리뷰트는 max, min, step이 있다.
최소 입력 길이를 나타낸다.
음수가 아닌 유효한 정수를 나타낸다.
두 개 이상의 값을 지정할 수 있는 여부를 나타낸다.
불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.
<input disabled>, <input disabled="disabled">, <input disabled="">
요소의 이름을 지정한다. 유저 에이전트(user agent)에서 식별값으로 사용되며 입력 요소에 지정된 name의 값은 서버에 전송시 데이터를 식별하는 이름으로 사용된다. 식별값으로 사용되지만 유일무이한 값으로 강제하지는 않는다. 그러한 이유는 <input type="checkbox"> 요소를 통해 이해할 수 있다. 체크박스 입력 방식은 준비된 동일한 이름의 데이터에서 다른 값을 선택하는 식이다. 따라서 값은 달라도 데이터의 이름은 동일할 수 있다.
<form> 요소에서 name 애트리뷰트가 HTML5에서 폐기되었다. 대신에 id 애트리뷰트를 식별값으로 사용한다.비워있지 않는 문자열을 나타낸다.
입력된 값을 검사할 정규식을 지정한다.
자바스크립트의 RegExp 객체를 나타낸다.
입력 요소에 입력할 값에 대한 힌트를 사용자에게 제시한다.
U+000A LF(줄바꿈) 또는 U+000D CARRIAGE RETURN(CR) 문자를 포함하지 않은 문자열을 나타낸다.
동일한 트리에서 popover 애트리뷰트가 있는 토글(toggle), 표시, 숨길 팝오버 요소의 id를 지정한다.
문서에서 요소를 식별하는 유일무이한 문자열 값을 나타낸다.
대상 팝오버(popover) 요소의 토글(toggle), 표시(show) 또는 숨김(hide) 여부를 나타낸다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
대상 팝오버(popover) 요소를 숨긴다.
대상 팝오버(popover) 요소를 표시한다.
대상 팝오버(popover) 요소를 표시하거나 숨긴다.
입력 요소에 대한 편집 가능 여부를 나타낸다. 지정이 되면 편집이 불가능하다.
불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.
<input disabled>, <input disabled="disabled">, <input disabled="">
필수로 입력해야 할 입력 요소로 지정할지 여부를 나타낸다. 지정이 되면 필수 입력 요소가 된다.
불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.
<input disabled>, <input disabled="disabled">, <input disabled="">
문자열을 입력하는 동안 가려지지 않고 볼 수 있는 문자 수를 나타낸다. 요소의 입력 방향 크기에 관여하지만 엄밀히 디자인적인 애트리뷰트는 아니다. 0보다 큰 값이며 기본 값은 20이다.
음수가 아닌 유효한 정수를 나타낸다.
type 애트리뷰트의 값이 image인 경우에 버튼으로 표시할 이미지의 리소스를 지정한다.
문자열에서 선행 및 후행 ASCII 공백을 제거한 후 유효한 비공백 URL인 경우 문자열은 공백으로 둘러싸일 수 있는 유효한 비공백 URL을 나타낸다.
허용되는 값을 제한하여 값의 세분성을 지정한다. 직접 입력이외의 방식(스피너 버튼, 키보드 방향키, 마우스 휠 등)의 증감 신호를 통해서 값이 일정 크기로 변경되는 효과를 얻는다.
| 유형 | 형식 | 값 | 예 |
|---|---|---|---|
date | yyyy-mm-dd | 1(day) |
|
datetime-local | yyyy-mm-ddThh:mm | 1(second) |
|
month | yyyy-mm | 1(month) |
|
number | [0-9] | 1 |
|
range | [0-9] | 1 |
|
time | hh:mm | 60(seconds) |
|
week | yyyy-W## | 1(week) |
|
<input>요소에서 입력 유형을 지정한다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
단일 값을 하나 이상 선택하거나 해제할 수 있는 체크박스 입력 요소를 생성한다.
색상을 지정할 수 있는 입력 요소를 표시한다.
날짜(연,월,일)를 지정할 수 있는 입력 요소를 생성한다.
날짜와 시간을 지정할 수 있는 입력 요소를 생성한다.
이메일 주소를 입력할 수 있는 입력 요소를 생성한다. 양식 제출 단계에서 유저 에이전트가 유효성 검증을 한다.
업로드할 바이너리 파일을 지정할 수 있는 입력 요소를 생성한다.
화면에 표시되지 않는 서버에 전송 가능한 입력 요소를 생성한다.
연도와 월을 지정할 수 있는 입력 요소를 생성한다.
숫자를 입력하기 위한 입력 요소를 생성한다.
보안상의 이유로 입력값이 가려지는 입력 요소를 생성한다.
여러 개의 제시된 데이터 중에서 하나를 선택할 수 있는 입력 요소를 생성한다.
슬라이더를 이용해서 일정 구간의 숫자를 입력할 수 있는 입력 요소를 생성한다.
검색 문자열을 입력할 수 있는 입력 요소를 생성한다. 줄바꿈 문자는 입력값에서 자동으로 제거된다.
전화번호를 입력하는 입력 요소를 생성한다. url, email 타입과 달리 유저 에이전트가 양식의 제출 단계에서 유효성 검증을 하지 않는다. 이는 전화번호의 형식이 지역마다 상이할 수 있기 때문에 자유 형식을 취하고 있다. 만약에 지역적으로 유효성 검증을 적용해야 한다면 DOM API에서 setCustomValidity() 메소드를 사용한다.
한줄 텍스트를 입력할 수 있는 필드를 나타낸다. 기본 형식이다.
시간대가 없는 시간 값을 입력하는 입력 요소를 생성한다.
URL을 입력하는 입력 요소를 생성한다. 양식 제출 단계에서 유저 에이전트가 유효성 검증을 한다.
시간대가 없는 연도와 주로 구성된 값을 입력할 수 있는 입력 요소를 생성한다.
입력 요소의 기본 값을 지정한다.
요소의 시각적 가로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.
요소에 대한 필요한 정보를 나타내는 텍스트이며 마우스 포인터를 올리면 말풍선으로 내용을 출력한다.
공통으로 사용하는 애트리뷰트의 경우 구문에 사용된 요소가 다를 수 있다.
pattern 애트리뷰트가 설정된 경우 패턴을 설명하는 의미로 사용된다.
일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.
일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.
