---
title: HTMLInputElement
slug: Web/API/HTMLInputElement
tags:
  - API
  - HTML DOM
  - Interface
  - NeedsNewLayout
  - NeedsTranslation
  - Reference
  - TopicStub
translation_of: Web/API/HTMLInputElement
---
<div>{{ APIRef("HTML DOM") }}</div>

<div></div>

<p>A interface HTMLInputElement fornece propriedades e métodos especiais (além da interface regular {{domxref ("HTMLElement")}}) que também tem disponível por herança) para manipular o layout e a apresentação dos elementos de entrada.</p>

<h2 id="Properties" name="Properties">Propriedades</h2>

<p><em>Inherits propriedades dos parentes, </em><em>{{domxref("HTMLElement")}}.</em></p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Name</th>
   <th>Type</th>
   <th>Description</th>
  </tr>
  <tr>
   <td><code>accept</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflete o {{ htmlattrxref("accept", "input") }} atributo HTML, contendo uma lista separada por vírgula de tipos de arquivos aceitos pelo servidor quando {{htmlattrxref("type","input")}} é <code>file</code>.</td>
  </tr>
  <tr>
   <td><code>accessKey</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Um único caractere que alterna o foco de entrada para o controle.</td>
  </tr>
  <tr>
   <td><code>align</code> {{obsolete_inline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>Alinhamento do elemento.</td>
  </tr>
  <tr>
   <td><code>alt</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflete o {{ htmlattrxref("alt", "input") }} atributo HTML, contendo texto alternativo para usar quando {{htmlattrxref("type","input")}} é <code>image.</code></td>
  </tr>
  <tr>
   <td><code>autocapitalize</code> {{experimental_inline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>Define o comportamento de capitalização para entrada do usuário. Valores válidos são <code>none</code>, <code>off</code>, <code>characters</code>, <code>words</code>, ou <code>sentences</code>.</td>
  </tr>
  <tr>
   <td><code>autocomplete</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{htmlattrxref("autocomplete", "input")}} HTML attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file</span>, or a button type (<span style="font-family: courier new;">button</span>, <span style="font-family: courier new;">submit</span>, <span style="font-family: courier new;">reset</span>, <span style="font-family: courier new;">image</span>). Possible values are:
    <ul>
     <li><span style="font-family: courier new;">off</span>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.</li>
     <li><span style="font-family: courier new;">on</span>: The browser can automatically complete the value based on values that the user has entered during previous uses.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code>autofocus</code></td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Reflects the {{ htmlattrxref("autofocus", "input") }} HTML attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</td>
  </tr>
  <tr>
   <td><code>checked</code></td>
   <td>{{jsxref("Boolean")}}</td>
   <td>The current state of the element when {{htmlattrxref("type","input")}} is <code>checkbox</code> or <code>radio</code>.</td>
  </tr>
  <tr>
   <td><code>defaultChecked</code></td>
   <td>{{jsxref("Boolean")}}</td>
   <td>The default state of a radio button or checkbox as originally specified in HTML that created this object.</td>
  </tr>
  <tr>
   <td><code>defaultValue</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>The default value as originally specified in HTML that created this object.</td>
  </tr>
  <tr>
   <td><code>dirName</code></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td><code>disabled</code></td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Reflects the {{ htmlattrxref("disabled", "input") }} HTML attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }} </td>
  </tr>
  <tr>
   <td><code>files</code> {{readonlyInline}}</td>
   <td>{{domxref("FileList")}}</td>
   <td>A list of selected files.</td>
  </tr>
  <tr>
   <td><code>form</code> {{readonlyInline}}</td>
   <td>{{domxref("HTMLFormElement")}}</td>
   <td>The containing form element, if this element is in a form. If this element is not contained in a form element:
    <ul>
     <li>{{ HTMLVersionInline(5) }} this can be the {{ htmlattrxref("id", "form") }} attribute of any {{ HTMLElement("form") }} element in the same document. Even if the attribute is set on {{ HTMLElement("input") }}, this property will be <code>null</code>, if it isn't the id of a {{ HTMLElement("form") }} element.</li>
     <li>{{ HTMLVersionInline(4) }} this must be <code>null</code>.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code>formAction</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("formaction", "input") }} HTML attribute, containing the URI of a program that processes information submitted by the element. If specified, this attribute overrides the {{ htmlattrxref("action", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
  </tr>
  <tr>
   <td><code>formEncType</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("formenctype", "input") }} HTML attribute, containing the type of content that is used to submit the form to the server. If specified, this attribute overrides the {{ htmlattrxref("enctype", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
  </tr>
  <tr>
   <td><code>formMethod</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("formmethod", "input") }} HTML attribute, containing the HTTP method that the browser uses to submit the form. If specified, this attribute overrides the {{ htmlattrxref("method", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
  </tr>
  <tr>
   <td><code>formNoValidate</code></td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Reflects the {{ htmlattrxref("formnovalidate", "input") }} HTML attribute, indicating that the form is not to be validated when it is submitted. If specified, this attribute overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
  </tr>
  <tr>
   <td><code>formTarget</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("formtarget", "input") }} HTML attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. If specified, this attribute overrides the {{ htmlattrxref("target", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
  </tr>
  <tr>
   <td><code>height</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("height", "input") }} HTML attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">image</span>.</td>
  </tr>
  <tr>
   <td><code>indeterminate</code></td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Indicates that a checkbox is neither on nor off.</td>
  </tr>
  <tr>
   <td><code>labels</code> {{readonlyInline}}</td>
   <td>{{domxref("NodeList")}}</td>
   <td>A list of {{ HTMLElement("label") }} elements that are labels for this element.</td>
  </tr>
  <tr>
   <td><code>list</code></td>
   <td>{{domxref("HTMLElement")}}</td>
   <td>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the {{htmlattrxref("type","input")}} attribute's value is <span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file</span>, or a button type.</td>
  </tr>
  <tr>
   <td><code>max</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("max", "input") }} HTML attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</td>
  </tr>
  <tr>
   <td><code>maxLength</code></td>
   <td> <code>long</code></td>
   <td>Reflects the {{ htmlattrxref("maxlength", "input") }} HTML attribute, containing the maximum length of text (in Unicode code points) that the value can be changed to. The constraint is evaluated only when the value is changed
    <div class="note"><strong>Note:</strong> If you set <code>maxLength</code> to a negative value programmatically, an exception will be thrown.</div>
   </td>
  </tr>
  <tr>
   <td><code>min</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("min", "input") }} HTML attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.</td>
  </tr>
  <tr>
   <td><code>multiple</code></td>
   <td></td>
   <td>Reflects the {{ htmlattrxref("multiple", "input") }} HTML attribute, indicating whether more than one value is possible (e.g., multiple files).</td>
  </tr>
  <tr>
   <td><code>name</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("name", "input") }} HTML attribute, containing a name that identifies the element when submitting the form.</td>
  </tr>
  <tr>
   <td><code>pattern</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("pattern", "input") }} HTML attribute, containing a regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email</span>; otherwise it is ignored.</td>
  </tr>
  <tr>
   <td><code>placeholder</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("placeholder", "input") }} HTML attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email</span>; otherwise it is ignored.</td>
  </tr>
  <tr>
   <td><code>readOnly</code></td>
   <td>{{jsxref("Boolean")}}</td>
   <td>
    <p>Reflects the {{ htmlattrxref("readonly", "input") }} HTML attribute, indicating that the user cannot modify the value of the control.<br>
     {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">range</span>, <span style="font-family: courier new;">color</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file</span>, or a button type.</p>
   </td>
  </tr>
  <tr>
   <td><code>required</code></td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Reflects the {{ htmlattrxref("required", "input") }} HTML attribute, indicating that the user must fill in a value before submitting a form.</td>
  </tr>
  <tr>
   <td><code>selectionDirection</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>The direction in which selection occurred. This is <code>"forward"</code> if selection was performed in the start-to-end direction of the current locale, or <code>"backward"</code> for the opposite direction. This can also be <code>"none"</code> if the direction is unknown."</td>
  </tr>
  <tr>
   <td><code>selectionEnd</code></td>
   <td><code>unsigned long</code></td>
   <td>The index of the end of selected text.</td>
  </tr>
  <tr>
   <td><code>selectionStart</code></td>
   <td><code>unsigned long</code></td>
   <td>The index of the beginning of selected text. When nothing is selected, this is also the caret position inside of the <code>&lt;input&gt;</code> element.</td>
  </tr>
  <tr>
   <td><code>size</code></td>
   <td><code>unsigned long</code></td>
   <td>Reflects the {{ htmlattrxref("size", "input") }} HTML attribute, containing size of the control. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">text</span> or <span style="font-family: courier new;">password</span>, in which case, it is an integer number of characters. {{ HTMLVersionInline(5) }} Applies only when {{htmlattrxref("type","input")}} is set to <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span>, <span style="font-family: courier new;">email</span>, or <span style="font-family: courier new;">password</span>; otherwise it is ignored.</td>
  </tr>
  <tr>
   <td><code>src</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("src", "input") }} HTML attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">image</span>; otherwise it is ignored.</td>
  </tr>
  <tr>
   <td><code>step</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("step", "input") }} HTML attribute, which works with<strong> </strong>{{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <span style="font-family: courier new;">any</span> or a positive floating point number. If this is not set to <span style="font-family: courier new;">any</span>, the control accepts only values at multiples of the step value greater than the minimum.</td>
  </tr>
  <tr>
   <td><code>tabIndex</code></td>
   <td>long</td>
   <td>The position of the element in the tabbing navigation order for the current document.</td>
  </tr>
  <tr>
   <td><code>type</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("type", "input") }} HTML attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.</td>
  </tr>
  <tr>
   <td><code>useMap</code> {{ obsolete_inline }}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>A client-side image map.</td>
  </tr>
  <tr>
   <td><code>validationMessage</code> {{readonlyInline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>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 ({{htmlattrxref("willValidate","input")}} is <code>false</code>), or it satisfies its constraints.</td>
  </tr>
  <tr>
   <td><code>validity</code> {{readonlyInline}}</td>
   <td>{{domxref("ValidityState")}}</td>
   <td>The validity state that this element is in. </td>
  </tr>
  <tr>
   <td><code>value</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>
    <p>Current value in the control.</p>

    <div class="note">
    <p><strong>Note: </strong>for certain input types the returned value might not match the value the user has entered. For example, if the user enters a non-numeric value into an &lt;input type="number"&gt;, the returned value might be an empty string instead.</p>
    </div>
   </td>
  </tr>
  <tr>
   <td><code><a id="property-valueasdate" name="property-valueasdate"></a>valueAsDate</code></td>
   <td>{{jsxref("Date")}}</td>
   <td>The value of the element, interpreted as a date, or <code>null</code> if conversion is not possible.</td>
  </tr>
  <tr>
   <td><code><a id="property-valueasnumber" name="property-valueasnumber"></a>valueAsNumber</code></td>
   <td><code>double</code></td>
   <td>The value of the element, interpreted as one of the following in order:
    <ol>
     <li>a time value</li>
     <li>a number</li>
     <li><code>NaN</code> if conversion is not possible</li>
    </ol>
   </td>
  </tr>
  <tr>
   <td><code>width</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>Reflects the {{ htmlattrxref("width", "input") }} HTML attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">image</span>.</td>
  </tr>
  <tr>
   <td><code>willValidate</code></td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Indicates whether the element is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</td>
  </tr>
 </tbody>
</table>

<h2 id="Methods">Methods</h2>

<p><em>Inherits methods from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Name &amp; Arguments</th>
   <th>Return</th>
   <th>Description</th>
  </tr>
  <tr>
   <td><code>blur()</code></td>
   <td><code>void</code></td>
   <td>Removes focus from input; keystrokes will subsequently go nowhere.</td>
  </tr>
  <tr>
   <td><code>checkValidity</code>()</td>
   <td>{{jsxref("Boolean")}}</td>
   <td>Returns false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.</td>
  </tr>
  <tr>
   <td><code>click()</code></td>
   <td><code>void</code></td>
   <td>Simulates a click on the element.</td>
  </tr>
  <tr>
   <td><code>focus()</code></td>
   <td><code>void</code></td>
   <td>Focus on input; keystrokes will subsequently go to this element.</td>
  </tr>
  <tr>
   <td><code>mozSetFileArray(files)</code>{{non-standard_inline}}</td>
   <td><code>void</code></td>
   <td>Sets the files selected on the input to the given array of <code><a href="/en-US/docs/Web/API/File">File</a></code> objects.  This is an alternative to <code>mozSetFileNameArray</code> which can be used in frame scripts: a chrome script can <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">open files as <code>File</code> objects</a> and send them via <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>.</td>
  </tr>
  <tr>
   <td><code><a href="/en/DOM/Input.mozGetFileNameArray" title="en/DOM/Input.mozGetFileNameArray">mozGetFileNameArray</a>(length, filenames)</code>{{non-standard_inline}}</td>
   <td><code>void</code></td>
   <td>Returns an array of all the file names from the input.</td>
  </tr>
  <tr>
   <td><code><a href="/en/DOM/Input.mozSetFileNameArray" title="en/DOM/Input.mozSetFileNameArray">mozSetFileNameArray</a>(filenames, length)</code>{{non-standard_inline}}</td>
   <td><code>void</code></td>
   <td>Sets the filenames for the files selected on the input.  Not for use in <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">frame scripts</a>, because it accesses the filesystem.</td>
  </tr>
  <tr>
   <td><code><a href="/en/DOM/Input.select" title="en/DOM/Input.select">select</a>()</code></td>
   <td><code>void</code></td>
   <td>Selects the input text in the element, and focuses it so the user can subsequently replace the whole entry.</td>
  </tr>
  <tr>
   <td><code>setCustomValidity(error)</code></td>
   <td><code>void</code></td>
   <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td>
  </tr>
  <tr>
   <td><code><a href="/en/DOM/Input.setSelectionRange" title="en/DOM/Input.setSelectionRange">setSelectionRange</a>(selectionStart, selectionEnd, [optional] selectionDirection)</code></td>
   <td><code>void</code></td>
   <td>Selects a range of text in the element (but does not focus it). The optional <code>selectionDirection</code> parameter may be <code>"forward"</code> or <code>"backward"</code> to establish the direction in which selection was set, or <code>"none"</code> if the direction is unknown or not relevant. The default is <code>"none"</code>. Specifying a <code>selectionDirection</code> parameter sets the value of the <code>selectionDirection</code> property.</td>
  </tr>
  <tr>
   <td><code>setRangeText(replacement, [optional] start, [optional] end, [optional] selectMode)</code></td>
   <td><code>void</code></td>
   <td>Replaces a range of text with the new text. Supported input types: <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>password.</code></td>
  </tr>
  <tr>
   <td><code>stepDown(n)</code></td>
   <td><code>void</code></td>
   <td>Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * <code>n</code>), where <code>n</code> defaults to <code>1</code> if not specified. Throws an <code>INVALID_STATE_ERR</code> exception:
    <ul>
     <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.</li>
     <li>if the element has no {{htmlattrxref("step","input")}} value.</li>
     <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number.</li>
     <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}. </li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code>stepUp(n)</code></td>
   <td><code>void</code></td>
   <td>Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * <code>n</code>), where <code>n</code> defaults to <code>1</code> if not specified. Throws an <code>INVALID_STATE_ERR</code> exception:
    <ul>
     <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.</li>
     <li>if the element has no {{htmlattrxref("step","input")}} value.</li>
     <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number.</li>
     <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "tthe-input-element.html#the-input-element", "HTMLInputElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from {{SpecName("HTML5 W3C")}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Technically, the  <code>tabindex</code> and <code>accesskey</code> properties, as well as the <code>blur()</code>, <code>click()</code>, and <code>focus()</code> methods, are now defined on {{domxref("HTMLElement")}}.<br>
    The following properties are now obsolete: <code>align</code> and <code>useMap</code>.<br>
    The following properties have been added: <code>autocomplete</code>, <code>autofocus</code>, <code>dirName</code>, <code>files</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>height</code>, <code>indeterminate</code>, <code>labels</code>, <code>list</code>, <code>max</code>, <code>min</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>selectionDirection</code>, <code>selectionEnd</code>, <code>selectionStart</code>, <code>step</code>, <code>validationMessage</code>, <code>validity</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>width</code>, and <code>willValidate</code>.<br>
    The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>, <code>setSelectionRange()</code>, <code>stepUp()</code>, and <code>stepDown()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>The <code>size</code> property is now an <code>unsigned</code> <code>long</code>. The <code>type</code> property must be entirely given in lowercase characters.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>autocomplete</code> &amp; <code>autofocus</code> properties</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>files</code> property</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.9)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>multiple</code> property</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>indeterminate</code> property</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>list</code> property</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formTarget</code> properties</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(2)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>formNoValidate</code>, <code>validationMessage</code>, <code>validity</code>, <code>willValidate</code> properties and <code>setCustomValidity()</code> and <code>checkValidity()</code> methods.</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(2)}}</td>
   <td>10</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>pattern</code>, <code>placeholder</code>, <code>required</code> properties</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(2)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>height</code> and <code>weight</code> properties</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(16)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>labels</code> property</td>
   <td>{{CompatChrome(14.0)}}</td>
   <td>{{CompatNo}} ({{bug("556743")}})</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>min</code>, <code>max</code>, and <code>step</code> for <code>&lt;input type="number"&gt;</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>Experimental, and without specific UI, since {{CompatGeckoDesktop(16)}}: behind the pref <code>dom.experimental_forms</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>stepUp</code> and <code>stepDown</code> methods</td>
   <td>{{CompatUnknown}}</td>
   <td>Experimental since {{CompatGeckoDesktop(16)}}: behind the pref <code>dom.experimental_forms</code><br>
    <br>
    There are still differences with the latest spec: {{bug(835773)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>min</code>, <code>max</code>, and <code>step </code>properties for <code>&lt;input type="range"&gt;</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(23)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>min</code>, <code>max</code>, and <code>step </code>properties for <code>&lt;input type="date"&gt;</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>Experimental, and without specific UI, since {{CompatGeckoDesktop(20)}}: behind the pref <code>dom.experimental_forms</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>min</code>, <code>max</code>, and <code>step </code>properties for other date-related <code>type</code> values</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>mozGetFileNameArray()</code> and <code>mozSetFileNameArray() </code>methods {{non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>mozSetFileArray()</code> method {{non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("38")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>autocapitalize</code></td>
   <td>{{CompatChrome(43.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>autocapitalize</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(43.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{CompatUnknown}}</span></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(43.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>HTML element implementing this interface: {{ HTMLElement("input") }}.</li>
</ul>