차례
      1. 4.10.18 컨트롤과 폼의 연결
      2. 4.10.19 폼 컨트롤에 공통된 속성
        1. 4.10.19.1 폼 컨트롤 명명
        2. 4.10.19.2 폼 컨트롤의 활성화 및 비활성화
        3. 4.10.19.3 컨트롤의 값
        4. 4.10.19.4 컨트롤에 자동으로 포커스 주기
        5. 4.10.19.5 사용자 입력의 길이 제한
        6. 4.10.19.6 폼 제출
        7. 4.10.19.7 요소 방향성 제출
      3. 4.10.20 텍스트 필드 선택을 위한 API
      4. 4.10.21 제약조건
        1. 4.10.21.1 정의
        2. 4.10.21.2 제약사항 검사
        3. 4.10.21.3 제약사항 검사 API
        4. 4.10.21.4 보안
      5. 4.10.22 폼 제출
        1. 4.10.22.1 소개
        2. 4.10.22.2 암시적인 제출
        3. 4.10.22.3 폼 제출 알고리즘
        4. 4.10.22.4 URL로 인코드된 폼 데이터
        5. 4.10.22.5 멀티파트 폼 데이터
        6. 4.10.22.6 단순 텍스트 폼 데이터
      6. 4.10.23 폼 리셋
      7. 4.10.24 이벤트 전달

4.10.18 폼과 컨트롤의 연결

폼 관련 요소들은 폼 요소와의 연결을 갖고 있습니다. 이 폼 요소를 해당 요소의 폼 소유자라고 부릅니다. 폼 관련 요소가 폼 요소와 연결되어 있지 않다면 폼 소유자가 null 이라고 합니다.

A form-associated element can have a relationship with a form element, which is called the element's form owner. If a form-associated element is not associated with a form element, its form owner is said to be null.

폼 관련 요소는 기본적으로 가장 가까운 조상인 폼 요소와 연결됩니다. 하지만 명시적으로 form 속성을 사용하여 이 기본값을 덮어쓸 수 있습니다.

A form-associated element is, by default, associated with its nearest ancestor form element (as described below), but may have a form attribute specified to override this.

이런 기능은 네스팅된 form 요소에 대한 지원이 부족한 점에 대해 저자들이 대처할 수 있도록 합니다.

This feature allows authors to work around the lack of support for nested form elements.

폼 관련 요소에 form 속성이 명시되어 있다면, 그 값은 폼 요소의 ID 값이어야 하며, 해당 폼 요소는 폼 관련 요소와 같은 문서 상에 존재해야 합니다.

If a form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's owner Document.

The rules in this section are complicated by the fact that although conforming documents will never contain nested form elements, it is quite possible (e.g. using a script that performs DOM manipulation) to generate documents that have such nested elements. They are also complicated by rules in the HTML parser that, for historical reasons, can result in a form-associated element being associated with a form element that is not its ancestor.

When a form-associated element is created, its form owner must be initialized to null (no owner).

When a form-associated element is to be associated with a form, its form owner must be set to that form.

When a form-associated element's ancestor chain changes, e.g. because it or one of its ancestors was inserted or removed from a Document, then the user agent must reset the form owner of that element. The HTML parser overrides this requirement when inserting form controls.

When a form-associated element's form attribute is added, removed, or has its value changed, then the user agent must reset the form owner of that element.

When a form-associated element has a form attribute and the ID of any of the elements in the Document changes, then the user agent must reset the form owner of that form-associated element.

When a form-associated element has a form attribute and an element with an ID is inserted into or removed from the Document, then the user agent must reset the form owner of that form-associated element.

When the user agent is to reset the form owner of a form-associated element, it must run the following steps:

  1. If the element's form owner is not null, and the element's form content attribute is not present, and the element's form owner is its nearest form element ancestor after the change to the ancestor chain, then do nothing, and abort these steps.

  2. Let the element's form owner be null.

  3. If the element has a form content attribute, then run these substeps:

    1. If the first element in the Document to have an ID that is case-sensitively equal to the element's form content attribute's value is a form element, then associate the form-associated element with that form element.

    2. Abort the "reset the form owner" steps.

  4. Otherwise, if the form-associated element in question has an ancestor form element, then associate the form-associated element with the nearest such ancestor form element.

  5. Otherwise, the element is left unassociated.

In the following non-conforming snippet:

...
 <form id="a">
  <div id="b"></div>
 </form>
 <script>
  document.getElementById('b').innerHTML =
     '<table><tr><td><form id="c"><input id="d"></table>' +
     '<input id="e">';
 </script>
...

The form owner of "d" would be the inner nested form "c", while the form owner of "e" would be the outer form "a".

This happens as follows: First, the "e" node gets associated with "c" in the HTML parser. Then, the innerHTML algorithm moves the nodes from the temporary document to the "b" element. At this point, the nodes see their ancestor chain change, and thus all the "magic" associations done by the parser are reset to normal ancestor associations.

This example is a non-conforming document, though, as it is a violation of the content models to nest form elements.

element . form

요소의 폼 소유자를 반환합니다.

Returns the element's form owner.

폼 소유자가 없다면 null을 반환합니다.

Returns null if there isn't one.

Form-associated elements have a form IDL attribute, which, on getting, must return the element's form owner, or null if there isn't one.

4.10.19 폼 컨트롤에 공통된 속성들

4.10.19.1 폼 컨트롤 명명

내용 속성 name은 폼 컨트롤에 이름을 부여합니다. 이 이름은 폼 제출시에 사용되며, 폼 요소의 elements 객체에 포함됩니다. 속성이 명시되었다면, 그 값은 빈 문자열이 될 수 없습니다.

The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string.

name 속성의 값으로 비어 있지 않은 문자열은 무엇이든 허용되지만, 그러한 이름에 _charset_ 혹은 isindex 라는 문자열이 들어갈 경우 특별한 의미를 갖게 됩니다:

Any non-empty value for name is allowed, but the names "_charset_" and "isindex" are special:

isindex

이 값이, application/x-www-form-urlencoded 메커니즘으로 제출되는 폼에서 유일한 텍스트 컨트롤의 이름으로 사용되었다면, 폼을 제출할 때에 그 컨트롤은 이름을 갖지 않으며 컨트롤의 값만을 제출하게 됩니다.

