차례

4.10.7 The input element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
구문 컨텐츠Phrasing content

요소의 type 속성이 hidden 상태가 아니라면: 대화형 컨텐츠

If the type attribute is not in the Hidden state: Interactive content.

요소의 type 속성이 hidden 상태가 아니라면: 목록화된, 레이블을 붙일 수 있는, 제출할 수 있는, 리셋할 수 있는, 폼과 연관된 요소.

If the type attribute is not in the Hidden state: Listed, labelable, submittable, and resettable form-associated element.

요소의 type 속성이 hidden 상태라면: 목록화된, 제출할 수 있는, 리셋할 수 있는, 폼과 연관된 요소.

If the type attribute is in the Hidden state: Listed, submittable, and resettable form-associated element.

이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 사용될 수 있는 곳

Where phrasing content is expected.

이 요소가 포함할 수 있는 것:Content model
이 요소는 비어 있어야 합니다.Empty
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
accept
alt
autocomplete
autofocus
checked
dirname
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height
list
max
maxlength
min
multiple
name
pattern
placeholder
readonly
required
size
src
step
type
value
width
DOM interface:
interface HTMLInputElement : HTMLElement {
           attribute DOMString accept;
           attribute DOMString alt;
           attribute DOMString autocomplete;
           attribute boolean autofocus;
           attribute boolean defaultChecked;
           attribute boolean checked;
           attribute DOMString dirName;
           attribute boolean disabled;
  readonly attribute HTMLFormElement form;
  readonly attribute FileList files;
           attribute DOMString formAction;
           attribute DOMString formEnctype;
           attribute DOMString formMethod;
           attribute boolean formNoValidate;
           attribute DOMString formTarget;
           attribute DOMString height;
           attribute boolean indeterminate;
  readonly attribute HTMLElement list;
           attribute DOMString max;
           attribute long maxLength;
           attribute DOMString min;
           attribute boolean multiple;
           attribute DOMString name;
           attribute DOMString pattern;
           attribute DOMString placeholder;
           attribute boolean readOnly;
           attribute boolean required;
           attribute unsigned long size;
           attribute DOMString src;
           attribute DOMString step;
           attribute DOMString type;
           attribute DOMString defaultValue;
           attribute DOMString value;
           attribute Date valueAsDate;
           attribute double valueAsNumber;
  readonly attribute HTMLOptionElement selectedOption;
           attribute DOMString width;
 
  void stepUp(in optional long n);
  void stepDown(in optional long n);
 
  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(in DOMString error);
 
  readonly attribute NodeList labels;
 
  void select();
           attribute unsigned long selectionStart;
           attribute unsigned long selectionEnd;
  void setSelectionRange(in unsigned long start, in unsigned long end);
};

input 요소는 타입을 갖는 데이터 필드입니다. 사용자가 데이터를 수정할 수 있게끔 폼 컨트롤과 함께 있는 것이 대부분입니다.

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

type 속성은 요소의 데이터 타입과, 연관된 컨트롤들을 조절합니다. 이것은 나열 속성입니다. 아래의 표는 키워드와 속성의 상태들을 열거합니다. 왼쪽 칸에 있는 키워드는 두번째 열의 상태를 나타냅니다.

The type attribute controls the data type (and associated control) of the element. It is an enumerated attribute. The following table lists the keywords and states for the attribute — the keywords in the left column map to the states in the cell in the second column on the same row as the keyword.

Keyword State Data type Control type
hidden Hidden

임의의 문자열

An arbitrary string

n/a
text Text

줄바꿈 없는 텍스트

Text with no line breaks

Text field
search Search

줄바꿈 없는 텍스트

Text with no line breaks

Search field
tel Telephone

줄바꿈 없는 텍스트

Text with no line breaks

A text field
url URL

IRI 절대경로

An absolute IRI

A text field
email E-mail

이메일주소, 혹은 그것의 목록

An e-mail address or list of e-mail addresses

A text field
password Password

줄바꿈없는 텍스트(민감한 정보)

Text with no line breaks (sensitive information)

