CINXE.COM

<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=/link-fixup.js defer=""></script><meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=https://resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=https://resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=https://resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=/styles.css crossorigin=""><script> function toggleStatus(div) { div.parentNode.classList.toggle('wrapped'); } function setLinkFragment(link) { link.hash = location.hash; } </script><body> <script defer="" crossorigin="" src=/html-dfn.js></script> <header id=head class="head with-buttons"> <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a> <hgroup><h1 class=allcaps>HTML</h1>Living Standard — Last Updated 17 February 2025</hgroup> </header> <nav><a href=form-elements.html>← 4.10.6 The button element</a> — <a href=./>Table of Contents</a> — <a href=interactive-elements.html>4.11 Interactive elements →</a></nav><ol class=toc><li id=toc-semantics><ol><li><ol><li><a href=form-control-infrastructure.html#form-control-infrastructure>4.10.17 Form control infrastructure</a><ol><li><a href="form-control-infrastructure.html#a-form-control's-value">4.10.17.1 A form control's value</a><li><a href=form-control-infrastructure.html#mutability>4.10.17.2 Mutability</a><li><a href=form-control-infrastructure.html#association-of-controls-and-forms>4.10.17.3 Association of controls and forms</a></ol><li><a href=form-control-infrastructure.html#attributes-common-to-form-controls>4.10.18 Attributes common to form controls</a><ol><li><a href=form-control-infrastructure.html#naming-form-controls:-the-name-attribute>4.10.18.1 Naming form controls: the <code>name</code> attribute</a><li><a href=form-control-infrastructure.html#submitting-element-directionality:-the-dirname-attribute>4.10.18.2 Submitting element directionality: the <code>dirname</code> attribute</a><li><a href=form-control-infrastructure.html#limiting-user-input-length:-the-maxlength-attribute>4.10.18.3 Limiting user input length: the <code>maxlength</code> attribute</a><li><a href=form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute>4.10.18.4 Setting minimum input length requirements: the <code>minlength</code> attribute</a><li><a href=form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute>4.10.18.5 Enabling and disabling form controls: the <code>disabled</code> attribute</a><li><a href=form-control-infrastructure.html#form-submission-attributes>4.10.18.6 Form submission attributes</a><li><a href=form-control-infrastructure.html#autofill>4.10.18.7 Autofill</a><ol><li><a href=form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute>4.10.18.7.1 Autofilling form controls: the <code>autocomplete</code> attribute</a><li><a href=form-control-infrastructure.html#autofill-processing-model>4.10.18.7.2 Processing model</a></ol></ol><li><a href=form-control-infrastructure.html#textFieldSelection>4.10.19 APIs for the text control selections</a><li><a href=form-control-infrastructure.html#constraints>4.10.20 Constraints</a><ol><li><a href=form-control-infrastructure.html#definitions>4.10.20.1 Definitions</a><li><a href=form-control-infrastructure.html#constraint-validation>4.10.20.2 Constraint validation</a><li><a href=form-control-infrastructure.html#the-constraint-validation-api>4.10.20.3 The constraint validation API</a><li><a href=form-control-infrastructure.html#security-forms>4.10.20.4 Security</a></ol><li><a href=form-control-infrastructure.html#form-submission-2>4.10.21 Form submission</a><ol><li><a href=form-control-infrastructure.html#introduction-5>4.10.21.1 Introduction</a><li><a href=form-control-infrastructure.html#implicit-submission>4.10.21.2 Implicit submission</a><li><a href=form-control-infrastructure.html#form-submission-algorithm>4.10.21.3 Form submission algorithm</a><li><a href=form-control-infrastructure.html#constructing-form-data-set>4.10.21.4 Constructing the entry list</a><li><a href=form-control-infrastructure.html#selecting-a-form-submission-encoding>4.10.21.5 Selecting a form submission encoding</a><li><a href=form-control-infrastructure.html#converting-an-entry-list-to-a-list-of-name-value-pairs>4.10.21.6 Converting an entry list to a list of name-value pairs</a><li><a href=form-control-infrastructure.html#url-encoded-form-data>4.10.21.7 URL-encoded form data</a><li><a href=form-control-infrastructure.html#multipart-form-data>4.10.21.8 Multipart form data</a><li><a href=form-control-infrastructure.html#plain-text-form-data>4.10.21.9 Plain text form data</a><li><a href=form-control-infrastructure.html#the-submitevent-interface>4.10.21.10 The <code>SubmitEvent</code> interface</a><li><a href=form-control-infrastructure.html#the-formdataevent-interface>4.10.21.11 The <code>FormDataEvent</code> interface</a></ol><li><a href=form-control-infrastructure.html#resetting-a-form>4.10.22 Resetting a form</a></ol></ol></ol><h4 id=form-control-infrastructure>4.10.17 Form control infrastructure<a href=#form-control-infrastructure class=self-link></a></h4> <h5 id="a-form-control's-value">4.10.17.1 A form control's value<a href="#a-form-control's-value" class=self-link></a></h5> Most form controls have a <dfn id=concept-fe-value>value</dfn> and a <dfn id=concept-fe-checked>checkedness</dfn>. (The latter is only used by <code id="a-form-control's-value:the-input-element"><a href=input.html#the-input-element>input</a></code> elements.) These are used to describe how the user interacts with the control. A control's <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value">value</a> is its internal state. As such, it might not match the user's current input. For instance, if a user enters the word "<kbd>three</kbd>" into <a href="input.html#number-state-(type=number)" id="a-form-control's-value:number-state-(type=number)">a numeric field</a> that expects digits, the user's input would be the string "three" but the control's <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-2">value</a> would remain unchanged. Or, if a user enters the email address "<kbd> awesome@example.com</kbd>" (with leading whitespace) into <a href="input.html#email-state-(type=email)" id="a-form-control's-value:email-state-(type=email)">an email field</a>, the user's input would be the string " awesome@example.com" but the browser's UI for email fields might translate that into a <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-3">value</a> of "<code>awesome@example.com</code>" (without the leading whitespace). <code id="a-form-control's-value:the-input-element-2"><a href=input.html#the-input-element>input</a></code> and <code id="a-form-control's-value:the-textarea-element"><a href=form-elements.html#the-textarea-element>textarea</a></code> elements have a <dfn id=concept-fe-dirty>dirty value flag</dfn>. This is used to track the interaction between the <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-4">value</a> and default value. If it is false, <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-5">value</a> mirrors the default value. If it is true, the default value is ignored. <code id="a-form-control's-value:the-input-element-3"><a href=input.html#the-input-element>input</a></code>, <code id="a-form-control's-value:the-textarea-element-2"><a href=form-elements.html#the-textarea-element>textarea</a></code>, and <code id="a-form-control's-value:the-select-element"><a href=form-elements.html#the-select-element>select</a></code> elements have a <dfn id=user-validity>user validity</dfn> boolean. It is initially set to false. To define the behavior of constraint validation in the face of the <code id="a-form-control's-value:the-input-element-4"><a href=input.html#the-input-element>input</a></code> element's <code id="a-form-control's-value:attr-input-multiple"><a href=input.html#attr-input-multiple>multiple</a></code> attribute, <code id="a-form-control's-value:the-input-element-5"><a href=input.html#the-input-element>input</a></code> elements can also have separately defined <dfn id=concept-fe-values>values</dfn>. To define the behavior of the <code id="a-form-control's-value:attr-fe-maxlength"><a href=#attr-fe-maxlength>maxlength</a></code> and <code id="a-form-control's-value:attr-fe-minlength"><a href=#attr-fe-minlength>minlength</a></code> attributes, as well as other APIs specific to the <code id="a-form-control's-value:the-textarea-element-3"><a href=form-elements.html#the-textarea-element>textarea</a></code> element, all form control with a <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-6">value</a> also have an algorithm for obtaining an <dfn id=concept-fe-api-value>API value</dfn>. By default this algorithm is to simply return the control's <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-7">value</a>. The <code id="a-form-control's-value:the-select-element-2"><a href=form-elements.html#the-select-element>select</a></code> element does not have a <a href=#concept-fe-value id="a-form-control's-value:concept-fe-value-8">value</a>; the <a href=form-elements.html#concept-option-selectedness id="a-form-control's-value:concept-option-selectedness">selectedness</a> of its <code id="a-form-control's-value:the-option-element"><a href=form-elements.html#the-option-element>option</a></code> elements is what is used instead. <h5 id=mutability>4.10.17.2 Mutability<a href=#mutability class=self-link></a></h5> A form control can be designated as <dfn id=concept-fe-mutable>mutable</dfn>. This determines (by means of definitions and requirements in this specification that rely on whether an element is so designated) whether or not the user can modify the <a href=#concept-fe-value id=mutability:concept-fe-value>value</a> or <a href=#concept-fe-checked id=mutability:concept-fe-checked>checkedness</a> of a form control, or whether or not a control can be automatically prefilled. <h5 id=association-of-controls-and-forms>4.10.17.3 Association of controls and forms<a href=#association-of-controls-and-forms class=self-link></a></h5> A <a id=association-of-controls-and-forms:form-associated-element href=forms.html#form-associated-element>form-associated element</a> can have a relationship with a <code id=association-of-controls-and-forms:the-form-element><a href=forms.html#the-form-element>form</a></code> element, which is called the element's <dfn data-dfn-for="button,fieldset,input,object,output,select,textarea,img,form-associated custom element" id=form-owner data-export="">form owner</dfn>. If a <a id=association-of-controls-and-forms:form-associated-element-2 href=forms.html#form-associated-element>form-associated element</a> is not associated with a <code id=association-of-controls-and-forms:the-form-element-2><a href=forms.html#the-form-element>form</a></code> element, its <a href=#form-owner id=association-of-controls-and-forms:form-owner>form owner</a> is said to be null. A <a id=association-of-controls-and-forms:form-associated-element-3 href=forms.html#form-associated-element>form-associated element</a> has an associated <dfn id=parser-inserted-flag>parser inserted flag</dfn>. <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#form</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#attr-form title="Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.">Attributes#attr-form</a>Support in all current engines.<div class=support>Firefox1+Safari≤4+Chrome1+<hr>Opera≤12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer≤6+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android≤12.1+</div></div></div>A <a id=association-of-controls-and-forms:form-associated-element-4 href=forms.html#form-associated-element>form-associated element</a> is, by default, associated with its nearest ancestor <code id=association-of-controls-and-forms:the-form-element-3><a href=forms.html#the-form-element>form</a></code> element (as described below), but, if it is <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed>listed</a>, may have a <dfn data-dfn-for=button,fieldset,input,object,output,select,textarea id=attr-fae-form data-dfn-type=element-attr><code>form</code></dfn> attribute specified to override this. This feature allows authors to work around the lack of support for nested <code id=association-of-controls-and-forms:the-form-element-4><a href=forms.html#the-form-element>form</a></code> elements. If a <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-2>listed</a> <a id=association-of-controls-and-forms:form-associated-element-5 href=forms.html#form-associated-element>form-associated element</a> has a <code id=association-of-controls-and-forms:attr-fae-form><a href=#attr-fae-form>form</a></code> attribute specified, then that attribute's value must be the <a href=https://dom.spec.whatwg.org/#concept-id id=association-of-controls-and-forms:concept-id data-x-internal=concept-id>ID</a> of a <code id=association-of-controls-and-forms:the-form-element-5><a href=forms.html#the-form-element>form</a></code> element in the element's <a id=association-of-controls-and-forms:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>. The rules in this section are complicated by the fact that although conforming documents or <a href=https://dom.spec.whatwg.org/#concept-tree id=association-of-controls-and-forms:tree-2 data-x-internal=tree>trees</a> will never contain nested <code id=association-of-controls-and-forms:the-form-element-6><a href=forms.html#the-form-element>form</a></code> elements, it is quite possible (e.g., using a script that performs DOM manipulation) to generate <a href=https://dom.spec.whatwg.org/#concept-tree id=association-of-controls-and-forms:tree-3 data-x-internal=tree>trees</a> that have such nested elements. They are also complicated by rules in the HTML parser that, for historical reasons, can result in a <a id=association-of-controls-and-forms:form-associated-element-6 href=forms.html#form-associated-element>form-associated element</a> being associated with a <code id=association-of-controls-and-forms:the-form-element-7><a href=forms.html#the-form-element>form</a></code> element that is not its ancestor. When a <a id=association-of-controls-and-forms:form-associated-element-7 href=forms.html#form-associated-element>form-associated element</a> is created, its <a href=#form-owner id=association-of-controls-and-forms:form-owner-2>form owner</a> must be initialized to null (no owner). When a <a id=association-of-controls-and-forms:form-associated-element-8 href=forms.html#form-associated-element>form-associated element</a> is to be <dfn id=concept-form-association>associated</dfn> with a form, its <a href=#form-owner id=association-of-controls-and-forms:form-owner-3>form owner</a> must be set to that form. When a <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-3>listed</a> <a id=association-of-controls-and-forms:form-associated-element-9 href=forms.html#form-associated-element>form-associated element</a>'s <code id=association-of-controls-and-forms:attr-fae-form-2><a href=#attr-fae-form>form</a></code> attribute is set, changed, or removed, then the user agent must <a href=#reset-the-form-owner id=association-of-controls-and-forms:reset-the-form-owner>reset the form owner</a> of that element. When a <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-4>listed</a> <a id=association-of-controls-and-forms:form-associated-element-10 href=forms.html#form-associated-element>form-associated element</a> has a <code id=association-of-controls-and-forms:attr-fae-form-3><a href=#attr-fae-form>form</a></code> attribute and the <a href=https://dom.spec.whatwg.org/#concept-id id=association-of-controls-and-forms:concept-id-2 data-x-internal=concept-id>ID</a> of any of the elements in the <a id=association-of-controls-and-forms:tree-4 href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a> changes, then the user agent must <a href=#reset-the-form-owner id=association-of-controls-and-forms:reset-the-form-owner-2>reset the form owner</a> of that <a id=association-of-controls-and-forms:form-associated-element-11 href=forms.html#form-associated-element>form-associated element</a>. When a <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-5>listed</a> <a id=association-of-controls-and-forms:form-associated-element-12 href=forms.html#form-associated-element>form-associated element</a> has a <code id=association-of-controls-and-forms:attr-fae-form-4><a href=#attr-fae-form>form</a></code> attribute and an element with an <a href=https://dom.spec.whatwg.org/#concept-id id=association-of-controls-and-forms:concept-id-3 data-x-internal=concept-id>ID</a> is <a href=infrastructure.html#insert-an-element-into-a-document id=association-of-controls-and-forms:insert-an-element-into-a-document>inserted into</a> or <a href=infrastructure.html#remove-an-element-from-a-document id=association-of-controls-and-forms:remove-an-element-from-a-document>removed from</a> the <code id=association-of-controls-and-forms:document><a href=dom.html#document>Document</a></code>, then the user agent must <a href=#reset-the-form-owner id=association-of-controls-and-forms:reset-the-form-owner-3>reset the form owner</a> of that <a id=association-of-controls-and-forms:form-associated-element-13 href=forms.html#form-associated-element>form-associated element</a>. The form owner is also reset by the HTML Standard's <a href=https://dom.spec.whatwg.org/#concept-node-insert-ext id=association-of-controls-and-forms:concept-node-insert-ext data-x-internal=concept-node-insert-ext>insertion steps</a> and <a href=https://dom.spec.whatwg.org/#concept-node-remove-ext id=association-of-controls-and-forms:concept-node-remove-ext data-x-internal=concept-node-remove-ext>removing steps</a>. To <dfn id=reset-the-form-owner>reset the form owner</dfn> of a <a id=association-of-controls-and-forms:form-associated-element-14 href=forms.html#form-associated-element>form-associated element</a> <var>element</var>: <ol><li>Unset <var>element</var>'s <a href=#parser-inserted-flag id=association-of-controls-and-forms:parser-inserted-flag>parser inserted flag</a>.<li> If all of the following are true: <ul><li><var>element</var>'s <a href=#form-owner id=association-of-controls-and-forms:form-owner-4>form owner</a> is not null;<li><var>element</var> is not <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-6>listed</a> or its <code id=association-of-controls-and-forms:attr-fae-form-5><a href=#attr-fae-form>form</a></code> content attribute is not present; and<li><var>element</var>'s <a href=#form-owner id=association-of-controls-and-forms:form-owner-5>form owner</a> is its nearest <code id=association-of-controls-and-forms:the-form-element-8><a href=forms.html#the-form-element>form</a></code> element ancestor after the change to the ancestor chain,</ul> then return. <li>Set <var>element</var>'s <a href=#form-owner id=association-of-controls-and-forms:form-owner-6>form owner</a> to null.<li> If <var>element</var> is <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-7>listed</a>, has a <code id=association-of-controls-and-forms:attr-fae-form-6><a href=#attr-fae-form>form</a></code> content attribute, and is <a id=association-of-controls-and-forms:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>, then: <ol><li>If the first element in <var>element</var>'s <a id=association-of-controls-and-forms:tree-5 href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>, in <a id=association-of-controls-and-forms:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, to have an <a href=https://dom.spec.whatwg.org/#concept-id id=association-of-controls-and-forms:concept-id-4 data-x-internal=concept-id>ID</a> that is <a id=association-of-controls-and-forms:identical-to href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a> <var>element</var>'s <code id=association-of-controls-and-forms:attr-fae-form-7><a href=#attr-fae-form>form</a></code> content attribute's value, is a <code id=association-of-controls-and-forms:the-form-element-9><a href=forms.html#the-form-element>form</a></code> element, then <a href=#concept-form-association id=association-of-controls-and-forms:concept-form-association>associate</a> the <var>element</var> with that <code id=association-of-controls-and-forms:the-form-element-10><a href=forms.html#the-form-element>form</a></code> element.</ol> <li>Otherwise, if <var>element</var> has an ancestor <code id=association-of-controls-and-forms:the-form-element-11><a href=forms.html#the-form-element>form</a></code> element, then <a href=#concept-form-association id=association-of-controls-and-forms:concept-form-association-2>associate</a> <var>element</var> with the nearest such ancestor <code id=association-of-controls-and-forms:the-form-element-12><a href=forms.html#the-form-element>form</a></code> element.</ol> <div class=example> In the following non-conforming snippet <pre class=bad><code class='html'>... <c- p><</c-><c- f>form</c-> <c- e>id</c-><c- o>=</c-><c- s>"a"</c-><c- p>></c-> <c- p><</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"b"</c-><c- p>></</c-><c- f>div</c-><c- p>></c-> <c- p></</c-><c- f>form</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'b'</c-><c- p>).</c->innerHTML <c- o>=</c-> <c- t>'<table><tr><td></form><form id="c"><input id="d"></table>'</c-> <c- o>+</c-> <c- t>'<input id="e">'</c-><c- p>;</c-> <c- p></</c-><c- f>script</c-><c- p>></c-> ...</code></pre> the <a href=#form-owner id=association-of-controls-and-forms:form-owner-7>form owner</a> of "d" would be the inner nested form "c", while the <a href=#form-owner id=association-of-controls-and-forms:form-owner-8>form owner</a> of "e" would be the outer form "a". This happens as follows: First, the "e" node gets associated with "c" in the <a id=association-of-controls-and-forms:html-parser href=parsing.html#html-parser>HTML parser</a>. Then, the <code id=association-of-controls-and-forms:dom-element-innerhtml><a href=dynamic-markup-insertion.html#dom-element-innerhtml>innerHTML</a></code> 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 <code id=association-of-controls-and-forms:the-form-element-13><a href=forms.html#the-form-element>form</a></code> elements, and there is a <a id=association-of-controls-and-forms:parse-errors href=parsing.html#parse-errors>parse error</a> for the <code></form></code> tag. </div> <dl class=domintro><dt><code><var>element</var>.<a href=#dom-fae-form id=dom-fae-form-dev>form</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/form title="The form read-only property of the HTMLObjectElement interface returns a HTMLFormElement representing the object element's form owner, or null if there isn't one.">HTMLObjectElement/form</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/form title="The HTMLSelectElement.form read-only property returns a HTMLFormElement representing the form that this element is associated with. If the element is not associated with a <form> element, then it returns null.">HTMLSelectElement/form</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><dd> Returns the element's <a href=#form-owner id=association-of-controls-and-forms:form-owner-9>form owner</a>. Returns null if there isn't one. </dl> <a href=forms.html#category-listed id=association-of-controls-and-forms:category-listed-8>Listed</a> <a href=forms.html#form-associated-element id=association-of-controls-and-forms:form-associated-element-15>form-associated elements</a> except for <a href=custom-elements.html#form-associated-custom-element id=association-of-controls-and-forms:form-associated-custom-element>form-associated custom elements</a> have a <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-fae-form data-dfn-type=attribute><code>form</code></dfn> IDL attribute, which, on getting, must return the element's <a href=#form-owner id=association-of-controls-and-forms:form-owner-10>form owner</a>, or null if there isn't one. <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form title="The form read-only property of the ElementInternals interface returns the HTMLFormElement associated with this element.">ElementInternals/form</a>Support in all current engines.<div class=support>Firefox98+Safari16.4+Chrome77+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><a href=custom-elements.html#form-associated-custom-element id=association-of-controls-and-forms:form-associated-custom-element-2>Form-associated custom elements</a> don't have <code id=association-of-controls-and-forms:dom-fae-form><a href=#dom-fae-form>form</a></code> IDL attribute. Instead, their <code id=association-of-controls-and-forms:elementinternals><a href=custom-elements.html#elementinternals>ElementInternals</a></code> object has a <dfn data-dfn-for=ElementInternals id=dom-elementinternals-form data-dfn-type=attribute><code>form</code></dfn> IDL attribute. On getting, it must throw a <a id=association-of-controls-and-forms:notsupportederror href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=association-of-controls-and-forms:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the <a href=custom-elements.html#internals-target id=association-of-controls-and-forms:internals-target>target element</a> is not a <a id=association-of-controls-and-forms:form-associated-custom-element-3 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>. Otherwise, it must return the element's <a href=#form-owner id=association-of-controls-and-forms:form-owner-11>form owner</a>, or null if there isn't one. <h4 id=attributes-common-to-form-controls>4.10.18 Attributes common to form controls<a href=#attributes-common-to-form-controls class=self-link></a></h4> <h5 id=naming-form-controls:-the-name-attribute>4.10.18.1 Naming form controls: the <code id=naming-form-controls:-the-name-attribute:attr-fe-name><a href=#attr-fe-name>name</a></code> attribute<a href=#naming-form-controls:-the-name-attribute class=self-link></a></h5> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#name</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=button,fieldset,input,output,select,textarea id=attr-fe-name data-dfn-type=element-attr><code>name</code></dfn> content attribute gives the name of the form control, as used in <a href=#form-submission-2 id=naming-form-controls:-the-name-attribute:form-submission-2>form submission</a> and in the <code id=naming-form-controls:-the-name-attribute:the-form-element><a href=forms.html#the-form-element>form</a></code> element's <code id=naming-form-controls:-the-name-attribute:dom-form-elements><a href=forms.html#dom-form-elements>elements</a></code> object. If the attribute is specified, its value must not be the empty string or <code>isindex</code>. A number of user agents historically implemented special support for first-in-form text controls with the name <code>isindex</code>, and this specification previously defined related user agent requirements for it. However, some user agents subsequently dropped that special support, and the related requirements were removed from this specification. So, to avoid problematic reinterpretations in legacy user agents, the name <code>isindex</code> is no longer allowed. Other than <code>isindex</code>, any non-empty value for <code id=naming-form-controls:-the-name-attribute:attr-form-name><a href=forms.html#attr-form-name>name</a></code> is allowed. An <a id=naming-form-controls:-the-name-attribute:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the name <dfn id=attr-fe-name-charset><code>_charset_</code></dfn> is special: if used as the name of a <a href="input.html#hidden-state-(type=hidden)" id="naming-form-controls:-the-name-attribute:hidden-state-(type=hidden)">Hidden</a> control with no <code id=naming-form-controls:-the-name-attribute:attr-input-value><a href=input.html#attr-input-value>value</a></code> attribute, then during submission the <code id=naming-form-controls:-the-name-attribute:attr-input-value-2><a href=input.html#attr-input-value>value</a></code> attribute is automatically given a value consisting of the submission character encoding. The <dfn data-dfn-for=HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-fe-name data-dfn-type=attribute><code>name</code></dfn> IDL attribute must <a id=naming-form-controls:-the-name-attribute:reflect href=common-dom-interfaces.html#reflect>reflect</a> the <code id=naming-form-controls:-the-name-attribute:attr-fe-name-2><a href=#attr-fe-name>name</a></code> content attribute. <div class=note> DOM clobbering is a common cause of security issues. Avoid using the names of built-in form properties with the <code id=naming-form-controls:-the-name-attribute:attr-fe-name-3><a href=#attr-fe-name>name</a></code> content attribute. In this example, the <code id=naming-form-controls:-the-name-attribute:the-input-element><a href=input.html#the-input-element>input</a></code> element overrides the built-in <code id=naming-form-controls:-the-name-attribute:attr-fs-method><a href=#attr-fs-method>method</a></code> property: <pre><code class='js'><c- a>let</c-> form <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>"form"</c-><c- p>);</c-> <c- a>let</c-> input <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>"input"</c-><c- p>);</c-> form<c- p>.</c->appendChild<c- p>(</c->input<c- p>);</c-> form<c- p>.</c->method<c- p>;</c-> <c- c1>// => "get"</c-> input<c- p>.</c->name <c- o>=</c-> <c- u>"method"</c-><c- p>;</c-> <c- c1>// DOM clobbering occurs here</c-> form<c- p>.</c->method <c- o>===</c-> input<c- p>;</c-> <c- c1>// => true</c-></code></pre> Since the input name takes precedence over built-in form properties, the JavaScript reference <code>form.method</code> will point to the <code id=naming-form-controls:-the-name-attribute:the-input-element-2><a href=input.html#the-input-element>input</a></code> element named "method" instead of the built-in <code id=naming-form-controls:-the-name-attribute:attr-fs-method-2><a href=#attr-fs-method>method</a></code> property. </div> <h5 id=submitting-element-directionality:-the-dirname-attribute>4.10.18.2 Submitting element directionality: the <code id=submitting-element-directionality:-the-dirname-attribute:attr-fe-dirname><a href=#attr-fe-dirname>dirname</a></code> attribute<a href=#submitting-element-directionality:-the-dirname-attribute class=self-link></a></h5> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#dirname title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#dirname</a>Support in all current engines.<div class=support>Firefox116+Safari6+Chrome17+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=input,textarea id=attr-fe-dirname data-dfn-type=element-attr><code>dirname</code></dfn> attribute on a form control element enables the submission of <a id=submitting-element-directionality:-the-dirname-attribute:the-directionality href=dom.html#the-directionality>the directionality</a> of the element, and gives the name of the control that contains this value during <a href=#form-submission-2 id=submitting-element-directionality:-the-dirname-attribute:form-submission-2>form submission</a>. If such an attribute is specified, its value must not be the empty string. <div class=example> In this example, a form contains a text control and a submission button: <pre><code class='html'><c- p><</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>"addcomment.cgi"</c-> <c- e>method</c-><c- o>=</c-><c- s>post</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->Comment: <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>"comment"</c-> <c- e>dirname</c-><c- o>=</c-><c- s>"comment.dir"</c-> <c- e>required</c-><c- p>></</c-><c- f>label</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>button</c-> <c- e>name</c-><c- o>=</c-><c- s>"mode"</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>"add"</c-><c- p>></c->Post Comment<c- p></</c-><c- f>button</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>form</c-><c- p>></c-></code></pre> When the user submits the form, the user agent includes three fields, one called "comment", one called "comment.dir", and one called "mode"; so if the user types "Hello", the submission body might be something like: <pre>comment=Hello&comment.dir=ltr&mode=add</pre> If the user manually switches to a right-to-left writing direction and enters "مرحبا", the submission body might be something like: <pre>comment=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&comment.dir=rtl&mode=add</pre> </div> <h5 id=limiting-user-input-length:-the-maxlength-attribute>4.10.18.3 Limiting user input length: the <code id=limiting-user-input-length:-the-maxlength-attribute:attr-fe-maxlength><a href=#attr-fe-maxlength>maxlength</a></code> attribute<a href=#limiting-user-input-length:-the-maxlength-attribute class=self-link></a></h5> A <dfn data-dfn-for=input,textarea id=attr-fe-maxlength data-dfn-type=element-attr data-lt=maxlength>form control <code>maxlength</code> attribute</dfn>, controlled by the <a href=#concept-fe-dirty id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-dirty>dirty value flag</a>, declares a limit on the number of characters a user can input. The number of characters is measured using <a id=limiting-user-input-length:-the-maxlength-attribute:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> and, in the case of <code id=limiting-user-input-length:-the-maxlength-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, with all newlines normalized to a single character (as opposed to CRLF pairs). If an element has its <a href=#attr-fe-maxlength id=limiting-user-input-length:-the-maxlength-attribute:attr-fe-maxlength-2>form control <code>maxlength</code> attribute</a> specified, the attribute's value must be a <a id=limiting-user-input-length:-the-maxlength-attribute:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a>. If the attribute is specified and applying the <a id=limiting-user-input-length:-the-maxlength-attribute:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to its value results in a number, then that number is the element's <dfn id=maximum-allowed-value-length>maximum allowed value length</dfn>. If the attribute is omitted or parsing its value results in an error, then there is no <a href=#maximum-allowed-value-length id=limiting-user-input-length:-the-maxlength-attribute:maximum-allowed-value-length>maximum allowed value length</a>. Constraint validation: If an element has a <a href=#maximum-allowed-value-length id=limiting-user-input-length:-the-maxlength-attribute:maximum-allowed-value-length-2>maximum allowed value length</a>, its <a href=#concept-fe-dirty id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-dirty-2>dirty value flag</a> is true, its <a href=#concept-fe-value id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-value>value</a> was last changed by a user edit (as opposed to a change made by a script), and the <a id=limiting-user-input-length:-the-maxlength-attribute:length-2 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the element's <a href=#concept-fe-api-value id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-api-value>API value</a> is greater than the element's <a href=#maximum-allowed-value-length id=limiting-user-input-length:-the-maxlength-attribute:maximum-allowed-value-length-3>maximum allowed value length</a>, then the element is <a href=#suffering-from-being-too-long id=limiting-user-input-length:-the-maxlength-attribute:suffering-from-being-too-long>suffering from being too long</a>. User agents may prevent the user from causing the element's <a href=#concept-fe-api-value id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-api-value-2>API value</a> to be set to a value whose <a id=limiting-user-input-length:-the-maxlength-attribute:length-3 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> is greater than the element's <a href=#maximum-allowed-value-length id=limiting-user-input-length:-the-maxlength-attribute:maximum-allowed-value-length-4>maximum allowed value length</a>. In the case of <code id=limiting-user-input-length:-the-maxlength-attribute:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, the <a href=#concept-fe-api-value id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-api-value-3>API value</a> and <a href=#concept-fe-value id=limiting-user-input-length:-the-maxlength-attribute:concept-fe-value-2>value</a> differ. In particular, <a href=https://infra.spec.whatwg.org/#normalize-newlines id=limiting-user-input-length:-the-maxlength-attribute:normalize-newlines data-x-internal=normalize-newlines>newline normalization</a> is applied before the <a href=#maximum-allowed-value-length id=limiting-user-input-length:-the-maxlength-attribute:maximum-allowed-value-length-5>maximum allowed value length</a> is checked (whereas the <a id=limiting-user-input-length:-the-maxlength-attribute:textarea-wrapping-transformation href=form-elements.html#textarea-wrapping-transformation>textarea wrapping transformation</a> is not applied). <h5 id=setting-minimum-input-length-requirements:-the-minlength-attribute>4.10.18.4 Setting minimum input length requirements: the <code id=setting-minimum-input-length-requirements:-the-minlength-attribute:attr-fe-minlength><a href=#attr-fe-minlength>minlength</a></code> attribute<a href=#setting-minimum-input-length-requirements:-the-minlength-attribute class=self-link></a></h5> A <dfn data-dfn-for=input,textarea id=attr-fe-minlength data-dfn-type=element-attr data-lt=minlength>form control <code>minlength</code> attribute</dfn>, controlled by the <a href=#concept-fe-dirty id=setting-minimum-input-length-requirements:-the-minlength-attribute:concept-fe-dirty>dirty value flag</a>, declares a lower bound on the number of characters a user can input. The "number of characters" is measured using <a id=setting-minimum-input-length-requirements:-the-minlength-attribute:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> and, in the case of <code id=setting-minimum-input-length-requirements:-the-minlength-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, with all newlines normalized to a single character (as opposed to CRLF pairs). The <code id=setting-minimum-input-length-requirements:-the-minlength-attribute:attr-fe-minlength-2><a href=#attr-fe-minlength>minlength</a></code> attribute does not imply the <code>required</code> attribute. If the form control has no <code>required</code> attribute, then the value can still be omitted; the <code id=setting-minimum-input-length-requirements:-the-minlength-attribute:attr-fe-minlength-3><a href=#attr-fe-minlength>minlength</a></code> attribute only kicks in once the user has entered a value at all. If the empty string is not allowed, then the <code>required</code> attribute also needs to be set. If an element has its <a href=#attr-fe-minlength id=setting-minimum-input-length-requirements:-the-minlength-attribute:attr-fe-minlength-4>form control <code>minlength</code> attribute</a> specified, the attribute's value must be a <a id=setting-minimum-input-length-requirements:-the-minlength-attribute:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a>. If the attribute is specified and applying the <a id=setting-minimum-input-length-requirements:-the-minlength-attribute:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to its value results in a number, then that number is the element's <dfn id=minimum-allowed-value-length>minimum allowed value length</dfn>. If the attribute is omitted or parsing its value results in an error, then there is no <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length>minimum allowed value length</a>. If an element has both a <a href=#maximum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:maximum-allowed-value-length>maximum allowed value length</a> and a <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length-2>minimum allowed value length</a>, the <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length-3>minimum allowed value length</a> must be smaller than or equal to the <a href=#maximum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:maximum-allowed-value-length-2>maximum allowed value length</a>. Constraint validation: If an element has a <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length-4>minimum allowed value length</a>, its <a href=#concept-fe-dirty id=setting-minimum-input-length-requirements:-the-minlength-attribute:concept-fe-dirty-2>dirty value flag</a> is true, its <a href=#concept-fe-value id=setting-minimum-input-length-requirements:-the-minlength-attribute:concept-fe-value>value</a> was last changed by a user edit (as opposed to a change made by a script), its <a href=#concept-fe-value id=setting-minimum-input-length-requirements:-the-minlength-attribute:concept-fe-value-2>value</a> is not the empty string, and the <a id=setting-minimum-input-length-requirements:-the-minlength-attribute:length-2 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the element's <a href=#concept-fe-api-value id=setting-minimum-input-length-requirements:-the-minlength-attribute:concept-fe-api-value>API value</a> is less than the element's <a href=#minimum-allowed-value-length id=setting-minimum-input-length-requirements:-the-minlength-attribute:minimum-allowed-value-length-5>minimum allowed value length</a>, then the element is <a href=#suffering-from-being-too-short id=setting-minimum-input-length-requirements:-the-minlength-attribute:suffering-from-being-too-short>suffering from being too short</a>. <div class=example> In this example, there are four text controls. The first is required, and has to be at least 5 characters long. The other three are optional, but if the user fills one in, the user has to enter at least 10 characters. <pre><code class='html'><c- p><</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>"/events/menu.cgi"</c-> <c- e>method</c-><c- o>=</c-><c- s>"post"</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->Name of Event: <c- p><</c-><c- f>input</c-> <c- e>required</c-> <c- e>minlength</c-><c- o>=</c-><c- s>5</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>50</c-> <c- e>name</c-><c- o>=</c-><c- s>event</c-><c- p>></</c-><c- f>label</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->Describe what you would like for breakfast, if anything: <c- p><</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>"breakfast"</c-> <c- e>minlength</c-><c- o>=</c-><c- s>"10"</c-><c- p>></</c-><c- f>textarea</c-><c- p>></</c-><c- f>label</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->Describe what you would like for lunch, if anything: <c- p><</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>"lunch"</c-> <c- e>minlength</c-><c- o>=</c-><c- s>"10"</c-><c- p>></</c-><c- f>textarea</c-><c- p>></</c-><c- f>label</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->Describe what you would like for dinner, if anything: <c- p><</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>"dinner"</c-> <c- e>minlength</c-><c- o>=</c-><c- s>"10"</c-><c- p>></</c-><c- f>textarea</c-><c- p>></</c-><c- f>label</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>"Submit Request"</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>form</c-><c- p>></c-></code></pre> </div> <h5 id=enabling-and-disabling-form-controls:-the-disabled-attribute>4.10.18.5 Enabling and disabling form controls: the <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-fe-disabled><a href=#attr-fe-disabled>disabled</a></code> attribute<a href=#enabling-and-disabling-form-controls:-the-disabled-attribute class=self-link></a></h5> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a>Support in all current engines.<div class=support>Firefox1+Safari4+Chrome1+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet ExplorerYes<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a>Support in all current engines.<div class=support>Firefox4+Safari6+Chrome20+<hr>Opera12+Edge79+<hr>Edge (Legacy)12+Internet ExplorerYes<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet ExplorerYes<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a>Support in all current engines.<div class=support>Firefox1+Safari4+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer6+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=button,fieldset,input,object,output,select,textarea id=attr-fe-disabled data-dfn-type=element-attr><code>disabled</code></dfn> content attribute is a <a id=enabling-and-disabling-form-controls:-the-disabled-attribute:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. The <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-option-disabled><a href=form-elements.html#attr-option-disabled>disabled</a></code> attribute for <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-option-element><a href=form-elements.html#the-option-element>option</a></code> elements and the <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-optgroup-disabled><a href=form-elements.html#attr-optgroup-disabled>disabled</a></code> attribute for <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code> elements are defined separately. A form control is <dfn id=concept-fe-disabled>disabled</dfn> if any of the following are true: <ul><li>the element is a <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-button-element><a href=form-elements.html#the-button-element>button</a></code>, <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-input-element><a href=input.html#the-input-element>input</a></code>, <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-select-element><a href=form-elements.html#the-select-element>select</a></code>, <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code>, or <a id=enabling-and-disabling-form-controls:-the-disabled-attribute:form-associated-custom-element href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>, and the <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-fe-disabled-2><a href=#attr-fe-disabled>disabled</a></code> attribute is specified on this element (regardless of its value); or<li>the element is a descendant of a <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element whose <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-fieldset-disabled><a href=form-elements.html#attr-fieldset-disabled>disabled</a></code> attribute is specified, and is not a descendant of that <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-fieldset-element-2><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element's first <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:the-legend-element><a href=form-elements.html#the-legend-element>legend</a></code> element child, if any.</ul> A form control that is <a href=#concept-fe-disabled id=enabling-and-disabling-form-controls:-the-disabled-attribute:concept-fe-disabled>disabled</a> must prevent any <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> events that are <a href=webappapis.html#queue-a-task id=enabling-and-disabling-form-controls:-the-disabled-attribute:queue-a-task>queued</a> on the <a id=enabling-and-disabling-form-controls:-the-disabled-attribute:user-interaction-task-source href=webappapis.html#user-interaction-task-source>user interaction task source</a> from being dispatched on the element. Constraint validation: If an element is <a href=#concept-fe-disabled id=enabling-and-disabling-form-controls:-the-disabled-attribute:concept-fe-disabled-2>disabled</a>, it is <a href=#barred-from-constraint-validation id=enabling-and-disabling-form-controls:-the-disabled-attribute:barred-from-constraint-validation>barred from constraint validation</a>. <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/disabled title="The HTMLButtonElement.disabled property indicates whether the control is disabled, meaning that it does not accept any clicks.">HTMLButtonElement/disabled</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/disabled title="The HTMLSelectElement.disabled property is a boolean value that reflects the disabled HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks. A disabled element is unusable and un-clickable.">HTMLSelectElement/disabled</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera9+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+</div></div></div>The <dfn data-dfn-for=HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement id=dom-fe-disabled data-dfn-type=attribute><code>disabled</code></dfn> IDL attribute must <a id=enabling-and-disabling-form-controls:-the-disabled-attribute:reflect href=common-dom-interfaces.html#reflect>reflect</a> the <code id=enabling-and-disabling-form-controls:-the-disabled-attribute:attr-fe-disabled-3><a href=#attr-fe-disabled>disabled</a></code> content attribute. <h5 id=form-submission-attributes>4.10.18.6 Form submission attributes<a href=#form-submission-attributes class=self-link></a></h5> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes_for_form_submission title="The <form> HTML element represents a document section containing interactive controls for submitting information.">Element/form#Attributes_for_form_submission</a>Support in all current engines.<div class=support>Firefox4+Safari10.1+Chrome10+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?</div></div></div><dfn id=attributes-for-form-submission>Attributes for form submission</dfn> can be specified both on <code id=form-submission-attributes:the-form-element><a href=forms.html#the-form-element>form</a></code> elements and on <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button>submit buttons</a> (elements that represent buttons that submit forms, e.g. an <code id=form-submission-attributes:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=form-submission-attributes:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#submit-button-state-(type=submit)" id="form-submission-attributes:submit-button-state-(type=submit)">Submit Button</a> state). The <a href=#attributes-for-form-submission id=form-submission-attributes:attributes-for-form-submission>attributes for form submission</a> that may be specified on <code id=form-submission-attributes:the-form-element-2><a href=forms.html#the-form-element>form</a></code> elements are <code id=form-submission-attributes:attr-fs-action><a href=#attr-fs-action>action</a></code>, <code id=form-submission-attributes:attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>, <code id=form-submission-attributes:attr-fs-method><a href=#attr-fs-method>method</a></code>, <code id=form-submission-attributes:attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</a></code>, and <code id=form-submission-attributes:attr-fs-target><a href=#attr-fs-target>target</a></code>. The corresponding <a href=#attributes-for-form-submission id=form-submission-attributes:attributes-for-form-submission-2>attributes for form submission</a> that may be specified on <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-2>submit buttons</a> are <code id=form-submission-attributes:attr-fs-formaction><a href=#attr-fs-formaction>formaction</a></code>, <code id=form-submission-attributes:attr-fs-formenctype><a href=#attr-fs-formenctype>formenctype</a></code>, <code id=form-submission-attributes:attr-fs-formmethod><a href=#attr-fs-formmethod>formmethod</a></code>, <code id=form-submission-attributes:attr-fs-formnovalidate><a href=#attr-fs-formnovalidate>formnovalidate</a></code>, and <code id=form-submission-attributes:attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code>. When omitted, they default to the values given on the corresponding attributes on the <code id=form-submission-attributes:the-form-element-3><a href=forms.html#the-form-element>form</a></code> element. <hr> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formaction</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome9+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=form,button id=attr-fs-action data-dfn-type=element-attr><code>action</code></dfn> and <dfn data-dfn-for=form,button id=attr-fs-formaction data-dfn-type=element-attr><code>formaction</code></dfn> content attributes, if specified, must have a value that is a <a id=form-submission-attributes:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a>. The <dfn id=concept-fs-action>action</dfn> of an element is the value of the element's <code id=form-submission-attributes:attr-fs-formaction-2><a href=#attr-fs-formaction>formaction</a></code> attribute, if the element is a <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-3>submit button</a> and has such an attribute, or the value of its <a href=#form-owner id=form-submission-attributes:form-owner>form owner</a>'s <code id=form-submission-attributes:attr-fs-action-2><a href=#attr-fs-action>action</a></code> attribute, if it has one, or else the empty string. <hr> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formmethod title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formmethod</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome9+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=form,button id=attr-fs-method data-dfn-type=element-attr><code>method</code></dfn> and <dfn data-dfn-for=form,button id=attr-fs-formmethod data-dfn-type=element-attr><code>formmethod</code></dfn> content attributes are <a href=common-microsyntaxes.html#enumerated-attribute id=form-submission-attributes:enumerated-attribute>enumerated attributes</a> with the following keywords and states: <table><thead><tr><th>Keyword <th>State <th>Brief description <tbody><tr><td><dfn data-dfn-for=form/method,button/formmethod,input/formmethod id=attr-fs-method-get-keyword data-dfn-type=attr-value><code>get</code></dfn> <td><dfn id=attr-fs-method-get>GET</dfn> <td>Indicates the <code id=form-submission-attributes:the-form-element-4><a href=forms.html#the-form-element>form</a></code> will use the HTTP GET method. <tr><td><dfn data-dfn-for=form/method,button/formmethod,input/formmethod id=attr-fs-method-post-keyword data-dfn-type=attr-value><code>post</code></dfn> <td><dfn id=attr-fs-method-post>POST</dfn> <td>Indicates the <code id=form-submission-attributes:the-form-element-5><a href=forms.html#the-form-element>form</a></code> will use the HTTP POST method. <tr><td><dfn data-dfn-for=form/method,button/formmethod,input/formmethod id=attr-fs-method-dialog-keyword data-dfn-type=attr-value><code>dialog</code></dfn> <td><dfn id=attr-fs-method-dialog>Dialog</dfn> <td>Indicates the <code id=form-submission-attributes:the-form-element-6><a href=forms.html#the-form-element>form</a></code> is intended to close the <code id=form-submission-attributes:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code> box in which the form finds itself, if any, and otherwise not submit. </table> The <code id=form-submission-attributes:attr-fs-method-2><a href=#attr-fs-method>method</a></code> attribute's <a href=common-microsyntaxes.html#missing-value-default>missing value default</a> and <a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a> are both the <a href=#attr-fs-method-get id=form-submission-attributes:attr-fs-method-get>GET</a> state. The <code id=form-submission-attributes:attr-fs-formmethod-2><a href=#attr-fs-formmethod>formmethod</a></code> attribute has no <a href=common-microsyntaxes.html#missing-value-default>missing value default</a>, and its <a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a> is the <a href=#attr-fs-method-get id=form-submission-attributes:attr-fs-method-get-2>GET</a> state. The <dfn id=concept-fs-method>method</dfn> of an element is one of those states. If the element is a <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-4>submit button</a> and has a <code id=form-submission-attributes:attr-fs-formmethod-3><a href=#attr-fs-formmethod>formmethod</a></code> attribute, then the element's <a href=#concept-fs-method id=form-submission-attributes:concept-fs-method>method</a> is that attribute's state; otherwise, it is the <a href=#form-owner id=form-submission-attributes:form-owner-2>form owner</a>'s <code id=form-submission-attributes:attr-fs-method-3><a href=#attr-fs-method>method</a></code> attribute's state. <div class=example> Here the <code id=form-submission-attributes:attr-fs-method-4><a href=#attr-fs-method>method</a></code> attribute is used to explicitly specify the default value, "<code id=form-submission-attributes:attr-fs-method-get-keyword><a href=#attr-fs-method-get-keyword>get</a></code>", so that the search query is submitted in the URL: <pre><code class='html'><c- p><</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>"get"</c-> <c- e>action</c-><c- o>=</c-><c- s>"/search.cgi"</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->Search terms: <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>search</c-> <c- e>name</c-><c- o>=</c-><c- s>q</c-><c- p>></</c-><c- f>label</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>form</c-><c- p>></c-></code></pre> </div> <div class=example> On the other hand, here the <code id=form-submission-attributes:attr-fs-method-5><a href=#attr-fs-method>method</a></code> attribute is used to specify the value "<code id=form-submission-attributes:attr-fs-method-post-keyword><a href=#attr-fs-method-post-keyword>post</a></code>", so that the user's message is submitted in the HTTP request's body: <pre><code class='html'><c- p><</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>"post"</c-> <c- e>action</c-><c- o>=</c-><c- s>"/post-message.cgi"</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->Message: <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>m</c-><c- p>></</c-><c- f>label</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>"Submit message"</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>form</c-><c- p>></c-></code></pre> </div> <div class=example> In this example, a <code id=form-submission-attributes:the-form-element-7><a href=forms.html#the-form-element>form</a></code> is used with a <code id=form-submission-attributes:the-dialog-element-2><a href=interactive-elements.html#the-dialog-element>dialog</a></code>. The <code id=form-submission-attributes:attr-fs-method-6><a href=#attr-fs-method>method</a></code> attribute's "<code id=form-submission-attributes:attr-fs-method-dialog-keyword><a href=#attr-fs-method-dialog-keyword>dialog</a></code>" keyword is used to have the dialog automatically close when the form is submitted. <pre lang=en-GB><code class='html'><c- p><</c-><c- f>dialog</c-> <c- e>id</c-><c- o>=</c-><c- s>"ship"</c-><c- p>></c-> <c- p><</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>dialog</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->A ship has arrived in the harbour.<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>"board"</c-><c- p>></c->Board the ship<c- p></</c-><c- f>button</c-><c- p>></c-> <c- p><</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>"call"</c-><c- p>></c->Call to the captain<c- p></</c-><c- f>button</c-><c- p>></c-> <c- p></</c-><c- f>form</c-><c- p>></c-> <c- p></</c-><c- f>dialog</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> <c- a>var</c-> ship <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'ship'</c-><c- p>);</c-> ship<c- p>.</c->showModal<c- p>();</c-> ship<c- p>.</c->onclose <c- o>=</c-> <c- a>function</c-> <c- p>(</c->event<c- p>)</c-> <c- p>{</c-> <c- k>if</c-> <c- p>(</c->ship<c- p>.</c->returnValue <c- o>==</c-> <c- t>'board'</c-><c- p>)</c-> <c- p>{</c-> <c- c1>// ...</c-> <c- p>}</c-> <c- k>else</c-> <c- p>{</c-> <c- c1>// ...</c-> <c- p>}</c-> <c- p>};</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> </div> <hr> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formenctype title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formenctype</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome9+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=form,button id=attr-fs-enctype data-dfn-type=element-attr><code>enctype</code></dfn> and <dfn data-dfn-for=form,button id=attr-fs-formenctype data-dfn-type=element-attr><code>formenctype</code></dfn> content attributes are <a href=common-microsyntaxes.html#enumerated-attribute id=form-submission-attributes:enumerated-attribute-2>enumerated attributes</a> with the following keywords and states: <ul><li>The "<dfn data-dfn-for=form/enctype,button/enctype id=attr-fs-enctype-urlencoded data-dfn-type=attr-value><code>application/x-www-form-urlencoded</code></dfn>" keyword and corresponding state.<li>The "<dfn data-dfn-for=form/enctype,button/enctype id=attr-fs-enctype-formdata data-dfn-type=attr-value><code>multipart/form-data</code></dfn>" keyword and corresponding state.<li>The "<dfn data-dfn-for=form/enctype,button/enctype id=attr-fs-enctype-text data-dfn-type=attr-value><code>text/plain</code></dfn>" keyword and corresponding state.</ul> The attribute's <a href=common-microsyntaxes.html#missing-value-default>missing value default</a> and <a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a> are both the <code id=form-submission-attributes:attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code> state. The <code id=form-submission-attributes:attr-fs-formenctype-2><a href=#attr-fs-formenctype>formenctype</a></code> attribute has no <a href=common-microsyntaxes.html#missing-value-default>missing value default</a>, and its <a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a> is the <code id=form-submission-attributes:attr-fs-enctype-urlencoded-2><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code> state. The <dfn id=concept-fs-enctype>enctype</dfn> of an element is one of those three states. If the element is a <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-5>submit button</a> and has a <code id=form-submission-attributes:attr-fs-formenctype-3><a href=#attr-fs-formenctype>formenctype</a></code> attribute, then the element's <a href=#concept-fs-enctype id=form-submission-attributes:concept-fs-enctype>enctype</a> is that attribute's state; otherwise, it is the <a href=#form-owner id=form-submission-attributes:form-owner-3>form owner</a>'s <code id=form-submission-attributes:attr-fs-enctype-2><a href=#attr-fs-enctype>enctype</a></code> attribute's state. <hr> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formtarget title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formtarget</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome9+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=form,button id=attr-fs-target data-dfn-type=element-attr><code>target</code></dfn> and <dfn data-dfn-for=form,button id=attr-fs-formtarget data-dfn-type=element-attr><code>formtarget</code></dfn> content attributes, if specified, must have values that are <a href=document-sequences.html#valid-navigable-target-name-or-keyword id=form-submission-attributes:valid-navigable-target-name-or-keyword>valid navigable target names or keywords</a>. <hr> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formnovalidate title="The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.">Element/input#formnovalidate</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=form,button id=attr-fs-novalidate data-dfn-type=element-attr><code>novalidate</code></dfn> and <dfn data-dfn-for=form,button id=attr-fs-formnovalidate data-dfn-type=element-attr><code>formnovalidate</code></dfn> content attributes are <a href=common-microsyntaxes.html#boolean-attribute id=form-submission-attributes:boolean-attribute>boolean attributes</a>. If present, they indicate that the form is not to be validated during submission. The <dfn id=concept-fs-novalidate>no-validate state</dfn> of an element is true if the element is a <a href=forms.html#concept-submit-button id=form-submission-attributes:concept-submit-button-6>submit button</a> and the element's <code id=form-submission-attributes:attr-fs-formnovalidate-2><a href=#attr-fs-formnovalidate>formnovalidate</a></code> attribute is present, or if the element's <a href=#form-owner id=form-submission-attributes:form-owner-4>form owner</a>'s <code id=form-submission-attributes:attr-fs-novalidate-2><a href=#attr-fs-novalidate>novalidate</a></code> attribute is present, and false otherwise. <div class=example> 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. <pre><code class='html'><c- p><</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>"editor.cgi"</c-> <c- e>method</c-><c- o>=</c-><c- s>"post"</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->Name: <c- p><</c-><c- f>input</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>fn</c-><c- p>></</c-><c- f>label</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->Essay: <c- p><</c-><c- f>textarea</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>essay</c-><c- p>></</c-><c- f>textarea</c-><c- p>></</c-><c- f>label</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>name</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>"Submit essay"</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>formnovalidate</c-> <c- e>name</c-><c- o>=</c-><c- s>save</c-> <c- e>value</c-><c- o>=</c-><c- s>"Save essay"</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>formnovalidate</c-> <c- e>name</c-><c- o>=</c-><c- s>cancel</c-> <c- e>value</c-><c- o>=</c-><c- s>"Cancel"</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>form</c-><c- p>></c-></code></pre> </div> <hr> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/action title="The HTMLFormElement.action property represents the action of the <form> element.">HTMLFormElement/action</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/target title="The target property of the HTMLFormElement interface represents the target of the form's action (i.e., the frame in which to render its output).">HTMLFormElement/target</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/method title="The HTMLFormElement.method property represents the HTTP method used to submit the <form>.">HTMLFormElement/method</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype title="The HTMLFormElement.enctype property is the MIME type of content that is used to submit the form to the server. Possible values are:">HTMLFormElement/enctype</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer6+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/encoding title="The HTMLFormElement.encoding property is an alternative name for the enctype element on the DOM HTMLFormElement object.">HTMLFormElement/encoding</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=HTMLFormElement id=dom-fs-action data-dfn-type=attribute><code>action</code></dfn> IDL attribute must <a id=form-submission-attributes:reflect href=common-dom-interfaces.html#reflect>reflect</a> the content attribute of the same name, except that on getting, when the content attribute is missing or its value is the empty string, the element's <a id=form-submission-attributes:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="form-submission-attributes:the-document's-address" data-x-internal="the-document's-address">URL</a> must be returned instead. The <dfn data-dfn-for=HTMLFormElement id=dom-fs-target data-dfn-type=attribute><code>target</code></dfn> IDL attribute must <a id=form-submission-attributes:reflect-2 href=common-dom-interfaces.html#reflect>reflect</a> the content attribute of the same name. The <dfn data-dfn-for=HTMLFormElement id=dom-fs-method data-dfn-type=attribute><code>method</code></dfn> and <dfn data-dfn-for=HTMLFormElement id=dom-fs-enctype data-dfn-type=attribute><code>enctype</code></dfn> IDL attributes must <a id=form-submission-attributes:reflect-3 href=common-dom-interfaces.html#reflect>reflect</a> the respective content attributes of the same name, <a id=form-submission-attributes:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>. The <dfn data-dfn-for=HTMLFormElement id=dom-fs-encoding data-dfn-type=attribute><code>encoding</code></dfn> IDL attribute must <a id=form-submission-attributes:reflect-4 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=form-submission-attributes:attr-fs-enctype-3><a href=#attr-fs-enctype>enctype</a></code> content attribute, <a id=form-submission-attributes:limited-to-only-known-values-2 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>. The <dfn data-dfn-for=HTMLFormElement id=dom-fs-novalidate data-dfn-type=attribute><code>noValidate</code></dfn> IDL attribute must <a id=form-submission-attributes:reflect-5 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=form-submission-attributes:attr-fs-novalidate-3><a href=#attr-fs-novalidate>novalidate</a></code> content attribute. The <dfn data-dfn-for=HTMLButtonElement,HTMLInputElement id=dom-fs-formaction data-dfn-type=attribute><code>formAction</code></dfn> IDL attribute must <a id=form-submission-attributes:reflect-6 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=form-submission-attributes:attr-fs-formaction-3><a href=#attr-fs-formaction>formaction</a></code> content attribute, except that on getting, when the content attribute is missing or its value is the empty string, the element's <a id=form-submission-attributes:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="form-submission-attributes:the-document's-address-2" data-x-internal="the-document's-address">URL</a> must be returned instead. The <dfn data-dfn-for=HTMLButtonElement,HTMLInputElement id=dom-fs-formenctype data-dfn-type=attribute><code>formEnctype</code></dfn> IDL attribute must <a id=form-submission-attributes:reflect-7 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=form-submission-attributes:attr-fs-formenctype-4><a href=#attr-fs-formenctype>formenctype</a></code> content attribute, <a id=form-submission-attributes:limited-to-only-known-values-3 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>. The <dfn data-dfn-for=HTMLButtonElement,HTMLInputElement id=dom-fs-formmethod data-dfn-type=attribute><code>formMethod</code></dfn> IDL attribute must <a id=form-submission-attributes:reflect-8 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=form-submission-attributes:attr-fs-formmethod-4><a href=#attr-fs-formmethod>formmethod</a></code> content attribute, <a id=form-submission-attributes:limited-to-only-known-values-4 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>. The <dfn data-dfn-for=HTMLButtonElement,HTMLInputElement id=dom-fs-formnovalidate data-dfn-type=attribute><code>formNoValidate</code></dfn> IDL attribute must <a id=form-submission-attributes:reflect-9 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=form-submission-attributes:attr-fs-formnovalidate-3><a href=#attr-fs-formnovalidate>formnovalidate</a></code> content attribute. The <dfn data-dfn-for=HTMLButtonElement,HTMLInputElement id=dom-fs-formtarget data-dfn-type=attribute><code>formTarget</code></dfn> IDL attribute must <a id=form-submission-attributes:reflect-10 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=form-submission-attributes:attr-fs-formtarget-2><a href=#attr-fs-formtarget>formtarget</a></code> content attribute. <h5 id=autofill>4.10.18.7 Autofill<a href=#autofill class=self-link></a></h5> <h6 id=autofilling-form-controls:-the-autocomplete-attribute>4.10.18.7.1 Autofilling form controls: the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute<a href=#autofilling-form-controls:-the-autocomplete-attribute class=self-link></a></h6> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete title="The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.">Attributes/autocomplete</a>Support in all current engines.<div class=support>Firefox4+Safari6+Chrome14+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)NoInternet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div>User agents sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input. The <dfn data-dfn-for=button,fieldset,input,object,output,select,textarea id=attr-fe-autocomplete data-dfn-type=element-attr><code>autocomplete</code></dfn> content attribute can be used to hint to the user agent how to, or indeed whether to, provide such a feature. There are two ways this attribute is used. When wearing the <dfn id=autofill-expectation-mantle>autofill expectation mantle</dfn>, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-2><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute describes what input is expected from users. When wearing the <dfn id=autofill-anchor-mantle>autofill anchor mantle</dfn>, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-3><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute describes the meaning of the given value. On an <code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)">Hidden</a> state, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-4><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute wears the <a href=#autofill-anchor-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-anchor-mantle>autofill anchor mantle</a>. In all other cases, it wears the <a href=#autofill-expectation-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-expectation-mantle>autofill expectation mantle</a>. When wearing the <a href=#autofill-expectation-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-expectation-mantle-2>autofill expectation mantle</a>, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-5><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute, if specified, must have a value that is an ordered <a id=autofilling-form-controls:-the-autocomplete-attribute:set-of-space-separated-tokens href=common-microsyntaxes.html#set-of-space-separated-tokens>set of space-separated tokens</a> consisting of either a single token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>", or a single token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>", or <a href=#autofill-detail-tokens id=autofilling-form-controls:-the-autocomplete-attribute:autofill-detail-tokens>autofill detail tokens</a>. When wearing the <a href=#autofill-anchor-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-anchor-mantle-2>autofill anchor mantle</a>, the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-6><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute, if specified, must have a value that is an ordered <a id=autofilling-form-controls:-the-autocomplete-attribute:set-of-space-separated-tokens-2 href=common-microsyntaxes.html#set-of-space-separated-tokens>set of space-separated tokens</a> consisting of just <a href=#autofill-detail-tokens id=autofilling-form-controls:-the-autocomplete-attribute:autofill-detail-tokens-2>autofill detail tokens</a> (i.e. the "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-on-2><a href=#attr-fe-autocomplete-on>on</a></code>" and "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-off-2><a href=#attr-fe-autocomplete-off>off</a></code>" keywords are not allowed). <dfn id=autofill-detail-tokens>Autofill detail tokens</dfn> are the following, in the order given below: <ol><li> Optionally, a token whose first eight characters are an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-section data-dfn-type=attr-value><code>section-</code></dfn>", meaning that the field belongs to the named group. <div class=example> For example, if there are two shipping addresses in the form, then they could be marked up as: <pre><code class='html'><c- p><</c-><c- f>fieldset</c-><c- p>></c-> <c- p><</c-><c- f>legend</c-><c- p>></c->Ship the blue gift to...<c- p></</c-><c- f>legend</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>label</c-><c- p>></c-> Address: <c- p><</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>ba</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"section-blue shipping street-address"</c-><c- p>></</c-><c- f>textarea</c-><c- p>></c-> <c- p></</c-><c- f>label</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>label</c-><c- p>></c-> City: <c- p><</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>bc</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"section-blue shipping address-level2"</c-><c- p>></c-> <c- p></</c-><c- f>label</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>label</c-><c- p>></c-> Postal Code: <c- p><</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>bp</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"section-blue shipping postal-code"</c-><c- p>></c-> <c- p></</c-><c- f>label</c-><c- p>></c-> <c- p></</c-><c- f>fieldset</c-><c- p>></c-> <c- p><</c-><c- f>fieldset</c-><c- p>></c-> <c- p><</c-><c- f>legend</c-><c- p>></c->Ship the red gift to...<c- p></</c-><c- f>legend</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>label</c-><c- p>></c-> Address: <c- p><</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>ra</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"section-red shipping street-address"</c-><c- p>></</c-><c- f>textarea</c-><c- p>></c-> <c- p></</c-><c- f>label</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>label</c-><c- p>></c-> City: <c- p><</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>rc</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"section-red shipping address-level2"</c-><c- p>></c-> <c- p></</c-><c- f>label</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>label</c-><c- p>></c-> Postal Code: <c- p><</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>rp</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"section-red shipping postal-code"</c-><c- p>></c-> <c- p></</c-><c- f>label</c-><c- p>></c-> <c- p></</c-><c- f>fieldset</c-><c- p>></c-></code></pre> </div> <li> Optionally, a token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the following strings: <ul class=brief><li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-shipping data-dfn-type=attr-value><code>shipping</code></dfn>", meaning the field is part of the shipping address or contact information <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-billing data-dfn-type=attr-value><code>billing</code></dfn>", meaning the field is part of the billing address or contact information </ul> <li> Either of the following two options: <ul><li> A token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-5 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the following <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field>autofill field</a> names, excluding those that are <a href=#inappropriate-for-the-control id=autofilling-form-controls:-the-autocomplete-attribute:inappropriate-for-the-control>inappropriate for the control</a>: <ul class=brief><li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-name><a href=#attr-fe-autocomplete-name>name</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-honorific-prefix><a href=#attr-fe-autocomplete-honorific-prefix>honorific-prefix</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-given-name><a href=#attr-fe-autocomplete-given-name>given-name</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-additional-name><a href=#attr-fe-autocomplete-additional-name>additional-name</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-family-name><a href=#attr-fe-autocomplete-family-name>family-name</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-honorific-suffix><a href=#attr-fe-autocomplete-honorific-suffix>honorific-suffix</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-nickname><a href=#attr-fe-autocomplete-nickname>nickname</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-username><a href=#attr-fe-autocomplete-username>username</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-new-password><a href=#attr-fe-autocomplete-new-password>new-password</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-current-password><a href=#attr-fe-autocomplete-current-password>current-password</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-one-time-code><a href=#attr-fe-autocomplete-one-time-code>one-time-code</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-organization-title><a href=#attr-fe-autocomplete-organization-title>organization-title</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-organization><a href=#attr-fe-autocomplete-organization>organization</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-street-address><a href=#attr-fe-autocomplete-street-address>street-address</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-line1><a href=#attr-fe-autocomplete-address-line1>address-line1</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-line2><a href=#attr-fe-autocomplete-address-line2>address-line2</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-line3><a href=#attr-fe-autocomplete-address-line3>address-line3</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level4><a href=#attr-fe-autocomplete-address-level4>address-level4</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level3><a href=#attr-fe-autocomplete-address-level3>address-level3</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level2><a href=#attr-fe-autocomplete-address-level2>address-level2</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level1><a href=#attr-fe-autocomplete-address-level1>address-level1</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-country><a href=#attr-fe-autocomplete-country>country</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-country-name><a href=#attr-fe-autocomplete-country-name>country-name</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-postal-code><a href=#attr-fe-autocomplete-postal-code>postal-code</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-name><a href=#attr-fe-autocomplete-cc-name>cc-name</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-given-name><a href=#attr-fe-autocomplete-cc-given-name>cc-given-name</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-additional-name><a href=#attr-fe-autocomplete-cc-additional-name>cc-additional-name</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-family-name><a href=#attr-fe-autocomplete-cc-family-name>cc-family-name</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-number><a href=#attr-fe-autocomplete-cc-number>cc-number</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-year><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-csc><a href=#attr-fe-autocomplete-cc-csc>cc-csc</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-type><a href=#attr-fe-autocomplete-cc-type>cc-type</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-transaction-currency><a href=#attr-fe-autocomplete-transaction-currency>transaction-currency</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-transaction-amount><a href=#attr-fe-autocomplete-transaction-amount>transaction-amount</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-language><a href=#attr-fe-autocomplete-language>language</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-bday><a href=#attr-fe-autocomplete-bday>bday</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-bday-day><a href=#attr-fe-autocomplete-bday-day>bday-day</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-bday-month><a href=#attr-fe-autocomplete-bday-month>bday-month</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-bday-year><a href=#attr-fe-autocomplete-bday-year>bday-year</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-sex><a href=#attr-fe-autocomplete-sex>sex</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-url><a href=#attr-fe-autocomplete-url>url</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-photo><a href=#attr-fe-autocomplete-photo>photo</a></code>" </ul> (See the table below for descriptions of these values.) <li> The following, in the given order: <ol><li> Optionally, a token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-6 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the following strings: <ul class=brief><li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-home data-dfn-type=attr-value><code>home</code></dfn>", meaning the field is for contacting someone at their residence <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-work data-dfn-type=attr-value><code>work</code></dfn>", meaning the field is for contacting someone at their workplace <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-mobile data-dfn-type=attr-value><code>mobile</code></dfn>", meaning the field is for contacting someone regardless of location <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-fax data-dfn-type=attr-value><code>fax</code></dfn>", meaning the field describes a fax machine's contact details <li>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-pager data-dfn-type=attr-value><code>pager</code></dfn>", meaning the field describes a pager's or beeper's contact details </ul> <li> A token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-7 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the following <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-2>autofill field</a> names, excluding those that are <a href=#inappropriate-for-the-control id=autofilling-form-controls:-the-autocomplete-attribute:inappropriate-for-the-control-2>inappropriate for the control</a>: <ul class=brief><li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel><a href=#attr-fe-autocomplete-tel>tel</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-country-code><a href=#attr-fe-autocomplete-tel-country-code>tel-country-code</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-national><a href=#attr-fe-autocomplete-tel-national>tel-national</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-area-code><a href=#attr-fe-autocomplete-tel-area-code>tel-area-code</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-local><a href=#attr-fe-autocomplete-tel-local>tel-local</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-local-prefix><a href=#attr-fe-autocomplete-tel-local-prefix>tel-local-prefix</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-local-suffix><a href=#attr-fe-autocomplete-tel-local-suffix>tel-local-suffix</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-tel-extension><a href=#attr-fe-autocomplete-tel-extension>tel-extension</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-email><a href=#attr-fe-autocomplete-email>email</a></code>" <li>"<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-impp><a href=#attr-fe-autocomplete-impp>impp</a></code>" </ul> (See the table below for descriptions of these values.) </ol> </ul> <li>Optionally, a token that is an <a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-case-insensitive-8 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<dfn id=attr-fe-autocomplete-webauthn><code>webauthn</code></dfn>", meaning the user agent should show <a href=https://w3c.github.io/webauthn/#public-key-credential id=autofilling-form-controls:-the-autocomplete-attribute:public-key-credential data-x-internal=public-key-credential>public key credentials</a> available via <code id=autofilling-form-controls:-the-autocomplete-attribute:conditional-mediation><a data-x-internal=conditional-mediation href=https://w3c.github.io/webappsec-credential-management/#dom-credentialmediationrequirement-conditional>conditional</a></code> mediation when the user interacts with the form control. <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-webauthn><a href=#attr-fe-autocomplete-webauthn>webauthn</a></code> is only valid for <code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-2><a href=input.html#the-input-element>input</a></code> and <code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements.</ol> As noted earlier, the meaning of the attribute and its keywords depends on the mantle that the attribute is wearing. <dl class=switch><dt>When wearing the <a href=#autofill-expectation-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-expectation-mantle-3>autofill expectation mantle</a>... <dd> The "<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-off data-dfn-type=attr-value><code>off</code></dfn>" keyword indicates either that the control's input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prefill the value for them; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values. The "<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-on data-dfn-type=attr-value><code>on</code></dfn>" keyword indicates that the user agent is allowed to provide the user with autocompletion values, but does not provide any further information about what kind of data the user might be expected to enter. User agents would have to use heuristics to decide what autocompletion values to suggest. The <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-3>autofill field</a> listed above indicate that the user agent is allowed to provide the user with autocompletion values, and specifies what kind of value is expected. The meaning of each such keyword is described in the table below. If the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-7><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute is omitted, the default value corresponding to the state of the element's <a href=#form-owner id=autofilling-form-controls:-the-autocomplete-attribute:form-owner>form owner</a>'s <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-form-autocomplete><a href=forms.html#attr-form-autocomplete>autocomplete</a></code> attribute is used instead (either "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-on-3><a href=#attr-fe-autocomplete-on>on</a></code>" or "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-off-3><a href=#attr-fe-autocomplete-off>off</a></code>"). If there is no <a href=#form-owner id=autofilling-form-controls:-the-autocomplete-attribute:form-owner-2>form owner</a>, then the value "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-on-4><a href=#attr-fe-autocomplete-on>on</a></code>" is used. <dt>When wearing the <a href=#autofill-anchor-mantle id=autofilling-form-controls:-the-autocomplete-attribute:autofill-anchor-mantle-3>autofill anchor mantle</a>... <dd> The <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-4>autofill field</a> listed above indicate that the value of the particular kind of value specified is that value provided for this element. The meaning of each such keyword is described in the table below. <div class=example> In this example the page has explicitly specified the currency and amount of the transaction. The form requests a credit card and other billing details. The user agent could use this information to suggest a credit card that it knows has sufficient balance and that supports the relevant currency. <pre><code class='html'><c- p><</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>post</c-> <c- e>action</c-><c- o>=</c-><c- s>"step2.cgi"</c-><c- p>></c-> <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>hidden</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>transaction-currency</c-> <c- e>value</c-><c- o>=</c-><c- s>"CHF"</c-><c- p>></c-> <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>hidden</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>transaction-amount</c-> <c- e>value</c-><c- o>=</c-><c- s>"15.00"</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->Credit card number: <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>inputmode</c-><c- o>=</c-><c- s>numeric</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>cc-number</c-><c- p>></</c-><c- f>label</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->Expiry Date: <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>month</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>cc-exp</c-><c- p>></</c-><c- f>label</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>"Continue..."</c-><c- p>></c-> <c- p></</c-><c- f>form</c-><c- p>></c-></code></pre> </div> </dl> The <dfn id=autofill-field>autofill field</dfn> keywords relate to each other as described in the table below. Each field name listed on a row of this table corresponds to the meaning given in the cell for that row in the column labeled "Meaning". Some fields correspond to subparts of other fields; for example, a credit card expiry date can be expressed as one field giving both the month and year of expiry ("<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-2><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>"), or as two fields, one giving the month ("<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-month-2><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>") and one the year ("<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-cc-exp-year-2><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>"). In such cases, the names of the broader fields cover multiple rows, in which the narrower fields are defined. Generally, authors are encouraged to use the broader fields rather than the narrower fields, as the narrower fields tend to expose Western biases. For example, while it is common in some Western cultures to have a given name and a family name, in that order (and thus often referred to as a first name and a surname), many cultures put the family name first and the given name second, and many others simply have one name (a mononym). Having a single field is therefore more flexible. Some fields are only appropriate for certain form controls. An <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-5>autofill field</a> name is <dfn id=inappropriate-for-the-control>inappropriate for a control</dfn> if the control does not belong to the group listed for that <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-6>autofill field</a> in the fifth column of the first row describing that <a href=#autofill-field id=autofilling-form-controls:-the-autocomplete-attribute:autofill-field-7>autofill field</a> in the table below. What controls fall into each group is described below the table. <table><thead><tr><th colspan=4> Field name <th> Meaning <th> Canonical Format <th> Canonical Format Example <th> Control group <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-name data-dfn-type=attr-value><code>name</code></dfn>" <td>Full name <td>Free-form text, no newlines <td>Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text>Text</a> <tr><td class=non-rectangular-cell-indentation rowspan=5> <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-honorific-prefix data-dfn-type=attr-value><code>honorific-prefix</code></dfn>" <td>Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle") <td>Free-form text, no newlines <td>Sir <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-2>Text</a> <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-given-name data-dfn-type=attr-value><code>given-name</code></dfn>" <td>Given name (in some Western cultures, also known as the first name) <td>Free-form text, no newlines <td>Timothy <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-3>Text</a> <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-additional-name data-dfn-type=attr-value><code>additional-name</code></dfn>" <td>Additional names (in some Western cultures, also known as middle names, forenames other than the first name) <td>Free-form text, no newlines <td>John <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-4>Text</a> <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-family-name data-dfn-type=attr-value><code>family-name</code></dfn>" <td>Family name (in some Western cultures, also known as the last name or surname) <td>Free-form text, no newlines <td>Berners-Lee <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-5>Text</a> <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-honorific-suffix data-dfn-type=attr-value><code>honorific-suffix</code></dfn>" <td>Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II") <td>Free-form text, no newlines <td>OM, KBE, FRS, FREng, FRSA <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-6>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-nickname data-dfn-type=attr-value><code>nickname</code></dfn>" <td>Nickname, screen name, handle: a typically short name used instead of the full name <td>Free-form text, no newlines <td>Tim <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-7>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-organization-title data-dfn-type=attr-value><code>organization-title</code></dfn>" <td>Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director") <td>Free-form text, no newlines <td>Professor <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-8>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-username data-dfn-type=attr-value><code>username</code></dfn>" <td>A username <td>Free-form text, no newlines <td>timbl <td><a href=#control-group-username id=autofilling-form-controls:-the-autocomplete-attribute:control-group-username>Username</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-new-password data-dfn-type=attr-value><code>new-password</code></dfn>" <td>A new password (e.g. when creating an account or changing a password) <td>Free-form text, no newlines <td>GUMFXbadyrS3 <td><a href=#control-group-password id=autofilling-form-controls:-the-autocomplete-attribute:control-group-password>Password</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-current-password data-dfn-type=attr-value><code>current-password</code></dfn>" <td>The current password for the account identified by the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-username-2><a href=#attr-fe-autocomplete-username>username</a></code> field (e.g. when logging in) <td>Free-form text, no newlines <td>qwerty <td><a href=#control-group-password id=autofilling-form-controls:-the-autocomplete-attribute:control-group-password-2>Password</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-one-time-code data-dfn-type=attr-value><code>one-time-code</code></dfn>" <td>One-time code used for verifying user identity <td>Free-form text, no newlines <td>123456 <td><a href=#control-group-password id=autofilling-form-controls:-the-autocomplete-attribute:control-group-password-3>Password</a> <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-organization data-dfn-type=attr-value><code>organization</code></dfn>" <td>Company name corresponding to the person, address, or contact information in the other fields associated with this field <td>Free-form text, no newlines <td>World Wide Web Consortium <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-9>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-street-address data-dfn-type=attr-value><code>street-address</code></dfn>" <td>Street address (multiple lines, newlines preserved) <td>Free-form text <td>32 Vassar Street MIT Room 32-G524 <td><a href=#control-group-multiline id=autofilling-form-controls:-the-autocomplete-attribute:control-group-multiline>Multiline</a> <tr><td class=non-rectangular-cell-indentation rowspan=3> <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-line1 data-dfn-type=attr-value><code>address-line1</code></dfn>" <td rowspan=3>Street address (one line per field) <td>Free-form text, no newlines <td>32 Vassar Street <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-10>Text</a> <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-line2 data-dfn-type=attr-value><code>address-line2</code></dfn>" <td>Free-form text, no newlines <td>MIT Room 32-G524 <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-11>Text</a> <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-line3 data-dfn-type=attr-value><code>address-line3</code></dfn>" <td>Free-form text, no newlines <td> <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-12>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-level4 data-dfn-type=attr-value><code>address-level4</code></dfn>" <td>The most fine-grained <a href=#more-on-address-levels>administrative level</a>, in addresses with four administrative levels <td>Free-form text, no newlines <td> <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-13>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-level3 data-dfn-type=attr-value><code>address-level3</code></dfn>" <td>The <a href=#more-on-address-levels>third administrative level</a>, in addresses with three or more administrative levels <td>Free-form text, no newlines <td> <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-14>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-level2 data-dfn-type=attr-value><code>address-level2</code></dfn>" <td>The <a href=#more-on-address-levels>second administrative level</a>, in addresses with two or more administrative levels; in the countries with two administrative levels, this would typically be the city, town, village, or other locality within which the relevant street address is found <td>Free-form text, no newlines <td>Cambridge <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-15>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-address-level1 data-dfn-type=attr-value><code>address-level1</code></dfn>" <td>The broadest <a href=#more-on-address-levels>administrative level</a> in the address, i.e. the province within which the locality is found; for example, in the US, this would be the state; in Switzerland it would be the canton; in the UK, the post town <td>Free-form text, no newlines <td>MA <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-16>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-country data-dfn-type=attr-value><code>country</code></dfn>" <td>Country code <td>Valid <a href=https://www.iso.org/iso-3166-country-codes.html>ISO 3166-1-alpha-2 country code</a> <a href=references.html#refsISO3166>[ISO3166]</a> <td>US <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-17>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-country-name data-dfn-type=attr-value><code>country-name</code></dfn>" <td>Country name <td>Free-form text, no newlines; <a href=#autofill-country>derived from <code>country</code> in some cases</a> <td>US <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-18>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-postal-code data-dfn-type=attr-value><code>postal-code</code></dfn>" <td>Postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the arrondissement, if relevant, to the <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level2-2><a href=#attr-fe-autocomplete-address-level2>address-level2</a></code> field) <td>Free-form text, no newlines <td>02139 <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-19>Text</a> <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-name data-dfn-type=attr-value><code>cc-name</code></dfn>" <td>Full name as given on the payment instrument <td>Free-form text, no newlines <td>Tim Berners-Lee <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-20>Text</a> <tr><td class=non-rectangular-cell-indentation rowspan=3> <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-given-name data-dfn-type=attr-value><code>cc-given-name</code></dfn>" <td>Given name as given on the payment instrument (in some Western cultures, also known as the first name) <td>Free-form text, no newlines <td>Tim <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-21>Text</a> <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-additional-name data-dfn-type=attr-value><code>cc-additional-name</code></dfn>" <td>Additional names given on the payment instrument (in some Western cultures, also known as middle names, forenames other than the first name) <td>Free-form text, no newlines <td> <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-22>Text</a> <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-family-name data-dfn-type=attr-value><code>cc-family-name</code></dfn>" <td>Family name given on the payment instrument (in some Western cultures, also known as the last name or surname) <td>Free-form text, no newlines <td>Berners-Lee <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-23>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-number data-dfn-type=attr-value><code>cc-number</code></dfn>" <td>Code identifying the payment instrument (e.g. the credit card number) <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> <td>4114360123456785 <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-24>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-exp data-dfn-type=attr-value><code>cc-exp</code></dfn>" <td>Expiration date of the payment instrument <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-month-string href=common-microsyntaxes.html#valid-month-string>Valid month string</a> <td>2014-12 <td><a href=#control-group-month id=autofilling-form-controls:-the-autocomplete-attribute:control-group-month>Month</a> <tr><td class=non-rectangular-cell-indentation rowspan=2> <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-exp-month data-dfn-type=attr-value><code>cc-exp-month</code></dfn>" <td>Month component of the expiration date of the payment instrument <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer href=common-microsyntaxes.html#valid-integer>Valid integer</a> in the range 1..12 <td>12 <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric>Numeric</a> <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-exp-year data-dfn-type=attr-value><code>cc-exp-year</code></dfn>" <td>Year component of the expiration date of the payment instrument <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer-2 href=common-microsyntaxes.html#valid-integer>Valid integer</a> greater than zero <td>2014 <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-2>Numeric</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-csc data-dfn-type=attr-value><code>cc-csc</code></dfn>" <td>Security code for the payment instrument (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc.) <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-2 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> <td>419 <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-25>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-cc-type data-dfn-type=attr-value><code>cc-type</code></dfn>" <td>Type of payment instrument <td>Free-form text, no newlines <td>Visa <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-26>Text</a> <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-transaction-currency data-dfn-type=attr-value><code>transaction-currency</code></dfn>" <td>The currency that the user would prefer the transaction to use <td>ISO 4217 currency code <a href=references.html#refsISO4217>[ISO4217]</a> <td>GBP <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-27>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-transaction-amount data-dfn-type=attr-value><code>transaction-amount</code></dfn>" <td>The amount that the user would like for the transaction (e.g. when entering a bid or sale price) <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-floating-point-number href=common-microsyntaxes.html#valid-floating-point-number>Valid floating-point number</a> <td>401.00 <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-3>Numeric</a> <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-language data-dfn-type=attr-value><code>language</code></dfn>" <td>Preferred language <td>Valid BCP 47 language tag <a href=references.html#refsBCP47>[BCP47]</a> <td>en <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-28>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-bday data-dfn-type=attr-value><code>bday</code></dfn>" <td>Birthday <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-date-string href=common-microsyntaxes.html#valid-date-string>Valid date string</a> <td>1955-06-08 <td><a href=#control-group-date id=autofilling-form-controls:-the-autocomplete-attribute:control-group-date>Date</a> <tr><td class=non-rectangular-cell-indentation rowspan=3> <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-bday-day data-dfn-type=attr-value><code>bday-day</code></dfn>" <td>Day component of birthday <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer-3 href=common-microsyntaxes.html#valid-integer>Valid integer</a> in the range 1..31 <td>8 <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-4>Numeric</a> <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-bday-month data-dfn-type=attr-value><code>bday-month</code></dfn>" <td>Month component of birthday <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer-4 href=common-microsyntaxes.html#valid-integer>Valid integer</a> in the range 1..12 <td>6 <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-5>Numeric</a> <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-bday-year data-dfn-type=attr-value><code>bday-year</code></dfn>" <td>Year component of birthday <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-integer-5 href=common-microsyntaxes.html#valid-integer>Valid integer</a> greater than zero <td>1955 <td><a href=#control-group-numeric id=autofilling-form-controls:-the-autocomplete-attribute:control-group-numeric-6>Numeric</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-sex data-dfn-type=attr-value><code>sex</code></dfn>" <td>Gender identity (e.g. Female, Fa'afafine) <td>Free-form text, no newlines <td>Male <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-29>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-url data-dfn-type=attr-value><code>url</code></dfn>" <td>Home page or other web page corresponding to the company, person, address, or contact information in the other fields associated with this field <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-url-string href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>Valid URL string</a> <td>https://www.w3.org/People/Berners-Lee/ <td><a href=#control-group-url id=autofilling-form-controls:-the-autocomplete-attribute:control-group-url>URL</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-photo data-dfn-type=attr-value><code>photo</code></dfn>" <td>Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field <td> <a id=autofilling-form-controls:-the-autocomplete-attribute:valid-url-string-2 href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>Valid URL string</a> <td>https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg <td> <a href=#control-group-url id=autofilling-form-controls:-the-autocomplete-attribute:control-group-url-2>URL</a> <tbody><tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel data-dfn-type=attr-value><code>tel</code></dfn>" <td>Full telephone number, including country code <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-3 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> and U+0020 SPACE characters, prefixed by a U+002B PLUS SIGN character (+) <td>+1 617 253 5702 <td><a href=#control-group-tel id=autofilling-form-controls:-the-autocomplete-attribute:control-group-tel>Tel</a> <tr><td class=non-rectangular-cell-indentation rowspan=6> <td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-country-code data-dfn-type=attr-value><code>tel-country-code</code></dfn>" <td>Country code component of the telephone number <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-4 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> prefixed by a U+002B PLUS SIGN character (+) <td>+1 <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-30>Text</a> <tr><td colspan=3>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-national data-dfn-type=attr-value><code>tel-national</code></dfn>" <td>Telephone number without the county code component, with a country-internal prefix applied if applicable <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-5 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> and U+0020 SPACE characters <td>617 253 5702 <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-31>Text</a> <tr><td class=non-rectangular-cell-indentation rowspan=4> <td colspan=2>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-area-code data-dfn-type=attr-value><code>tel-area-code</code></dfn>" <td>Area code component of the telephone number, with a country-internal prefix applied if applicable <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-6 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> <td>617 <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-32>Text</a> <tr><td colspan=2>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-local data-dfn-type=attr-value><code>tel-local</code></dfn>" <td>Telephone number without the country code and area code components <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-7 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> <td>2535702 <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-33>Text</a> <tr><td class=non-rectangular-cell-indentation rowspan=2> <td>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-local-prefix data-dfn-type=attr-value><code>tel-local-prefix</code></dfn>" <td>First part of the component of the telephone number that follows the area code, when that component is split into two components <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-8 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> <td>253 <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-34>Text</a> <tr><td>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-local-suffix data-dfn-type=attr-value><code>tel-local-suffix</code></dfn>" <td>Second part of the component of the telephone number that follows the area code, when that component is split into two components <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-9 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> <td>5702 <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-35>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-tel-extension data-dfn-type=attr-value><code>tel-extension</code></dfn>" <td>Telephone number internal extension code <td><a id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits-10 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> <td>1000 <td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-36>Text</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-email data-dfn-type=attr-value><code>email</code></dfn>" <td>Email address <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-e-mail-address href=input.html#valid-e-mail-address>Valid email address</a> <td>timbl@w3.org <td><a href=#control-group-username id=autofilling-form-controls:-the-autocomplete-attribute:control-group-username-2>Username</a> <tr><td colspan=4>"<dfn data-dfn-for=button/autocomplete,fieldset/autocomplete,input/autocomplete,object/autocomplete,output/autocomplete,select/autocomplete,textarea/autocomplete id=attr-fe-autocomplete-impp data-dfn-type=attr-value><code>impp</code></dfn>" <td>URL representing an instant messaging protocol endpoint (for example, "<code>aim:goim?screenname=example</code>" or "<code>xmpp:fred@example.net</code>") <td><a id=autofilling-form-controls:-the-autocomplete-attribute:valid-url-string-3 href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>Valid URL string</a> <td>irc://example.org/timbl,isuser <td><a href=#control-group-url id=autofilling-form-controls:-the-autocomplete-attribute:control-group-url-3>URL</a> </table> The groups correspond to controls as follows: <dl><dt><dfn id=control-group-text>Text</dfn> <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-3><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-2">Hidden</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-4><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)">Text</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-5><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-4><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-2">Search</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> elements <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element><a href=form-elements.html#the-select-element>select</a></code> elements <dt><dfn id=control-group-multiline>Multiline</dfn> <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-6><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-5><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-3">Hidden</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code> elements <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> elements <dt><dfn id=control-group-password>Password</dfn> <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-7><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-6><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-4">Hidden</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-8><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-7><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-3">Text</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-9><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-8><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-4">Search</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-10><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-9><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#password-state-(type=password)" id="autofilling-form-controls:-the-autocomplete-attribute:password-state-(type=password)">Password</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-4><a href=form-elements.html#the-textarea-element>textarea</a></code> elements <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-3><a href=form-elements.html#the-select-element>select</a></code> elements <dt><dfn id=control-group-url>URL</dfn> <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-11><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-10><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-5">Hidden</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-12><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-11><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-5">Text</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-13><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-12><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-6">Search</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-14><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-13><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#url-state-(type=url)" id="autofilling-form-controls:-the-autocomplete-attribute:url-state-(type=url)">URL</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-5><a href=form-elements.html#the-textarea-element>textarea</a></code> elements <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-4><a href=form-elements.html#the-select-element>select</a></code> elements <dt><dfn id=control-group-username>Username</dfn> <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-15><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-14><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-6">Hidden</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-16><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-15><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-7">Text</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-17><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-16><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-8">Search</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-18><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-17><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#email-state-(type=email)" id="autofilling-form-controls:-the-autocomplete-attribute:email-state-(type=email)">Email</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-6><a href=form-elements.html#the-textarea-element>textarea</a></code> elements <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-5><a href=form-elements.html#the-select-element>select</a></code> elements <dt><dfn id=control-group-tel>Tel</dfn> <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-19><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-18><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-7">Hidden</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-20><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-19><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-9">Text</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-21><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-20><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-10">Search</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-22><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-21><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#telephone-state-(type=tel)" id="autofilling-form-controls:-the-autocomplete-attribute:telephone-state-(type=tel)">Telephone</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-7><a href=form-elements.html#the-textarea-element>textarea</a></code> elements <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-6><a href=form-elements.html#the-select-element>select</a></code> elements <dt><dfn id=control-group-numeric>Numeric</dfn> <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-23><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-22><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-8">Hidden</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-24><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-23><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-11">Text</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-25><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-24><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-12">Search</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-26><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-25><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#number-state-(type=number)" id="autofilling-form-controls:-the-autocomplete-attribute:number-state-(type=number)">Number</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-8><a href=form-elements.html#the-textarea-element>textarea</a></code> elements <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-7><a href=form-elements.html#the-select-element>select</a></code> elements <dt><dfn id=control-group-month>Month</dfn> <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-27><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-26><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-9">Hidden</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-28><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-27><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-13">Text</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-29><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-28><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-14">Search</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-30><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-29><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#month-state-(type=month)" id="autofilling-form-controls:-the-autocomplete-attribute:month-state-(type=month)">Month</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-9><a href=form-elements.html#the-textarea-element>textarea</a></code> elements <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-8><a href=form-elements.html#the-select-element>select</a></code> elements <dt><dfn id=control-group-date>Date</dfn> <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-31><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-30><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#hidden-state-(type=hidden)" id="autofilling-form-controls:-the-autocomplete-attribute:hidden-state-(type=hidden)-10">Hidden</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-32><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-31><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-15">Text</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-33><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-32><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofilling-form-controls:-the-autocomplete-attribute:text-(type=text)-state-and-search-state-(type=search)-16">Search</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-input-element-34><a href=input.html#the-input-element>input</a></code> elements with a <code id=autofilling-form-controls:-the-autocomplete-attribute:attr-input-type-33><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#date-state-(type=date)" id="autofilling-form-controls:-the-autocomplete-attribute:date-state-(type=date)">Date</a> state <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-textarea-element-10><a href=form-elements.html#the-textarea-element>textarea</a></code> elements <dd><code id=autofilling-form-controls:-the-autocomplete-attribute:the-select-element-9><a href=form-elements.html#the-select-element>select</a></code> elements </dl> Address levels: The "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level1-2><a href=#attr-fe-autocomplete-address-level1>address-level1</a></code>" – "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level4-2><a href=#attr-fe-autocomplete-address-level4>address-level4</a></code>" fields are used to describe the locality of the street address. Different locales have different numbers of levels. For example, the US uses two levels (state and town), the UK uses one or two depending on the address (the post town, and in some cases the locality), and China can use three (province, city, district). The "<code id=autofilling-form-controls:-the-autocomplete-attribute:attr-fe-autocomplete-address-level1-3><a href=#attr-fe-autocomplete-address-level1>address-level1</a></code>" field represents the widest administrative division. Different locales order the fields in different ways; for example, in the US the town (level 2) precedes the state (level 1); while in Japan the prefecture (level 1) precedes the city (level 2) which precedes the district (level 3). Authors are encouraged to provide forms that are presented in a way that matches the country's conventions (hiding, showing, and rearranging fields accordingly as the user changes the country). <h6 id=autofill-processing-model>4.10.18.7.2 Processing model<a href=#autofill-processing-model class=self-link></a></h6> Each <code id=autofill-processing-model:the-input-element><a href=input.html#the-input-element>input</a></code> element to which the <code id=autofill-processing-model:attr-fe-autocomplete><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute <a href=input.html#concept-input-apply id=autofill-processing-model:concept-input-apply>applies</a>, each <code id=autofill-processing-model:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element, and each <code id=autofill-processing-model:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> element, has an <dfn id=autofill-hint-set>autofill hint set</dfn>, an <dfn id=autofill-scope>autofill scope</dfn>, an <dfn id=autofill-field-name>autofill field name</dfn>, a <dfn id=non-autofill-credential-type>non-autofill credential type</dfn>, and an <dfn id=idl-exposed-autofill-value>IDL-exposed autofill value</dfn>. The <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name>autofill field name</a> specifies the specific kind of data expected in the field, e.g. "<code id=autofill-processing-model:attr-fe-autocomplete-street-address><a href=#attr-fe-autocomplete-street-address>street-address</a></code>" or "<code id=autofill-processing-model:attr-fe-autocomplete-cc-exp><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>". The <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set>autofill hint set</a> identifies what address or contact information type the user agent is to look at, e.g. "<code id=autofill-processing-model:attr-fe-autocomplete-shipping><a href=#attr-fe-autocomplete-shipping>shipping</a></code> <code id=autofill-processing-model:attr-fe-autocomplete-fax><a href=#attr-fe-autocomplete-fax>fax</a></code>" or "<code id=autofill-processing-model:attr-fe-autocomplete-billing><a href=#attr-fe-autocomplete-billing>billing</a></code>". The <a href=#non-autofill-credential-type id=autofill-processing-model:non-autofill-credential-type>non-autofill credential type</a> identifies a type of <a href=https://w3c.github.io/webappsec-credential-management/#credential id=autofill-processing-model:credman-credential data-x-internal=credman-credential>credential</a> that may be offered by the user agent when the user interacts with the field alongside other <a href=#autofill-field id=autofill-processing-model:autofill-field>autofill field</a> values. If this value is "<code>webauthn</code>" instead of null, selecting a credential of that type will resolve a pending <code id=autofill-processing-model:conditional-mediation><a data-x-internal=conditional-mediation href=https://w3c.github.io/webappsec-credential-management/#dom-credentialmediationrequirement-conditional>conditional</a></code> mediation <code id=autofill-processing-model:navigator.credentials.get()><a data-x-internal=navigator.credentials.get() href=https://w3c.github.io/webappsec-credential-management/#dom-credentialscontainer-get>navigator.credentials.get()</a></code> request, instead of autofilling the field. <div class=example> For example, a sign-in page could instruct the user agent to either autofill a saved password, or show a <a id=autofill-processing-model:public-key-credential href=https://w3c.github.io/webauthn/#public-key-credential data-x-internal=public-key-credential>public key credential</a> that will resolve a pending <code id=autofill-processing-model:navigator.credentials.get()-2><a data-x-internal=navigator.credentials.get() href=https://w3c.github.io/webappsec-credential-management/#dom-credentialscontainer-get>navigator.credentials.get()</a></code> request. A user can select either to sign-in. <pre><code class='html'><c- p><</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>password</c-> <c- e>type</c-><c- o>=</c-><c- s>password</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"current-password webauthn"</c-><c- p>></c-></code></pre> </div> The <a href=#autofill-scope id=autofill-processing-model:autofill-scope>autofill scope</a> identifies the group of fields whose information concerns the same subject, and consists of the <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-2>autofill hint set</a> with, if applicable, the "<code>section-*</code>" prefix, e.g. "<code>billing</code>", "<code>section-parent shipping</code>", or "<code>section-child shipping home</code>". These values are defined as the result of running the following algorithm: <ol><li>If the element has no <code id=autofill-processing-model:attr-fe-autocomplete-2><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute, then jump to the step labeled default.<li>Let <var>tokens</var> be the result of <a href=https://infra.spec.whatwg.org/#split-on-ascii-whitespace id=autofill-processing-model:split-a-string-on-spaces data-x-internal=split-a-string-on-spaces>splitting the attribute's value on ASCII whitespace</a>.<li>If <var>tokens</var> is empty, then jump to the step labeled default.<li>Let <var>index</var> be the index of the last token in <var>tokens</var>.<li>Let <var>field</var> be the <var>index</var>th token in <var>tokens</var>.<li>Set the <var>category</var>, <var>maximum tokens</var> pair to the result of <a href="#determine-a-field's-category" id="autofill-processing-model:determine-a-field's-category">determining a field's category</a> given <var>field</var>.<li>If <var>category</var> is null, then jump to the step labeled default.<li>If the number of tokens in <var>tokens</var> is greater than <var>maximum tokens</var>, then jump to the step labeled default.<li>If <var>category</var> is Off or Automatic but the element's <code id=autofill-processing-model:attr-fe-autocomplete-3><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute is wearing the <a href=#autofill-anchor-mantle id=autofill-processing-model:autofill-anchor-mantle>autofill anchor mantle</a>, then jump to the step labeled default.<li>If <var>category</var> is Off, let the element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-2>autofill field name</a> be the string "<code>off</code>", let its <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-3>autofill hint set</a> be empty, and let its <a href=#idl-exposed-autofill-value id=autofill-processing-model:idl-exposed-autofill-value>IDL-exposed autofill value</a> be the string "<code>off</code>". Then, return. <li>If <var>category</var> is Automatic, let the element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-3>autofill field name</a> be the string "<code>on</code>", let its <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-4>autofill hint set</a> be empty, and let its <a href=#idl-exposed-autofill-value id=autofill-processing-model:idl-exposed-autofill-value-2>IDL-exposed autofill value</a> be the string "<code>on</code>". Then, return. <li>Let <var>scope tokens</var> be an empty list.<li>Let <var>hint tokens</var> be an empty set.<li>Let <var>credential type</var> be null.<li>Let <var>IDL value</var> have the same value as <var>field</var>.<li> If <var>category</var> is Credential and the <var>index</var>th token in <var>tokens</var> is an <a id=autofill-processing-model:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code id=autofill-processing-model:attr-fe-autocomplete-webauthn><a href=#attr-fe-autocomplete-webauthn>webauthn</a></code>", then run the substeps that follow: <ol><li>Set <var>credential type</var> to "<code>webauthn</code>".<li>If the <var>index</var>th token in <var>tokens</var> is the first entry, then skip to the step labeled done.<li>Decrement <var>index</var> by one.<li>Set the <var>category</var>, <var>maximum tokens</var> pair to the result of <a href="#determine-a-field's-category" id="autofill-processing-model:determine-a-field's-category-2">determining a field's category</a> given the <var>index</var>th token in <var>tokens</var>.<li>If <var>category</var> is not Normal and <var>category</var> is not Contact, then jump to the step labeled default.<li>If <var>index</var> is greater than <var>maximum tokens</var> minus one (i.e. if the number of remaining tokens is greater than <var>maximum tokens</var>), then jump to the step labeled default.<li>Set <var>IDL value</var> to the concatenation of the <var>index</var>th token in <var>tokens</var>, a U+0020 SPACE character, and the previous value of <var>IDL value</var>.</ol> <li>If the <var>index</var>th token in <var>tokens</var> is the first entry, then skip to the step labeled done.<li>Decrement <var>index</var> by one.<li> If <var>category</var> is Contact and the <var>index</var>th token in <var>tokens</var> is an <a id=autofill-processing-model:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the strings in the following list, then run the substeps that follow: <ul class=brief><li>"<code id=autofill-processing-model:attr-fe-autocomplete-home><a href=#attr-fe-autocomplete-home>home</a></code>" <li>"<code id=autofill-processing-model:attr-fe-autocomplete-work><a href=#attr-fe-autocomplete-work>work</a></code>" <li>"<code id=autofill-processing-model:attr-fe-autocomplete-mobile><a href=#attr-fe-autocomplete-mobile>mobile</a></code>" <li>"<code id=autofill-processing-model:attr-fe-autocomplete-fax-2><a href=#attr-fe-autocomplete-fax>fax</a></code>" <li>"<code id=autofill-processing-model:attr-fe-autocomplete-pager><a href=#attr-fe-autocomplete-pager>pager</a></code>" </ul> The substeps are: <ol><li>Let <var>contact</var> be the matching string from the list above.<li>Insert <var>contact</var> at the start of <var>scope tokens</var>.<li>Add <var>contact</var> to <var>hint tokens</var>.<li>Let <var>IDL value</var> be the concatenation of <var>contact</var>, a U+0020 SPACE character, and the previous value of <var>IDL value</var>.<li>If the <var>index</var>th entry in <var>tokens</var> is the first entry, then skip to the step labeled done.<li>Decrement <var>index</var> by one.</ol> <li> If the <var>index</var>th token in <var>tokens</var> is an <a id=autofill-processing-model:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the strings in the following list, then run the substeps that follow: <ul class=brief><li>"<code id=autofill-processing-model:attr-fe-autocomplete-shipping-2><a href=#attr-fe-autocomplete-shipping>shipping</a></code>" <li>"<code id=autofill-processing-model:attr-fe-autocomplete-billing-2><a href=#attr-fe-autocomplete-billing>billing</a></code>" </ul> The substeps are: <ol><li>Let <var>mode</var> be the matching string from the list above.<li>Insert <var>mode</var> at the start of <var>scope tokens</var>.<li>Add <var>mode</var> to <var>hint tokens</var>.<li>Let <var>IDL value</var> be the concatenation of <var>mode</var>, a U+0020 SPACE character, and the previous value of <var>IDL value</var>.<li>If the <var>index</var>th entry in <var>tokens</var> is the first entry, then skip to the step labeled done.<li>Decrement <var>index</var> by one.</ol> <li>If the <var>index</var>th entry in <var>tokens</var> is not the first entry, then jump to the step labeled default.<li>If the first eight characters of the <var>index</var>th token in <var>tokens</var> are not an <a id=autofill-processing-model:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code id=autofill-processing-model:attr-fe-autocomplete-section><a href=#attr-fe-autocomplete-section>section-</a></code>", then jump to the step labeled default.<li>Let <var>section</var> be the <var>index</var>th token in <var>tokens</var>, <a id=autofill-processing-model:converted-to-ascii-lowercase href=https://infra.spec.whatwg.org/#ascii-lowercase data-x-internal=converted-to-ascii-lowercase>converted to ASCII lowercase</a>.<li>Insert <var>section</var> at the start of <var>scope tokens</var>.<li>Let <var>IDL value</var> be the concatenation of <var>section</var>, a U+0020 SPACE character, and the previous value of <var>IDL value</var>.<li>Done: Let the element's <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-5>autofill hint set</a> be <var>hint tokens</var>. <li>Let the element's <a href=#non-autofill-credential-type id=autofill-processing-model:non-autofill-credential-type-2>non-autofill credential type</a> be <var>credential type</var>.<li>Let the element's <a href=#autofill-scope id=autofill-processing-model:autofill-scope-2>autofill scope</a> be <var>scope tokens</var>. <li>Let the element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-4>autofill field name</a> be <var>field</var>. <li>Let the element's <a href=#idl-exposed-autofill-value id=autofill-processing-model:idl-exposed-autofill-value-3>IDL-exposed autofill value</a> be <var>IDL value</var>. <li>Return.<li>Default: Let the element's <a href=#idl-exposed-autofill-value id=autofill-processing-model:idl-exposed-autofill-value-4>IDL-exposed autofill value</a> be the empty string, and its <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-6>autofill hint set</a> and <a href=#autofill-scope id=autofill-processing-model:autofill-scope-3>autofill scope</a> be empty.<li>If the element's <code id=autofill-processing-model:attr-fe-autocomplete-4><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute is wearing the <a href=#autofill-anchor-mantle id=autofill-processing-model:autofill-anchor-mantle-2>autofill anchor mantle</a>, then let the element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-5>autofill field name</a> be the empty string and return.<li>Let <var>form</var> be the element's <a href=#form-owner id=autofill-processing-model:form-owner>form owner</a>, if any, or null otherwise.<li> If <var>form</var> is not null and <var>form</var>'s <code id=autofill-processing-model:attr-form-autocomplete><a href=forms.html#attr-form-autocomplete>autocomplete</a></code> attribute is in the <a href=forms.html#attr-form-autocomplete-off-state id=autofill-processing-model:attr-form-autocomplete-off-state>off</a> state, then let the element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-6>autofill field name</a> be "<code id=autofill-processing-model:attr-fe-autocomplete-off><a href=#attr-fe-autocomplete-off>off</a></code>". Otherwise, let the element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-7>autofill field name</a> be "<code id=autofill-processing-model:attr-fe-autocomplete-on><a href=#attr-fe-autocomplete-on>on</a></code>". </ol> To <dfn id="determine-a-field's-category">determine a field's category</dfn>, given <var>field</var>: <ol><li> If the <var>field</var> is not an <a id=autofill-processing-model:ascii-case-insensitive-5 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for one of the tokens given in the first column of the following table, return the pair (null, null). <table><thead><tr><th>Token <th>Maximum number of tokens <th>Category <tbody><tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-off-2><a href=#attr-fe-autocomplete-off>off</a></code>" <td>1 <td>Off <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-on-2><a href=#attr-fe-autocomplete-on>on</a></code>" <td>1 <td>Automatic <tbody><tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-name><a href=#attr-fe-autocomplete-name>name</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-honorific-prefix><a href=#attr-fe-autocomplete-honorific-prefix>honorific-prefix</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-given-name><a href=#attr-fe-autocomplete-given-name>given-name</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-additional-name><a href=#attr-fe-autocomplete-additional-name>additional-name</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-family-name><a href=#attr-fe-autocomplete-family-name>family-name</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-honorific-suffix><a href=#attr-fe-autocomplete-honorific-suffix>honorific-suffix</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-nickname><a href=#attr-fe-autocomplete-nickname>nickname</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-organization-title><a href=#attr-fe-autocomplete-organization-title>organization-title</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-username><a href=#attr-fe-autocomplete-username>username</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-new-password><a href=#attr-fe-autocomplete-new-password>new-password</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-current-password><a href=#attr-fe-autocomplete-current-password>current-password</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-one-time-code><a href=#attr-fe-autocomplete-one-time-code>one-time-code</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-organization><a href=#attr-fe-autocomplete-organization>organization</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-street-address-2><a href=#attr-fe-autocomplete-street-address>street-address</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-line1><a href=#attr-fe-autocomplete-address-line1>address-line1</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-line2><a href=#attr-fe-autocomplete-address-line2>address-line2</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-line3><a href=#attr-fe-autocomplete-address-line3>address-line3</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-level4><a href=#attr-fe-autocomplete-address-level4>address-level4</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-level3><a href=#attr-fe-autocomplete-address-level3>address-level3</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-level2><a href=#attr-fe-autocomplete-address-level2>address-level2</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-address-level1><a href=#attr-fe-autocomplete-address-level1>address-level1</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-country><a href=#attr-fe-autocomplete-country>country</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-country-name><a href=#attr-fe-autocomplete-country-name>country-name</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-postal-code><a href=#attr-fe-autocomplete-postal-code>postal-code</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-name><a href=#attr-fe-autocomplete-cc-name>cc-name</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-given-name><a href=#attr-fe-autocomplete-cc-given-name>cc-given-name</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-additional-name><a href=#attr-fe-autocomplete-cc-additional-name>cc-additional-name</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-family-name><a href=#attr-fe-autocomplete-cc-family-name>cc-family-name</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-number><a href=#attr-fe-autocomplete-cc-number>cc-number</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-exp-2><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-exp-month><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-exp-year><a href=#attr-fe-autocomplete-cc-exp-year>cc-exp-year</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-csc><a href=#attr-fe-autocomplete-cc-csc>cc-csc</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-cc-type><a href=#attr-fe-autocomplete-cc-type>cc-type</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-transaction-currency><a href=#attr-fe-autocomplete-transaction-currency>transaction-currency</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-transaction-amount><a href=#attr-fe-autocomplete-transaction-amount>transaction-amount</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-language><a href=#attr-fe-autocomplete-language>language</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-bday><a href=#attr-fe-autocomplete-bday>bday</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-bday-day><a href=#attr-fe-autocomplete-bday-day>bday-day</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-bday-month><a href=#attr-fe-autocomplete-bday-month>bday-month</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-bday-year><a href=#attr-fe-autocomplete-bday-year>bday-year</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-sex><a href=#attr-fe-autocomplete-sex>sex</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-url><a href=#attr-fe-autocomplete-url>url</a></code>" <td>3 <td>Normal <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-photo><a href=#attr-fe-autocomplete-photo>photo</a></code>" <td>3 <td>Normal <tbody><tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel><a href=#attr-fe-autocomplete-tel>tel</a></code>" <td>4 <td>Contact <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-country-code><a href=#attr-fe-autocomplete-tel-country-code>tel-country-code</a></code>" <td>4 <td>Contact <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-national><a href=#attr-fe-autocomplete-tel-national>tel-national</a></code>" <td>4 <td>Contact <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-area-code><a href=#attr-fe-autocomplete-tel-area-code>tel-area-code</a></code>" <td>4 <td>Contact <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-local><a href=#attr-fe-autocomplete-tel-local>tel-local</a></code>" <td>4 <td>Contact <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-local-prefix><a href=#attr-fe-autocomplete-tel-local-prefix>tel-local-prefix</a></code>" <td>4 <td>Contact <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-local-suffix><a href=#attr-fe-autocomplete-tel-local-suffix>tel-local-suffix</a></code>" <td>4 <td>Contact <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-tel-extension><a href=#attr-fe-autocomplete-tel-extension>tel-extension</a></code>" <td>4 <td>Contact <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-email><a href=#attr-fe-autocomplete-email>email</a></code>" <td>4 <td>Contact <tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-impp><a href=#attr-fe-autocomplete-impp>impp</a></code>" <td>4 <td>Contact <tbody><tr><td>"<code id=autofill-processing-model:attr-fe-autocomplete-webauthn-2><a href=#attr-fe-autocomplete-webauthn>webauthn</a></code>" <td>5 <td>Credential </table> <li>Otherwise, let <var>maximum tokens</var> and <var>category</var> be the values of the cells in the second and third columns of that row respectively.<li>Return the pair (<var>category</var>, <var>maximum tokens</var>).</ol> <hr> For the purposes of autofill, a <dfn id="control's-data">control's data</dfn> depends on the kind of control: <dl><dt>An <code id=autofill-processing-model:the-input-element-2><a href=input.html#the-input-element>input</a></code> element with its <code id=autofill-processing-model:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#email-state-(type=email)" id="autofill-processing-model:email-state-(type=email)">Email</a> state and with the <code id=autofill-processing-model:attr-input-multiple><a href=input.html#attr-input-multiple>multiple</a></code> attribute specified<dd>The element's <a href=#concept-fe-values id=autofill-processing-model:concept-fe-values>values</a>.<dt>Any other <code id=autofill-processing-model:the-input-element-3><a href=input.html#the-input-element>input</a></code> element<dt>A <code id=autofill-processing-model:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> element<dd>The element's <a href=#concept-fe-value id=autofill-processing-model:concept-fe-value>value</a>.<dt>A <code id=autofill-processing-model:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> element with its <code id=autofill-processing-model:attr-select-multiple><a href=form-elements.html#attr-select-multiple>multiple</a></code> attribute specified<dd>The <code id=autofill-processing-model:the-option-element><a href=form-elements.html#the-option-element>option</a></code> elements in the <code id=autofill-processing-model:the-select-element-3><a href=form-elements.html#the-select-element>select</a></code> element's <a href=form-elements.html#concept-select-option-list id=autofill-processing-model:concept-select-option-list>list of options</a> that have their <a href=form-elements.html#concept-option-selectedness id=autofill-processing-model:concept-option-selectedness>selectedness</a> set to true.<dt>Any other <code id=autofill-processing-model:the-select-element-4><a href=form-elements.html#the-select-element>select</a></code> element<dd>The <code id=autofill-processing-model:the-option-element-2><a href=form-elements.html#the-option-element>option</a></code> element in the <code id=autofill-processing-model:the-select-element-5><a href=form-elements.html#the-select-element>select</a></code> element's <a href=form-elements.html#concept-select-option-list id=autofill-processing-model:concept-select-option-list-2>list of options</a> that has its <a href=form-elements.html#concept-option-selectedness id=autofill-processing-model:concept-option-selectedness-2>selectedness</a> set to true.</dl> <hr> How to process the <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-7>autofill hint set</a>, <a href=#autofill-scope id=autofill-processing-model:autofill-scope-4>autofill scope</a>, and <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-8>autofill field name</a> depends on the mantle that the <code id=autofill-processing-model:attr-fe-autocomplete-5><a href=#attr-fe-autocomplete>autocomplete</a></code> attribute is wearing. <dl class=switch><dt>When wearing the <a href=#autofill-expectation-mantle id=autofill-processing-model:autofill-expectation-mantle>autofill expectation mantle</a>... <dd> When an element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-9>autofill field name</a> is "<code id=autofill-processing-model:attr-fe-autocomplete-off-3><a href=#attr-fe-autocomplete-off>off</a></code>", the user agent should not remember the <a href="#control's-data" id="autofill-processing-model:control's-data">control's data</a>, and should not offer past values to the user. In addition, when an element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-10>autofill field name</a> is "<code id=autofill-processing-model:attr-fe-autocomplete-off-4><a href=#attr-fe-autocomplete-off>off</a></code>", <a href=browsing-the-web.html#history-autocomplete>values are reset</a> when <a href=browsing-the-web.html#reactivate-a-document id=autofill-processing-model:reactivate-a-document>reactivating a document</a>. <div class=example> Banks frequently do not want UAs to prefill login information: <pre><code class='html'><c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->Account: <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>"text"</c-> <c- e>name</c-><c- o>=</c-><c- s>"ac"</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"off"</c-><c- p>></</c-><c- f>label</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>label</c-><c- p>></c->PIN: <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>"password"</c-> <c- e>name</c-><c- o>=</c-><c- s>"pin"</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"off"</c-><c- p>></</c-><c- f>label</c-><c- p>></</c-><c- f>p</c-><c- p>></c-></code></pre> </div> When an element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-11>autofill field name</a> is not "<code id=autofill-processing-model:attr-fe-autocomplete-off-5><a href=#attr-fe-autocomplete-off>off</a></code>", the user agent may store the <a href="#control's-data" id="autofill-processing-model:control's-data-2">control's data</a>, and may offer previously stored values to the user. <div class=example> For example, suppose a user visits a page with this control: <pre><code class='html'><c- p><</c-><c- f>select</c-> <c- e>name</c-><c- o>=</c-><c- s>"country"</c-><c- p>></c-> <c- p><</c-><c- f>option</c-><c- p>></c->Afghanistan <c- p><</c-><c- f>option</c-><c- p>></c->Albania <c- p><</c-><c- f>option</c-><c- p>></c->Algeria <c- p><</c-><c- f>option</c-><c- p>></c->Andorra <c- p><</c-><c- f>option</c-><c- p>></c->Angola <c- p><</c-><c- f>option</c-><c- p>></c->Antigua and Barbuda <c- p><</c-><c- f>option</c-><c- p>></c->Argentina <c- p><</c-><c- f>option</c-><c- p>></c->Armenia <c- c></c-> <c- p><</c-><c- f>option</c-><c- p>></c->Yemen <c- p><</c-><c- f>option</c-><c- p>></c->Zambia <c- p><</c-><c- f>option</c-><c- p>></c->Zimbabwe <c- p></</c-><c- f>select</c-><c- p>></c-></code></pre> This might render as follows: <img src=/images/select-country-1.png alt="A drop-down control with a long alphabetical list of countries."> Suppose that on the first visit to this page, the user selects "Zambia". On the second visit, the user agent could duplicate the entry for Zambia at the top of the list, so that the interface instead looks like this: <img src=/images/select-country-2.png alt="The same drop-down control with the alphabetical list of countries, but with Zambia as an entry at the top."> </div> When the <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-12>autofill field name</a> is "<code id=autofill-processing-model:attr-fe-autocomplete-on-3><a href=#attr-fe-autocomplete-on>on</a></code>", the user agent should attempt to use heuristics to determine the most appropriate values to offer the user, e.g. based on the element's <code id=autofill-processing-model:attr-fe-name><a href=#attr-fe-name>name</a></code> value, the position of the element in its <a id=autofill-processing-model:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>, what other fields exist in the form, and so forth. When the <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-13>autofill field name</a> is one of the names of the <a href=#autofill-field id=autofill-processing-model:autofill-field-2>autofill fields</a> described above, the user agent should provide suggestions that match the meaning of the field name as given in the table earlier in this section. The <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-8>autofill hint set</a> should be used to select amongst multiple possible suggestions. For example, if a user once entered one address into fields that used the "<code id=autofill-processing-model:attr-fe-autocomplete-shipping-3><a href=#attr-fe-autocomplete-shipping>shipping</a></code>" keyword, and another address into fields that used the "<code id=autofill-processing-model:attr-fe-autocomplete-billing-3><a href=#attr-fe-autocomplete-billing>billing</a></code>" keyword, then in subsequent forms only the first address would be suggested for form controls whose <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-9>autofill hint set</a> contains the keyword "<code id=autofill-processing-model:attr-fe-autocomplete-shipping-4><a href=#attr-fe-autocomplete-shipping>shipping</a></code>". Both addresses might be suggested, however, for address-related form controls whose <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-10>autofill hint set</a> does not contain either keyword. <dt>When wearing the <a href=#autofill-anchor-mantle id=autofill-processing-model:autofill-anchor-mantle-3>autofill anchor mantle</a>... <dd> When the <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-14>autofill field name</a> is not the empty string, then the user agent must act as if the user had specified the <a href="#control's-data" id="autofill-processing-model:control's-data-3">control's data</a> for the given <a href=#autofill-hint-set id=autofill-processing-model:autofill-hint-set-11>autofill hint set</a>, <a href=#autofill-scope id=autofill-processing-model:autofill-scope-5>autofill scope</a>, and <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-15>autofill field name</a> combination. </dl> When the user agent <dfn id=concept-fe-autofill>autofills form controls</dfn>, elements with the same <a href=#form-owner id=autofill-processing-model:form-owner-2>form owner</a> and the same <a href=#autofill-scope id=autofill-processing-model:autofill-scope-6>autofill scope</a> must use data relating to the same person, address, payment instrument, and contact details. When a user agent autofills "<code id=autofill-processing-model:attr-fe-autocomplete-country-2><a href=#attr-fe-autocomplete-country>country</a></code>" and "<code id=autofill-processing-model:attr-fe-autocomplete-country-name-2><a href=#attr-fe-autocomplete-country-name>country-name</a></code>" fields with the same <a href=#form-owner id=autofill-processing-model:form-owner-3>form owner</a> and <a href=#autofill-scope id=autofill-processing-model:autofill-scope-7>autofill scope</a>, and the user agent has a value for the <code id=autofill-processing-model:attr-fe-autocomplete-country-3><a href=#attr-fe-autocomplete-country>country</a></code>" field(s), then the "<code id=autofill-processing-model:attr-fe-autocomplete-country-name-3><a href=#attr-fe-autocomplete-country-name>country-name</a></code>" field(s) must be filled using a human-readable name for the same country. When a user agent fills in multiple fields at once, all fields with the same <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-16>autofill field name</a>, <a href=#form-owner id=autofill-processing-model:form-owner-4>form owner</a>, and <a href=#autofill-scope id=autofill-processing-model:autofill-scope-8>autofill scope</a> must be filled with the same value. Suppose a user agent knows of two phone numbers, +1 555 123 1234 and +1 555 666 7777. It would not be conforming for the user agent to fill a field with <code>autocomplete="shipping tel-local-prefix"</code> with the value "123" and another field in the same form with <code>autocomplete="shipping tel-local-suffix"</code> with the value "7777". The only valid prefilled values given the aforementioned information would be "123" and "1234", or "666" and "7777", respectively. Similarly, if a form for some reason contained both a "<code id=autofill-processing-model:attr-fe-autocomplete-cc-exp-3><a href=#attr-fe-autocomplete-cc-exp>cc-exp</a></code>" field and a "<code id=autofill-processing-model:attr-fe-autocomplete-cc-exp-month-2><a href=#attr-fe-autocomplete-cc-exp-month>cc-exp-month</a></code>" field, and the user agent prefilled the form, then the month component of the former would have to match the latter. <div class=example> This requirement interacts with the <a href=#autofill-anchor-mantle id=autofill-processing-model:autofill-anchor-mantle-4>autofill anchor mantle</a> also. Consider the following markup snippet: <pre><code class='html'><c- p><</c-><c- f>form</c-><c- p>></c-> <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>hidden</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"nickname"</c-> <c- e>value</c-><c- o>=</c-><c- s>"TreePlate"</c-><c- p>></c-> <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"nickname"</c-><c- p>></c-> <c- p></</c-><c- f>form</c-><c- p>></c-></code></pre> The only value that a conforming user agent could suggest in the text control is "TreePlate", the value given by the hidden <code id=autofill-processing-model:the-input-element-4><a href=input.html#the-input-element>input</a></code> element. </div> The "<code>section-*</code>" tokens in the <a href=#autofill-scope id=autofill-processing-model:autofill-scope-9>autofill scope</a> are opaque; user agents must not attempt to derive meaning from the precise values of these tokens. For example, it would not be conforming if the user agent decided that it should offer the address it knows to be the user's daughter's address for "<code>section-child</code>" and the addresses it knows to be the user's spouses' addresses for "<code>section-spouse</code>". The autocompletion mechanism must be implemented by the user agent acting as if the user had modified the <a href="#control's-data" id="autofill-processing-model:control's-data-4">control's data</a>, and must be done at a time where the element is <a href=#concept-fe-mutable>mutable</a> (e.g. just after the element has been inserted into the document, or when the user agent <a href=parsing.html#stop-parsing id=autofill-processing-model:stop-parsing>stops parsing</a>). User agents must only prefill controls using values that the user could have entered. For example, if a <code id=autofill-processing-model:the-select-element-6><a href=form-elements.html#the-select-element>select</a></code> element only has <code id=autofill-processing-model:the-option-element-3><a href=form-elements.html#the-option-element>option</a></code> elements with values "Steve" and "Rebecca", "Jay", and "Bob", and has an <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-17>autofill field name</a> "<code id=autofill-processing-model:attr-fe-autocomplete-given-name-2><a href=#attr-fe-autocomplete-given-name>given-name</a></code>", but the user agent's only idea for what to prefill the field with is "Evan", then the user agent cannot prefill the field. It would not be conforming to somehow set the <code id=autofill-processing-model:the-select-element-7><a href=form-elements.html#the-select-element>select</a></code> element to the value "Evan", since the user could not have done so themselves. A user agent prefilling a form control must not discriminate between form controls that are <a id=autofill-processing-model:in-a-document-tree href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a> and those that are <a id=autofill-processing-model:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>; that is, it is not conforming to make the decision on whether or not to autofill based on whether the element's <a id=autofill-processing-model:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a> is a <a id=autofill-processing-model:shadow-root href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a> versus a <code id=autofill-processing-model:document><a href=dom.html#document>Document</a></code>. A user agent prefilling a form control's <a href=#concept-fe-value id=autofill-processing-model:concept-fe-value-2>value</a> must not cause that control to <a href=#suffering-from-a-type-mismatch id=autofill-processing-model:suffering-from-a-type-mismatch>suffer from a type mismatch</a>, <a href=#suffering-from-being-too-long id=autofill-processing-model:suffering-from-being-too-long>suffer from being too long</a>, <a href=#suffering-from-being-too-short id=autofill-processing-model:suffering-from-being-too-short>suffer from being too short</a>, <a href=#suffering-from-an-underflow id=autofill-processing-model:suffering-from-an-underflow>suffer from an underflow</a>, <a href=#suffering-from-an-overflow id=autofill-processing-model:suffering-from-an-overflow>suffer from an overflow</a>, or <a href=#suffering-from-a-step-mismatch id=autofill-processing-model:suffering-from-a-step-mismatch>suffer from a step mismatch</a>. A user agent prefilling a form control's <a href=#concept-fe-value id=autofill-processing-model:concept-fe-value-3>value</a> must not cause that control to <a href=#suffering-from-a-pattern-mismatch id=autofill-processing-model:suffering-from-a-pattern-mismatch>suffer from a pattern mismatch</a> either. Where possible given the control's constraints, user agents must use the format given as canonical in the aforementioned table. Where it's not possible for the canonical format to be used, user agents should use heuristics to attempt to convert values so that they can be used. <div class=example> For example, if the user agent knows that the user's middle name is "Ines", and attempts to prefill a form control that looks like this: <pre><code class='html'><c- p><</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>middle-initial</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>1</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"additional-name"</c-><c- p>></c-></code></pre> ...then the user agent could convert "Ines" to "I" and prefill it that way. </div> <div class=example> A more elaborate example would be with month values. If the user agent knows that the user's birthday is the 27th of July 2012, then it might try to prefill all of the following controls with slightly different values, all driven from this information: <table><tr><td> <pre><code class='html'><c- p><</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>b</c-> <c- e>type</c-><c- o>=</c-><c- s>month</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"bday"</c-><c- p>></c-></code></pre> <td> 2012-07 <td> The day is dropped since the <a href="input.html#month-state-(type=month)" id="autofill-processing-model:month-state-(type=month)">Month</a> state only accepts a month/year combination. (Note that this example is non-conforming, because the <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-18>autofill field name</a> <code id=autofill-processing-model:attr-fe-autocomplete-bday-2><a href=#attr-fe-autocomplete-bday>bday</a></code> is not allowed with the <a href="input.html#month-state-(type=month)" id="autofill-processing-model:month-state-(type=month)-2">Month</a> state.) <tr><td> <pre><code class='html'><c- p><</c-><c- f>select</c-> <c- e>name</c-><c- o>=</c-><c- s>c</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"bday"</c-><c- p>></c-> <c- p><</c-><c- f>option</c-><c- p>></c->Jan <c- p><</c-><c- f>option</c-><c- p>></c->Feb ... <c- p><</c-><c- f>option</c-><c- p>></c->Jul <c- p><</c-><c- f>option</c-><c- p>></c->Aug ... <c- p></</c-><c- f>select</c-><c- p>></c-></code></pre> <td> July <td> The user agent picks the month from the listed options, either by noticing there are twelve options and picking the 7th, or by recognizing that one of the strings (three characters "Jul" followed by a newline and a space) is a close match for the name of the month (July) in one of the user agent's supported languages, or through some other similar mechanism. <tr><td> <pre><code class='html'><c- p><</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>a</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>min</c-><c- o>=</c-><c- s>1</c-> <c- e>max</c-><c- o>=</c-><c- s>12</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"bday-month"</c-><c- p>></c-></code></pre> <td> 7 <td> User agent converts "July" to a month number in the range 1..12, like the field. <tr><td> <pre><code class='html'><c- p><</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>a</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>11</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"bday-month"</c-><c- p>></c-></code></pre> <td> 6 <td> User agent converts "July" to a month number in the range 0..11, like the field. <tr><td> <pre><code class='html'><c- p><</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>a</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>min</c-><c- o>=</c-><c- s>1</c-> <c- e>max</c-><c- o>=</c-><c- s>11</c-> <c- e>autocomplete</c-><c- o>=</c-><c- s>"bday-month"</c-><c- p>></c-></code></pre> <td> <td> User agent doesn't fill in the field, since it can't make a good guess as to what the form expects. </table> </div> A user agent may allow the user to override an element's <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-19>autofill field name</a>, e.g. to change it from "<code id=autofill-processing-model:attr-fe-autocomplete-off-6><a href=#attr-fe-autocomplete-off>off</a></code>" to "<code id=autofill-processing-model:attr-fe-autocomplete-on-4><a href=#attr-fe-autocomplete-on>on</a></code>" to allow values to be remembered and prefilled despite the page author's objections, or to always "<code id=autofill-processing-model:attr-fe-autocomplete-off-7><a href=#attr-fe-autocomplete-off>off</a></code>", never remembering values. More specifically, user agents may in particular consider replacing the <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-20>autofill field name</a> of form controls that match the description given in the first column of the following table, when their <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-21>autofill field name</a> is either "<code id=autofill-processing-model:attr-fe-autocomplete-on-5><a href=#attr-fe-autocomplete-on>on</a></code>" or "<code id=autofill-processing-model:attr-fe-autocomplete-off-8><a href=#attr-fe-autocomplete-off>off</a></code>", with the value given in the second cell of that row. If this table is used, the replacements must be done in <a id=autofill-processing-model:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, since all but the first row references the <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-22>autofill field name</a> of earlier elements. When the descriptions below refer to form controls being preceded or followed by others, they mean in the list of <a href=forms.html#category-listed id=autofill-processing-model:category-listed>listed elements</a> that share the same <a href=#form-owner id=autofill-processing-model:form-owner-5>form owner</a>. <table><thead><tr><th>Form control <th>New <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-23>autofill field name</a> <tbody><tr><td> an <code id=autofill-processing-model:the-input-element-5><a href=input.html#the-input-element>input</a></code> element whose <code id=autofill-processing-model:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="autofill-processing-model:text-(type=text)-state-and-search-state-(type=search)">Text</a> state that is followed by an <code id=autofill-processing-model:the-input-element-6><a href=input.html#the-input-element>input</a></code> element whose <code id=autofill-processing-model:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#password-state-(type=password)" id="autofill-processing-model:password-state-(type=password)">Password</a> state <td> "<code id=autofill-processing-model:attr-fe-autocomplete-username-2><a href=#attr-fe-autocomplete-username>username</a></code>" <tr><td> an <code id=autofill-processing-model:the-input-element-7><a href=input.html#the-input-element>input</a></code> element whose <code id=autofill-processing-model:attr-input-type-4><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#password-state-(type=password)" id="autofill-processing-model:password-state-(type=password)-2">Password</a> state that is preceded by an <code id=autofill-processing-model:the-input-element-8><a href=input.html#the-input-element>input</a></code> element whose <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-24>autofill field name</a> is "<code id=autofill-processing-model:attr-fe-autocomplete-username-3><a href=#attr-fe-autocomplete-username>username</a></code>" <td> "<code id=autofill-processing-model:attr-fe-autocomplete-current-password-2><a href=#attr-fe-autocomplete-current-password>current-password</a></code>" <tr><td> an <code id=autofill-processing-model:the-input-element-9><a href=input.html#the-input-element>input</a></code> element whose <code id=autofill-processing-model:attr-input-type-5><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#password-state-(type=password)" id="autofill-processing-model:password-state-(type=password)-3">Password</a> state that is preceded by an <code id=autofill-processing-model:the-input-element-10><a href=input.html#the-input-element>input</a></code> element whose <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-25>autofill field name</a> is "<code id=autofill-processing-model:attr-fe-autocomplete-current-password-3><a href=#attr-fe-autocomplete-current-password>current-password</a></code>" <td> "<code id=autofill-processing-model:attr-fe-autocomplete-new-password-2><a href=#attr-fe-autocomplete-new-password>new-password</a></code>" <tr><td> an <code id=autofill-processing-model:the-input-element-11><a href=input.html#the-input-element>input</a></code> element whose <code id=autofill-processing-model:attr-input-type-6><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#password-state-(type=password)" id="autofill-processing-model:password-state-(type=password)-4">Password</a> state that is preceded by an <code id=autofill-processing-model:the-input-element-12><a href=input.html#the-input-element>input</a></code> element whose <a href=#autofill-field-name id=autofill-processing-model:autofill-field-name-26>autofill field name</a> is "<code id=autofill-processing-model:attr-fe-autocomplete-new-password-3><a href=#attr-fe-autocomplete-new-password>new-password</a></code>" <td> "<code id=autofill-processing-model:attr-fe-autocomplete-new-password-4><a href=#attr-fe-autocomplete-new-password>new-password</a></code>" </table> The <dfn data-dfn-for=HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement id=dom-fe-autocomplete data-dfn-type=attribute><code>autocomplete</code></dfn> IDL attribute, on getting, must return the element's <a href=#idl-exposed-autofill-value id=autofill-processing-model:idl-exposed-autofill-value-5>IDL-exposed autofill value</a>, and on setting, must <a id=autofill-processing-model:reflect href=common-dom-interfaces.html#reflect>reflect</a> the content attribute of the same name. <h4 id=textFieldSelection>4.10.19 APIs for the text control selections<a href=#textFieldSelection class=self-link></a></h4> The <code id=textFieldSelection:the-input-element><a href=input.html#the-input-element>input</a></code> and <code id=textFieldSelection:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements define several attributes and methods for handling their selection. Their shared algorithms are defined here. <dl class=domintro><dt><code><var>element</var>.<a href=#dom-textarea/input-select id=dom-textarea/input-select-dev>select</a>()</code><dd>Selects everything in the text control.<dt><code><var>element</var>.<a href=#dom-textarea/input-selectionstart id=dom-textarea/input-selectionstart-dev>selectionStart</a> [ = <var>value</var> ]</code><dd> Returns the offset to the start of the selection. Can be set, to change the start of the selection. <dt><code><var>element</var>.<a href=#dom-textarea/input-selectionend id=dom-textarea/input-selectionend-dev>selectionEnd</a> [ = <var>value</var> ]</code><dd> Returns the offset to the end of the selection. Can be set, to change the end of the selection. <dt><code><var>element</var>.<a href=#dom-textarea/input-selectiondirection id=dom-textarea/input-selectiondirection-dev>selectionDirection</a> [ = <var>value</var> ]</code><dd> Returns the current direction of the selection. Can be set, to change the direction of the selection. The possible values are "<code>forward</code>", "<code>backward</code>", and "<code>none</code>". <dt><code><var>element</var>.<a href=#dom-textarea/input-setselectionrange id=dom-textarea/input-setselectionrange-dev>setSelectionRange</a>(<var>start</var>, <var>end</var> [, <var>direction</var>])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange title="The HTMLInputElement.setSelectionRange() method sets the start and end positions of the current text selection in an <input> or <textarea> element.">HTMLInputElement/setSelectionRange</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera8+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+</div></div></div><dd> Changes the selection to cover the given substring in the given direction. If the direction is omitted, it will be reset to be the platform default (none or forward). <dt><code><var>element</var>.<a href=#dom-textarea/input-setrangetext id=dom-textarea/input-setrangetext-dev>setRangeText</a>(<var>replacement</var> [, <var>start</var>, <var>end</var> [, <var>selectionMode</var> ] ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText title="The HTMLInputElement.setRangeText() method replaces a range of text in an <input> or <textarea> element with a new string.">HTMLInputElement/setRangeText</a>Support in all current engines.<div class=support>Firefox27+Safari7+Chrome24+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><dd> Replaces a range of text with the new text. If the <var>start</var> and <var>end</var> arguments are not provided, the range is assumed to be the selection. The final argument determines how the selection will be set after the text has been replaced. The possible values are: <dl><dt>"<code id=dom-selectionmode-select-dev><a href=#dom-selectionmode-select>select</a></code>"<dd>Selects the newly inserted text.<dt>"<code id=dom-selectionmode-start-dev><a href=#dom-selectionmode-start>start</a></code>"<dd>Moves the selection to just before the inserted text.<dt>"<code id=dom-selectionmode-end-dev><a href=#dom-selectionmode-end>end</a></code>"<dd>Moves the selection to just after the selected text.<dt>"<code id=dom-selectionmode-preserve-dev><a href=#dom-selectionmode-preserve>preserve</a></code>"<dd>Attempts to preserve the selection. This is the default.</dl> </dl> All <code id=textFieldSelection:the-input-element-2><a href=input.html#the-input-element>input</a></code> elements to which these APIs <a href=input.html#concept-input-apply id=textFieldSelection:concept-input-apply>apply</a>, and all <code id=textFieldSelection:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, have either a <dfn id=concept-textarea/input-selection>selection</dfn> or a <dfn id=concept-textarea/input-cursor>text entry cursor position</dfn> at all times (even for elements that are not <a id=textFieldSelection:being-rendered href=rendering.html#being-rendered>being rendered</a>), measured in offsets into the <a href=https://infra.spec.whatwg.org/#code-unit id=textFieldSelection:code-unit data-x-internal=code-unit>code units</a> of the control's <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value>relevant value</a>. The initial state must consist of a <a href=#concept-textarea/input-cursor id=textFieldSelection:concept-textarea/input-cursor>text entry cursor</a> at the beginning of the control. For <code id=textFieldSelection:the-input-element-3><a href=input.html#the-input-element>input</a></code> elements, these APIs must operate on the element's <a href=#concept-fe-value id=textFieldSelection:concept-fe-value>value</a>. For <code id=textFieldSelection:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, these APIs must operate on the element's <a href=#concept-fe-api-value id=textFieldSelection:concept-fe-api-value>API value</a>. In the below algorithms, we call the value string being operated on the <dfn id=concept-textarea/input-relevant-value>relevant value</dfn>. <div class=example> The use of <a href=#concept-fe-api-value id=textFieldSelection:concept-fe-api-value-2>API value</a> instead of <a href=form-elements.html#concept-textarea-raw-value id=textFieldSelection:concept-textarea-raw-value>raw value</a> for <code id=textFieldSelection:the-textarea-element-4><a href=form-elements.html#the-textarea-element>textarea</a></code> elements means that U+000D (CR) characters are normalized away. For example, <pre><code class='html'><c- p><</c-><c- f>textarea</c-> <c- e>id</c-><c- o>=</c-><c- s>"demo"</c-><c- p>></</c-><c- f>textarea</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> demo<c- p>.</c->value <c- o>=</c-> <c- u>"A\r\nB"</c-><c- p>;</c-> demo<c- p>.</c->setRangeText<c- p>(</c-><c- u>"replaced"</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- mf>2</c-><c- p>);</c-> assert<c- p>(</c->demo<c- p>.</c->value <c- o>===</c-> <c- u>"replacedB"</c-><c- p>);</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> If we had operated on the <a href=form-elements.html#concept-textarea-raw-value id=textFieldSelection:concept-textarea-raw-value-2>raw value</a> of "<code>A\r\nB</code>", then we would have replaced the characters "<code>A\r</code>", ending up with a result of "<code>replaced\nB</code>". But since we used the <a href=#concept-fe-api-value id=textFieldSelection:concept-fe-api-value-3>API value</a> of "<code>A\nB</code>", we replaced the characters "<code>A\n</code>", giving "<code>replacedB</code>". </div> 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. Whenever the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-2>relevant value</a> changes for an element to which these APIs apply, run these steps: <ol><li> If the element has a <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection>selection</a>: <ol><li>If the start of the selection is now past the end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-3>relevant value</a>, set it to the end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-4>relevant value</a>.<li>If the end of the selection is now past the end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-5>relevant value</a>, set it to the end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-6>relevant value</a>.<li>If the user agent does not support empty selection, and both the start and end of the selection are now pointing to the end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-7>relevant value</a>, then instead set the element's <a href=#concept-textarea/input-cursor id=textFieldSelection:concept-textarea/input-cursor-2>text entry cursor position</a> to the end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-8>relevant value</a>, removing any selection.</ol> <li>Otherwise, the element must have a <a href=#concept-textarea/input-cursor id=textFieldSelection:concept-textarea/input-cursor-3>text entry cursor position</a> position. If it is now past the end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-9>relevant value</a>, set it to the end of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-10>relevant value</a>.</ol> In some cases where the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-11>relevant value</a> changes, other parts of the specification will also modify the <a href=#concept-textarea/input-cursor id=textFieldSelection:concept-textarea/input-cursor-4>text entry cursor position</a>, beyond just the clamping steps above. For example, see the <code id=textFieldSelection:dom-textarea-value><a href=form-elements.html#dom-textarea-value>value</a></code> setter for <code id=textFieldSelection:the-textarea-element-5><a href=form-elements.html#the-textarea-element>textarea</a></code>. Where possible, user interface features for changing the <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-2>text selection</a> in <code id=textFieldSelection:the-input-element-4><a href=input.html#the-input-element>input</a></code> and <code id=textFieldSelection:the-textarea-element-6><a href=form-elements.html#the-textarea-element>textarea</a></code> elements must be implemented using the <a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range>set the selection range</a> algorithm so that, e.g., all the same events fire. The <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-3>selections</a> of <code id=textFieldSelection:the-input-element-5><a href=input.html#the-input-element>input</a></code> and <code id=textFieldSelection:the-textarea-element-7><a href=form-elements.html#the-textarea-element>textarea</a></code> elements have a <dfn id=selection-direction>selection direction</dfn>, which is either "<code>forward</code>", "<code>backward</code>", or "<code>none</code>". The exact meaning of the selection direction depends on the platform. This direction is set when the user manipulates the selection. The initial <a href=#selection-direction id=textFieldSelection:selection-direction>selection direction</a> must be "<code>none</code>" if the platform supports that direction, or "<code>forward</code>" otherwise. To <dfn id=set-the-selection-direction>set the selection direction</dfn> of an element to a given direction, update the element's <a href=#selection-direction id=textFieldSelection:selection-direction-2>selection direction</a> to the given direction, unless the direction is "<code>none</code>" and the platform does not support that direction; in that case, update the element's <a href=#selection-direction id=textFieldSelection:selection-direction-3>selection direction</a> to "<code>forward</code>". <div class=note> On Windows, the direction indicates the position of the caret relative to the selection: a "<code>forward</code>" selection has the caret at the end of the selection and a "<code>backward</code>" selection has the caret at the start of the selection. Windows has no "<code>none</code>" direction. On Mac, the direction indicates which end of the selection is affected when the user adjusts the size of the selection using the arrow keys with the Shift modifier: the "<code>forward</code>" direction means the end of the selection is modified, and the "<code>backward</code>" direction means the start of the selection is modified. The "<code>none</code>" direction is the default on Mac, it indicates that no particular direction has yet been selected. The user sets the direction implicitly when first adjusting the selection, based on which directional arrow key was used. </div> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select title="The HTMLInputElement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.">HTMLInputElement/select</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select title="The HTMLInputElement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.">HTMLInputElement/select</a></div></div>The <dfn data-dfn-for=HTMLInputElement,HTMLTextAreaElement id=dom-textarea/input-select data-dfn-type=method><code>select()</code></dfn> method, when invoked, must run the following steps: <ol><li> If this element is an <code id=textFieldSelection:the-input-element-6><a href=input.html#the-input-element>input</a></code> element, and either <code id=textFieldSelection:dom-textarea/input-select><a href=#dom-textarea/input-select>select()</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply>does not apply</a> to this element or the corresponding control has no selectable text, return. For instance, in a user agent where <code id="textFieldSelection:color-state-(type=color)"><a href="input.html#color-state-(type=color)"><input type=color></a></code> is rendered as a color well with a picker, as opposed to a text control accepting a hexadecimal color code, there would be no selectable text, and thus calls to the method are ignored. <li><a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range-2>Set the selection range</a> with 0 and infinity.</ol> The <dfn data-dfn-for=HTMLInputElement,HTMLTextAreaElement id=dom-textarea/input-selectionstart data-dfn-type=attribute><code>selectionStart</code></dfn> attribute's getter must run the following steps: <ol><li>If this element is an <code id=textFieldSelection:the-input-element-7><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-selectionstart><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-2>does not apply</a> to this element, return null.<li>If there is no <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-4>selection</a>, return the <a id=textFieldSelection:code-unit-2 href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a> offset within the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-12>relevant value</a> to the character that immediately follows the <a href=#concept-textarea/input-cursor id=textFieldSelection:concept-textarea/input-cursor-5>text entry cursor</a>.<li>Return the <a id=textFieldSelection:code-unit-3 href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a> offset within the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-13>relevant value</a> to the character that immediately follows the start of the <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-5>selection</a>.</ol> The <code id=textFieldSelection:dom-textarea/input-selectionstart-2><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> attribute's setter must run the following steps: <ol><li>If this element is an <code id=textFieldSelection:the-input-element-8><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-selectionstart-3><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-3>does not apply</a> to this element, throw an <a id=textFieldSelection:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=textFieldSelection:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>Let <var>end</var> be the value of this element's <code id=textFieldSelection:dom-textarea/input-selectionend><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> attribute.<li>If <var>end</var> is less than the given value, set <var>end</var> to the given value.<li><a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range-3>Set the selection range</a> with the given value, <var>end</var>, and the value of this element's <code id=textFieldSelection:dom-textarea/input-selectiondirection><a href=#dom-textarea/input-selectiondirection>selectionDirection</a></code> attribute.</ol> The <dfn data-dfn-for=HTMLInputElement,HTMLTextAreaElement id=dom-textarea/input-selectionend data-dfn-type=attribute><code>selectionEnd</code></dfn> attribute's getter must run the following steps: <ol><li>If this element is an <code id=textFieldSelection:the-input-element-9><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-selectionend-2><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-4>does not apply</a> to this element, return null.<li>If there is no <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-6>selection</a>, return the <a id=textFieldSelection:code-unit-4 href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a> offset within the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-14>relevant value</a> to the character that immediately follows the <a href=#concept-textarea/input-cursor id=textFieldSelection:concept-textarea/input-cursor-6>text entry cursor</a>.<li>Return the <a id=textFieldSelection:code-unit-5 href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a> offset within the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-15>relevant value</a> to the character that immediately follows the end of the <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-7>selection</a>.</ol> The <code id=textFieldSelection:dom-textarea/input-selectionend-3><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> attribute's setter must run the following steps: <ol><li>If this element is an <code id=textFieldSelection:the-input-element-10><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-selectionend-4><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-5>does not apply</a> to this element, throw an <a id=textFieldSelection:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=textFieldSelection:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range-4>Set the selection range</a> with the value of this element's <code id=textFieldSelection:dom-textarea/input-selectionstart-4><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> attribute, the given value, and the value of this element's <code id=textFieldSelection:dom-textarea/input-selectiondirection-2><a href=#dom-textarea/input-selectiondirection>selectionDirection</a></code> attribute.</ol> The <dfn data-dfn-for=HTMLInputElement,HTMLTextAreaElement id=dom-textarea/input-selectiondirection data-dfn-type=attribute><code>selectionDirection</code></dfn> attribute's getter must run the following steps: <ol><li>If this element is an <code id=textFieldSelection:the-input-element-11><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-selectiondirection-3><a href=#dom-textarea/input-selectiondirection>selectionDirection</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-6>does not apply</a> to this element, return null.<li>Return this element's <a href=#selection-direction id=textFieldSelection:selection-direction-4>selection direction</a>.</ol> The <code id=textFieldSelection:dom-textarea/input-selectiondirection-4><a href=#dom-textarea/input-selectiondirection>selectionDirection</a></code> attribute's setter must run the following steps: <ol><li>If this element is an <code id=textFieldSelection:the-input-element-12><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-selectiondirection-5><a href=#dom-textarea/input-selectiondirection>selectionDirection</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-7>does not apply</a> to this element, throw an <a id=textFieldSelection:invalidstateerror-3 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=textFieldSelection:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range-5>Set the selection range</a> with the value of this element's <code id=textFieldSelection:dom-textarea/input-selectionstart-5><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> attribute, the value of this element's <code id=textFieldSelection:dom-textarea/input-selectionend-5><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> attribute, and the given value.</ol> The <dfn data-dfn-for=HTMLInputElement,HTMLTextAreaElement id=dom-textarea/input-setselectionrange data-dfn-type=method><code>setSelectionRange(<var>start</var>, <var>end</var>, <var>direction</var>)</code></dfn> method, when invoked, must run the following steps: <ol><li>If this element is an <code id=textFieldSelection:the-input-element-13><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-setselectionrange><a href=#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-8>does not apply</a> to this element, throw an <a id=textFieldSelection:invalidstateerror-4 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=textFieldSelection:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range-6>Set the selection range</a> with <var>start</var>, <var>end</var>, and <var>direction</var>.</ol> To <dfn id=set-the-selection-range>set the selection range</dfn> with an integer or null <var>start</var>, an integer or null or the special value infinity <var>end</var>, and optionally a string <var>direction</var>, run the following steps: <ol><li>If <var>start</var> is null, let <var>start</var> be zero.<li>If <var>end</var> is null, let <var>end</var> be zero.<li>Set the <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-8>selection</a> of the text control to the sequence of <a href=https://infra.spec.whatwg.org/#code-unit id=textFieldSelection:code-unit-6 data-x-internal=code-unit>code units</a> within the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-16>relevant value</a> starting with the code unit at the <var>start</var>th position (in logical order) and ending with the code unit at the (<var>end</var>-1)th position. Arguments greater than the <a id=textFieldSelection:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-17>relevant value</a> of the text control (including the special value infinity) must be treated as pointing at the end of the text control. If <var>end</var> is less than or equal to <var>start</var> then the start of the selection and the end of the selection must both be placed immediately before the character with offset <var>end</var>. In UAs where there is no concept of an empty selection, this must set the cursor to be just before the character with offset <var>end</var>.<li>If <var>direction</var> is not <a id=textFieldSelection:identical-to href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a> either "<code>backward</code>" or "<code>forward</code>", or if the <var>direction</var> argument was not given, set <var>direction</var> to "<code>none</code>".<li><a href=#set-the-selection-direction id=textFieldSelection:set-the-selection-direction>Set the selection direction</a> of the text control to <var>direction</var>.<li>If the previous steps caused the <a href=#concept-textarea/input-selection id=textFieldSelection:concept-textarea/input-selection-9>selection</a> of the text control to be modified (in either extent or <a href=#selection-direction id=textFieldSelection:selection-direction-5>direction</a>), then <a id=textFieldSelection:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=textFieldSelection:user-interaction-task-source href=webappapis.html#user-interaction-task-source>user interaction task source</a> given the element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=textFieldSelection:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=textFieldSelection:event-select><a href=indices.html#event-select>select</a></code> at the element, with the <code id=textFieldSelection:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to true.</ol> The <dfn data-dfn-for=HTMLInputElement,HTMLTextAreaElement id=dom-textarea/input-setrangetext data-dfn-type=method><code>setRangeText(<var>replacement</var>, <var>start</var>, <var>end</var>, <var>selectMode</var>)</code></dfn> method, when invoked, must run the following steps: <ol><li>If this element is an <code id=textFieldSelection:the-input-element-14><a href=input.html#the-input-element>input</a></code> element, and <code id=textFieldSelection:dom-textarea/input-setrangetext><a href=#dom-textarea/input-setrangetext>setRangeText()</a></code> <a href=input.html#do-not-apply id=textFieldSelection:do-not-apply-9>does not apply</a> to this element, throw an <a id=textFieldSelection:invalidstateerror-5 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=textFieldSelection:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>Set this element's <a href=#concept-fe-dirty id=textFieldSelection:concept-fe-dirty>dirty value flag</a> to true.<li> If the method has only one argument, then let <var>start</var> and <var>end</var> have the values of the <code id=textFieldSelection:dom-textarea/input-selectionstart-6><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> attribute and the <code id=textFieldSelection:dom-textarea/input-selectionend-6><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> attribute respectively. Otherwise, let <var>start</var>, <var>end</var> have the values of the second and third arguments respectively. <li>If <var>start</var> is greater than <var>end</var>, then throw an <a id=textFieldSelection:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=textFieldSelection:domexception-6><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>If <var>start</var> is greater than the <a id=textFieldSelection:length-2 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-18>relevant value</a> of the text control, then set it to the <a id=textFieldSelection:length-3 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-19>relevant value</a> of the text control.<li>If <var>end</var> is greater than the <a id=textFieldSelection:length-4 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-20>relevant value</a> of the text control, then set it to the <a id=textFieldSelection:length-5 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-21>relevant value</a> of the text control.<li>Let <var>selection start</var> be the current value of the <code id=textFieldSelection:dom-textarea/input-selectionstart-7><a href=#dom-textarea/input-selectionstart>selectionStart</a></code> attribute.<li>Let <var>selection end</var> be the current value of the <code id=textFieldSelection:dom-textarea/input-selectionend-7><a href=#dom-textarea/input-selectionend>selectionEnd</a></code> attribute.<li>If <var>start</var> is less than <var>end</var>, delete the sequence of <a href=https://infra.spec.whatwg.org/#code-unit id=textFieldSelection:code-unit-7 data-x-internal=code-unit>code units</a> within the element's <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-22>relevant value</a> starting with the code unit at the <var>start</var>th position and ending with the code unit at the (<var>end</var>-1)th position.<li>Insert the value of the first argument into the text of the <a href=#concept-textarea/input-relevant-value id=textFieldSelection:concept-textarea/input-relevant-value-23>relevant value</a> of the text control, immediately before the <var>start</var>th <a id=textFieldSelection:code-unit-8 href=https://infra.spec.whatwg.org/#code-unit data-x-internal=code-unit>code unit</a>.<li>Let <var>new length</var> be the <a id=textFieldSelection:length-6 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the value of the first argument.<li>Let <var>new end</var> be the sum of <var>start</var> and <var>new length</var>.<li> Run the appropriate set of substeps from the following list: <dl class=switch><dt>If the fourth argument's value is "<dfn data-dfn-for=SelectionMode id=dom-selectionmode-select data-dfn-type=enum-value><code>select</code></dfn>"<dd> Let <var>selection start</var> be <var>start</var>. Let <var>selection end</var> be <var>new end</var>. <dt>If the fourth argument's value is "<dfn data-dfn-for=SelectionMode id=dom-selectionmode-start data-dfn-type=enum-value><code>start</code></dfn>"<dd> Let <var>selection start</var> and <var>selection end</var> be <var>start</var>. <dt>If the fourth argument's value is "<dfn data-dfn-for=SelectionMode id=dom-selectionmode-end data-dfn-type=enum-value><code>end</code></dfn>"<dd> Let <var>selection start</var> and <var>selection end</var> be <var>new end</var>. <dt>If the fourth argument's value is "<dfn data-dfn-for=SelectionMode id=dom-selectionmode-preserve data-dfn-type=enum-value><code>preserve</code></dfn>"<dt>If the method has only one argument<dd> <ol><li>Let <var>old length</var> be <var>end</var> minus <var>start</var>. <li>Let <var>delta</var> be <var>new length</var> minus <var>old length</var>. <li> If <var>selection start</var> is greater than <var>end</var>, then increment it by <var>delta</var>. (If <var>delta</var> is negative, i.e. the new text is shorter than the old text, then this will decrease the value of <var>selection start</var>.) Otherwise: if <var>selection start</var> is greater than <var>start</var>, then set it to <var>start</var>. (This snaps the start of the selection to the start of the new text if it was in the middle of the text that it replaced.) <li> If <var>selection end</var> is greater than <var>end</var>, then increment it by <var>delta</var> in the same way. Otherwise: if <var>selection end</var> is greater than <var>start</var>, then set it to <var>new end</var>. (This snaps the end of the selection to the end of the new text if it was in the middle of the text that it replaced.) </ol> </dl> <li><a href=#set-the-selection-range id=textFieldSelection:set-the-selection-range-7>Set the selection range</a> with <var>selection start</var> and <var>selection end</var>.</ol> The <code id=textFieldSelection:dom-textarea/input-setrangetext-2><a href=#dom-textarea/input-setrangetext>setRangeText()</a></code> method uses the following enumeration: <pre><code class='idl'><c- b>enum</c-> <dfn id='selectionmode' data-dfn-type='enum'><c- g>SelectionMode</c-></dfn> { <c- s>"</c-><a href='#dom-selectionmode-select' id='textFieldSelection:dom-selectionmode-select'><c- s>select</c-></a><c- s>"</c->, <c- s>"</c-><a href='#dom-selectionmode-start' id='textFieldSelection:dom-selectionmode-start'><c- s>start</c-></a><c- s>"</c->, <c- s>"</c-><a href='#dom-selectionmode-end' id='textFieldSelection:dom-selectionmode-end'><c- s>end</c-></a><c- s>"</c->, <c- s>"</c-><a href='#dom-selectionmode-preserve' id='textFieldSelection:dom-selectionmode-preserve'><c- s>preserve</c-></a><c- s>"</c-> // default };</code></pre> <hr> <div class=example> To obtain the currently selected text, the following JavaScript suffices: <pre><code class='js'><c- a>var</c-> selectionText <c- o>=</c-> control<c- p>.</c->value<c- p>.</c->substring<c- p>(</c->control<c- p>.</c->selectionStart<c- p>,</c-> control<c- p>.</c->selectionEnd<c- p>);</c-></code></pre> ...where <var>control</var> is the <code id=textFieldSelection:the-input-element-15><a href=input.html#the-input-element>input</a></code> or <code id=textFieldSelection:the-textarea-element-8><a href=form-elements.html#the-textarea-element>textarea</a></code> element. </div> <div class=example> To add some text at the start of a text control, while maintaining the text selection, the three attributes must be preserved: <pre><code class='js'><c- a>var</c-> oldStart <c- o>=</c-> control<c- p>.</c->selectionStart<c- p>;</c-> <c- a>var</c-> oldEnd <c- o>=</c-> control<c- p>.</c->selectionEnd<c- p>;</c-> <c- a>var</c-> oldDirection <c- o>=</c-> control<c- p>.</c->selectionDirection<c- p>;</c-> <c- a>var</c-> prefix <c- o>=</c-> <c- u>"http://"</c-><c- p>;</c-> control<c- p>.</c->value <c- o>=</c-> prefix <c- o>+</c-> control<c- p>.</c->value<c- p>;</c-> control<c- p>.</c->setSelectionRange<c- p>(</c->oldStart <c- o>+</c-> prefix<c- p>.</c->length<c- p>,</c-> oldEnd <c- o>+</c-> prefix<c- p>.</c->length<c- p>,</c-> oldDirection<c- p>);</c-></code></pre> ...where <var>control</var> is the <code id=textFieldSelection:the-input-element-16><a href=input.html#the-input-element>input</a></code> or <code id=textFieldSelection:the-textarea-element-9><a href=form-elements.html#the-textarea-element>textarea</a></code> element. </div> <h4 id=constraints>4.10.20 Constraints<a href=#constraints class=self-link></a></h4> <h5 id=definitions>4.10.20.1 Definitions<a href=#definitions class=self-link></a></h5> A <a href=forms.html#category-submit id=definitions:category-submit>submittable element</a> is a <dfn id=candidate-for-constraint-validation>candidate for constraint validation</dfn> except when a condition has <dfn id=barred-from-constraint-validation>barred the element from constraint validation</dfn>. (For example, an element is <a href=#barred-from-constraint-validation id=definitions:barred-from-constraint-validation>barred from constraint validation</a> if it has a <code id=definitions:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code> element ancestor.) An element can have a <dfn id=custom-validity-error-message>custom validity error message</dfn> defined. Initially, an element must have its <a href=#custom-validity-error-message id=definitions:custom-validity-error-message>custom validity error message</a> set to the empty string. When its value is not the empty string, the element is <a href=#suffering-from-a-custom-error id=definitions:suffering-from-a-custom-error>suffering from a custom error</a>. It can be set using the <code id=definitions:dom-cva-setcustomvalidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method, except for <a href=custom-elements.html#form-associated-custom-element id=definitions:form-associated-custom-element>form-associated custom elements</a>. <a href=custom-elements.html#form-associated-custom-element id=definitions:form-associated-custom-element-2>Form-associated custom elements</a> can have a <a href=#custom-validity-error-message id=definitions:custom-validity-error-message-2>custom validity error message</a> set via their <code id=definitions:elementinternals><a href=custom-elements.html#elementinternals>ElementInternals</a></code> object's <code id=definitions:dom-elementinternals-setvalidity><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method. The user agent should use the <a href=#custom-validity-error-message id=definitions:custom-validity-error-message-3>custom validity error message</a> when alerting the user to the problem with the control. An element can be constrained in various ways. The following is the list of <dfn id=validity-states>validity states</dfn> 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.) <dl><dt> <dfn id=suffering-from-being-missing>Suffering from being missing</dfn> <dd> When a control has no <a href=#concept-fe-value id=definitions:concept-fe-value>value</a> but has a <code>required</code> attribute (<code id=definitions:the-input-element><a href=input.html#the-input-element>input</a></code> <code id=definitions:attr-input-required><a href=input.html#attr-input-required>required</a></code>, <code id=definitions:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> <code id=definitions:attr-textarea-required><a href=form-elements.html#attr-textarea-required>required</a></code>); or, more complicated rules for <code id=definitions:the-select-element><a href=form-elements.html#the-select-element>select</a></code> elements and controls in <a href=input.html#radio-button-group id=definitions:radio-button-group>radio button groups</a>, as specified in their sections. When the <code id=definitions:dom-elementinternals-setvalidity-2><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets <code>valueMissing</code> flag to true for a <a id=definitions:form-associated-custom-element-3 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>. <dt> <dfn id=suffering-from-a-type-mismatch>Suffering from a type mismatch</dfn> <dd> When a control that allows arbitrary user input has a <a href=#concept-fe-value id=definitions:concept-fe-value-2>value</a> that is not in the correct syntax (<a href="input.html#email-state-(type=email)" id="definitions:email-state-(type=email)">Email</a>, <a href="input.html#url-state-(type=url)" id="definitions:url-state-(type=url)">URL</a>). When the <code id=definitions:dom-elementinternals-setvalidity-3><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets <code>typeMismatch</code> flag to true for a <a id=definitions:form-associated-custom-element-4 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>. <dt> <dfn id=suffering-from-a-pattern-mismatch>Suffering from a pattern mismatch</dfn> <dd> When a control has a <a href=#concept-fe-value id=definitions:concept-fe-value-3>value</a> that doesn't satisfy the <code id=definitions:attr-input-pattern><a href=input.html#attr-input-pattern>pattern</a></code> attribute. When the <code id=definitions:dom-elementinternals-setvalidity-4><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets <code>patternMismatch</code> flag to true for a <a id=definitions:form-associated-custom-element-5 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>. <dt> <dfn id=suffering-from-being-too-long>Suffering from being too long</dfn> <dd> When a control has a <a href=#concept-fe-value id=definitions:concept-fe-value-4>value</a> that is too long for the <a href=#attr-fe-maxlength id=definitions:attr-fe-maxlength>form control <code>maxlength</code> attribute</a> (<code id=definitions:the-input-element-2><a href=input.html#the-input-element>input</a></code> <code id=definitions:attr-input-maxlength><a href=input.html#attr-input-maxlength>maxlength</a></code>, <code id=definitions:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> <code id=definitions:attr-textarea-maxlength><a href=form-elements.html#attr-textarea-maxlength>maxlength</a></code>). When the <code id=definitions:dom-elementinternals-setvalidity-5><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets <code>tooLong</code> flag to true for a <a id=definitions:form-associated-custom-element-6 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>. <dt> <dfn id=suffering-from-being-too-short>Suffering from being too short</dfn> <dd> When a control has a <a href=#concept-fe-value id=definitions:concept-fe-value-5>value</a> that is too short for the <a href=#attr-fe-minlength id=definitions:attr-fe-minlength>form control <code>minlength</code> attribute</a> (<code id=definitions:the-input-element-3><a href=input.html#the-input-element>input</a></code> <code id=definitions:attr-input-minlength><a href=input.html#attr-input-minlength>minlength</a></code>, <code id=definitions:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code> <code id=definitions:attr-textarea-minlength><a href=form-elements.html#attr-textarea-minlength>minlength</a></code>). When the <code id=definitions:dom-elementinternals-setvalidity-6><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets <code>tooShort</code> flag to true for a <a id=definitions:form-associated-custom-element-7 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>. <dt> <dfn id=suffering-from-an-underflow>Suffering from an underflow</dfn> <dd> When a control has a <a href=#concept-fe-value id=definitions:concept-fe-value-6>value</a> that is not the empty string and is too low for the <code id=definitions:attr-input-min><a href=input.html#attr-input-min>min</a></code> attribute. When the <code id=definitions:dom-elementinternals-setvalidity-7><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets <code>rangeUnderflow</code> flag to true for a <a id=definitions:form-associated-custom-element-8 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>. <dt> <dfn id=suffering-from-an-overflow>Suffering from an overflow</dfn> <dd> When a control has a <a href=#concept-fe-value id=definitions:concept-fe-value-7>value</a> that is not the empty string and is too high for the <code id=definitions:attr-input-max><a href=input.html#attr-input-max>max</a></code> attribute. When the <code id=definitions:dom-elementinternals-setvalidity-8><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets <code>rangeOverflow</code> flag to true for a <a id=definitions:form-associated-custom-element-9 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>. <dt> <dfn id=suffering-from-a-step-mismatch>Suffering from a step mismatch</dfn> <dd> When a control has a <a href=#concept-fe-value id=definitions:concept-fe-value-8>value</a> that doesn't fit the rules given by the <code id=definitions:attr-input-step><a href=input.html#attr-input-step>step</a></code> attribute. When the <code id=definitions:dom-elementinternals-setvalidity-9><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets <code>stepMismatch</code> flag to true for a <a id=definitions:form-associated-custom-element-10 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>. <dt> <dfn id=suffering-from-bad-input>Suffering from bad input</dfn> <dd> When a control has incomplete input and the user agent does not think the user ought to be able to submit the form in its current state. When the <code id=definitions:dom-elementinternals-setvalidity-10><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method sets <code>badInput</code> flag to true for a <a id=definitions:form-associated-custom-element-11 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>. <dt> <dfn id=suffering-from-a-custom-error>Suffering from a custom error</dfn> <dd> When a control's <a href=#custom-validity-error-message id=definitions:custom-validity-error-message-4>custom validity error message</a> (as set by the element's <code id=definitions:dom-cva-setcustomvalidity-2><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method or <code id=definitions:elementinternals-2><a href=custom-elements.html#elementinternals>ElementInternals</a></code>'s <code id=definitions:dom-elementinternals-setvalidity-11><a href=custom-elements.html#dom-elementinternals-setvalidity>setValidity()</a></code> method) is not the empty string. </dl> An element can still suffer from these states even when the element is <a href=#concept-fe-disabled id=definitions:concept-fe-disabled>disabled</a>; 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 <dfn id=concept-fv-valid>satisfies its constraints</dfn> if it is not suffering from any of the above <a href=#validity-states id=definitions:validity-states>validity states</a>. <h5 id=constraint-validation>4.10.20.2 Constraint validation<a href=#constraint-validation class=self-link></a></h5> When the user agent is required to <dfn id=statically-validate-the-constraints>statically validate the constraints</dfn> of <code id=constraint-validation:the-form-element><a href=forms.html#the-form-element>form</a></code> element <var>form</var>, 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: <ol><li>Let <var>controls</var> be a list of all the <a href=forms.html#category-submit id=constraint-validation:category-submit>submittable elements</a> whose <a href=#form-owner id=constraint-validation:form-owner>form owner</a> is <var>form</var>, in <a id=constraint-validation:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.<li>Let <var>invalid controls</var> be an initially empty list of elements.<li> For each element <var>field</var> in <var>controls</var>, in <a id=constraint-validation:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>: <ol><li>If <var>field</var> is not a <a href=#candidate-for-constraint-validation id=constraint-validation:candidate-for-constraint-validation>candidate for constraint validation</a>, then move on to the next element.<li>Otherwise, if <var>field</var> <a href=#concept-fv-valid id=constraint-validation:concept-fv-valid>satisfies its constraints</a>, then move on to the next element.<li>Otherwise, add <var>field</var> to <var>invalid controls</var>.</ol> <li>If <var>invalid controls</var> is empty, then return a positive result.<li>Let <var>unhandled invalid controls</var> be an initially empty list of elements.<li> For each element <var>field</var> in <var>invalid controls</var>, if any, in <a id=constraint-validation:tree-order-3 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>: <ol><li>Let <var>notCanceled</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=constraint-validation:concept-event-fire data-x-internal=concept-event-fire>firing an event</a> named <code id=constraint-validation:event-invalid><a href=indices.html#event-invalid>invalid</a></code> at <var>field</var>, with the <code id=constraint-validation:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true.<li>If <var>notCanceled</var> is true, then add <var>field</var> to <var>unhandled invalid controls</var>.</ol> <li>Return a negative result with the list of elements in the <var>unhandled invalid controls</var> list.</ol> If a user agent is to <dfn id=interactively-validate-the-constraints>interactively validate the constraints</dfn> of <code id=constraint-validation:the-form-element-2><a href=forms.html#the-form-element>form</a></code> element <var>form</var>, then the user agent must run the following steps: <ol><li><a href=#statically-validate-the-constraints id=constraint-validation:statically-validate-the-constraints>Statically validate the constraints</a> of <var>form</var>, and let <var>unhandled invalid controls</var> be the list of elements returned if the result was negative.<li>If the result was positive, then return that result.<li> Report the problems with the constraints of at least one of the elements given in <var>unhandled invalid controls</var> to the user. <ul><li>User agents may focus one of those elements in the process, by running the <a id=constraint-validation:focusing-steps href=interaction.html#focusing-steps>focusing steps</a> 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. For elements that are <a href=custom-elements.html#form-associated-custom-element id=constraint-validation:form-associated-custom-element>form-associated custom elements</a>, user agents should use their <a href=custom-elements.html#face-validation-anchor id=constraint-validation:face-validation-anchor>validation anchor</a> instead, for the purposes of these actions.<li>User agents may report more than one constraint violation.<li>User agents may coalesce related constraint violation reports if appropriate (e.g. if multiple radio buttons in a <a href=input.html#radio-button-group id=constraint-validation:radio-button-group>group</a> are marked as required, only one error need be reported).<li>If one of the controls is not <a id=constraint-validation:being-rendered href=rendering.html#being-rendered>being rendered</a> (e.g. it has the <code id=constraint-validation:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code> attribute set) then user agents may report a script error.</ul> <li>Return a negative result.</ol> <h5 id=the-constraint-validation-api>4.10.20.3 The <dfn>constraint validation API</dfn><a href=#the-constraint-validation-api class=self-link></a></h5> <dl class=domintro><dt><code><var>element</var>.<a href=#dom-cva-willvalidate id=dom-cva-willvalidate-dev>willValidate</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/willValidate title="The willValidate read-only property of the HTMLObjectElement interface returns a boolean value that indicates whether the element is a candidate for constraint validation. Always false for HTMLObjectElement objects.">HTMLObjectElement/willValidate</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><dd> Returns true if the element will be validated when the form is submitted; false otherwise. <dt><code><var>element</var>.<a href=#dom-cva-setcustomvalidity id=dom-cva-setcustomvalidity-dev>setCustomValidity</a>(<var>message</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity title="The setCustomValidity() method of the HTMLObjectElement interface sets a custom validity message for the element.">HTMLObjectElement/setCustomValidity</a>Support in all current engines.<div class=support>Firefox4+Safari5.1+Chrome10+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity title="The HTMLSelectElement.setCustomValidity() method sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.">HTMLSelectElement/setCustomValidity</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><dd> 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. <dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity>validity</a>.<a href=#dom-validitystate-valuemissing id=dom-validitystate-valuemissing-dev>valueMissing</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing title="The read-only valueMissing property of a ValidityState object indicates if a required control, such as an <input>, <select>, or <textarea>, has an empty value.">ValidityState/valueMissing</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><dd>Returns true if the element has no value but is a required field; false otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-2>validity</a>.<a href=#dom-validitystate-typemismatch id=dom-validitystate-typemismatch-dev>typeMismatch</a></code><dd>Returns true if the element's value is not in the correct syntax; false otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-3>validity</a>.<a href=#dom-validitystate-patternmismatch id=dom-validitystate-patternmismatch-dev>patternMismatch</a></code><dd>Returns true if the element's value doesn't match the provided pattern; false otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-4>validity</a>.<a href=#dom-validitystate-toolong id=dom-validitystate-toolong-dev>tooLong</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooLong title="The read-only tooLong property of a ValidityState object indicates if the value of an <input> or <textarea>, after having been edited by the user, exceeds the maximum code-unit length established by the element's maxlength attribute.">ValidityState/tooLong</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android64+Safari iOS5+Chrome Android?WebView Android4+Samsung Internet?Opera Android12.1+</div></div></div><dd> Returns true if the element's value is longer than the provided maximum length; false otherwise. <dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-5>validity</a>.<a href=#dom-validitystate-tooshort id=dom-validitystate-tooshort-dev>tooShort</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooShort title="The read-only tooShort property of a ValidityState object indicates if the value of an <input>, <button>, <select>, <output>, <fieldset> or <textarea>, after having been edited by the user, is less than the minimum code-unit length established by the element's minlength attribute.">ValidityState/tooShort</a>Support in all current engines.<div class=support>Firefox51+Safari10+Chrome40+<hr>Opera?Edge79+<hr>Edge (Legacy)17+Internet ExplorerNo<hr>Firefox Android64+Safari iOS?Chrome Android?WebView Android67+Samsung Internet?Opera Android?</div></div></div><dd> Returns true if the element's value, if it is not the empty string, is shorter than the provided minimum length; false otherwise. <dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-6>validity</a>.<a href=#dom-validitystate-rangeunderflow id=dom-validitystate-rangeunderflow-dev>rangeUnderflow</a></code><dd>Returns true if the element's value is lower than the provided minimum; false otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-7>validity</a>.<a href=#dom-validitystate-rangeoverflow id=dom-validitystate-rangeoverflow-dev>rangeOverflow</a></code><dd>Returns true if the element's value is higher than the provided maximum; false otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-8>validity</a>.<a href=#dom-validitystate-stepmismatch id=dom-validitystate-stepmismatch-dev>stepMismatch</a></code><dd>Returns true if the element's value doesn't fit the rules given by the <code id=the-constraint-validation-api:attr-input-step><a href=input.html#attr-input-step>step</a></code> attribute; false otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-9>validity</a>.<a href=#dom-validitystate-badinput id=dom-validitystate-badinput-dev>badInput</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/badInput title="The read-only badInput property of a ValidityState object indicates if the user has provided input that the browser is unable to convert. For example, if you have a number input element whose content is a string.">ValidityState/badInput</a>Support in all current engines.<div class=support>Firefox29+Safari7+Chrome25+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet ExplorerNo<hr>Firefox Android64+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><dd> Returns true if the user has provided input in the user interface that the user agent is unable to convert to a value; false otherwise. <dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-10>validity</a>.<a href=#dom-validitystate-customerror id=dom-validitystate-customerror-dev>customError</a></code><dd>Returns true if the element has a custom error; false otherwise.<dt><code><var>element</var>.<a href=#dom-cva-validity id=the-constraint-validation-api:dom-cva-validity-11>validity</a>.<a href=#dom-validitystate-valid id=dom-validitystate-valid-dev>valid</a></code><dd>Returns true if the element's value has no validity problems; false otherwise.<dt><code><var>valid</var> = <var>element</var>.<a href=#dom-cva-checkvalidity id=dom-cva-checkvalidity-dev>checkValidity</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity title="The HTMLInputElement.checkValidity() method returns a boolean value which indicates validity of the value of the element. If the value is invalid, this method also fires the invalid event on the element.">HTMLInputElement/checkValidity</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/checkValidity title="The checkValidity() method of the HTMLObjectElement interface returns a boolean value that always is true, because object objects are never candidates for constraint validation.">HTMLObjectElement/checkValidity</a>Support in all current engines.<div class=support>Firefox4+Safari5.1+Chrome10+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity title="The HTMLSelectElement.checkValidity() method checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable invalid event at the element, and then returns false.">HTMLSelectElement/checkValidity</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera9+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+</div></div></div><dd>Returns true if the element's value has no validity problems; false otherwise. Fires an <code id=the-constraint-validation-api:event-invalid><a href=indices.html#event-invalid>invalid</a></code> event at the element in the latter case.<dt><code><var>valid</var> = <var>element</var>.<a href=#dom-cva-reportvalidity id=dom-cva-reportvalidity-dev>reportValidity</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity title="The HTMLFormElement.reportValidity() method returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.">HTMLFormElement/reportValidity</a>Support in all current engines.<div class=support>Firefox49+Safari10.1+Chrome40+<hr>Opera?Edge79+<hr>Edge (Legacy)17+Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity title="The reportValidity() method of the HTMLInputElement interface performs the same validity checking steps as the checkValidity() method. If the value is invalid, this method also fires the invalid event on the element, and (if the event isn't canceled) reports the problem to the user.">HTMLInputElement/reportValidity</a>Support in all current engines.<div class=support>Firefox49+Safari10.1+Chrome40+<hr>Opera?Edge79+<hr>Edge (Legacy)17+Internet ExplorerNo<hr>Firefox Android64+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><dd> Returns true if the element's value has no validity problems; otherwise, returns false, fires an <code id=the-constraint-validation-api:event-invalid-2><a href=indices.html#event-invalid>invalid</a></code> event at the element, and (if the event isn't canceled) reports the problem to the user. <dt><code><var>element</var>.<a href=#dom-cva-validationmessage id=dom-cva-validationmessage-dev>validationMessage</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage title="The validationMessage read-only property of the HTMLObjectElement interface returns a string representing a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints.">HTMLObjectElement/validationMessage</a>Support in all current engines.<div class=support>Firefox4+Safari5.1+Chrome10+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><dd> Returns the error message that would be shown to the user if the element was to be checked for validity. </dl> The <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-cva-willvalidate data-dfn-type=attribute><code>willValidate</code></dfn> attribute's getter must return true, if this element is a <a href=#candidate-for-constraint-validation id=the-constraint-validation-api:candidate-for-constraint-validation>candidate for constraint validation</a>, and false otherwise (i.e., false if any conditions are <a href=#barred-from-constraint-validation id=the-constraint-validation-api:barred-from-constraint-validation>barring it from constraint validation</a>). <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate title="The willValidate read-only property of the ElementInternals interface returns true if the element is a submittable element that is a candidate for constraint validation.">ElementInternals/willValidate</a>Support in all current engines.<div class=support>Firefox98+Safari16.4+Chrome77+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div>The <dfn data-dfn-for=ElementInternals id=dom-elementinternals-willvalidate data-dfn-type=attribute><code>willValidate</code></dfn> attribute of <code id=the-constraint-validation-api:elementinternals><a href=custom-elements.html#elementinternals>ElementInternals</a></code> interface, on getting, must throw a <a id=the-constraint-validation-api:notsupportederror href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=the-constraint-validation-api:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the <a href=custom-elements.html#internals-target id=the-constraint-validation-api:internals-target>target element</a> is not a <a id=the-constraint-validation-api:form-associated-custom-element href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>. Otherwise, it must return true if the <a href=custom-elements.html#internals-target id=the-constraint-validation-api:internals-target-2>target element</a> is a <a href=#candidate-for-constraint-validation id=the-constraint-validation-api:candidate-for-constraint-validation-2>candidate for constraint validation</a>, and false otherwise. <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity title="The HTMLInputElement.setCustomValidity() method sets a custom validity message for the element.">HTMLInputElement/setCustomValidity</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-cva-setcustomvalidity data-dfn-type=method><code>setCustomValidity(<var>error</var>)</code></dfn> method steps are: <ol><li>Set <var>error</var> to the result of <a href=https://infra.spec.whatwg.org/#normalize-newlines id=the-constraint-validation-api:normalize-newlines data-x-internal=normalize-newlines>normalizing newlines</a> given <var>error</var>.<li>Set the <a href=#custom-validity-error-message id=the-constraint-validation-api:custom-validity-error-message>custom validity error message</a> to <var>error</var>.</ol> <div class=example> 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 <code id=the-constraint-validation-api:dom-cva-setcustomvalidity><a href=#dom-cva-setcustomvalidity>setCustomValidity()</a></code> method to set an appropriate message. <pre><code class='html'><c- p><</c-><c- f>label</c-><c- p>></c->Feeling: <c- p><</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>f</c-> <c- e>type</c-><c- o>=</c-><c- s>"text"</c-> <c- e>oninput</c-><c- o>=</c-><c- s>"check(this)"</c-><c- p>></</c-><c- f>label</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> <c- a>function</c-> check<c- p>(</c->input<c- p>)</c-> <c- p>{</c-> <c- k>if</c-> <c- p>(</c->input<c- p>.</c->value <c- o>==</c-> <c- u>"good"</c-> <c- o>||</c-> input<c- p>.</c->value <c- o>==</c-> <c- u>"fine"</c-> <c- o>||</c-> input<c- p>.</c->value <c- o>==</c-> <c- u>"tired"</c-><c- p>)</c-> <c- p>{</c-> input<c- p>.</c->setCustomValidity<c- p>(</c-><c- t>'"'</c-> <c- o>+</c-> input<c- p>.</c->value <c- o>+</c-> <c- t>'" is not a feeling.'</c-><c- p>);</c-> <c- p>}</c-> <c- k>else</c-> <c- p>{</c-> <c- c1>// input is fine -- reset the error message</c-> input<c- p>.</c->setCustomValidity<c- p>(</c-><c- t>''</c-><c- p>);</c-> <c- p>}</c-> <c- p>}</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> </div> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity title="The validity read-only property of the HTMLObjectElement interface returns a ValidityState with the validity states that this element is in.">HTMLObjectElement/validity</a>Support in all current engines.<div class=support>Firefox4+Safari5.1+Chrome10+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-cva-validity data-dfn-type=attribute><code>validity</code></dfn> attribute's getter must return a <code id=the-constraint-validation-api:validitystate><a href=#validitystate>ValidityState</a></code> object that represents the <a href=#validity-states id=the-constraint-validation-api:validity-states>validity states</a> of this element. This object is <a id=the-constraint-validation-api:live href=infrastructure.html#live>live</a>. <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validity title="The validity read-only property of the ElementInternals interface returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.">ElementInternals/validity</a>Support in all current engines.<div class=support>Firefox98+Safari16.4+Chrome77+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div>The <dfn data-dfn-for=ElementInternals id=dom-elementinternals-validity data-dfn-type=attribute><code>validity</code></dfn> attribute of <code id=the-constraint-validation-api:elementinternals-2><a href=custom-elements.html#elementinternals>ElementInternals</a></code> interface, on getting, must throw a <a id=the-constraint-validation-api:notsupportederror-2 href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=the-constraint-validation-api:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the <a href=custom-elements.html#internals-target id=the-constraint-validation-api:internals-target-3>target element</a> is not a <a id=the-constraint-validation-api:form-associated-custom-element-2 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>. Otherwise, it must return a <code id=the-constraint-validation-api:validitystate-2><a href=#validitystate>ValidityState</a></code> object that represents the <a href=#validity-states id=the-constraint-validation-api:validity-states-2>validity states</a> of the <a href=custom-elements.html#internals-target id=the-constraint-validation-api:internals-target-4>target element</a>. This object is <a id=the-constraint-validation-api:live-2 href=infrastructure.html#live>live</a>. <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->] <c- b>interface</c-> <dfn id='validitystate' data-dfn-type='interface'><c- g>ValidityState</c-></dfn> { <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-valuemissing' id='the-constraint-validation-api:dom-validitystate-valuemissing'><c- g>valueMissing</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-typemismatch' id='the-constraint-validation-api:dom-validitystate-typemismatch'><c- g>typeMismatch</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-patternmismatch' id='the-constraint-validation-api:dom-validitystate-patternmismatch'><c- g>patternMismatch</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-toolong' id='the-constraint-validation-api:dom-validitystate-toolong'><c- g>tooLong</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-tooshort' id='the-constraint-validation-api:dom-validitystate-tooshort'><c- g>tooShort</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-rangeunderflow' id='the-constraint-validation-api:dom-validitystate-rangeunderflow'><c- g>rangeUnderflow</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-rangeoverflow' id='the-constraint-validation-api:dom-validitystate-rangeoverflow'><c- g>rangeOverflow</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-stepmismatch' id='the-constraint-validation-api:dom-validitystate-stepmismatch'><c- g>stepMismatch</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-badinput' id='the-constraint-validation-api:dom-validitystate-badinput'><c- g>badInput</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-customerror' id='the-constraint-validation-api:dom-validitystate-customerror'><c- g>customError</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-validitystate-valid' id='the-constraint-validation-api:dom-validitystate-valid'><c- g>valid</c-></a>; };</code></pre> A <code id=the-constraint-validation-api:validitystate-3><a href=#validitystate>ValidityState</a></code> 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. <dl><dt><dfn data-dfn-for=ValidityState id=dom-validitystate-valuemissing data-dfn-type=attribute><code>valueMissing</code></dfn><dd> The control is <a href=#suffering-from-being-missing id=the-constraint-validation-api:suffering-from-being-missing>suffering from being missing</a>. <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-typemismatch data-dfn-type=attribute><code>typeMismatch</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/typeMismatch title="The read-only typeMismatch property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's type attribute.">ValidityState/typeMismatch</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><dd> The control is <a href=#suffering-from-a-type-mismatch id=the-constraint-validation-api:suffering-from-a-type-mismatch>suffering from a type mismatch</a>. <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-patternmismatch data-dfn-type=attribute><code>patternMismatch</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/patternMismatch title="The read-only patternMismatch property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's pattern attribute.">ValidityState/patternMismatch</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><dd> The control is <a href=#suffering-from-a-pattern-mismatch id=the-constraint-validation-api:suffering-from-a-pattern-mismatch>suffering from a pattern mismatch</a>. <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-toolong data-dfn-type=attribute><code>tooLong</code></dfn><dd> The control is <a href=#suffering-from-being-too-long id=the-constraint-validation-api:suffering-from-being-too-long>suffering from being too long</a>. <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-tooshort data-dfn-type=attribute><code>tooShort</code></dfn><dd> The control is <a href=#suffering-from-being-too-short id=the-constraint-validation-api:suffering-from-being-too-short>suffering from being too short</a>. <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-rangeunderflow data-dfn-type=attribute><code>rangeUnderflow</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeUnderflow title="The read-only rangeUnderflow property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's min attribute.">ValidityState/rangeUnderflow</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><dd> The control is <a href=#suffering-from-an-underflow id=the-constraint-validation-api:suffering-from-an-underflow>suffering from an underflow</a>. <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-rangeoverflow data-dfn-type=attribute><code>rangeOverflow</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow title="The read-only rangeOverflow property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's max attribute.">ValidityState/rangeOverflow</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><dd> The control is <a href=#suffering-from-an-overflow id=the-constraint-validation-api:suffering-from-an-overflow>suffering from an overflow</a>. <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-stepmismatch data-dfn-type=attribute><code>stepMismatch</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch title="The read-only stepMismatch property of a ValidityState object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's step attribute.">ValidityState/stepMismatch</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer10+<hr>Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+</div></div></div><dd> The control is <a href=#suffering-from-a-step-mismatch id=the-constraint-validation-api:suffering-from-a-step-mismatch>suffering from a step mismatch</a>. <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-badinput data-dfn-type=attribute><code>badInput</code></dfn><dd> The control is <a href=#suffering-from-bad-input id=the-constraint-validation-api:suffering-from-bad-input>suffering from bad input</a>. <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-customerror data-dfn-type=attribute><code>customError</code></dfn><dd> The control is <a href=#suffering-from-a-custom-error id=the-constraint-validation-api:suffering-from-a-custom-error>suffering from a custom error</a>. <dt><dfn data-dfn-for=ValidityState id=dom-validitystate-valid data-dfn-type=attribute><code>valid</code></dfn><dd> None of the other conditions are true. </dl> The <dfn id=check-validity-steps>check validity steps</dfn> for an element <var>element</var> are: <ol><li> If <var>element</var> is a <a href=#candidate-for-constraint-validation id=the-constraint-validation-api:candidate-for-constraint-validation-3>candidate for constraint validation</a> and does not <a href=#concept-fv-valid id=the-constraint-validation-api:concept-fv-valid>satisfy its constraints</a>, then: <ol><li><a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-constraint-validation-api:concept-event-fire data-x-internal=concept-event-fire>Fire an event</a> named <code id=the-constraint-validation-api:event-invalid-3><a href=indices.html#event-invalid>invalid</a></code> at <var>element</var>, with the <code id=the-constraint-validation-api:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true (though canceling has no effect).<li>Return false.</ol> <li>Return true.</ol> The <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-cva-checkvalidity data-dfn-type=method><code>checkValidity()</code></dfn> method, when invoked, must run the <a href=#check-validity-steps id=the-constraint-validation-api:check-validity-steps>check validity steps</a> on this element. <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity title="The checkValidity() method of the ElementInternals interface checks if the element meets any constraint validation rules applied to it.">ElementInternals/checkValidity</a>Support in all current engines.<div class=support>Firefox98+Safari16.4+Chrome77+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div>The <dfn data-dfn-for=ElementInternals id=dom-elementinternals-checkvalidity data-dfn-type=method><code>checkValidity()</code></dfn> method of the <code id=the-constraint-validation-api:elementinternals-3><a href=custom-elements.html#elementinternals>ElementInternals</a></code> interface must run these steps: <ol><li>Let <var>element</var> be this <code id=the-constraint-validation-api:elementinternals-4><a href=custom-elements.html#elementinternals>ElementInternals</a></code>'s <a href=custom-elements.html#internals-target id=the-constraint-validation-api:internals-target-5>target element</a>.<li>If <var>element</var> is not a <a id=the-constraint-validation-api:form-associated-custom-element-3 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>, then throw a <a id=the-constraint-validation-api:notsupportederror-3 href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=the-constraint-validation-api:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>Run the <a href=#check-validity-steps id=the-constraint-validation-api:check-validity-steps-2>check validity steps</a> on <var>element</var>.</ol> The <dfn id=report-validity-steps>report validity steps</dfn> for an element <var>element</var> are: <ol><li> If <var>element</var> is a <a href=#candidate-for-constraint-validation id=the-constraint-validation-api:candidate-for-constraint-validation-4>candidate for constraint validation</a> and does not <a href=#concept-fv-valid id=the-constraint-validation-api:concept-fv-valid-2>satisfy its constraints</a>, then: <ol><li>Let <var>report</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-constraint-validation-api:concept-event-fire-2 data-x-internal=concept-event-fire>firing an event</a> named <code id=the-constraint-validation-api:event-invalid-4><a href=indices.html#event-invalid>invalid</a></code> at <var>element</var>, with the <code id=the-constraint-validation-api:dom-event-cancelable-2><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true.<li>If <var>report</var> is true, then report the problems with the constraints of this element to the user. When reporting the problem with the constraints to the user, the user agent may run the <a id=the-constraint-validation-api:focusing-steps href=interaction.html#focusing-steps>focusing steps</a> for <var>element</var>, and may change the scrolling position of the document, or perform some other action that brings <var>element</var> to the user's attention. User agents may report more than one constraint violation, if <var>element</var> suffers from multiple problems at once. <li>Return false.</ol> <li>Return true.</ol> The <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-cva-reportvalidity data-dfn-type=method><code>reportValidity()</code></dfn> method, when invoked, must run the <a href=#report-validity-steps id=the-constraint-validation-api:report-validity-steps>report validity steps</a> on this element. <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity title="The reportValidity() method of the ElementInternals interface checks if the element meets any constraint validation rules applied to it.">ElementInternals/reportValidity</a>Support in all current engines.<div class=support>Firefox98+Safari16.4+Chrome77+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div>The <dfn data-dfn-for=ElementInternals id=dom-elementinternals-reportvalidity data-dfn-type=method><code>reportValidity()</code></dfn> method of the <code id=the-constraint-validation-api:elementinternals-5><a href=custom-elements.html#elementinternals>ElementInternals</a></code> interface must run these steps: <ol><li>Let <var>element</var> be this <code id=the-constraint-validation-api:elementinternals-6><a href=custom-elements.html#elementinternals>ElementInternals</a></code>'s <a href=custom-elements.html#internals-target id=the-constraint-validation-api:internals-target-6>target element</a>.<li>If <var>element</var> is not a <a id=the-constraint-validation-api:form-associated-custom-element-4 href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>, then throw a <a id=the-constraint-validation-api:notsupportederror-4 href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=the-constraint-validation-api:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>Run the <a href=#report-validity-steps id=the-constraint-validation-api:report-validity-steps-2>report validity steps</a> on <var>element</var>.</ol> The <dfn data-dfn-for=HTMLObjectElement,HTMLInputElement,HTMLButtonElement,HTMLSelectElement,HTMLTextAreaElement,HTMLOutputElement,HTMLFieldSetElement id=dom-cva-validationmessage data-dfn-type=attribute><code>validationMessage</code></dfn> attribute's getter must run these steps: <ol><li>If this element is not a <a href=#candidate-for-constraint-validation id=the-constraint-validation-api:candidate-for-constraint-validation-5>candidate for constraint validation</a> or if this element <a href=#concept-fv-valid id=the-constraint-validation-api:concept-fv-valid-3>satisfies its constraints</a>, then return the empty string.<li>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 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 <a href=#candidate-for-constraint-validation id=the-constraint-validation-api:candidate-for-constraint-validation-6>candidate for constraint validation</a> and is <a href=#suffering-from-a-custom-error id=the-constraint-validation-api:suffering-from-a-custom-error-2>suffering from a custom error</a>, then the <a href=#custom-validity-error-message id=the-constraint-validation-api:custom-validity-error-message-2>custom validity error message</a> should be present in the return value.</ol> <h5 id=security-forms>4.10.20.4 Security<a href=#security-forms class=self-link></a></h5> 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. <h4 id=form-submission-2>4.10.21 <dfn id=form-submission>Form submission</dfn><a href=#form-submission-2 class=self-link></a></h4> <h5 id=introduction-5>4.10.21.1 Introduction<a href=#introduction-5 class=self-link></a></h5> This section is non-normative. When a form is submitted, the data in the form is converted into the structure specified by the <a href=#concept-fs-enctype id=introduction-5:concept-fs-enctype>enctype</a>, and then sent to the destination specified by the <a href=#concept-fs-action id=introduction-5:concept-fs-action>action</a> using the given <a href=#concept-fs-method id=introduction-5:concept-fs-method>method</a>. For example, take the following form: <pre><code class='html'><c- p><</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>"/find.cgi"</c-> <c- e>method</c-><c- o>=</c-><c- s>get</c-><c- p>></c-> <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>t</c-><c- p>></c-> <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>search</c-> <c- e>name</c-><c- o>=</c-><c- s>q</c-><c- p>></c-> <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-><c- p>></c-> <c- p></</c-><c- f>form</c-><c- p>></c-></code></pre> 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 <code>/find.cgi?t=cats&q=fur</code>. On the other hand, consider this form: <pre><code class='html'><c- p><</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>"/find.cgi"</c-> <c- e>method</c-><c- o>=</c-><c- s>post</c-> <c- e>enctype</c-><c- o>=</c-><c- s>"multipart/form-data"</c-><c- p>></c-> <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>name</c-><c- o>=</c-><c- s>t</c-><c- p>></c-> <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>search</c-> <c- e>name</c-><c- o>=</c-><c- s>q</c-><c- p>></c-> <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-><c- p>></c-> <c- p></</c-><c- f>form</c-><c- p>></c-></code></pre> 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: <pre>------kYFrd4jNJEgCervE Content-Disposition: form-data; name="t" cats ------kYFrd4jNJEgCervE Content-Disposition: form-data; name="q" fur ------kYFrd4jNJEgCervE--</pre> <h5 id=implicit-submission>4.10.21.2 Implicit submission<a href=#implicit-submission class=self-link></a></h5> A <code id=implicit-submission:the-form-element><a href=forms.html#the-form-element>form</a></code> element's <dfn id=default-button>default button</dfn> is the first <a href=forms.html#concept-submit-button id=implicit-submission:concept-submit-button>submit button</a> in <a id=implicit-submission:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> whose <a href=#form-owner id=implicit-submission:form-owner>form owner</a> is that <code id=implicit-submission:the-form-element-2><a href=forms.html#the-form-element>form</a></code> element. If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text control is <a id=implicit-submission:focused href=interaction.html#focused>focused</a> implicitly submits the form), then doing so for a form, whose <a href=#default-button id=implicit-submission:default-button>default button</a> has <a id=implicit-submission:activation-behaviour href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a> and is not <a href=#concept-fe-disabled id=implicit-submission:concept-fe-disabled>disabled</a>, must cause the user agent to <a id=implicit-submission:fire-a-click-event href=webappapis.html#fire-a-click-event>fire a <code>click</code> event</a> at that <a href=#default-button id=implicit-submission:default-button-2>default button</a>. There are pages on the web that are only usable if there is a way to implicitly submit forms, so user agents are strongly encouraged to support this. If the form has no <a href=forms.html#concept-submit-button id=implicit-submission:concept-submit-button-2>submit button</a>, then the implicit submission mechanism must perform the following steps: <ol><li>If the form has more than one <a href=#field-that-blocks-implicit-submission id=implicit-submission:field-that-blocks-implicit-submission>field that blocks implicit submission</a>, then return.<li><a href=#concept-form-submit id=implicit-submission:concept-form-submit>Submit</a> the <code id=implicit-submission:the-form-element-3><a href=forms.html#the-form-element>form</a></code> element from the <code id=implicit-submission:the-form-element-4><a href=forms.html#the-form-element>form</a></code> element itself with <a href=#submit-user-involvement>userInvolvement</a> set to "<code id=implicit-submission:uni-activation><a href=browsing-the-web.html#uni-activation>activation</a></code>".</ol> For the purpose of the previous paragraph, an element is a <dfn id=field-that-blocks-implicit-submission>field that blocks implicit submission</dfn> of a <code id=implicit-submission:the-form-element-5><a href=forms.html#the-form-element>form</a></code> element if it is an <code id=implicit-submission:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <a href=#form-owner id=implicit-submission:form-owner-2>form owner</a> is that <code id=implicit-submission:the-form-element-6><a href=forms.html#the-form-element>form</a></code> element and whose <code id=implicit-submission:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in one of the following states: <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="implicit-submission:text-(type=text)-state-and-search-state-(type=search)">Text</a>, <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="implicit-submission:text-(type=text)-state-and-search-state-(type=search)-2">Search</a>, <a href="input.html#telephone-state-(type=tel)" id="implicit-submission:telephone-state-(type=tel)">Telephone</a>, <a href="input.html#url-state-(type=url)" id="implicit-submission:url-state-(type=url)">URL</a>, <a href="input.html#email-state-(type=email)" id="implicit-submission:email-state-(type=email)">Email</a>, <a href="input.html#password-state-(type=password)" id="implicit-submission:password-state-(type=password)">Password</a>, <a href="input.html#date-state-(type=date)" id="implicit-submission:date-state-(type=date)">Date</a>, <a href="input.html#month-state-(type=month)" id="implicit-submission:month-state-(type=month)">Month</a>, <a href="input.html#week-state-(type=week)" id="implicit-submission:week-state-(type=week)">Week</a>, <a href="input.html#time-state-(type=time)" id="implicit-submission:time-state-(type=time)">Time</a>, <a href="input.html#local-date-and-time-state-(type=datetime-local)" id="implicit-submission:local-date-and-time-state-(type=datetime-local)">Local Date and Time</a>, <a href="input.html#number-state-(type=number)" id="implicit-submission:number-state-(type=number)">Number</a> <h5 id=form-submission-algorithm>4.10.21.3 Form submission algorithm<a href=#form-submission-algorithm class=self-link></a></h5> Each <code id=form-submission-algorithm:the-form-element><a href=forms.html#the-form-element>form</a></code> element has a <dfn id=constructing-entry-list>constructing entry list</dfn> boolean, initially false. Each <code id=form-submission-algorithm:the-form-element-2><a href=forms.html#the-form-element>form</a></code> element has a <dfn id=firing-submission-events>firing submission events</dfn> boolean, initially false. To <dfn id=concept-form-submit>submit</dfn> a <code id=form-submission-algorithm:the-form-element-3><a href=forms.html#the-form-element>form</a></code> element <var>form</var> from an element <var>submitter</var> (typically a button), given an optional boolean <dfn id=submit-subbmitted-from-method><var>submitted from <code>submit()</code> method</var></dfn> (default false) and an optional <a id=form-submission-algorithm:user-navigation-involvement href=browsing-the-web.html#user-navigation-involvement>user navigation involvement</a> <dfn id=submit-user-involvement><var>userInvolvement</var></dfn> (default "<code id=form-submission-algorithm:uni-none><a href=browsing-the-web.html#uni-none>none</a></code>"): <ol><li>If <var>form</var> <a id=form-submission-algorithm:cannot-navigate href=links.html#cannot-navigate>cannot navigate</a>, then return.<li>If <var>form</var>'s <a href=#constructing-entry-list id=form-submission-algorithm:constructing-entry-list>constructing entry list</a> is true, then return.<li>Let <var>form document</var> be <var>form</var>'s <a id=form-submission-algorithm:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li id=sandboxSubmitBlocked>If <var>form document</var>'s <a id=form-submission-algorithm:active-sandboxing-flag-set href=browsers.html#active-sandboxing-flag-set>active sandboxing flag set</a> has its <a id=form-submission-algorithm:sandboxed-forms-browsing-context-flag href=browsers.html#sandboxed-forms-browsing-context-flag>sandboxed forms browsing context flag</a> set, then return.<li> If <var>submitted from <code id=form-submission-algorithm:dom-form-submit><a href=forms.html#dom-form-submit>submit()</a></code> method</var> is false, then: <ol><li>If <var>form</var>'s <a href=#firing-submission-events id=form-submission-algorithm:firing-submission-events>firing submission events</a> is true, then return.<li>Set <var>form</var>'s <a href=#firing-submission-events id=form-submission-algorithm:firing-submission-events-2>firing submission events</a> to true.<li>For each element <var>field</var> in the list of <a href=forms.html#category-submit id=form-submission-algorithm:category-submit>submittable elements</a> whose <a href=#form-owner id=form-submission-algorithm:form-owner>form owner</a> is <var>form</var>, set <var>field</var>'s <a href=#user-validity id=form-submission-algorithm:user-validity>user validity</a> to true. <li> If the <var>submitter</var> element's <a href=#concept-fs-novalidate id=form-submission-algorithm:concept-fs-novalidate>no-validate state</a> is false, then <a href=#interactively-validate-the-constraints id=form-submission-algorithm:interactively-validate-the-constraints>interactively validate the constraints</a> of <var>form</var> and examine the result. If the result is negative (i.e., the constraint validation concluded that there were invalid fields and probably informed the user of this), then: <ol><li>Set <var>form</var>'s <a href=#firing-submission-events id=form-submission-algorithm:firing-submission-events-3>firing submission events</a> to false.<li>Return.</ol> <li>Let <var>submitterButton</var> be null if <var>submitter</var> is <var>form</var>. Otherwise, let <var>submitterButton</var> be <var>submitter</var>.<li>Let <var>shouldContinue</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=form-submission-algorithm:concept-event-fire data-x-internal=concept-event-fire>firing an event</a> named <code id=form-submission-algorithm:event-submit><a href=indices.html#event-submit>submit</a></code> at <var>form</var> using <code id=form-submission-algorithm:submitevent><a href=#submitevent>SubmitEvent</a></code>, with the <code id=form-submission-algorithm:dom-submitevent-submitter><a href=#dom-submitevent-submitter>submitter</a></code> attribute initialized to <var>submitterButton</var>, the <code id=form-submission-algorithm:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to true, and the <code id=form-submission-algorithm:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to true.<li>Set <var>form</var>'s <a href=#firing-submission-events id=form-submission-algorithm:firing-submission-events-4>firing submission events</a> to false.<li>If <var>shouldContinue</var> is false, then return.<li> If <var>form</var> <a id=form-submission-algorithm:cannot-navigate-2 href=links.html#cannot-navigate>cannot navigate</a>, then return. <a id=form-submission-algorithm:cannot-navigate-3 href=links.html#cannot-navigate>Cannot navigate</a> is run again as dispatching the <code id=form-submission-algorithm:event-submit-2><a href=indices.html#event-submit>submit</a></code> event could have changed the outcome. </ol> <li>Let <var>encoding</var> be the result of <a href=#picking-an-encoding-for-the-form id=form-submission-algorithm:picking-an-encoding-for-the-form>picking an encoding for the form</a>. <li>Let <var>entry list</var> be the result of <a href=#constructing-the-form-data-set id=form-submission-algorithm:constructing-the-form-data-set>constructing the entry list</a> with <var>form</var>, <var>submitter</var>, and <var>encoding</var>.<li><a id=form-submission-algorithm:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>entry list</var> is not null.<li> If <var>form</var> <a id=form-submission-algorithm:cannot-navigate-4 href=links.html#cannot-navigate>cannot navigate</a>, then return. <a id=form-submission-algorithm:cannot-navigate-5 href=links.html#cannot-navigate>Cannot navigate</a> is run again as dispatching the <code id=form-submission-algorithm:event-formdata><a href=indices.html#event-formdata>formdata</a></code> event in <a href=#constructing-the-form-data-set id=form-submission-algorithm:constructing-the-form-data-set-2>constructing the entry list</a> could have changed the outcome. <li>Let <var>method</var> be the <var>submitter</var> element's <a href=#concept-fs-method id=form-submission-algorithm:concept-fs-method>method</a>.<li> If <var>method</var> is <a href=#attr-fs-method-dialog id=form-submission-algorithm:attr-fs-method-dialog>dialog</a>, then: <ol><li>If <var>form</var> does not have an ancestor <code id=form-submission-algorithm:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code> element, then return.<li>Let <var>subject</var> be <var>form</var>'s nearest ancestor <code id=form-submission-algorithm:the-dialog-element-2><a href=interactive-elements.html#the-dialog-element>dialog</a></code> element.<li>Let <var>result</var> be null.<li> If <var>submitter</var> is an <code id=form-submission-algorithm:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=form-submission-algorithm:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#image-button-state-(type=image)" id="form-submission-algorithm:image-button-state-(type=image)">Image Button</a> state, then: <ol><li>Let (<var>x</var>, <var>y</var>) be the <a href=input.html#concept-input-type-image-coordinate id=form-submission-algorithm:concept-input-type-image-coordinate>selected coordinate</a>.<li>Set <var>result</var> to the concatenation of <var>x</var>, "<code>,</code>", and <var>y</var>.</ol> <li>Otherwise, if <var>submitter</var> has a <a href=#concept-fe-value id=form-submission-algorithm:concept-fe-value>value</a>, then set <var>result</var> to that <a href=#concept-fe-value id=form-submission-algorithm:concept-fe-value-2>value</a>.<li><a id=form-submission-algorithm:close-the-dialog href=interactive-elements.html#close-the-dialog>Close the dialog</a> <var>subject</var> with <var>result</var>.<li>Return.</ol> <li>Let <var>action</var> be the <var>submitter</var> element's <a href=#concept-fs-action id=form-submission-algorithm:concept-fs-action>action</a>.<li> If <var>action</var> is the empty string, let <var>action</var> be the <a href=https://dom.spec.whatwg.org/#concept-document-url id="form-submission-algorithm:the-document's-address" data-x-internal="the-document's-address">URL</a> of the <var>form document</var>. <li>Let <var>parsed action</var> be the result of <a id=form-submission-algorithm:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given <var>action</var>, relative to <var>submitter</var>'s <a id=form-submission-algorithm:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li>If <var>parsed action</var> is failure, then return.<li>Let <var>scheme</var> be the <a href=https://url.spec.whatwg.org/#concept-url-scheme id=form-submission-algorithm:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> of <var>parsed action</var>.<li>Let <var>enctype</var> be the <var>submitter</var> element's <a href=#concept-fs-enctype id=form-submission-algorithm:concept-fs-enctype>enctype</a>.<li>Let <var>formTarget</var> be null.<li>If the <var>submitter</var> element is a <a href=forms.html#concept-submit-button id=form-submission-algorithm:concept-submit-button>submit button</a> and it has a <code id=form-submission-algorithm:attr-fs-formtarget><a href=#attr-fs-formtarget>formtarget</a></code> attribute, then set <var>formTarget</var> to the <code id=form-submission-algorithm:attr-fs-formtarget-2><a href=#attr-fs-formtarget>formtarget</a></code> attribute value.<li>Let <var>target</var> be the result of <a href="semantics.html#get-an-element's-target" id="form-submission-algorithm:get-an-element's-target">getting an element's target</a> given <var>submitter</var>'s <a href=#form-owner id=form-submission-algorithm:form-owner-2>form owner</a> and <var>formTarget</var>.<li>Let <var>noopener</var> be the result of <a href="links.html#get-an-element's-noopener" id="form-submission-algorithm:get-an-element's-noopener">getting an element's noopener</a> with <var>form</var>, <var>parsed action</var>, and <var>target</var>.<li>Let <var>targetNavigable</var> be the first return value of applying <a id=form-submission-algorithm:the-rules-for-choosing-a-navigable href=document-sequences.html#the-rules-for-choosing-a-navigable>the rules for choosing a navigable</a> given <var>target</var>, <var>form</var>'s <a id=form-submission-algorithm:node-navigable href=document-sequences.html#node-navigable>node navigable</a>, and <var>noopener</var>.<li>If <var>targetNavigable</var> is null, then return.<li>Let <var>historyHandling</var> be "<code id=form-submission-algorithm:navigationhistorybehavior-auto><a href=browsing-the-web.html#navigationhistorybehavior-auto>auto</a></code>".<li>If <var>form document</var> equals <var>targetNavigable</var>'s <a href=document-sequences.html#nav-document id=form-submission-algorithm:nav-document>active document</a>, and <var>form document</var> has not yet <a id=form-submission-algorithm:completely-loaded href=document-lifecycle.html#completely-loaded>completely loaded</a>, then set <var>historyHandling</var> to "<code id=form-submission-algorithm:navigationhistorybehavior-replace><a href=browsing-the-web.html#navigationhistorybehavior-replace>replace</a></code>".<li> Select the appropriate row in the table below based on <var>scheme</var> as given by the first cell of each row. Then, select the appropriate cell on that row based on <var>method</var> as given in the first cell of each column. Then, jump to the steps named in that cell and defined below the table. <table><thead><tr><td> <th> <a href=#attr-fs-method-get id=form-submission-algorithm:attr-fs-method-get>GET</a> <th> <a href=#attr-fs-method-post id=form-submission-algorithm:attr-fs-method-post>POST</a> <tbody><tr><th> <code>http</code> <td> <a href=#submit-mutate-action id=form-submission-algorithm:submit-mutate-action>Mutate action URL</a> <td> <a href=#submit-body id=form-submission-algorithm:submit-body>Submit as entity body</a> <tr><th> <code>https</code> <td> <a href=#submit-mutate-action id=form-submission-algorithm:submit-mutate-action-2>Mutate action URL</a> <td> <a href=#submit-body id=form-submission-algorithm:submit-body-2>Submit as entity body</a> <tr><th> <code>ftp</code> <td> <a href=#submit-get-action id=form-submission-algorithm:submit-get-action>Get action URL</a> <td> <a href=#submit-get-action id=form-submission-algorithm:submit-get-action-2>Get action URL</a> <tr><th> <code>javascript</code> <td> <a href=#submit-get-action id=form-submission-algorithm:submit-get-action-3>Get action URL</a> <td> <a href=#submit-get-action id=form-submission-algorithm:submit-get-action-4>Get action URL</a> <tr><th> <code>data</code> <td> <a href=#submit-mutate-action id=form-submission-algorithm:submit-mutate-action-3>Mutate action URL</a> <td> <a href=#submit-get-action id=form-submission-algorithm:submit-get-action-5>Get action URL</a> <tr><th> <code>mailto</code> <td> <a href=#submit-mailto-headers id=form-submission-algorithm:submit-mailto-headers>Mail with headers</a> <td> <a href=#submit-mailto-body id=form-submission-algorithm:submit-mailto-body>Mail as body</a> </table> If <var>scheme</var> 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. Each <code id=form-submission-algorithm:the-form-element-4><a href=forms.html#the-form-element>form</a></code> element has a <dfn id=planned-navigation>planned navigation</dfn>, which is either null or a <a href=webappapis.html#concept-task id=form-submission-algorithm:concept-task>task</a>; when the <code id=form-submission-algorithm:the-form-element-5><a href=forms.html#the-form-element>form</a></code> is first created, its <a href=#planned-navigation id=form-submission-algorithm:planned-navigation>planned navigation</a> must be set to null. In the behaviors described below, when the user agent is required to <dfn id=plan-to-navigate>plan to navigate</dfn> to a <a id=form-submission-algorithm:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var> given an optional <a id=form-submission-algorithm:post-resource href=browsing-the-web.html#post-resource>POST resource</a>-or-null <var>postResource</var> (default null), it must run the following steps: <ol><li>Let <var>referrerPolicy</var> be the empty string.<li>If the <code id=form-submission-algorithm:the-form-element-6><a href=forms.html#the-form-element>form</a></code> element's <a href=links.html#linkTypes>link types</a> include the <code id=form-submission-algorithm:link-type-noreferrer><a href=links.html#link-type-noreferrer>noreferrer</a></code> keyword, then set <var>referrerPolicy</var> to "<code>no-referrer</code>".<li>If the <code id=form-submission-algorithm:the-form-element-7><a href=forms.html#the-form-element>form</a></code> has a non-null <a href=#planned-navigation id=form-submission-algorithm:planned-navigation-2>planned navigation</a>, remove it from its <a id=form-submission-algorithm:task-queue href=webappapis.html#task-queue>task queue</a>.<li> <a id=form-submission-algorithm:queue-an-element-task href=webappapis.html#queue-an-element-task>Queue an element task</a> on the <a id=form-submission-algorithm:dom-manipulation-task-source href=webappapis.html#dom-manipulation-task-source>DOM manipulation task source</a> given the <code id=form-submission-algorithm:the-form-element-8><a href=forms.html#the-form-element>form</a></code> element and the following steps: <ol><li>Set the <code id=form-submission-algorithm:the-form-element-9><a href=forms.html#the-form-element>form</a></code>'s <a href=#planned-navigation id=form-submission-algorithm:planned-navigation-3>planned navigation</a> to null.<li><a id=form-submission-algorithm:navigate href=browsing-the-web.html#navigate>Navigate</a> <var>targetNavigable</var> to <var>url</var> using the <code id=form-submission-algorithm:the-form-element-10><a href=forms.html#the-form-element>form</a></code> element's <a id=form-submission-algorithm:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, with <var id=form-submission-algorithm:navigation-hh><a href=browsing-the-web.html#navigation-hh>historyHandling</a></var> set to <var>historyHandling</var>, <a href=browsing-the-web.html#navigation-user-involvement>userInvolvement</a> set to <var>userInvolvement</var>, <a href=browsing-the-web.html#navigation-source-element>sourceElement</a> set to <var>submitter</var>, <a href=browsing-the-web.html#navigation-referrer-policy>referrerPolicy</a> set to <var>referrerPolicy</var>, <a href=browsing-the-web.html#navigation-resource>documentResource</a> set to <var>postResource</var>, and <a href=browsing-the-web.html#navigation-form-data-entry-list>formDataEntryList</a> set to <var>entry list</var>. </ol> <li>Set the <code id=form-submission-algorithm:the-form-element-11><a href=forms.html#the-form-element>form</a></code>'s <a href=#planned-navigation id=form-submission-algorithm:planned-navigation-4>planned navigation</a> to the just-queued <a href=webappapis.html#concept-task id=form-submission-algorithm:concept-task-2>task</a>. </ol> The behaviors are as follows: <dl><dt><dfn id=submit-mutate-action>Mutate action URL</dfn> <dd> Let <var>pairs</var> be the result of <a href=#convert-to-a-list-of-name-value-pairs id=form-submission-algorithm:convert-to-a-list-of-name-value-pairs>converting to a list of name-value pairs</a> with <var>entry list</var>. Let <var>query</var> be the result of running the <a id=form-submission-algorithm:application/x-www-form-urlencoded-serializer href=https://url.spec.whatwg.org/#concept-urlencoded-serializer data-x-internal=application/x-www-form-urlencoded-serializer><code>application/x-www-form-urlencoded</code> serializer</a> with <var>pairs</var> and <var>encoding</var>. Set <var>parsed action</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=form-submission-algorithm:concept-url-query data-x-internal=concept-url-query>query</a> component to <var>query</var>. <a href=#plan-to-navigate id=form-submission-algorithm:plan-to-navigate>Plan to navigate</a> to <var>parsed action</var>. <dt><dfn id=submit-body>Submit as entity body</dfn> <dd> <a id=form-submission-algorithm:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>method</var> is <a href=#attr-fs-method-post id=form-submission-algorithm:attr-fs-method-post-2>POST</a>. Switch on <var>enctype</var>: <dl class=switch><dt><code id=form-submission-algorithm:attr-fs-enctype-urlencoded><a href=#attr-fs-enctype-urlencoded>application/x-www-form-urlencoded</a></code><dd> Let <var>pairs</var> be the result of <a href=#convert-to-a-list-of-name-value-pairs id=form-submission-algorithm:convert-to-a-list-of-name-value-pairs-2>converting to a list of name-value pairs</a> with <var>entry list</var>. Let <var>body</var> be the result of running the <a id=form-submission-algorithm:application/x-www-form-urlencoded-serializer-2 href=https://url.spec.whatwg.org/#concept-urlencoded-serializer data-x-internal=application/x-www-form-urlencoded-serializer><code>application/x-www-form-urlencoded</code> serializer</a> with <var>pairs</var> and <var>encoding</var>. Set <var>body</var> to the result of <a href=https://encoding.spec.whatwg.org/#utf-8-encode id=form-submission-algorithm:utf-8-encode data-x-internal=utf-8-encode>encoding</a> <var>body</var>. Let <var>mimeType</var> be `<code id=form-submission-algorithm:application/x-www-form-urlencoded><a data-x-internal=application/x-www-form-urlencoded href=https://url.spec.whatwg.org/#concept-urlencoded>application/x-www-form-urlencoded</a></code>`. <dt><code id=form-submission-algorithm:attr-fs-enctype-formdata><a href=#attr-fs-enctype-formdata>multipart/form-data</a></code><dd> Let <var>body</var> be the result of running the <a href=#multipart/form-data-encoding-algorithm id=form-submission-algorithm:multipart/form-data-encoding-algorithm><code>multipart/form-data</code> encoding algorithm</a> with <var>entry list</var> and <var>encoding</var>. Let <var>mimeType</var> be the <a href=https://infra.spec.whatwg.org/#isomorphic-encode id=form-submission-algorithm:isomorphic-encode data-x-internal=isomorphic-encode>isomorphic encoding</a> of the concatenation of "<code>multipart/form-data; boundary=</code>" and the <a href=#multipart/form-data-boundary-string id=form-submission-algorithm:multipart/form-data-boundary-string><code>multipart/form-data</code> boundary string</a> generated by the <a href=#multipart/form-data-encoding-algorithm id=form-submission-algorithm:multipart/form-data-encoding-algorithm-2><code>multipart/form-data</code> encoding algorithm</a>. <dt><code id=form-submission-algorithm:attr-fs-enctype-text><a href=#attr-fs-enctype-text>text/plain</a></code><dd> Let <var>pairs</var> be the result of <a href=#convert-to-a-list-of-name-value-pairs id=form-submission-algorithm:convert-to-a-list-of-name-value-pairs-3>converting to a list of name-value pairs</a> with <var>entry list</var>. Let <var>body</var> be the result of running the <a href=#text/plain-encoding-algorithm id=form-submission-algorithm:text/plain-encoding-algorithm><code>text/plain</code> encoding algorithm</a> with <var>pairs</var>. Set <var>body</var> to the result of <a href=https://encoding.spec.whatwg.org/#encode id=form-submission-algorithm:encode data-x-internal=encode>encoding</a> <var>body</var> using <var>encoding</var>. Let <var>mimeType</var> be `<code id=form-submission-algorithm:text/plain><a data-x-internal=text/plain href=https://www.rfc-editor.org/rfc/rfc2046#section-4.1.3>text/plain</a></code>`. </dl> <a href=#plan-to-navigate id=form-submission-algorithm:plan-to-navigate-2>Plan to navigate</a> to <var>parsed action</var> given a <a id=form-submission-algorithm:post-resource-2 href=browsing-the-web.html#post-resource>POST resource</a> whose <a href=browsing-the-web.html#post-resource-request-body id=form-submission-algorithm:post-resource-request-body>request body</a> is <var>body</var> and <a href=browsing-the-web.html#post-resource-request-content-type id=form-submission-algorithm:post-resource-request-content-type>request content-type</a> is <var>mimeType</var>. <dt><dfn id=submit-get-action>Get action URL</dfn> <dd> <a href=#plan-to-navigate id=form-submission-algorithm:plan-to-navigate-3>Plan to navigate</a> to <var>parsed action</var>. <var>entry list</var> is discarded. <dt><dfn id=submit-mailto-headers>Mail with headers</dfn> <dd> Let <var>pairs</var> be the result of <a href=#convert-to-a-list-of-name-value-pairs id=form-submission-algorithm:convert-to-a-list-of-name-value-pairs-4>converting to a list of name-value pairs</a> with <var>entry list</var>. Let <var>headers</var> be the result of running the <a id=form-submission-algorithm:application/x-www-form-urlencoded-serializer-3 href=https://url.spec.whatwg.org/#concept-urlencoded-serializer data-x-internal=application/x-www-form-urlencoded-serializer><code>application/x-www-form-urlencoded</code> serializer</a> with <var>pairs</var> and <var>encoding</var>. Replace occurrences of U+002B PLUS SIGN characters (+) in <var>headers</var> with the string "<code>%20</code>". Set <var>parsed action</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=form-submission-algorithm:concept-url-query-2 data-x-internal=concept-url-query>query</a> to <var>headers</var>. <a href=#plan-to-navigate id=form-submission-algorithm:plan-to-navigate-4>Plan to navigate</a> to <var>parsed action</var>. <dt><dfn id=submit-mailto-body>Mail as body</dfn> <dd> Let <var>pairs</var> be the result of <a href=#convert-to-a-list-of-name-value-pairs id=form-submission-algorithm:convert-to-a-list-of-name-value-pairs-5>converting to a list of name-value pairs</a> with <var>entry list</var>. Switch on <var>enctype</var>: <dl class=switch><dt><code id=form-submission-algorithm:attr-fs-enctype-text-2><a href=#attr-fs-enctype-text>text/plain</a></code><dd> Let <var>body</var> be the result of running the <a href=#text/plain-encoding-algorithm id=form-submission-algorithm:text/plain-encoding-algorithm-2><code>text/plain</code> encoding algorithm</a> with <var>pairs</var>. Set <var>body</var> to the result of running <a id=form-submission-algorithm:utf-8-percent-encode href=https://url.spec.whatwg.org/#string-utf-8-percent-encode data-x-internal=utf-8-percent-encode>UTF-8 percent-encode</a> on <var>body</var> using the <a id=form-submission-algorithm:default-encode-set href=https://url.spec.whatwg.org/#default-encode-set data-x-internal=default-encode-set>default encode set</a>. <a href=references.html#refsURL>[URL]</a> <dt>Otherwise<dd>Let <var>body</var> be the result of running the <a id=form-submission-algorithm:application/x-www-form-urlencoded-serializer-4 href=https://url.spec.whatwg.org/#concept-urlencoded-serializer data-x-internal=application/x-www-form-urlencoded-serializer><code>application/x-www-form-urlencoded</code> serializer</a> with <var>pairs</var> and <var>encoding</var>.</dl> If <var>parsed action</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=form-submission-algorithm:concept-url-query-3 data-x-internal=concept-url-query>query</a> is null, then set it to the empty string. If <var>parsed action</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=form-submission-algorithm:concept-url-query-4 data-x-internal=concept-url-query>query</a> is not the empty string, then append a single U+0026 AMPERSAND character (&) to it. Append "<code>body=</code>" to <var>parsed action</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=form-submission-algorithm:concept-url-query-5 data-x-internal=concept-url-query>query</a>. Append <var>body</var> to <var>parsed action</var>'s <a href=https://url.spec.whatwg.org/#concept-url-query id=form-submission-algorithm:concept-url-query-6 data-x-internal=concept-url-query>query</a>. <a href=#plan-to-navigate id=form-submission-algorithm:plan-to-navigate-5>Plan to navigate</a> to <var>parsed action</var>. </dl> </ol> <h5 id=constructing-form-data-set>4.10.21.4 Constructing the entry list<a href=#constructing-form-data-set class=self-link></a></h5> An <dfn id=entry-list data-export="">entry list</dfn> is a <a id=constructing-form-data-set:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <a href=#form-entry id=constructing-form-data-set:form-entry>entries</a>, typically representing the contents of a form. An <dfn data-dfn-for="entry list" id=form-entry data-export="">entry</dfn> is a tuple consisting of a <dfn data-dfn-for="entry list/entry" id=form-entry-name data-export="">name</dfn> (a <a id=constructing-form-data-set:scalar-value-string href=https://infra.spec.whatwg.org/#scalar-value-string data-x-internal=scalar-value-string>scalar value string</a>) and a <dfn data-dfn-for="entry list/entry" id=form-entry-value data-export="">value</dfn> (either a <a id=constructing-form-data-set:scalar-value-string-2 href=https://infra.spec.whatwg.org/#scalar-value-string data-x-internal=scalar-value-string>scalar value string</a> or a <code id=constructing-form-data-set:file><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object). To <dfn data-dfn-for="entry list" id=create-an-entry data-export="">create an entry</dfn> given a string <var>name</var>, a string or <code id=constructing-form-data-set:blob><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> object <var>value</var>, and optionally a <a id=constructing-form-data-set:scalar-value-string-3 href=https://infra.spec.whatwg.org/#scalar-value-string data-x-internal=scalar-value-string>scalar value string</a> <var>filename</var>: <ol><li>Set <var>name</var> to the result of <a href=https://infra.spec.whatwg.org/#javascript-string-convert id=constructing-form-data-set:convert data-x-internal=convert>converting</a> <var>name</var> into a <a id=constructing-form-data-set:scalar-value-string-4 href=https://infra.spec.whatwg.org/#scalar-value-string data-x-internal=scalar-value-string>scalar value string</a>.<li>If <var>value</var> is a string, then set <var>value</var> to the result of <a href=https://infra.spec.whatwg.org/#javascript-string-convert id=constructing-form-data-set:convert-2 data-x-internal=convert>converting</a> <var>value</var> into a <a id=constructing-form-data-set:scalar-value-string-5 href=https://infra.spec.whatwg.org/#scalar-value-string data-x-internal=scalar-value-string>scalar value string</a>.<li> Otherwise: <ol><li>If <var>value</var> is not a <code id=constructing-form-data-set:file-2><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object, then set <var>value</var> to a new <code id=constructing-form-data-set:file-3><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object, representing the same bytes, whose <code id=constructing-form-data-set:dom-file-name><a data-x-internal=dom-file-name href=https://w3c.github.io/FileAPI/#dfn-name>name</a></code> attribute value is "<code>blob</code>".<li>If <var>filename</var> is given, then set <var>value</var> to a new <code id=constructing-form-data-set:file-4><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object, representing the same bytes, whose <code id=constructing-form-data-set:dom-file-name-2><a data-x-internal=dom-file-name href=https://w3c.github.io/FileAPI/#dfn-name>name</a></code> attribute is <var>filename</var>.</ol> These operations will create a new <code id=constructing-form-data-set:file-5><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object if either <var>filename</var> is given or the passed <code id=constructing-form-data-set:blob-2><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> is not a <code id=constructing-form-data-set:file-6><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object. In those cases, the identity of the passed <code id=constructing-form-data-set:blob-3><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> object is not kept. <li>Return an <a href=#form-entry id=constructing-form-data-set:form-entry-2>entry</a> whose <a href=#form-entry-name id=constructing-form-data-set:form-entry-name>name</a> is <var>name</var> and whose <a href=#form-entry-value id=constructing-form-data-set:form-entry-value>value</a> is <var>value</var>.</ol> To <dfn id=constructing-the-form-data-set data-lt="constructing the entry list" data-export="">construct the entry list</dfn> given a <var>form</var>, an optional <var>submitter</var> (default null), and an optional <var>encoding</var> (default <a id=constructing-form-data-set:utf-8 href=https://encoding.spec.whatwg.org/#utf-8 data-x-internal=utf-8>UTF-8</a>): <ol><li>If <var>form</var>'s <a href=#constructing-entry-list id=constructing-form-data-set:constructing-entry-list>constructing entry list</a> is true, then return null.<li>Set <var>form</var>'s <a href=#constructing-entry-list id=constructing-form-data-set:constructing-entry-list-2>constructing entry list</a> to true.<li>Let <var>controls</var> be a list of all the <a href=forms.html#category-submit id=constructing-form-data-set:category-submit>submittable elements</a> whose <a href=#form-owner id=constructing-form-data-set:form-owner>form owner</a> is <var>form</var>, in <a id=constructing-form-data-set:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.<li>Let <var>entry list</var> be a new empty <a href=#entry-list id=constructing-form-data-set:entry-list>entry list</a>.<li> For each element <var>field</var> in <var>controls</var>, in <a id=constructing-form-data-set:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>: <ol><li> If any of the following are true: <ul><li><var>field</var> has a <code id=constructing-form-data-set:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code> element ancestor;<li><var>field</var> is <a href=#concept-fe-disabled id=constructing-form-data-set:concept-fe-disabled>disabled</a>;<li><var>field</var> is a <a href=forms.html#concept-button id=constructing-form-data-set:concept-button>button</a> but it is not <var>submitter</var>;<li><var>field</var> is an <code id=constructing-form-data-set:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=constructing-form-data-set:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#checkbox-state-(type=checkbox)" id="constructing-form-data-set:checkbox-state-(type=checkbox)">Checkbox</a> state and whose <a href=#concept-fe-checked id=constructing-form-data-set:concept-fe-checked>checkedness</a> is false; or<li><var>field</var> is an <code id=constructing-form-data-set:the-input-element-2><a href=input.html#the-input-element>input</a></code> element whose <code id=constructing-form-data-set:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#radio-button-state-(type=radio)" id="constructing-form-data-set:radio-button-state-(type=radio)">Radio Button</a> state and whose <a href=#concept-fe-checked id=constructing-form-data-set:concept-fe-checked-2>checkedness</a> is false,</ul> then <a id=constructing-form-data-set:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>. <li> If the <var>field</var> element is an <code id=constructing-form-data-set:the-input-element-3><a href=input.html#the-input-element>input</a></code> element whose <code id=constructing-form-data-set:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#image-button-state-(type=image)" id="constructing-form-data-set:image-button-state-(type=image)">Image Button</a> state, then: <ol><li>If the <var>field</var> element is not <var>submitter</var>, then <a id=constructing-form-data-set:continue-2 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li>If the <var>field</var> element has a <code id=constructing-form-data-set:attr-fe-name><a href=#attr-fe-name>name</a></code> attribute specified and its value is not the empty string, let <var>name</var> be that value followed by U+002E (.). Otherwise, let <var>name</var> be the empty string.<li>Let <var>namex</var> be the concatenation of <var>name</var> and U+0078 (x).<li>Let <var>namey</var> be the concatenation of <var>name</var> and U+0079 (y).<li>Let (<var>x</var>, <var>y</var>) be the <a href=input.html#concept-input-type-image-coordinate id=constructing-form-data-set:concept-input-type-image-coordinate>selected coordinate</a>.<li><a href=#create-an-entry id=constructing-form-data-set:create-an-entry>Create an entry</a> with <var>namex</var> and <var>x</var>, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append data-x-internal=list-append>append</a> it to <var>entry list</var>.<li><a href=#create-an-entry id=constructing-form-data-set:create-an-entry-2>Create an entry</a> with <var>namey</var> and <var>y</var>, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-2 data-x-internal=list-append>append</a> it to <var>entry list</var>.<li><a id=constructing-form-data-set:continue-3 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a>.</ol> <li>If the <var>field</var> is a <a id=constructing-form-data-set:form-associated-custom-element href=custom-elements.html#form-associated-custom-element>form-associated custom element</a>, then perform the <a href=custom-elements.html#face-entry-construction id=constructing-form-data-set:face-entry-construction>entry construction algorithm</a> given <var>field</var> and <var>entry list</var>, then <a id=constructing-form-data-set:continue-4 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li>If either the <var>field</var> element does not have a <code id=constructing-form-data-set:attr-fe-name-2><a href=#attr-fe-name>name</a></code> attribute specified, or its <code id=constructing-form-data-set:attr-fe-name-3><a href=#attr-fe-name>name</a></code> attribute's value is the empty string, then <a id=constructing-form-data-set:continue-5 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li>Let <var>name</var> be the value of the <var>field</var> element's <code id=constructing-form-data-set:attr-fe-name-4><a href=#attr-fe-name>name</a></code> attribute.<li>If the <var>field</var> element is a <code id=constructing-form-data-set:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element, then for each <code id=constructing-form-data-set:the-option-element><a href=form-elements.html#the-option-element>option</a></code> element in the <code id=constructing-form-data-set:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> element's <a href=form-elements.html#concept-select-option-list id=constructing-form-data-set:concept-select-option-list>list of options</a> whose <a href=form-elements.html#concept-option-selectedness id=constructing-form-data-set:concept-option-selectedness>selectedness</a> is true and that is not <a href=form-elements.html#concept-option-disabled id=constructing-form-data-set:concept-option-disabled>disabled</a>, <a href=#create-an-entry id=constructing-form-data-set:create-an-entry-3>create an entry</a> with <var>name</var> and the <a href=form-elements.html#concept-option-value id=constructing-form-data-set:concept-option-value>value</a> of the <code id=constructing-form-data-set:the-option-element-2><a href=form-elements.html#the-option-element>option</a></code> element, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-3 data-x-internal=list-append>append</a> it to <var>entry list</var>.<li> Otherwise, if the <var>field</var> element is an <code id=constructing-form-data-set:the-input-element-4><a href=input.html#the-input-element>input</a></code> element whose <code id=constructing-form-data-set:attr-input-type-4><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#checkbox-state-(type=checkbox)" id="constructing-form-data-set:checkbox-state-(type=checkbox)-2">Checkbox</a> state or the <a href="input.html#radio-button-state-(type=radio)" id="constructing-form-data-set:radio-button-state-(type=radio)-2">Radio Button</a> state, then: <ol><li>If the <var>field</var> element has a <code id=constructing-form-data-set:attr-input-value><a href=input.html#attr-input-value>value</a></code> attribute specified, then let <var>value</var> be the value of that attribute; otherwise, let <var>value</var> be the string "<code>on</code>".<li><a href=#create-an-entry id=constructing-form-data-set:create-an-entry-4>Create an entry</a> with <var>name</var> and <var>value</var>, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-4 data-x-internal=list-append>append</a> it to <var>entry list</var>.</ol> <li> Otherwise, if the <var>field</var> element is an <code id=constructing-form-data-set:the-input-element-5><a href=input.html#the-input-element>input</a></code> element whose <code id=constructing-form-data-set:attr-input-type-5><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#file-upload-state-(type=file)" id="constructing-form-data-set:file-upload-state-(type=file)">File Upload</a> state, then: <ol><li>If there are no <a href=input.html#concept-input-type-file-selected id=constructing-form-data-set:concept-input-type-file-selected>selected files</a>, then <a href=#create-an-entry id=constructing-form-data-set:create-an-entry-5>create an entry</a> with <var>name</var> and a new <code id=constructing-form-data-set:file-7><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object with an empty name, <code id=constructing-form-data-set:application/octet-stream><a data-x-internal=application/octet-stream href=https://www.rfc-editor.org/rfc/rfc2046#section-4.5.1>application/octet-stream</a></code> as type, and an empty body, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-5 data-x-internal=list-append>append</a> it to <var>entry list</var>.<li>Otherwise, for each file in <a href=input.html#concept-input-type-file-selected id=constructing-form-data-set:concept-input-type-file-selected-2>selected files</a>, <a href=#create-an-entry id=constructing-form-data-set:create-an-entry-6>create an entry</a> with <var>name</var> and a <code id=constructing-form-data-set:file-8><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object representing the file, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-6 data-x-internal=list-append>append</a> it to <var>entry list</var>.</ol> <li> Otherwise, if the <var>field</var> element is an <code id=constructing-form-data-set:the-input-element-6><a href=input.html#the-input-element>input</a></code> element whose <code id=constructing-form-data-set:attr-input-type-6><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#hidden-state-(type=hidden)" id="constructing-form-data-set:hidden-state-(type=hidden)">Hidden</a> state and <var>name</var> is an <a id=constructing-form-data-set:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code id=constructing-form-data-set:attr-fe-name-charset><a href=#attr-fe-name-charset>_charset_</a></code>": <ol><li>Let <var>charset</var> be the <a href=https://encoding.spec.whatwg.org/#name id=constructing-form-data-set:encoding-name data-x-internal=encoding-name>name</a> of <var>encoding</var>.<li><a href=#create-an-entry id=constructing-form-data-set:create-an-entry-7>Create an entry</a> with <var>name</var> and <var>charset</var>, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-7 data-x-internal=list-append>append</a> it to <var>entry list</var>.</ol> <li>Otherwise, <a href=#create-an-entry id=constructing-form-data-set:create-an-entry-8>create an entry</a> with <var>name</var> and the <a href=#concept-fe-value id=constructing-form-data-set:concept-fe-value>value</a> of the <var>field</var> element, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-8 data-x-internal=list-append>append</a> it to <var>entry list</var>.<li> If the element has a <code id=constructing-form-data-set:attr-fe-dirname><a href=#attr-fe-dirname>dirname</a></code> attribute, that attribute's value is not the empty string, and the element is an <a href=dom.html#auto-directionality-form-associated-elements id=constructing-form-data-set:auto-directionality-form-associated-elements>auto-directionality form-associated element</a>: <ol><li>Let <var>dirname</var> be the value of the element's <code id=constructing-form-data-set:attr-fe-dirname-2><a href=#attr-fe-dirname>dirname</a></code> attribute.<li>Let <var>dir</var> be the string "<code>ltr</code>" if <a id=constructing-form-data-set:the-directionality href=dom.html#the-directionality>the directionality</a> of the element is '<a href=dom.html#concept-ltr id=constructing-form-data-set:concept-ltr>ltr</a>', and "<code>rtl</code>" otherwise (i.e., when <a id=constructing-form-data-set:the-directionality-2 href=dom.html#the-directionality>the directionality</a> of the element is '<a href=dom.html#concept-rtl id=constructing-form-data-set:concept-rtl>rtl</a>').<li><a href=#create-an-entry id=constructing-form-data-set:create-an-entry-9>Create an entry</a> with <var>dirname</var> and <var>dir</var>, and <a href=https://infra.spec.whatwg.org/#list-append id=constructing-form-data-set:list-append-9 data-x-internal=list-append>append</a> it to <var>entry list</var>.</ol> </ol> <li>Let <var>form data</var> be a new <code id=constructing-form-data-set:formdata><a data-x-internal=formdata href=https://xhr.spec.whatwg.org/#formdata>FormData</a></code> object associated with <var>entry list</var>.<li><a href=https://dom.spec.whatwg.org/#concept-event-fire id=constructing-form-data-set:concept-event-fire data-x-internal=concept-event-fire>Fire an event</a> named <code id=constructing-form-data-set:event-formdata><a href=indices.html#event-formdata>formdata</a></code> at <var>form</var> using <code id=constructing-form-data-set:formdataevent><a href=#formdataevent>FormDataEvent</a></code>, with the <code id=constructing-form-data-set:dom-formdataevent-formdata><a href=#dom-formdataevent-formdata>formData</a></code> attribute initialized to <var>form data</var> and the <code id=constructing-form-data-set:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to true.<li>Set <var>form</var>'s <a href=#constructing-entry-list id=constructing-form-data-set:constructing-entry-list-3>constructing entry list</a> to false.<li>Return a <a href=https://infra.spec.whatwg.org/#list-clone id=constructing-form-data-set:list-clone data-x-internal=list-clone>clone</a> of <var>entry list</var>.</ol> <h5 id=selecting-a-form-submission-encoding>4.10.21.5 Selecting a form submission encoding<a href=#selecting-a-form-submission-encoding class=self-link></a></h5> If the user agent is to <dfn id=picking-an-encoding-for-the-form>pick an encoding for a form</dfn>, it must run the following steps: <ol><li>Let <var>encoding</var> be the <a id="selecting-a-form-submission-encoding:document's-character-encoding" href=https://dom.spec.whatwg.org/#concept-document-encoding data-x-internal="document's-character-encoding">document's character encoding</a>.<li> If the <code id=selecting-a-form-submission-encoding:the-form-element><a href=forms.html#the-form-element>form</a></code> element has an <code id=selecting-a-form-submission-encoding:attr-form-accept-charset><a href=forms.html#attr-form-accept-charset>accept-charset</a></code> attribute, set <var>encoding</var> to the return value of running these substeps: <ol><li>Let <var>input</var> be the value of the <code id=selecting-a-form-submission-encoding:the-form-element-2><a href=forms.html#the-form-element>form</a></code> element's <code id=selecting-a-form-submission-encoding:attr-form-accept-charset-2><a href=forms.html#attr-form-accept-charset>accept-charset</a></code> attribute.<li>Let <var>candidate encoding labels</var> be the result of <a href=https://infra.spec.whatwg.org/#split-on-ascii-whitespace id=selecting-a-form-submission-encoding:split-a-string-on-spaces data-x-internal=split-a-string-on-spaces>splitting <var>input</var> on ASCII whitespace</a>.<li>Let <var>candidate encodings</var> be an empty list of <a href=https://encoding.spec.whatwg.org/#encoding id=selecting-a-form-submission-encoding:encoding data-x-internal=encoding>character encodings</a>.<li>For each token in <var>candidate encoding labels</var> in turn (in the order in which they were found in <var>input</var>), <a href=https://encoding.spec.whatwg.org/#concept-encoding-get id=selecting-a-form-submission-encoding:getting-an-encoding data-x-internal=getting-an-encoding>get an encoding</a> for the token and, if this does not result in failure, append the <a id=selecting-a-form-submission-encoding:encoding-2 href=https://encoding.spec.whatwg.org/#encoding data-x-internal=encoding>encoding</a> to <var>candidate encodings</var>.<li>If <var>candidate encodings</var> is empty, return <a id=selecting-a-form-submission-encoding:utf-8 href=https://encoding.spec.whatwg.org/#utf-8 data-x-internal=utf-8>UTF-8</a>.<li>Return the first encoding in <var>candidate encodings</var>.</ol> <li>Return the result of <a href=https://encoding.spec.whatwg.org/#get-an-output-encoding id=selecting-a-form-submission-encoding:get-an-output-encoding data-x-internal=get-an-output-encoding>getting an output encoding</a> from <var>encoding</var>.</ol> <h5 id=converting-an-entry-list-to-a-list-of-name-value-pairs>4.10.21.6 Converting an entry list to a list of name-value pairs<a href=#converting-an-entry-list-to-a-list-of-name-value-pairs class=self-link></a></h5> The <code id=converting-an-entry-list-to-a-list-of-name-value-pairs:application/x-www-form-urlencoded><a data-x-internal=application/x-www-form-urlencoded href=https://url.spec.whatwg.org/#concept-urlencoded>application/x-www-form-urlencoded</a></code> and <code id=converting-an-entry-list-to-a-list-of-name-value-pairs:text/plain-encoding-algorithm><a href=#text/plain-encoding-algorithm>text/plain</a></code> encoding algorithms take a list of name-value pairs, where the values must be strings, rather than an <a href=#entry-list id=converting-an-entry-list-to-a-list-of-name-value-pairs:entry-list>entry list</a> where the value can be a <code id=converting-an-entry-list-to-a-list-of-name-value-pairs:file><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code>. The following algorithm performs the conversion. To <dfn id=convert-to-a-list-of-name-value-pairs>convert to a list of name-value pairs</dfn> an <a href=#entry-list id=converting-an-entry-list-to-a-list-of-name-value-pairs:entry-list-2>entry list</a> <var>entry list</var>, run these steps: <ol><li>Let <var>list</var> be an empty <a id=converting-an-entry-list-to-a-list-of-name-value-pairs:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of name-value pairs.<li> <a href=https://infra.spec.whatwg.org/#list-iterate id=converting-an-entry-list-to-a-list-of-name-value-pairs:list-iterate data-x-internal=list-iterate>For each</a> <var>entry</var> of <var>entry list</var>: <ol><li>Let <var>name</var> be <var>entry</var>'s <a href=#form-entry-name id=converting-an-entry-list-to-a-list-of-name-value-pairs:form-entry-name>name</a>, with every occurrence of U+000D (CR) not followed by U+000A (LF), and every occurrence of U+000A (LF) not preceded by U+000D (CR), replaced by a string consisting of U+000D (CR) and U+000A (LF).<li>If <var>entry</var>'s <a href=#form-entry-value id=converting-an-entry-list-to-a-list-of-name-value-pairs:form-entry-value>value</a> is a <code id=converting-an-entry-list-to-a-list-of-name-value-pairs:file-2><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object, then let <var>value</var> be <var>entry</var>'s <a href=#form-entry-value id=converting-an-entry-list-to-a-list-of-name-value-pairs:form-entry-value-2>value</a>'s <code id=converting-an-entry-list-to-a-list-of-name-value-pairs:dom-file-name><a data-x-internal=dom-file-name href=https://w3c.github.io/FileAPI/#dfn-name>name</a></code>. Otherwise, let <var>value</var> be <var>entry</var>'s <a href=#form-entry-value id=converting-an-entry-list-to-a-list-of-name-value-pairs:form-entry-value-3>value</a>.<li>Replace every occurrence of U+000D (CR) not followed by U+000A (LF), and every occurrence of U+000A (LF) not preceded by U+000D (CR), in <var>value</var>, by a string consisting of U+000D (CR) and U+000A (LF).<li><a href=https://infra.spec.whatwg.org/#list-append id=converting-an-entry-list-to-a-list-of-name-value-pairs:list-append data-x-internal=list-append>Append</a> to <var>list</var> a new name-value pair whose name is <var>name</var> and whose value is <var>value</var>.</ol> <li>Return <var>list</var>.</ol> <h5 id=url-encoded-form-data>4.10.21.7 URL-encoded form data<a href=#url-encoded-form-data class=self-link></a></h5> See <cite>URL</cite> for details on <code id=url-encoded-form-data:application/x-www-form-urlencoded><a data-x-internal=application/x-www-form-urlencoded href=https://url.spec.whatwg.org/#concept-urlencoded>application/x-www-form-urlencoded</a></code>. <a href=references.html#refsURL>[URL]</a> <h5 id=multipart-form-data>4.10.21.8 Multipart form data<a href=#multipart-form-data class=self-link></a></h5> The <dfn id=multipart/form-data-encoding-algorithm data-export=""><code>multipart/form-data</code> encoding algorithm</dfn>, given an <a href=#entry-list id=multipart-form-data:entry-list>entry list</a> <var>entry list</var> and an <a id=multipart-form-data:encoding href=https://encoding.spec.whatwg.org/#encoding data-x-internal=encoding>encoding</a> <var>encoding</var>, is as follows: <ol><li> <a href=https://infra.spec.whatwg.org/#list-iterate id=multipart-form-data:list-iterate data-x-internal=list-iterate>For each</a> <var>entry</var> of <var>entry list</var>: <ol><li>Replace every occurrence of U+000D (CR) not followed by U+000A (LF), and every occurrence of U+000A (LF) not preceded by U+000D (CR), in <var>entry</var>'s <a href=#form-entry-name id=multipart-form-data:form-entry-name>name</a>, by a string consisting of a U+000D (CR) and U+000A (LF).<li>If <var>entry</var>'s <a href=#form-entry-value id=multipart-form-data:form-entry-value>value</a> is not a <code id=multipart-form-data:file><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object, then replace every occurrence of U+000D (CR) not followed by U+000A (LF), and every occurrence of U+000A (LF) not preceded by U+000D (CR), in <var>entry</var>'s <a href=#form-entry-value id=multipart-form-data:form-entry-value-2>value</a>, by a string consisting of a U+000D (CR) and U+000A (LF).</ol> <li> Return the byte sequence resulting from encoding the <var>entry list</var> using the rules described by RFC 7578, <cite>Returning Values from Forms: <code>multipart/form-data</code></cite>, given the following conditions: <a href=references.html#refsRFC7578>[RFC7578]</a> <ul><li>Each <a href=#form-entry id=multipart-form-data:form-entry>entry</a> in <var>entry list</var> is a field, the <a href=#form-entry-name id=multipart-form-data:form-entry-name-2>name</a> of the entry is the field name and the <a href=#form-entry-value id=multipart-form-data:form-entry-value-3>value</a> of the entry is the field value.<li>The order of parts must be the same as the order of fields in <var>entry list</var>. Multiple entries with the same name must be treated as distinct fields.<li>Field names, field values for non-file fields, and filenames for file fields, in the generated <code id=multipart-form-data:multipart/form-data><a href=indices.html#multipart/form-data>multipart/form-data</a></code> resource must be set to the result of <a href=https://encoding.spec.whatwg.org/#encode id=multipart-form-data:encode data-x-internal=encode>encoding</a> the corresponding entry's name or value with <var>encoding</var>, converted to a byte sequence.<li>For field names and filenames for file fields, the result of the encoding in the previous bullet point must be escaped by replacing any 0x0A (LF) bytes with the byte sequence `<code>%0A</code>`, 0x0D (CR) with `<code>%0D</code>` and 0x22 (") with `<code>%22</code>`. The user agent must not perform any other escapes.<li>The parts of the generated <code id=multipart-form-data:multipart/form-data-2><a href=indices.html#multipart/form-data>multipart/form-data</a></code> resource that correspond to non-file fields must not have a `<code id=multipart-form-data:content-type><a href=urls-and-fetching.html#content-type>Content-Type</a></code>` header specified.<li>The boundary used by the user agent in generating the return value of this algorithm is the <dfn id=multipart/form-data-boundary-string data-export=""><code>multipart/form-data</code> boundary string</dfn>. (This value is used to generate the MIME type of the form submission payload generated by this algorithm.)</ul> </ol> For details on how to interpret <code id=multipart-form-data:multipart/form-data-3><a href=indices.html#multipart/form-data>multipart/form-data</a></code> payloads, see RFC 7578. <a href=references.html#refsRFC7578>[RFC7578]</a> <h5 id=plain-text-form-data>4.10.21.9 Plain text form data<a href=#plain-text-form-data class=self-link></a></h5> The <dfn id=text/plain-encoding-algorithm><code>text/plain</code> encoding algorithm</dfn>, given a list of name-value pairs <var>pairs</var>, is as follows: <ol><li>Let <var>result</var> be the empty string.<li> For each <var>pair</var> in <var>pairs</var>: <ol><li>Append <var>pair</var>'s name to <var>result</var>.<li>Append a single U+003D EQUALS SIGN character (=) to <var>result</var>.<li>Append <var>pair</var>'s value to <var>result</var>.<li>Append a U+000D CARRIAGE RETURN (CR) U+000A LINE FEED (LF) character pair to <var>result</var>.</ol> <li>Return <var>result</var>.</ol> Payloads using the <code id=plain-text-form-data:text/plain><a data-x-internal=text/plain href=https://www.rfc-editor.org/rfc/rfc2046#section-4.1.3>text/plain</a></code> format are intended to be human readable. They are not reliably interpretable by computer, as the format is ambiguous (for example, there is no way to distinguish a literal newline in a value from the newline at the end of the value). <h5 id=the-submitevent-interface>4.10.21.10 The <code id=the-submitevent-interface:submitevent><a href=#submitevent>SubmitEvent</a></code> interface<a href=#the-submitevent-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent title="The SubmitEvent interface defines the object used to represent an HTML form's submit event. This event is fired at the <form> when the form's submit action is invoked.">SubmitEvent</a>Support in all current engines.<div class=support>Firefox75+Safari15+Chrome81+<hr>Opera?Edge81+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/SubmitEvent title="The SubmitEvent() constructor creates and returns a new SubmitEvent object, which is used to represent a submit event fired at an HTML form.">SubmitEvent/SubmitEvent</a>Support in all current engines.<div class=support>Firefox75+Safari15+Chrome81+<hr>Opera?Edge81+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->] <c- b>interface</c-> <dfn id='submitevent' data-dfn-type='interface'><c- g>SubmitEvent</c-></dfn> : <a id='the-submitevent-interface:event' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> { <c- g>constructor</c->(<c- b>DOMString</c-> <c- g>type</c->, <c- b>optional</c-> <a href='#submiteventinit' id='the-submitevent-interface:submiteventinit'><c- n>SubmitEventInit</c-></a> <c- g>eventInitDict</c-> = {}); <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-submitevent-interface:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a>? <a href='#dom-submitevent-submitter' id='the-submitevent-interface:dom-submitevent-submitter'><c- g>submitter</c-></a>; }; <c- b>dictionary</c-> <dfn id='submiteventinit' data-dfn-type='dictionary'><c- g>SubmitEventInit</c-></dfn> : <a id='the-submitevent-interface:eventinit' href='https://dom.spec.whatwg.org/#dictdef-eventinit' data-x-internal='eventinit'><c- n>EventInit</c-></a> { <a id='the-submitevent-interface:htmlelement-2' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a>? <c- g>submitter</c-> = <c- b>null</c->; };</code></pre> <dl class=domintro><dt><code><var>event</var>.<a href=#dom-submitevent-submitter id=the-submitevent-interface:dom-submitevent-submitter-2>submitter</a></code><dd>Returns the element representing the <a href=forms.html#concept-submit-button id=the-submitevent-interface:concept-submit-button>submit button</a> that triggered the <a href=#form-submission-2 id=the-submitevent-interface:form-submission-2>form submission</a>, or null if the submission was not triggered by a button.</dl> The <dfn data-dfn-for=SubmitEvent id=dom-submitevent-submitter data-dfn-type=attribute><code>submitter</code></dfn> attribute must return the value it was initialized to. <h5 id=the-formdataevent-interface>4.10.21.11 The <code id=the-formdataevent-interface:formdataevent><a href=#formdataevent>FormDataEvent</a></code> interface<a href=#the-formdataevent-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/FormDataEvent/FormDataEvent title="The FormDataEvent() constructor creates a new FormDataEvent object.">FormDataEvent/FormDataEvent</a>Support in all current engines.<div class=support>Firefox72+Safari15+Chrome77+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/FormDataEvent title="The FormDataEvent interface represents a formdata event — such an event is fired on an HTMLFormElement object after the entry list representing the form's data is constructed. This happens when the form is submitted, but can also be triggered by the invocation of a FormData() constructor.">FormDataEvent</a>Support in all current engines.<div class=support>Firefox72+Safari15+Chrome77+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div> <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->] <c- b>interface</c-> <dfn id='formdataevent' data-dfn-type='interface'><c- g>FormDataEvent</c-></dfn> : <a id='the-formdataevent-interface:event' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> { <c- g>constructor</c->(<c- b>DOMString</c-> <c- g>type</c->, <a href='#formdataeventinit' id='the-formdataevent-interface:formdataeventinit'><c- n>FormDataEventInit</c-></a> <c- g>eventInitDict</c->); <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-formdataevent-interface:formdata' href='https://xhr.spec.whatwg.org/#formdata' data-x-internal='formdata'><c- n>FormData</c-></a> <a href='#dom-formdataevent-formdata' id='the-formdataevent-interface:dom-formdataevent-formdata'><c- g>formData</c-></a>; }; <c- b>dictionary</c-> <dfn id='formdataeventinit' data-dfn-type='dictionary'><c- g>FormDataEventInit</c-></dfn> : <a id='the-formdataevent-interface:eventinit' href='https://dom.spec.whatwg.org/#dictdef-eventinit' data-x-internal='eventinit'><c- n>EventInit</c-></a> { <c- b>required</c-> <a id='the-formdataevent-interface:formdata-2' href='https://xhr.spec.whatwg.org/#formdata' data-x-internal='formdata'><c- n>FormData</c-></a> <c- g>formData</c->; };</code></pre> <dl class=domintro><dt><code><var>event</var>.<a href=#dom-formdataevent-formdata id=the-formdataevent-interface:dom-formdataevent-formdata-2>formData</a></code><dd> Returns a <code id=the-formdataevent-interface:formdata-3><a data-x-internal=formdata href=https://xhr.spec.whatwg.org/#formdata>FormData</a></code> object representing names and values of elements associated to the target <code id=the-formdataevent-interface:the-form-element><a href=forms.html#the-form-element>form</a></code>. Operations on the <code id=the-formdataevent-interface:formdata-4><a data-x-internal=formdata href=https://xhr.spec.whatwg.org/#formdata>FormData</a></code> object will affect form data to be submitted. </dl> The <dfn data-dfn-for=FormDataEvent id=dom-formdataevent-formdata data-dfn-type=attribute><code>formData</code></dfn> attribute must return the value it was initialized to. It represents a <code id=the-formdataevent-interface:formdata-5><a data-x-internal=formdata href=https://xhr.spec.whatwg.org/#formdata>FormData</a></code> object associated to the <a href=#entry-list id=the-formdataevent-interface:entry-list>entry list</a> that is <a href=#constructing-the-form-data-set id=the-formdataevent-interface:constructing-the-form-data-set>constructed</a> when the <code id=the-formdataevent-interface:the-form-element-2><a href=forms.html#the-form-element>form</a></code> is submitted. <h4 id=resetting-a-form>4.10.22 Resetting a form<a href=#resetting-a-form class=self-link></a></h4> When a <code id=resetting-a-form:the-form-element><a href=forms.html#the-form-element>form</a></code> element <var>form</var> is <dfn id=concept-form-reset>reset</dfn>, run these steps: <ol><li>Let <var>reset</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=resetting-a-form:concept-event-fire data-x-internal=concept-event-fire>firing an event</a> named <code id=resetting-a-form:event-reset><a href=indices.html#event-reset>reset</a></code> at <var>form</var>, with the <code id=resetting-a-form:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id=resetting-a-form:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attributes initialized to true.<li>If <var>reset</var> is true, then invoke the <a href=#concept-form-reset-control id=resetting-a-form:concept-form-reset-control>reset algorithm</a> of each <a href=forms.html#category-reset id=resetting-a-form:category-reset>resettable element</a> whose <a href=#form-owner id=resetting-a-form:form-owner>form owner</a> is <var>form</var>.</ol> Each <a href=forms.html#category-reset id=resetting-a-form:category-reset-2>resettable element</a> defines its own <dfn id=concept-form-reset-control>reset algorithm</dfn>. 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 <code id=resetting-a-form:event-input><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> events to fire). <nav><a href=form-elements.html>← 4.10.6 The button element</a> — <a href=./>Table of Contents</a> — <a href=interactive-elements.html>4.11 Interactive elements →</a></nav>