This value, if used as the name of a Text control that is the only control in a form that is submitted using the application/x-www-form-urlencoded mechanism, causes the submission to only include the value of this control, with no name.

_charset_

이 값이, value 속성이 사용되지 않은 hidden 컨트롤의 이름으로 사용되었다면, 폼의 제출 과정에서 폼 제출의 문자 인코딩에 해당하는 값을 자동으로 받게 됩니다.

This value, if used as the name of a Hidden control with no value attribute, is automatically given a value during submission consisting of the submission character encoding.

The name IDL attribute must reflect the name content attribute.

4.10.19.2 폼 컨트롤의 활성화 및 비활성화

내용 속성 disabled는 불리언 속성입니다.

The disabled content attribute is a boolean attribute.

속성이 사용되면 폼 컨트롤은 비활성화됩니다. 또한 컨트롤의 조상 요소인 fieldset 요소가 disabled 속성을 갖고 있는 경우에도 비활성화되는데, 해당 컨트롤이 fieldset 요소의 첫번째 legend 자식 요소에 속한 경우에는 예외입니다.

A form control is disabled if its disabled attribute is set, or if it is a descendant of a fieldset element whose disabled attribute is set and is not a descendant of that fieldset element's first legend element child, if any.

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

Constraint validation: If an element is disabled, it is barred from constraint validation.

The disabled IDL attribute must reflect the disabled content attribute.

4.10.19.3 컨트롤의 값

Form controls have a value and a checkedness. (The latter is only used by input elements.) These are used to describe how the user interacts with the control.

To define the behaviour of constraint validation in the face of the input element's multiple attribute, input elements can also have separately defined values.

4.10.19.4 컨트롤에 자동으로 포커스 주기

내용 속성 autofocus는 페이지를 불러오는 즉시 해당 컨트롤에 포커스를 줍니다. 따라서 사용자는 중요한 컨트롤에 직접 포커스를 옮기는 대신 바로 입력을 시작할 수 있습니다.

The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control.

불리언 속성입니다.

The autofocus attribute is a boolean attribute.

문서 내에서 단 하나의 요소만이 이 속성을 가질 수 있습니다.

There must not be more than one element in the document with the autofocus attribute specified.

When an element with the autofocus attribute specified is inserted into a document, user agents should run the following steps:

  1. Let target be the element's Document.

  2. If target has no browsing context, abort these steps.

  3. If target's browsing context has no top-level browsing context (e.g. it is a nested browsing context with no parent browsing context), abort these steps.

  4. If target's browsing context had the sandboxed automatic features browsing context flag set when target was created, abort these steps.

  5. If target's origin is not the same as the origin of the Document of the currently focused element in target's top-level browsing context, abort these steps.

  6. If target's origin is not the same as the origin of the active document of target's top-level browsing context, abort these steps.

  7. If the user agent has already reached the last step of this list of steps in response to an element being inserted into a Document whose top-level browsing context's active document is the same as target's top-level browsing context's active document, abort these steps.

  8. If the user has indicated (for example, by starting to type in a form control) that he does not wish focus to be changed, then optionally abort these steps.

  9. Queue a task that checks to see if the element is focusable, and if so, runs the focusing steps for that element. User agents may also change the scrolling position of the document, or perform some other action that brings the element to the user's attention. The task source for this task is the DOM manipulation task source.

Focusing the control does not imply that the user agent must focus the browser window if it has lost focus.

The autofocus IDL attribute must reflect the content attribute of the same name.

다음의 예제에서는, 문서가 로딩되는 즉시 텍스트 컨트롤이 포커스를 받을 것입니다.

In the following snippet, the text control would be focused when the document was loaded.

<input maxlength="256" name="q" value="" autofocus>
<input type="submit" value="Search">
4.10.19.5 사용자 입력의 길이 제한

폼 컨트롤의 maxlength 속성은 dirty value flag에 의해 제어되며, 사용자가 입력할 수 있는 글자수를 제한합니다.

A form control maxlength attribute, controlled by a dirty value flag declares a limit on the number of characters a user can input.

요소가 폼 컨트롤 maxlength 속성을 갖고 있다면, 그 값은 음이 아닌 유효한 정수값이어야 합니다. 속성이 명시되었고 그 값이 음이 아닌 유효한 정수값이라면, 그 숫자는 요소에서 허용되는 최대한의 길이가 됩니다. 속성이 생략되었거나 그 값을 파싱하는 과정에서 에러가 있다면, 최대값 제한은 없는 것입니다.

If an element has its form control maxlength attribute specified, the attribute's value must be a valid non-negative integer. If the attribute is specified and applying the rules for parsing non-negative integers to its value results in a number, then that number is the element's maximum allowed value length. If the attribute is omitted or parsing its value results in an error, then there is no maximum allowed value length.

Constraint validation: If an element has a maximum allowed value length, and its dirty value flag is true, and the code-point length of the element's value is greater than the element's maximum allowed value length, then the element is suffering from being too long.

User agents may prevent the user from causing the element's value to be set to a value whose code-point length is greater than the element's maximum allowed value length.

4.10.19.6 폼 제출

폼 제출을 위한 속성은 form 요소와 제출 버튼(폼의 제출을 나타내는 요소, 예를 들어 type 속성이 제출 버튼 상태인 input 요소 등입니다) 양쪽에서 명시될 수 있습니다.

Attributes for form submission can be specified both on form elements and on submit buttons (elements that represent buttons that submit forms, e.g. an input element whose type attribute is in the Submit Button state).

The attributes for form submission that may be specified on form elements are action, enctype, method, novalidate, and target.

form 요소에서 명시될 수 있는 제출용 속성들은 action, enctype, method, novalidate, target이 있습니다.

The corresponding attributes for form submission that may be specified on submit buttons are formaction, formenctype, formmethod, formnovalidate, and formtarget. When omitted, they default to the values given on the corresponding attributes on the form element.


내용 속성인 actionformaction은 명시되었을 경우 유효한 URL이어야 합니다. 둘러싼 공백문자는 괜찮습니다.

The action and formaction content attributes, if specified, must have a value that is a valid URL potentially surrounded by spaces.