입력된 데이터를 감추는 텍스트 필드

Text field that obscures data entry

datetime Date and Time

타임존이 국제표준시(UTC)로 설정된 날짜와 시간(년, 월, 일, 시, 분, 초, 분할된 초)

A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC

A date and time control
date Date

타임존 없는 날짜(년, 월, 일)

A date (year, month, day) with no time zone

A date control
month Month

년월을 구성하는 타임존 없는 날짜

A date consisting of a year and a month with no time zone

A month control
week Week

주 를 나타내는 타임존 없는 주-년 및 주 번호

A date consisting of a week-year number and a week number with no time zone

A week control
time Time

타임존 없는 시간(시, 분, 초, 분할된 초)

A time (hour, minute, seconds, fractional seconds) with no time zone

A time control
datetime-local Local Date and Time

타임존 없는 날짜와 시간(년, 월, 일, 시, 분, 초, 분할된 초)

A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone

A date and time control
number Number

숫자

A numerical value

A text field or spinner control
range Range

숫자이면서, 정확한 값이 큰 의미가 없다는 의미를 내포함

A numerical value, with the extra semantic that the exact value is not important

A slider control or similar
color Color

8비트 RGB로 구성된 sRGB 색상

An sRGB color with 8-bit red, green, and blue components

A color well
checkbox Checkbox

미리 정의된 목록에서 가져온 0개 이상의 값

A set of zero or more values from a predefined list

A checkbox
radio Radio Button

열거된 값

An enumerated value

A radio button
file File Upload

마임 타입과, (선택적으로)파일명을 갖는 파일들

Zero or more files each with a MIME type and optionally a file name

A label and a button
submit Submit Button

열거된 값. 폼 제출을 시작하므로, 이것을 선택한 후에는 다른 값을 선택할 수 없음을 암시합니다.

An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission

A button
image Image Button

특정 이미지의 크기와 관련된 좌표. 폼 제출을 시작하므로, 이것을 선택한 후에는 다른 값을 선택할 수 없음을 암시합니다.

A coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission

Either a clickable image, or a button
reset Reset Button n/a A button
button Button n/a A button

상태가 정의되지 않았다면 기본값은 text 입니다.

The missing value default is the Text state.

아래의 표는 어떠한 내용 속성, IDL 속성, 메서드, 이벤트 들이 어떠한 상태에 연관되는지 보여줍니다. (역주:이 문장은 아래 표에 다 포함되므로 열거하지 않습니다)

Which of the accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, pattern, placeholder, readonly, required, size, src, step, and width content attributes, the checked, files, valueAsDate, valueAsNumber, list, and selectedOption IDL attributes, the select() method, the selectionStart and selectionEnd IDL attributes, the setSelectionRange() method, the stepUp() and stepDown() methods, and the input and change events apply to an input element depends on the state of its type attribute. The following table is non-normative and summarizes which of those content attributes, IDL attributes, methods, and events apply to each state:

Hidden Text, Search URL, Telephone E-mail Password Date and Time, 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 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 속성과 메서드
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 · · · · · ·
이벤트
input event · Yes Yes Yes Yes Yes Yes Yes Yes · · · · ·
change event · Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes · · ·

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

† The dagger symbol (†) indicates that the feature only applies when the multiple attribute is not specified.

Some states of the type attribute define a value sanitization algorithm.

Each input element has a value, which is exposed by the value IDL attribute. Some states define an algorithm to convert a string to a number, an algorithm to convert a number to a string, an algorithm to convert a string to a Date object, and an algorithm to convert a Date object to a string, which are used by max, min, step, valueAsDate, valueAsNumber, stepDown(), and stepUp().

Each input element has a boolean dirty value flag. The dirty value flag must be initially set to false when the element is created, and must be set to true whenever the user interacts with the control in a way that changes the value.

value 내용 속성은 input 요소의 기본값을 나타냅니다.

The value content attribute gives the default value of the input element. When the value content attribute is added, set, or removed, if the control's dirty value flag is false, the user agent must set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise, and then run the current value sanitization algorithm, if one is defined.

