차례
          1. 4.10.7.1.13 Number state
          2. 4.10.7.1.14 Range state
          3. 4.10.7.1.15 Color state
          4. 4.10.7.1.16 Checkbox state
          5. 4.10.7.1.17 Radio Button state
          6. 4.10.7.1.18 File Upload state
          7. 4.10.7.1.19 Submit Button state
          8. 4.10.7.1.20 Image Button state
          9. 4.10.7.1.21 Reset Button state
          10. 4.10.7.1.22 Button state
4.10.7.1.13 Number state

When an input element's type attribute is in the Number state, the rules in this section apply.

숫자를 나타내는 문자열을 설정할 수 있는 컨트롤을 나타냅니다.

The input element represents a control for setting the element's value to a string representing a number.

요소가 변화할 수 있다면, 사용자 에이전트는 사용자로 하여금 요소의 값을 부동소수점 숫자 파싱 규칙에 의해 변환한 값을 변경할 수 있도록 해야 합니다. 사용자 에이전트는 유효한 부동소수점 숫자 이외의 값을 허용해서는 안됩니다. 사용자 에이전트가 숫자를 선택할 수 있는 UI를 제공한다면, 그 값은 사용자의 선택을 부동소수점으로 나타낸 것 중 최적의 것으로 정해져야 합니다. 사용자 에이전트는 요소에 빈 문자열을 허용해야 합니다.

If the element is mutable, the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating point number values to it. User agents must not allow the user to set the value to a non-empty string that is not a valid floating point number. If the user agent provides a user interface for selecting a number, then the value must be set to the best representation of the number representing the user's selection as a floating point number. User agents should allow the user to set the value to the empty string.

value 속성을 명시했다면, 그 값은 유효한 부동소수점 숫자여야 합니다.

The value attribute, if specified, must have a value that is a valid floating point number.

정규화 규칙: 값이 유효한 부동소수점 숫자가 아니라면 빈 문자열을 사용합니다.

The value sanitization algorithm is as follows: If the value of the element is not a valid floating point number, then set it to the empty string instead.

min 속성을 명시하였다면, 그 역시 유효한 부동소수점 숫자여야 합니다. max도 같습니다.

The min attribute, if specified, must have a value that is a valid floating point number. The max attribute, if specified, must have a value that is a valid floating point number.

step의 기본값은 1입니다. (이 값으로는 정수만을 허용하는데, min 속성이 정수가 아닌 값을 갖고 있다면 예외가 될 수 있습니다)

The step scale factor is 1. The default step is 1 (allowing only integers, unless the min attribute has a non-integer value).

요소가 step mismatch 상태라면, 사용자 에이전트는 사용자의 입력을 가장 가까운 숫자로 바꾸어서 step mismatch 상태가 되지 않도록 할 수 있습니다. 만약 그러한 값이 2개가 있다면, 가장 가까운 양의 무한대(..?)를 취할 것을 권장합니다.

When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest number for which the element would not suffer from a step mismatch. If there are two such numbers, user agents are encouraged to pick the one nearest positive infinity.

문자열을 숫자로 바꾸는 알고리즘은 다음과 같습니다: 부동수소점 파싱 규칙을 적용한 결과가 에러라면, 에러를 반환합니다. 아니라면, 결과인 숫자를 반환합니다.

The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating point number values to input results in an error, then return an error; otherwise, return the resulting number.

The algorithm to convert a number to a string, given a number input, is as follows: Return a valid floating point number that represents input.

다음의 공통적인 내용 속성, IDL 속성, 메서드들이 요소에 적용됩니다:

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, readonly, required, and step content attributes; list, value, valueAsNumber, and selectedOption IDL attributes; stepDown() and stepUp() methods.

IDL 속성 value는 value 모드입니다.

The value IDL attribute is in mode value.

input과 change 이벤트가 적용됩니다.

The input and change events apply.

다음의 내용 속성들은 이 요소에서 명시될 수 없으며 적용될 수 없습니다:

The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, multiple, pattern, placeholder, size, src, and width.

다음의 IDL 속성과 메서드들은 이 요소에 적용되지 않습니다:

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, and valueAsDate IDL attributes; select() and setSelectionRange() methods.

4.10.7.1.14 Range state

When an input element's type attribute is in the Range state, the rules in this section apply.