요소의 action은, 그 요소가 제출 버튼이고 formaction 속성을 갖고 있다면 그 값입니다. 아니라면 폼 소유자의 action 속성의 값입니다. 그것도 아니라면 빈 문자열입니다.

The action of an element is the value of the element's formaction attribute, if the element is a submit button and has such an attribute, or the value of its form owner's action attribute, if it has one, or else the empty string.


내용 속성 methodformmethod는 나열 속성이며 다음의 키워드와 상태를 갖습니다.

The method and formmethod content attributes are enumerated attributes with the following keywords and states:

생략하였을 경우 기본값은 GET 상태입니다.

The missing value default for these attributes is the GET state.

요소의 method는 위의 상태 중 하나입니다. 요소가 제출 버튼이고 formmethod 속성을 갖는다면, 요소의 method는 그 속성의 상태입니다. 아니라면, 폼 소유자의 method 속성의 상태를 갖습니다.

The method of an element is one of those states. If the element is a submit button and has a formmethod attribute, then the element's method is that attribute's state; otherwise, it is the form owner's method attribute's state.


내용 속성 enctypeformenctype은 나열 속성이며 다음 키워드와 상태를 갖습니다 :

The enctype and formenctype content attributes are enumerated attributes with the following keywords and states:

기본값은 application/x-www-form-urlencoded 상태입니다.

The missing value default for these attributes is the application/x-www-form-urlencoded state.

요소의 enctype은 다음의 세가지 상태 중 하나입니다. 요소가 제출 버튼이고 formenctype 속성을 갖고 있다면 그 값을 취합니다. 아니라면, 폼 소유자의 enctype 속성을 취합니다.

The enctype of an element is one of those three states. If the element is a submit button and has a formenctype attribute, then the element's enctype is that attribute's state; otherwise, it is the form owner's enctype attribute's state.


내용 속성 targetformtarget의 값은 유효한 브라우징 문맥 이름이나 키워드여야 합니다.

The target and formtarget content attributes, if specified, must have values that are valid browsing context names or keywords.

요소의 target은 요소가 제출 버튼이고 formtarget 속성을 갖고 있다면 그 값입니다. 아닐 경우 폼 소유자가 target 속성을 가졌다면 그 값입니다. 아닐 경우, head 요소의 자식 노드 중 하나가 base 요소이고 그 요소에 target 속성이 있을 경우 그 값입니다. 그러한 요소도 없다면, 빈 문자열입니다.

The target of an element is the value of the element's formtarget attribute, if the element is a submit button and has such an attribute; or the value of its form owner's target attribute, if it has such an attribute; or, if the Document contains a base element with a target attribute, then the value of the target attribute of the first such base element; or, if there is no such element, the empty string.


내용 속성 novalidateformnovalidate는 불리언 속성입니다. 이러한 속성이 있을 경우, 폼은 제출시에 유효성 검사를 거치지 않습니다.

The novalidate and formnovalidate content attributes are boolean attributes. If present, they indicate that the form is not to be validated during submission.

no-validate 상태는 요소가 제출 버튼이고 formnovalidate 속성을 갖고 있을때, 혹은 폼 소유자가 novalidate 속성을 갖고 있을때 참 입니다. 아니라면 거짓입니다.

The no-validate state of an element is true if the element is a submit button and the element's formnovalidate attribute is present, or if the element's form owner's novalidate attribute is present, and false otherwise.

이 속성은 유효성 검사를 하는 폼 에서 "저장" 버튼을 포함시키려고 할 때 유용할 수 있습니다. 사용자는 폼에 데이터를 완전히 입력하지 않은 상태에서도 하던 일을 마감할수 있습니다. 다음의 예제는 두개의 필수 필드를 포함하는 간단한 폼입니다. 세개의 버튼을 갖고 있는데, 하나는 제출 버튼이며 두개의 필드가 모두 채워져야 합니다. 다른 하나는 폼을 저장하는 버튼이며 사용자가 나중에 방문하여 다시 채워넣을 수 있습니다. 다른 하나는 폼 전체를 취소합니다.

This attribute is useful to include "save" buttons on forms that have validation constraints, to allow users to save their progress even though they haven't fully entered the data in the form. The following example shows a simple form that has two required fields. There are three buttons: one to submit the form, which requires both fields to be filled in; one to save the form so that the user can come back and fill it in later; and one to cancel the form altogether.

<form action="editor.cgi" method="post">
 <p><label>Name: <input required name=fn></label></p>
 <p><label>Essay: <textarea required name=essay></textarea></label></p>
 <p><input type=submit name=submit value="Submit essay"></p>
 <p><input type=submit formnovalidate name=save value="Save essay"></p>
 <p><input type=submit formnovalidate name=cancel value="Cancel"></p>
</form>

The action and target IDL attributes must reflect the respective content attributes of the same name. The method and enctype IDL attributes must reflect the respective content attributes of the same name, limited to only known values. The encoding IDL attribute must reflect the enctype content attribute, limited to only known values. The noValidate IDL attribute must reflect the novalidate content attribute. The formAction IDL attribute must reflect the formaction content attribute. The formEnctype IDL attribute must reflect the formenctype content attribute, limited to only known values. The formMethod IDL attribute must reflect the formmethod content attribute, limited to only known values. The formNoValidate IDL attribute must reflect the formnovalidate content attribute. The formTarget IDL attribute must reflect the formtarget content attribute.

4.10.19.7 요소 방향성 제출

폼 컨트롤의 dirname 속성은 요소의 방향성을 제출하며, 폼 제출시에 이 값을 가졌던 필드의 이름을 함께 제출합니다. 속성을 사용했다면 그 값으로 빈 문자열을 사용할수는 없습니다.

A form control dirname attribute on a form control element enables the submission of the directionality of the element, and gives the name of the field that contains this value during form submission. If such an attribute is specified, its value must not be the empty string.

4.10.20 텍스트 필드 선택을 위한 API

input, textarea 요소는 선택된 부분을 다루기 위해 DOM 인터페이스에 다음의 멤버들을 정의합니다.

The input and textarea elements define the following members in their DOM interfaces for handling their selection:

  void select();
           attribute unsigned long selectionStart;
           attribute unsigned long selectionEnd;
  void setSelectionRange(in unsigned long start, in unsigned long end);