Each input element has a checkedness, which is exposed by the checked IDL attribute.

Each input element has a boolean dirty checkedness flag. When it is true, the element is said to have a dirty checkedness. The dirty checkedness flag must be initially set to false when the element is created, and must be set to true whenever the user interacts with the control in a way that changes the checkedness.

checked 내용 속성은 불리언 속성이며 input 요소가 체크되었는지 나타냅니다.

The checked content attribute is a boolean attribute that gives the default checkedness of the input element. When the checked content attribute is added, if the control does not have dirty checkedness, the user agent must set the checkedness of the element to true; when the checked content attribute is removed, if the control does not have dirty checkedness, the user agent must set the checkedness of the element to false.

The reset algorithm for input elements is to set the dirty value flag and dirty checkedness flag back to false, set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise, set the checkedness of the element to true if the element has a checked content attribute and false if it does not, empty the list of selected files, and then invoke the value sanitization algorithm, if the type attribute's current state defines one.

Each input element is either mutable or immutable. Except where otherwise specified, an input element is always mutable. Similarly, except where otherwise specified, the user agent should not allow the user to modify the element's value or checkedness.

When an input element is disabled, it is immutable.

When an input element does not have a Document node as one of its ancestors (i.e. when it is not in the document), it is immutable.

The readonly attribute can also in some cases (e.g. for the Date state, but not the Checkbox state) make an input element immutable.

When an input element is cloned, the element's value, dirty value flag, checkedness, and dirty checkedness flag must be propagated to the clone when it is created.


When an input element is first created, the element's rendering and behavior must be set to the rendering and behavior defined for the type attribute's state, and the value sanitization algorithm, if one is defined for the type attribute's state, must be invoked.

When an input element's type attribute changes state, the user agent must run the following steps:

  1. If the previous state of the element's type attribute put the value IDL attribute in the value mode, and the element's value is not the empty string, and the new state of the element's type attribute puts the value IDL attribute in either the default mode or the default/on mode, then set the element's value content attribute to the element's value.

  2. Otherwise, if the previous state of the element's type attribute put the value IDL attribute in any mode other than the value mode, and the new state of the element's type attribute puts the value IDL attribute in the value mode, then set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise, and then set the control's dirty value flag to false.

  3. Update the element's rendering and behavior to the new state's.

  4. Invoke the value sanitization algorithm, if one is defined for the type attribute's new state.


form 속성은 input 요소를 그 폼 소유자와 명시적으로 연결시키기 위해 사용됩니다. name 속성은 요소의 이름을 나타냅니다. disabled 속성은 컨트롤의 상호작용을 중지시키며, 그 값이 제출되지 않도록 하기 위해 사용됩니다. autofocus 속성은 포커스를 제어합니다.

The form attribute is used to explicitly associate the input element with its form owner. The name attribute represents the element's name. The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted. The autofocus attribute controls focus.

The indeterminate IDL attribute must initially be set to false. On getting, it must return the last value it was set to. On setting, it must be set to the new value. It has no effect except for changing the appearance of checkbox controls.

The accept, alt, max, min, multiple, pattern, placeholder, required, size, src, and step IDL attributes must reflect the respective content attributes of the same name. The dirName IDL attribute must reflect the dirname content attribute. The readOnly IDL attribute must reflect the readonly content attribute. The defaultChecked IDL attribute must reflect the checked content attribute. The defaultValue IDL attribute must reflect the value content attribute.

The autocomplete and type IDL attributes must reflect the respective content attributes of the same name, limited to only known values. The maxLength IDL attribute must reflect the maxlength content attribute, limited to only non-negative numbers.

The willValidate, validity, and validationMessage attributes, and the checkValidity() and setCustomValidity() methods, are part of the constraint validation API. The labels attribute provides a list of the element's labels. The select(), selectionStart, selectionEnd, and setSelectionRange() methods and attributes expose the element's text selection. The autofocus, disabled, form, and name IDL attributes are part of the element's forms API.