요소의 값은 숫자를 나타내는 문자열입니다. 하지만 그 정확한 값이 중요하지는 않다는 의미를 내포하고 있으며, 사용자 에이전트는 number 상태에서보다는 좀 더 간단한 인터페이스를 제공해도 됩니다.

The input element represents a control for setting the element's value to a string representing a number, but with the caveat that the exact value is not important, letting UAs provide a simpler interface than they do for the Number state.

요소가 이 상태에 있을 경우, range와 step 제약조건은 입력중에도 적용됩니다. 또한 이 값을 빈 문자열로 지정할 수 없습니다.

In this state, the range and step constraints are enforced even during user input, and there is no way to set the value to the empty string.

요소가 변화할 수 있다면, 사용자 에이전트는 사용자로 하여금 요소의 값을 부동소수점 숫자 파싱 규칙에 의해 변환한 값을 변경할 수 있도록 해야 합니다. 사용자 에이전트는 유효한 부동소수점 숫자 이외의 값을 허용해서는 안됩니다. 사용자 에이전트가 숫자를 선택할 수 있는 UI를 제공한다면, 그 값은 사용자의 선택을 부동소수점으로 나타낸 것 중 최적의 것으로 정해져야 합니다. 사용자 에이전트는 요소에 빈 문자열을 허용해야 합니다.

If the element is mutable, the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating point number values to it. User agents must not allow the user to set the value to a string that is not a valid floating point number. If the user agent provides a user interface for selecting a number, then the value must be set to a best representation of the number representing the user's selection as a floating point number. User agents must not allow the user to set the value to the empty string.

value 속성의 값은 유효한 부동소수점 숫자여야 합니다.

The value attribute, if specified, must have a value that is a valid floating point number.

정규화 규칙 : 값이 유효한 부동소수점 숫자가 아니라면, 기본값을 나타내는 유효한 부동소수점 숫자로 변경합니다.

The value sanitization algorithm is as follows: If the value of the element is not a valid floating point number, then set it to a valid floating point number that represents the default value.

min 속성의 값은 유효한 부동소수점 숫자여야 하며 기본값은 0 입니다. max 속성의 값 역시 유효한 부동소수점 숫자여야 하며 기본값은 100 입니다.

The min attribute, if specified, must have a value that is a valid floating point number. The default minimum is 0. The max attribute, if specified, must have a value that is a valid floating point number. The default maximum is 100.

기본값은 최소값에다가, 최대값과 최소값의 차이의 절반을 더한 값입니다. 최대값이 최소값보다 작은 경우는 예외인데, 이 경우 기본값은 최소값과 같게 됩니다.

The default value is the minimum plus half the difference between the minimum and the maximum, unless the maximum is less than the minimum, in which case the default value is the minimum.

최소값 미만의 숫자가 입력되었다면, 최소값을 사용합니다.

When the element is suffering from an underflow, the user agent must set the element's value to a valid floating point number that represents the minimum.

최대값 이상의 숫자가 입력되었다면, 최대값을 사용합니다.

When the element is suffering from an overflow, if the maximum is not less than the minimum, the user agent must set the element's value to a valid floating point number that represents the maximum.

step의 기본값은 1 입니다(정수만을 허용하는데, 최소값이 정수가 아닌 경우에는 예외입니다).

The step scale factor is 1. The default step is 1 (allowing only integers, unless the min attribute has a non-integer value).

When the element is suffering from a step mismatch, the user agent must round the element's value to the nearest number for which the element would not suffer from a step mismatch, and which is greater than or equal to the minimum, and, if the maximum is not less than the minimum, which is less than or equal to the maximum. If two numbers match these constraints, then user agents must use the one nearest to positive infinity.

For example, the markup <input type="range" min=0 max=100 step=20 value=50> results in a range control whose initial value is 60.

The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating point number values to input results in an error, then return an error; otherwise, return the resulting number.

The algorithm to convert a number to a string, given a number input, is as follows: Return a valid floating point number that represents input.

다음의 공통적인 내용 속성, IDL 속성, 메서드들이 요소에 적용됩니다:

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, and step content attributes; list, value, valueAsNumber, and selectedOption IDL attributes; stepDown() and stepUp() methods.

IDL 속성 value는 value 모드입니다.

The value IDL attribute is in mode value.

input과 change 이벤트가 적용됩니다.