이러한 메서드와 프로퍼티들은 input, textarea의 선택영역을 노출하고, 제어합니다.

These methods and attributes expose and control the selection of input and textarea text fields.

element . select()

텍스트 필드의 모든 것을 선택합니다.

Selects everything in the text field.

element . selectionStart [ = value ]

선택 영역의 시작에 해당하는 오프셋을 반환합니다.

Returns the offset to the start of the selection.

선택 영역의 시작을 바꾸기 위해 사용할 수 있습니다.

Can be set, to change the start of the selection.

element . selectionEnd [ = value ]

선택 영역의 끝에 해당하는 오프셋을 반환합니다.

Returns the offset to the end of the selection.

선택 영역의 끝을 바꾸기 위해 사용할 수 있습니다.

Can be set, to change the end of the selection.

element . setSelectionRange(start, end)

주어진 부분을 포함하도록 선택 영역을 바꿉니다.

Changes the selection to cover the given substring.

When these methods and attributes are used with input elements while they don't apply, they must raise an INVALID_STATE_ERR exception. Otherwise, they must act as described below.

For input elements, these methods and attributes must operate on the element's value. For textarea elements, these methods and attributes must operate on the element's raw value.

The select() method must cause the contents of the text field to be fully selected.

The selectionStart attribute must, on getting, return the offset (in logical order) to the character that immediately follows the start of the selection. If there is no selection, then it must return the offset (in logical order) to the character that immediately follows the text entry cursor.

On setting, it must act as if the setSelectionRange() method had been called, with the new value as the first argument, and the current value of the selectionEnd attribute as the second argument, unless the current value of the selectionEnd is less than the new value, in which case the second argument must also be the new value.

The selectionEnd attribute must, on getting, return the offset (in logical order) to the character that immediately follows the end of the selection. If there is no selection, then it must return the offset (in logical order) to the character that immediately follows the text entry cursor.

On setting, it must act as if the setSelectionRange() method had been called, with the current value of the selectionStart attribute as the first argument, and new value as the second argument.

The setSelectionRange(start, end) method must set the selection of the text field to the sequence of characters starting with the character at the startth position (in logical order) and ending with the character at the (end-1)th position. Arguments greater than the length of the value in the text field must be treated as pointing at the end of the text field. If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end. In UAs where there is no concept of an empty selection, this must set the cursor to be just before the character with offset end.

현재 선택된 텍스트를 얻으려면 다음의 자바스크립트로 충분합니다:

To obtain the currently selected text, the following JavaScript suffices:

var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);

control은 input 또는 textarea 요소입니다.

...where control is the input or textarea element.

시각적으로 렌더링되지 않는 문자들, 예를 들어 U+200D 같은 것도 문자로 간주됩니다. 따라서, 예를 들어, 선택 영역에 보이지 않는 문자들만이 포함될수도 있으며, 커서는 그러한 문자의 바로 옆에 위치할 것입니다.

Characters with no visible rendering, such as U+200D ZERO WIDTH JOINER, still count as characters. Thus, for instance, the selection can include just an invisible character, and the text insertion cursor can be placed to one side or another of such a character.

4.10.21 제약조건

4.10.21.1 정의

A listed form-associated element is a candidate for constraint validation except when a condition has barred the element from constraint validation. (For example, an element is barred from constraint validation if it is an output or fieldset element.)

An element can have a custom validity error message defined. Initially, an element must have its custom validity error message set to the empty string. When its value is not the empty string, the element is suffering from a custom error. It can be set using the setCustomValidity() method. The user agent should use the custom validity error message when alerting the user to the problem with the control.

An element can be constrained in various ways. The following is the list of validity states that a form control can be in, making the control invalid for the purposes of constraint validation. (The definitions below are non-normative; other parts of this specification define more precisely when each state applies or does not.)

Suffering from being missing

When a control has no value but has a required attribute (input required, select required, textarea required).

Suffering from a type mismatch

When a control that allows arbitrary user input has a value that is not in the correct syntax (E-mail, URL).

Suffering from a pattern mismatch

When a control has a value that doesn't satisfy the pattern attribute.

Suffering from being too long

When a control has a value that is too long for the form control maxlength attribute (input maxlength, textarea maxlength).

Suffering from an underflow

When a control has a value that is too low for the min attribute.

Suffering from an overflow

When a control has a value that is too high for the max attribute.

Suffering from a step mismatch

When a control has a value that doesn't fit the rules given by the step attribute.

Suffering from a custom error

When a control's custom validity error message (as set by the element's setCustomValidity() method) is not the empty string.

An element can still suffer from these states even when the element is disabled; thus these states can be represented in the DOM even if validating the form during submission wouldn't indicate a problem to the user.

An element satisfies its constraints if it is not suffering from any of the above validity states.

4.10.21.2 제약조건 검사

When the user agent is required to statically validate the constraints of form element form, it must run the following steps, which return either a positive result (all the controls in the form are valid) or a negative result (there are invalid controls) along with a (possibly empty) list of elements that are invalid and for which no script has claimed responsibility:

  1. Let controls be a list of all the submittable elements whose form owner is form, in tree order.

  2. Let invalid controls be an initially empty list of elements.

  3. For each element field in controls, in tree order, run the following substeps:

    1. If field is not a candidate for constraint validation, then move on to the next element.

    2. Otherwise, if field satisfies its constraints, then move on to the next element.

    3. Otherwise, add field to invalid controls.

  4. If invalid controls is empty, then return a positive result and abort these steps.

  5. Let unhandled invalid controls be an initially empty list of elements.

  6. For each element field in invalid controls, if any, in tree order, run the following substeps:

    1. Fire a simple event named invalid that is cancelable at field.

    2. If the event was not canceled, then add field to unhandled invalid controls.

  7. Return a negative result with the list of elements in the unhandled invalid controls list.

If a user agent is to interactively validate the constraints of form element form, then the user agent must run the following steps:

  1. Statically validate the constraints of form, and let unhandled invalid controls be the list of elements returned if the result was negative.

  2. If the result was positive, then return that result and abort these steps.

  3. Report the problems with the constraints of at least one of the elements given in unhandled invalid controls to the user. User agents may focus one of those elements in the process, by running the focusing steps for that element, and may change the scrolling position of the document, or perform some other action that brings the element to the user's attention. User agents may report more than one constraint violation. User agents may coalesce related constraint violation reports if appropriate (e.g. if multiple radio buttons in a group are marked as required, only one error need be reported). If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.

  4. Return a negative result.

4.10.21.3 제약조건 검사 API
element . willValidate

폼이 제출될 시점에서 유효성 검사를 거칠 것이라면 참을, 아니라면 거짓을 반환합니다.

Returns true if the element will be validated when the form is submitted; false otherwise.

element . setCustomValidity(message)

임의의 에러를 설정하여, 요소가 유효성검사를 통과하지 못하도록 만듭니다. 사용자에게 문제를 보고할 때 message를 보여주게 됩니다.

Sets a custom error, so that the element would fail to validate. The given message is the message to be shown to the user when reporting the problem to the user.

매개변수가 빈 문자열일 경우, 임의의 에러를 삭제합니다.

If the argument is the empty string, clears the custom error.

element . validity . valueMissing

요소가 필수 요소이지만 값을 갖지 않았을 때 참을 반환합니다.

Returns true if the element has no value but is a required field; false otherwise.

element . validity . typeMismatch

요소의 값이 정확한 문법에 따르지 않았을 경우 참을 반환합니다.

Returns true if the element's value is not in the correct syntax; false otherwise.

element . validity . patternMismatch

요소의 값이 주어진 패턴에 일치하지 않을 경우 참을 반환합니다.

Returns true if the element's value doesn't match the provided pattern; false otherwise.

element . validity . tooLong

요소의 값의 길이가 주어진 최대값보다 큰 경우 참을 반환합니다.

Returns true if the element's value is longer than the provided maximum length; false otherwise.

element . validity . rangeUnderflow

요소의 값이 주어진 최소값보다 작을 경우 참을 반환합니다.

Returns true if the element's value is lower than the provided minimum; false otherwise.

element . validity . rangeOverflow

요소의 값이 주어진 최대값보다 클 경우 참을 반환합니다.

Returns true if the element's value is higher than the provided maximum; false otherwise.

element . validity . stepMismatch

요소의 값이 주어진 step 규칙에 맞지 않는 경우 참을 반환합니다.

Returns true if the element's value doesn't fit the rules given by the step attribute; false otherwise.

element . validity . customError

요소의 값이 커스텀 에러를 가진 경우 참을 반환합니다.

Returns true if the element has a custom error; false otherwise.

element . validity . valid

요소의 값이 아무런 유효성 문제를 갖지 않은 경우 참을 반환합니다.

Returns true if the element's value has no validity problems; false otherwise.

valid = element . checkValidity()

요소의 값이 아무런 유효성 문제를 갖지 않은 경우 참을 반환합니다. 그 외의 경우 요소에서 invalid 이벤트를 발생시킵니다.

Returns true if the element's value has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.

element . validationMessage

요소가 유효성 검사에 걸렸다면 사용자에게 보여졌을 메세지를 반환합니다.

Returns the error message that would be shown to the user if the element was to be checked for validity.

The willValidate attribute must return true if an element is a candidate for constraint validation, and false otherwise (i.e. false if any conditions are barring it from constraint validation).

The setCustomValidity(message), when invoked, must set the custom validity error message to the value of the given message argument.

다음의 예제에서는 폼 컨트롤이 수정될때마다 스크립트가 그 값을 체크하며, 값이 올바르지 않을 경우 적합한 메시지를 설정하기 위해 setCustomValidity() 메서드를 사용합니다.

In the following example, a script checks the value of a form control each time it is edited, and whenever it is not a valid value, uses the setCustomValidity() method to set an appropriate message.

<label>Feeling: <input name=f type="text" oninput="check(this)"></label>
<script>
 function check(input) {
   if (input.value == "good" ||
       input.value == "fine" ||
       input.value == "tired") {
     input.setCustomValidity('"' + input.value + '" is not a feeling.');
   } else {
     // input is fine -- reset the error message
     input.setCustomValidity('');
   }
 }
</script>

The validity attribute must return a ValidityState object that represents the validity states of the element. This object is live, and the same object must be returned each time the element's validity attribute is retrieved.

interface ValidityState {
  readonly attribute boolean valueMissing;
  readonly attribute boolean typeMismatch;
  readonly attribute boolean patternMismatch;
  readonly attribute boolean tooLong;
  readonly attribute boolean rangeUnderflow;
  readonly attribute boolean rangeOverflow;
  readonly attribute boolean stepMismatch;
  readonly attribute boolean customError;
  readonly attribute boolean valid;
};

A ValidityState object has the following attributes. On getting, they must return true if the corresponding condition given in the following list is true, and false otherwise.

valueMissing

The control is suffering from being missing.

typeMismatch

The control is suffering from a type mismatch.

patternMismatch

The control is suffering from a pattern mismatch.

tooLong

The control is suffering from being too long.

rangeUnderflow

The control is suffering from an underflow.

rangeOverflow

The control is suffering from an overflow.

stepMismatch

The control is suffering from a step mismatch.

customError

The control is suffering from a custom error.

valid

None of the other conditions are true.

When the checkValidity() method is invoked, if the element is a candidate for constraint validation and does not satisfy its constraints, the user agent must fire a simple event named invalid that is cancelable (but in this case has no default action) at the element and return false. Otherwise, it must only return true without doing anything else.

The validationMessage attribute must return the empty string if the element is not a candidate for constraint validation or if it is one but it satisfies its constraints; otherwise, it must return a suitably localized message that the user agent would show the user if this were the only form control with a validity constraint problem. If the user agent would not actually show a textual message in such a situation (e.g. it would show a graphical cue instead), then the attribute must return a suitably localized message that expresses (one or more of) the validity constraint(s) that the control does not satisfy. If the element is a candidate for constraint validation and is suffering from a custom error, then the custom validity error message should be present in the return value.

4.10.21.4 보안

서버는 클라이언트 사이드 유효성검사에 의존해서는 안됩니다. 클라이언트 사이드 유효성 검사는 악의적인 사용자에 의해 쉽게 우회될 수 있으며, 구형 사용자 에이전트 또는 이러한 기능을 지원하지 않는 자동화 도구에 의해 의도되지 않은 상태에서 건너뛸 수 있습니다. 유효성 검사는 사용자 경험을 개선할 목적만을 가지고 있으며, 어떠한 보안 메카니즘도 가지고 있지 않습니다.