The input and change events apply.

다음의 내용 속성들은 이 요소에서 명시될 수 없으며 적용될 수 없습니다:

The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, multiple, pattern, placeholder, readonly, required, size, src, and width.

다음의 IDL 속성과 메서드들은 이 요소에 적용되지 않습니다:

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, and valueAsDate IDL attributes; select() and setSelectionRange() methods.

자동완성 목록을 사용한 range 컨트롤의 예제가 있습니다. 전체 범위 안에 특별히 중요한 값 들이 있을 경우 이것은 유용할 수 있습니다. 예를 들어 사전 설정된 밝기라든가, 속도 컨트롤에서 사용하는 몇가지 속도제한 등이 있을 수 있습니다. 다음의 마크업은 :

Here is an example of a range control using an autocomplete list with the list attribute. This could be useful if there are values along the full range of the control that are especially important, such as preconfigured light levels or typical speed limits in a range control used as a speed control. The following markup fragment:

<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
<datalist id="powers">
 <option value="0">
 <option value="-30">
 <option value="30">
 <option value="+50">
</datalist>

아래의 스타일시트와 함께 사용해서 :

...with the following style sheet applied:

input { height: 75px; width: 49px; background: #D5CCBB; color: black; }

이렇게 표현될 수 있습니다 :

...might render as:

A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint.

스타일시트에서 명시한 높이와 너비 속성의 비율을 이용해서 사용자 에이전트가 방향성을 설정하고 있음을 눈여겨 보십시오. 색상은 스타일시트에서 표현되었지만, 눈금은 마크업에서 표현된 것입니다. 좀더 자세히 말하자면, step 속성은 눈금의 위치에 영향을 미치지 않고 있으며, 사용자 에이전트는 저자가 명시해둔 값을 통해서만 눈금을 위치시키고 있으며, 양 끝단에서는 좀더 긴 눈금을 사용하고 있습니다.

Note how the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width properties. The colors were similiarly derived from the style sheet. The tick marks, however, were derived from the markup. In particular, the step attribute has not affected the placement of tick marks, the UA deciding to only use the author-specified completion values and then adding longer tick marks at the extremes.

자세히 보시면, 100과 -100에 해당하는 눈금이 아주 조금 더 깁니다.

올바르지 않은 값인 +50 이 완전히 무시되고 있는것도 눈여겨 보십시오.

Note also how the invalid value +50 was completely ignored.

다른 예로, 아래의 마크업을 고려해 보십시오.

For another example, consider the following markup fragment:

<input name=x type=range min=100 max=700 step=9.09090909 value=509.090909>

사용자 에이전트는 이것을 다양한 방법으로 표현할텐데, 예를 들어:

A user agent could display in a variety of ways, for instance:

As a dial.

아니면, 이렇게:

Or, alternatively, for instance:

As a long horizontal slider with tick marks.

사용자 에이전트는 스타일시트에 기초해서 어떤것을 보여줄지 선택하게 될 것입니다. 또한, 전체 너비와는 무관하게 눈금간의 간격을 동일하게 만들 것입니다.

The user agent could pick which one to display based on the dimensions given in the style sheet. This would allow it to maintain the same resolution for the tick marks, despite the differences in width.

4.10.7.1.15 Color state

When an input element's type attribute is in the Color state, the rules in this section apply.

요소의 값은 간단한 색상을 나타내는 문자열입니다.

The input element represents a color well control, for setting the element's value to a string representing a simple color.

이 상태에서는, 반드시 하나의 색상이 선택되어 있는 것이며 이 값을 빈 문자열로 둘 수 없습니다.

In this state, there is always a color picked, and there is no way to set the value to the empty string.

If the element is mutable, the user agent should allow the user to change the color represented by its value, as obtained from applying the rules for parsing simple color values to it. User agents must not allow the user to set the value to a string that is not a valid lowercase simple color. If the user agent provides a user interface for selecting a color, then the value must be set to the result of using the rules for serializing simple color values to the user's selection. User agents must not allow the user to set the value to the empty string.

value 속성의 값은 유효한 간단한 색상이어야 합니다.

The value attribute, if specified, must have a value that is a valid simple color.

간단한 색상이라 함은 #000000 ~ #FFFFFF 를 말합니다. 명세에서는 "정확히 7글자" 라고 못박고 있으므로, CSS에서처럼 #eee 등의 축약 표기를 해서는 안될듯합니다.

정규화 규칙 : 값이 유효한 간단한 색상이라면, ASCII 소문자 값으로 변환합니다. 아니라면, #000000로 바꿉니다.

The value sanitization algorithm is as follows: If the value of the element is a valid simple color, then set it to the value of the element converted to ASCII lowercase; otherwise, set it to the string "#000000".

다음의 공통적인 내용 속성, IDL 속성, 메서드들이 요소에 적용됩니다:

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete and list content attributes; list, value, and selectedOption IDL attributes.

IDL 속성 value는 value 모드입니다.

The value IDL attribute is in mode value.

input과 change 이벤트가 적용됩니다.

The input and change events apply.

다음의 내용 속성들은 이 요소에서 명시될 수 없으며 적용될 수 없습니다:

The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, max, min, multiple, pattern, placeholder, readonly, required, size, src, step, and width.

다음의 IDL 속성과 메서드들은 이 요소에 적용되지 않습니다:

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown(), and stepUp() methods.

4.10.7.1.16 Checkbox state

When an input element's type attribute is in the Checkbox state, the rules in this section apply.

checkbox 상태인 input 요소는 두 가지 checked 상태를 표현하는 컨트롤을 나타냅니다. 요소가 체크되어 있다면 컨트롤은 긍정적 선택을 나타냅니다. 아니라면 부정적 선택을 나타냅니다. 요소의 IDL 속성 indeterminate 가 true라면, 컨트롤의 선택은 마치 세 번째(모호한) 상태인 것처럼 감춰져야 합니다.

The input element represents a two-state control that represents the element's checkedness state. If the element's checkedness state is true, the control represents a positive selection, and if it is false, a negative selection. If the element's indeterminate IDL attribute is set to true, then the control's selection should be obscured as if the control was in a third, indeterminate, state.

컨트롤 자체는 세 가지 상태를 나타내는 컨트롤이 아닙니다. 설령 IDL 속성 indeterminate가 true로 설정되어 있다 해도 그렇습니다. 해당 IDL 속성은 단지 외관상으로만 세번째 상태를 부여할 뿐입니다.

The control is never a true tri-state control, even if the element's indeterminate IDL attribute is set to true. The indeterminate IDL attribute only gives the appearance of a third state.

If the element is mutable, then: The pre-click activation steps consist of setting the element's checkedness to its opposite value (i.e. true if it is false, false if it is true), and of setting the element's indeterminate IDL attribute to false. The canceled activation steps consist of setting the checkedness and the element's indeterminate IDL attribute back to the values they had before the pre-click activation steps were run. The activation behavior is to fire a simple event that bubbles named change at the element, then broadcast formchange events from the element's form owner, if any.

Constraint validation: If the element is required and its checkedness is false, then the element is suffering from being missing.

input . indeterminate [ = value ]

설정되면, 현재의 값이 보이지 않도록 체크박스 컨트롤의 표현을 덮어씁니다.

When set, overrides the rendering of checkbox controls so that the current value is not visible.

다음의 공통적인 내용 속성, IDL 속성, 메서드들이 요소에 적용됩니다:

The following common input element content attributes and IDL attributes apply to the element: checked, and required content attributes; checked and value IDL attributes.

IDL 속성 value는 default/on 모드입니다.

The value IDL attribute is in mode default/on.

change 이벤트가 적용됩니다.

The change event applies.

다음의 내용 속성들은 이 요소에서 명시될 수 없으며 적용될 수 없습니다:

The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, pattern, placeholder, readonly, size, src, step, and width.

다음의 IDL 속성과 메서드들은 이 요소에 적용되지 않습니다:

The following IDL attributes and methods do not apply to the element: files, list, selectedOption, selectionStart, selectionEnd, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown(), and stepUp() methods.

input 이벤트는 적용되지 않습니다.

The input event does not apply.

4.10.7.1.17 Radio Button state

When an input element's type attribute is in the Radio Button state, the rules in this section apply.

다른 input 요소들과 함께 그룹을 이루며, 그중 하나만이 체크될 수 있는 라디오 버튼 그룹을 형성하는 컨트롤을 나타냅니다. 요소가 체크되었다면, 그 요소는 해당 그룹의 선택된 컨트롤을 나타냅니다. 아니라면, 선택되지 않은 컨트롤을 나타냅니다.

The input element represents a control that, when used in conjunction with other input elements, forms a radio button group in which only one control can have its checkedness state set to true. If the element's checkedness state is true, the control represents the selected control in the group, and if it is false, it indicates a control in the group that is not selected.

input 요소 a 를 포함하는 라디오 버튼 그룹은 다음의 조건을 만족하는 요소들 b 역시 포함합니다.

The radio button group that contains an input element a also contains all the other input elements b that fulfill all of the following conditions:

단 하나의 input 요소만을 포함하는 라디오 버튼 그룹을 형성해서는 안됩니다.

A document must not contain an input element whose radio button group contains only that element.

When any of the following phenomena occur, if the element's checkedness state is true after the occurrence, the checkedness state of all the other elements in the same radio button group must be set to false:

If the element is mutable, then: The pre-click activation steps consist of setting the element's checkedness to true. The canceled activation steps consist of setting the element's checkedness to false. The activation behavior is to fire a simple event that bubbles named change at the element, then broadcast formchange events from the element's form owner, if any.

Constraint validation: If the element is required and all of the input elements in the radio button group have a checkedness that is false, then the element is suffering from being missing.

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

If none of the radio buttons in a radio button group are checked when they are inserted into the document, then they will all be initially unchecked in the interface, until such time as one of them is checked (either by the user or by script).

다음의 공통적인 내용 속성, IDL 속성, 메서드들이 요소에 적용됩니다:

The following common input element content attributes and IDL attributes apply to the element: checked and required content attributes; checked and value IDL attributes.

IDL 속성 value는 default/on 모드입니다.

The value IDL attribute is in mode default/on.

change 이벤트가 적용됩니다.

The change event applies.

다음의 내용 속성들은 이 요소에서 명시될 수 없으며 적용될 수 없습니다:

The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, pattern, placeholder, readonly, size, src, step, and width.

다음의 IDL 속성과 메서드들은 이 요소에 적용되지 않습니다:

The following IDL attributes and methods do not apply to the element: files, list, selectedOption, selectionStart, selectionEnd, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown(), and stepUp() methods.

input 이벤트는 적용되지 않습니다.

The input event does not apply.

4.10.7.1.18 File Upload state

When an input element's type attribute is in the File Upload state, the rules in this section apply.

요소는 선택된 파일들의 목록을 나타냅니다. 각각의 파일들은 파일 이름, 타입, 그리고 몸체(내용)으로 구성됩니다.

The input element represents a list of selected files, each file consisting of a file name, a file type, and a file body (the contents of the file).

File names may contain partial paths, e.g. in the case that a user has selected an entire directory hierarchy. Path components should be separated from each other using U+005C REVERSE SOLIDUS character (\).

If the element is mutable, the user agent should allow the user to change the files on the list, e.g. adding or removing files. Files can be from the filesystem or created on the fly, e.g. a picture taken from a camera connected to the user's device.

Constraint validation: If the element is required and the list of selected files is empty, then the element is suffering from being missing.

Unless the multiple attribute is set, there must be no more than one file in the list of selected files.


accept 속성을 사용하여, 서버에서 수용하는 파일의 타입에 대해 사용자 에이전트가 힌트를 주게 할 수 있습니다.

The accept attribute may be specified to provide user agents with a hint of what file types will be accepted.

명시하였다면, 이 속성은 콤마로 구분된 예약어의 목록입니다. 각각의 예약어들은 다음 중 하나와 매치되어야 합니다(대소문자는 구분하지 않습니다)

If specified, the attribute must consist of a set of comma-separated tokens, each of which must be an ASCII case-insensitive match for one of the following:

The string audio/*

사운드 파일을 허용함을 나타냅니다.

Indicates that sound files are accepted.

The string video/*

비디오 파일을 허용함을 나타냅니다.

Indicates that video files are accepted.

The string image/*

이미지 파일을 허용함을 나타냅니다.

Indicates that image files are accepted.

A valid MIME type with no parameters

명시된 타입이 허용됨을 나타냅니다.

Indicates that files of the specified type are accepted.

예약어들은 중복될 수 없습니다. 이 중복을 체크할때는 대소문자를 구분하지 않습니다.(audio/x-audio 와 Audio/x-audio 는 중복입니다)

The tokens must not be ASCII case-insensitive matches for any of the other tokens (i.e. duplicates are not allowed). To obtain the list of tokens from the attribute, the user agent must split the attribute value on commas.

User agents should prevent the user from selecting files that are not accepted by one (or more) of these tokens.

IDL 속성 value는 파일이름 앞에 C:\fakepath\ 라는 문자열을 삽입합니다. 일부 구형 사용자 에이전트들은 실제로 전체 파일이름을 포함시킵니다(그리고 이것은 보안상 위험합니다). 결과적으로, 파일 이름을 IDL value로부터 얻으면서도 하위 호환성을 유지하는 것은 간단치 않은 일입니다. 다음의 함수는 적절한 호환성을 보장받으면서 파일 이름을 추출하고 있습니다.

For historical reasons, the value IDL attribute prefixes the filename with the string "C:\fakepath\". Some legacy user agents actually included the full path (which was a security vulnerability). As a result of this, obtaining the filename from the value IDL attribute in a backwards-compatible way is non-trivial. The following function extracts the filename in a suitably compatible manner:

function extractFilename(path) { 
  var x;
  
  x = path.lastIndexOf('\\');  
  if (x >= 0) {                 // Windows-based path
    return path.substr(x+1);
  }
  
  x = path.lastIndexOf('/');
  if (x >= 0) {                 // Unix-based path
    return path.substr(x+1);
  }
  
  return path;                  // just the filename
}
가독성을 위해 중괄호를 첨부하였습니다. 함수를 한글로 풀어 쓴다면 이렇습니다 : 문자열을 오른쪽에서 왼쪽으로 검색하여 \\를 만나면, 그 오른쪽의 문자열을 반환한다. 만나지 못했다면, 다시 오른쪽에서 왼쪽으로 검색하여 /를 만나면 그 오른쪽을 반환한다. 만나지 못했다면, 넘겨받았던 문자열을 그대로 반환한다.

이 함수는 아래와 같이 활용할 수 있습니다:

This can be used as follows:

<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>The name of the file you picked is: <span id="filename">(none)</span></p>
<script>
 function updateFilename(path) {
   var name = extractFilename(path);
   document.getElementById('filename').textContent = name;
 }
</script>
에디터: 이것이 실제로 유용할지는 불투명합니다.

다음의 공통적인 input요소의 내용 속성이 요소에 적용됩니다:

The following common input element content attributes apply to the element:

다음의 공통적인 IDL 속성들이 요소에 적용됩니다:

The following common input element content attributes and IDL attributes apply to the element: accept, multiple, and required; files and value IDL attributes.

IDL 속성 value는 filename 모드입니다.

The value IDL attribute is in mode filename.

change 이벤트가 적용됩니다.

The change event applies.

다음의 내용 속성들은 이 요소에서 명시될 수 없으며 적용될 수 없습니다:

The following content attributes must not be specified and do not apply to the element: alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, pattern, placeholder, readonly, size, src, step, and width.

요소의 value 속성을 생략할 수 없습니다.

The element's value attribute must be omitted.

다음의 IDL 속성과 메서드들은 이 요소에 적용되지 않습니다:

The following IDL attributes and methods do not apply to the element: checked, list, selectedOption, selectionStart, selectionEnd, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown(), and stepUp() methods.

input 이벤트는 적용되지 않습니다.

The input event does not apply.

4.10.7.1.19 Submit Button state

When an input element's type attribute is in the Submit Button state, the rules in this section apply.

요소는 활성화되었을 때 폼을 제출하는 버튼을 나타냅니다. 요소는 버튼이며, 제출 버튼입니다.

The input element represents a button that, when activated, submits the form. If the element has a value attribute, the button's label must be the value of that attribute; otherwise, it must be an implementation-defined string that means "Submit" or some such. The element is a button, specifically a submit button.

If the element is mutable, the user agent should allow the user to activate the element.

The element's activation behavior, if the element has a form owner, is to submit the form owner from the input element; otherwise, it is to do nothing.

formaction, formenctype, formmethod, formnovalidate, 그리고 formtarget 속성들은 폼 제출을 위한 속성입니다.

The formaction, formenctype, formmethod, formnovalidate, and formtarget attributes are attributes for form submission.

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

The formnovalidate attribute can be used to make submit buttons that do not trigger the constraint validation.

다음의 공통적인 내용 속성, IDL 속성들이 요소에 적용됩니다:

The following common input element content attributes and IDL attributes apply to the element: formaction, formenctype, formmethod, formnovalidate, and formtarget content attributes; value IDL attribute.

IDL 속성 value는 default 모드입니다.

The value IDL attribute is in mode default.

다음의 내용 속성들은 이 요소에서 명시될 수 없으며 적용될 수 없습니다:

The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, checked, dirname, height, list, max, maxlength, min, multiple, pattern, placeholder, readonly, required, size, src, step, and width.

다음의 IDL 속성과 메서드들은 이 요소에 적용되지 않습니다:

The following IDL attributes and methods do not apply to the element: checked, files, list, selectedOption, selectionStart, selectionEnd, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown(), and stepUp() methods.

input과 change 이벤트는 적용되지 않습니다.

The input and change events do not apply.

4.10.7.1.20 Image Button state

When an input element's type attribute is in the Image Button state, the rules in this section apply.

사용자가 어느 한 좌표를 선택해서 폼을 제출할 수 있는 이미지, 혹은 폼을 제출할 수 있는 버튼을 나타냅니다. 요소는 버튼이며, 제출 버튼입니다.

The input element represents either an image from which a user can select a coordinate and submit the form, or alternatively a button from which the user can submit the form. The element is a button, specifically a submit button.


이미지는 src 속성을 이용해 주어집니다. src 속성은 반드시 사용되어야 하며, 그 값은 유효한 URL이어야 합니다. URL을 둘러싼 공백문자는 관계없습니다. URL이 참조하는 이미지는 상호작용성을 가질 수 없고, 애니메이션은 관계 없으며, 페이지되지 않고 스크립트되지 않은 이미지여야 합니다.

The image is given by the src attribute. The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

When any of the following events occur, unless the user agent cannot support images, or its support for images has been disabled, or the user agent only fetches elements on demand, or the src attribute's value is the empty string, the user agent must resolve the value of the src attribute, relative to the element, and if that is successful, must fetch the resulting absolute URL:

Fetching the image must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.

If the image was successfully obtained, with no network errors, and the image's type is a supported image type, and the image is a valid image of that type, then the image is said to be available. If this is true before the image is completely downloaded, each task that is queued by the networking task source while the image is being fetched must update the presentation of the image appropriately.

The user agents should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.

User agents must not support non-image resources with the input element. User agents must not run executable code embedded in the image resource. User agents must only display the first page of a multipage resource. User agents must not allow the resource to act in an interactive fashion, but should honor any animation in the resource.

The task that is queued by the networking task source once the resource has been fetched, must, if the download was successful and the image is available, queue a task to fire a simple event named load at the input element; and otherwise, if the fetching process fails without a response from the remote server, or completes but the image is not a valid or supported image, queue a task to fire a simple event named error on the input element.


alt 속성은 이미지를 사용할 수 없는 사용자와 사용자 에이전트에게 대신 사용할 버튼에 대한 텍스트 레이블을 제공합니다. alt 속성은 반드시 있어야 하며, 비어있지 않은 문자열을 포함해야 합니다.

The alt attribute provides the textual label for the alternative button for users and user agents who cannot use the image. The alt attribute must also be present, and must contain a non-empty string.

input 요소는 dimension 속성을 지원합니다.

The input element supports dimension attributes.


If the src attribute is set, and the image is available and the user agent is configured to display that image, then: The element represents a control for selecting a coordinate from the image specified by the src attribute; if the element is mutable, the user agent should allow the user to select this coordinate. The activation behavior in this case consists of taking the user's selected coordinate, and then, if the element has a form owner, submitting the input element's form owner from the input element. If the user activates the control without explicitly selecting a coordinate, then the coordinate (0,0) must be assumed.

Otherwise, the element represents a submit button whose label is given by the value of the alt attribute; if the element is mutable, the user agent should allow the user to activate the button. The activation behavior in this case consists of setting the selected coordinate to (0,0), and then, if the element has a form owner, submitting the input element's form owner from the input element.

The selected coordinate must consist of an x-component and a y-component. The coordinates represent the position relative to the edge of the image, with the coordinate space having the positive x direction to the right, and the positive y direction downwards.

The x-component must be a valid integer representing a number x in the range −(borderleft+paddingleft) ≤ xwidth+borderright+paddingright, where width is the rendered width of the image, borderleft is the width of the border on the left of the image, paddingleft is the width of the padding on the left of the image, borderright is the width of the border on the right of the image, and paddingright is the width of the padding on the right of the image, with all dimensions given in CSS pixels.

The y-component must be a valid integer representing a number y in the range −(bordertop+paddingtop) ≤ yheight+borderbottom+paddingbottom, where height is the rendered height of the image, bordertop is the width of the border above the image, paddingtop is the width of the padding above the image, borderbottom is the width of the border below the image, and paddingbottom is the width of the padding below the image, with all dimensions given in CSS pixels.

Where a border or padding is missing, its width is zero CSS pixels.


formaction, formenctype, formmethod, formnovalidate, 그리고 formtarget 속성은 폼 제출을 위한 속성들입니다.

The formaction, formenctype, formmethod, formnovalidate, and formtarget attributes are attributes for form submission.

다음의 공통적인 내용 속성, IDL 속성들이 요소에 적용됩니다:

The following common input element content attributes and IDL attributes apply to the element: alt, formaction, formenctype, formmethod, formnovalidate, formtarget, height, src, and width content attributes; value IDL attribute.

IDL 속성 value는 default 모드입니다.

The value IDL attribute is in mode default.

다음의 내용 속성들은 이 요소에서 명시될 수 없으며 적용될 수 없습니다:

The following content attributes must not be specified and do not apply to the element: accept, autocomplete, checked, dirname, list, max, maxlength, min, multiple, pattern, placeholder, readonly, required, size, and step.

요소의 value 속성은 사용할 수 없습니다.

The element's value attribute must be omitted.

다음의 IDL 속성과 메서드들은 이 요소에 적용되지 않습니다:

The following IDL attributes and methods do not apply to the element: checked, files, list, selectedOption, selectionStart, selectionEnd, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown(), and stepUp() methods.

input과 change 이벤트는 적용되지 않습니다.

The input and change events do not apply.

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

Many aspects of this state's behavior are similar to the behavior of the img element. Readers are encouraged to read that section, where many of the same requirements are described in more detail.

4.10.7.1.21 Reset Button state

When an input element's type attribute is in the Reset Button state, the rules in this section apply.

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

The input element represents a button that, when activated, resets the form. If the element has a value attribute, the button's label must be the value of that attribute; otherwise, it must be an implementation-defined string that means "Reset" or some such. The element is a button.

If the element is mutable, the user agent should allow the user to activate the element.

The element's activation behavior, if the element has a form owner, is to reset the form owner; otherwise, it is to do nothing.

Constraint validation: The element is barred from constraint validation.

IDL 속성 value는 default 모드입니다.

The value IDL attribute applies to this element and is in mode default.

다음의 내용 속성들은 이 요소에서 명시될 수 없으며 적용될 수 없습니다:

The following content attributes must not be specified and do not apply to the element: 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.

다음의 IDL 속성과 메서드들은 이 요소에 적용되지 않습니다:

The following IDL attributes and methods do not apply to the element: checked, files, list, selectedOption, selectionStart, selectionEnd, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown(), and stepUp() methods.

input과 change 이벤트는 적용되지 않습니다.

The input and change events do not apply.

4.10.7.1.22 Button state

When an input element's type attribute is in the Button state, the rules in this section apply.

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

The input element represents a button with no default behavior. A label for the button must be provided in the value attribute. If the element has a value attribute, the button's label must be the value of that attribute; otherwise, it must be the empty string. The element is a button.

If the element is mutable, the user agent should allow the user to activate the element. The element's activation behavior is to do nothing.

Constraint validation: The element is barred from constraint validation.

IDL 속성 value는 default 모드입니다.

The value IDL attribute applies to this element and is in mode default.

다음의 내용 속성들은 이 요소에서 명시될 수 없으며 적용될 수 없습니다:

The following content attributes must not be specified and do not apply to the element: 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.

다음의 IDL 속성과 메서드들은 이 요소에 적용되지 않습니다:

The following IDL attributes and methods do not apply to the element: checked, files, list, selectedOption, selectionStart, selectionEnd, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown(), and stepUp() methods.

input과 change 이벤트는 적용되지 않습니다.

The input and change events do not apply.