Servers should not rely on client-side validation. Client-side validation can be intentionally bypassed by hostile users, and unintentionally bypassed by users of older user agents or automated tools that do not implement these features. The constraint validation features are only intended to improve the user experience, not to provide any kind of security mechanism.

4.10.22 폼 제출

4.10.22.1 소개

This section is non-normative.

폼이 제출될 때, 폼에 포함되어 있던 데이터는 enctype에 따라 폼으로 변환되며 method에 따라 action으로 전송되어집니다.

When a form is submitted, the data in the form is converted into the structure specified by the enctype, and then sent to the destination specified by the action using the given method.

예를 들어, 다음의 폼은:

For example, take the following form:

<form action="/find.cgi" method=get>
 <input type=text name=t>
 <input type=search name=q>
 <input type=submit>
</form>

만약 사용자가 첫번째 필드에 cats, 그리고 두번째 필드에 fur 라고 입력하고 제출 버튼을 눌렀다면, 사용자 에이전트는 /find.cgi?t=cats&q=fur를 로드할 것입니다.

If the user types in "cats" in the first field and "fur" in the second, and then hits the submit button, then the user agent will load /find.cgi?t=cats&q=fur.

반대로, 이 폼을 고려해봅시다.

On the other hand, consider this form:

<form action="/find.cgi" method=post enctype="multipart/form-data">
 <input type=text name=t>
 <input type=search name=q>
 <input type=submit>
</form>

같은 사용자 입력이 있었을 때, 제출의 결과는 사뭇 다릅니다. 사용자 에이전트는 주어진 URL로 HTTP POST 를 보내고, 그 본문은 다음과 같은 텍스트로 구성될 것입니다.

Given the same user input, the result on submission is quite different: the user agent instead does an HTTP POST to the given URL, with as the entity body something like the following text:

------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="t"
 
cats
------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="q"
 
fur
------kYFrd4jNJEgCervE--
4.10.22.2 암시적인 제출

User agents may establish a button in each form as being the form's default button. This should be the first submit button in tree order whose form owner is that form element, but user agents may pick another button if another would be more appropriate for the platform. If the platform supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so must cause the form's default button's activation behavior, if any, to be run.

Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behavior when disabled.)

If the form has no submit button, then the implicit submission mechanism must just submit the form element from the form element itself.

4.10.22.3 폼 제출 알고리즘

ISSUE-138 (mutate-action) blocks progress to Last Call

When a form element form is submitted from an element submitter (typically a button), optionally with a scripted-submit flag set, the user agent must run the following steps:

  1. Let form document be the form's Document.

  2. If form document has no associated browsing context or its browsing context had its sandboxed forms browsing context flag set when the Document was created, then abort these steps without doing anything.

  3. Let form browsing context be the browsing context of form document.

  4. If form is already being submitted (i.e. the form was submitted again while processing the events fired from the next two steps, probably from a script redundantly calling the submit() method on form), then abort these steps. This doesn't affect the earlier instance of this algorithm.

  5. If the scripted-submit flag is not set, and the submitter element's no-validate state is false, then interactively validate the constraints of form and examine the result: if the result is negative (the constraint validation concluded that there were invalid fields and probably informed the user of this) then abort these steps.

  6. If the scripted-submit flag is not set, then fire a simple event that is cancelable named submit, at form. If the event's default action is prevented (i.e. if the event is canceled) then abort these steps. Otherwise, continue (effectively the default action is to perform the submission).

  7. Let controls be a list of all the submittable elements whose form owner is form, in tree order.

  8. Let the form data set be a list of name-value-type tuples, initially empty.

  9. Constructing the form data set. For each element field in controls, in tree order, run the following substeps:

    1. If any of the following conditions are met, then skip these substeps for this element:

      • The field element has a datalist element ancestor.
      • The field element is disabled.
      • The field element is a button but it is not submitter.
      • The field element is an input element whose type attribute is in the Checkbox state and whose checkedness is false.
      • The field element is an input element whose type attribute is in the Radio Button state and whose checkedness is false.
      • The field element is not an input element whose type attribute is in the Image Button state, and either the field element does not have a name attribute specified, or its name attribute's value is the empty string.
      • The field element is an object element that is not using a plugin.

      Otherwise, process field as follows:

    2. Let type be the value of the type IDL attribute of field.

    3. If the field element is an input element whose type attribute is in the Image Button state, then run these further nested substeps:

      1. If the field element has a name attribute specified and value is not the empty string, let name be that value followed by a single U+002E FULL STOP character (.). Otherwise, let name be the empty string.

      2. Let namex be the string consisting of the concatenation of name and a single U+0078 LATIN SMALL LETTER X character (x).

      3. Let namey be the string consisting of the concatenation of name and a single U+0079 LATIN SMALL LETTER Y character (y).

      4. The field element is submitter, and before this algorithm was invoked the user indicated a coordinate. Let x be the x-component of the coordinate selected by the user, and let y be the y-component of the coordinate selected by the user.

      5. Append an entry to the form data set with the name namex, the value x, and the type type.

      6. Append an entry to the form data set with the name namey and the value y, and the type type.

      7. Skip the remaining substeps for this element: if there are any more elements in controls, return to the top of the constructing the form data set step, otherwise, jump to the next step in the overall form submission algorithm.

    4. Let name be the value of the field element's name attribute.

    5. If the field element is a select element, then for each option element in the select element whose selectedness is true, append an entry to the form data set with the name as the name, the value of the option element as the value, and type as the type.

    6. Otherwise, if the field element is an input element whose type attribute is in the Checkbox state or the Radio Button state, then run these further nested substeps:

      1. If the field element has a value attribute specified, then let value be the value of that attribute; otherwise, let value be the string "on".

      2. Append an entry to the form data set with name as the name, value as the value, and type as the type.

    7. Otherwise, if the field element is an input element whose type attribute is in the File Upload state, then for each file selected in the input element, append an entry to the form data set with the name as the name, the file (consisting of the name, the type, and the body) as the value, and type as the type. If there are no selected files, then append an entry to the form data set with the name as the name, the empty string as the value, and application/octet-stream as the type.

    8. Otherwise, if the field element is an object element: try to obtain a form submission value from the plugin, and if that is successful, append an entry to the form data set with name as the name, the returned form submission value as the value, and the string "object" as the type.

    9. Otherwise, append an entry to the form data set with name as the name, the value of the field element as the value, and type as the type.

    10. If the element has a form control dirname attribute, and that attribute's value is not the empty string, then run these substeps:

      1. Let dirname be the value of the element's dirname attribute.

      2. Let dir be the string "ltr" if the directionality of the element is 'ltr', and "rtl" otherwise (i.e. when the directionality of the element is 'rtl').

      3. Append an entry to the form data set with dirname as the name, dir as the value, and the string "direction" as the type.

      An element can only have a form control dirname attribute if it is a textarea element or an input element whose type attribute is in either the Text state or the Search state.

  10. Let action be the submitter element's action.

  11. If action is the empty string, let action be the document's address of the form document.

    This step is a willful violation of RFC 3986, which would require base URL processing here. This violation is motivated by a desire for compatibility with legacy content. [RFC3986]

  12. Resolve the URL action, relative to the submitter element. If this fails, abort these steps. Otherwise, let action be the resulting absolute URL.

  13. Let scheme be the <scheme> of the resulting absolute URL.

  14. Let enctype be the submitter element's enctype.

  15. Let method be the submitter element's method.

  16. Let target be the submitter element's target.

  17. If the user indicated a specific browsing context to use when submitting the form, then let target browsing context be that browsing context. Otherwise, apply the rules for choosing a browsing context given a browsing context name using target as the name and form browsing context as the context in which the algorithm is executed, and let target browsing context be the resulting browsing context.

  18. If target browsing context was created in the previous step, or if the form document has not yet completely loaded, then let replace be true. Otherwise, let it be false.

  19. Select the appropriate row in the table below based on the value of scheme as given by the first cell of each row. Then, select the appropriate cell on that row based on the value of method as given in the first cell of each column. Then, jump to the steps named in that cell and defined below the table.

    GET POST
    http Mutate action Submit as entity body
    https Mutate action Submit as entity body
    ftp Get action Get action
    javascript Get action Get action
    data Get action Post to data:
    mailto Mail with headers Mail as body

    If scheme is not one of those listed in this table, then the behavior is not defined by this specification. User agents should, in the absence of another specification defining this, act in a manner analogous to that defined in this specification for similar schemes.

    The behaviors are as follows:

    Mutate action

    Let query be the result of encoding the form data set using the application/x-www-form-urlencoded encoding algorithm, interpreted as a US-ASCII string.

    Let destination be a new URL that is equal to the action except that its <query> component is replaced by query (adding a U+003F QUESTION MARK character (?) if appropriate).

    Navigate target browsing context to destination. If replace is true, then target browsing context must be navigated with replacement enabled.

    Submit as entity body

    Let entity body be the result of encoding the form data set using the appropriate form encoding algorithm.

    Let MIME type be determined as follows:

    If enctype is application/x-www-form-urlencoded
    Let MIME type be "application/x-www-form-urlencoded".
    If enctype is multipart/form-data
    Let MIME type be "multipart/form-data".
    If enctype is text/plain
    Let MIME type be "text/plain".

    Otherwise, navigate target browsing context to action using the HTTP method given by method and with entity body as the entity body, of type MIME type. If replace is true, then target browsing context must be navigated with replacement enabled.

    Get action

    Navigate target browsing context to action. If replace is true, then target browsing context must be navigated with replacement enabled.

    Post to data:

    Let data be the result of encoding the form data set using the appropriate form encoding algorithm.

    If action contains the string "%%%%" (four U+0025 PERCENT SIGN characters), then %-escape all bytes in data that, if interpreted as US-ASCII, do not match the unreserved production in the URI Generic Syntax, and then, treating the result as a US-ASCII string, further %-escape all the U+0025 PERCENT SIGN characters in the resulting string and replace the first occurrence of "%%%%" in action with the resulting double-escaped string. [RFC3986]

    Otherwise, if action contains the string "%%" (two U+0025 PERCENT SIGN characters in a row, but not four), then %-escape all characters in data that, if interpreted as US-ASCII, do not match the unreserved production in the URI Generic Syntax, and then, treating the result as a US-ASCII string, replace the first occurrence of "%%" in action with the resulting escaped string. [RFC3986]

    Navigate target browsing context to the potentially modified action (which will be a data: URL). If replace is true, then target browsing context must be navigated with replacement enabled.

    Mail with headers

    Let headers be the resulting encoding the form data set using the application/x-www-form-urlencoded encoding algorithm, interpreted as a US-ASCII string.

    Replace occurrences of U+002B PLUS SIGN characters (+) in headers with the string "%20".

    Let destination consist of all the characters from the first character in action to the character immediately before the first U+003F QUESTION MARK character (?), if any, or the end of the string if there are none.

    Append a single U+003F QUESTION MARK character (?) to destination.

    Append headers to destination.

    Navigate target browsing context to destination. If replace is true, then target browsing context must be navigated with replacement enabled.

    Mail as body

    Let body be the resulting encoding the form data set using the appropriate form encoding algorithm and then %-escaping all the bytes in the resulting byte string that, when interpreted as US-ASCII, do not match the unreserved production in the URI Generic Syntax. [RFC3986]

    Let destination have the same value as action.

    If destination does not contain a U+003F QUESTION MARK character (?), append a single U+003F QUESTION MARK character (?) to destination. Otherwise, append a single U+0026 AMPERSAND character (&).

    Append the string "body=" to destination.

    Append body, interpreted as a US-ASCII string, to destination.

    Navigate target browsing context to destination. If replace is true, then target browsing context must be navigated with replacement enabled.

    The appropriate form encoding algorithm is determined as follows:

    If enctype is application/x-www-form-urlencoded
    Use the application/x-www-form-urlencoded encoding algorithm.
    If enctype is multipart/form-data
    Use the multipart/form-data encoding algorithm.
    If enctype is text/plain
    Use the text/plain encoding algorithm.
4.10.22.4 URL로 인코드된 폼 데이터

The application/x-www-form-urlencoded encoding algorithm is as follows:

  1. Let result be the empty string.

  2. If the form element has an accept-charset attribute, then, taking into account the characters found in the form data set's names and values, and the character encodings supported by the user agent, select a character encoding from the list given in the form's accept-charset attribute that is an ASCII-compatible character encoding. If none of the encodings are supported, or if none are listed, then let the selected character encoding be UTF-8.

    Otherwise, if the document's character encoding is an ASCII-compatible character encoding, then that is the selected character encoding.

    Otherwise, let the selected character encoding be UTF-8.

  3. Let charset be the preferred MIME name of the selected character encoding.

  4. For each entry in the form data set, perform these substeps:

    1. If the entry's name is "_charset_" and its type is "hidden", replace its value with charset.

    2. If the entry's type is "file", replace its value with the file's filename only.

    3. For each character in the entry's name and value that cannot be expressed using the selected character encoding, replace the character by a string consisting of a U+0026 AMPERSAND character (&), a U+0023 NUMBER SIGN character (#), one or more characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9) representing the Unicode code point of the character in base ten, and finally a U+003B SEMICOLON character (;).

    4. For each character in the entry's name and value, apply the appropriate subsubsteps from the following list:

      The character is a U+0020 SPACE character
      Replace the character with a single U+002B PLUS SIGN character (+).
      If the character isn't in the range U+0020, U+002A, U+002D, U+002E, U+0030 to U+0039, U+0041 to U+005A, U+005F, U+0061 to U+007A

      Replace the character with a string formed as follows:

      1. Let s be an empty string.

      2. For each byte b of the character when expressed in the selected character encoding in turn, run the appropriate subsubsubstep from the list below:

        If the byte is in the range 0x20, 0x2A, 0x2D, 0x2E, 0x30 to 0x39, 0x41 to 0x5A, 0x5F, 0x61 to 0x7A

        Append to s the Unicode character with the codepoint equal to the byte.

        Otherwise

        Append to the string a U+0025 PERCENT SIGN character (%) followed by two characters in the ranges U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9) and U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F representing the hexadecimal value of the byte (zero-padded if necessary).

      Otherwise

      Leave the character as is.

    5. If the entry's name is "isindex", its type is "text", and this is the first entry in the form data set, then append the value to result and skip the rest of the substeps for this entry, moving on to the next entry, if any, or the next step in the overall algorithm otherwise.

    6. If this is not the first entry, append a single U+0026 AMPERSAND character (&) to result.

    7. Append the entry's name to result.

    8. Append a single U+003D EQUALS SIGN character (=) to result.

    9. Append the entry's value to result.

  5. Encode result as US-ASCII and return the resulting byte stream.

4.10.22.5 멀티파트 폼 데이터

The multipart/form-data encoding algorithm is as follows:

  1. Let result be the empty string.

  2. If the form element has an accept-charset attribute, then, taking into account the characters found in the form data set's names and values, and the character encodings supported by the user agent, select a character encoding from the list given in the form's accept-charset attribute that is an ASCII-compatible character encoding. If none of the encodings are supported, or if none are listed, then let the selected character encoding be UTF-8.

    Otherwise, if the document's character encoding is an ASCII-compatible character encoding, then that is the selected character encoding.

    Otherwise, let the selected character encoding be UTF-8.

  3. Let charset be the preferred MIME name of the selected character encoding.

  4. For each entry in the form data set, perform these substeps:

    1. If the entry's name is "_charset_" and its type is "hidden", replace its value with charset.

    2. For each character in the entry's name and value that cannot be expressed using the selected character encoding, replace the character by a string consisting of a U+0026 AMPERSAND character (&), a U+0023 NUMBER SIGN character (#), one or more characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9) representing the Unicode code point of the character in base ten, and finally a U+003B SEMICOLON character (;).

  5. Encode the (now mutated) form data set using the rules described by RFC 2388, Returning Values from Forms: multipart/form-data, and return the resulting byte stream. [RFC2388]

    Each entry in the form data set is a field, the name of the entry is the field name and the value of the entry is the field value.

    The order of parts must be the same as the order of fields in the form data set. Multiple entries with the same name must be treated as distinct fields.

    The parts of the generated multipart/form-data resource that correspond to non-file fields must not have a Content-Type header specified. Their names and values must be encoded using the character encoding selected above (field names in particular do not get converted to a 7-bit safe encoding as suggested in RFC 2388).

4.10.22.6 단순 텍스트 폼 데이터

The text/plain encoding algorithm is as follows:

  1. Let result be the empty string.

  2. If the form element has an accept-charset attribute, then, taking into account the characters found in the form data set's names and values, and the character encodings supported by the user agent, select a character encoding from the list given in the form's accept-charset attribute. If none of the encodings are supported, or if none are listed, then let the selected character encoding be UTF-8.

    Otherwise, the selected character encoding is the document's character encoding.

  3. Let charset be the preferred MIME name of the selected character encoding.

  4. If the entry's name is "_charset_" and its type is "hidden", replace its value with charset.

  5. If the entry's type is "file", replace its value with the file's filename only.

  6. For each entry in the form data set, perform these substeps:

    1. Append the entry's name to result.

    2. Append a single U+003D EQUALS SIGN character (=) to result.

    3. Append the entry's value to result.

    4. Append a U+000D CARRIAGE RETURN (CR) U+000A LINE FEED (LF) character pair to result.

  7. Encode result using the selected character encoding and return the resulting byte stream.

4.10.23 폼 리셋

When a form element form is reset, the user agent must fire a simple event named reset, that is cancelable, at form, and then, if that event is not canceled, must invoke the reset algorithm of each resettable element whose form owner is form, and broadcast formchange events from form.

Each resettable element defines its own reset algorithm. Changes made to form controls as part of these algorithms do not count as changes caused by the user (and thus, e.g., do not cause input events to fire).

4.10.24 이벤트 전달

When the user agent is to broadcast forminput events or broadcast formchange events from a form element form, it must run the following steps:

  1. Let controls be a list of all the resettable elements whose form owner is form.

  2. If the user agent was to broadcast forminput events, let event name be forminput. Otherwise the user agent was to broadcast formchange events; let event name be formchange.
  3. For each element in controls, in tree order, fire a simple event named event name at the element.