HTML <input> Tag
Topic: HTML5 Tags ReferencePrev|Next
Description
The <input> tag is used to create interactive controls within a form.
An <input> element can vary in the way it appears and the attributes it uses or requires depending on the type attribute specified.
The following table summarizes the usages context and the version history of this tag.
| Placement: | Inline |
|---|---|
| Content: | None. It is an empty element. |
| Start/End Tag: | Start tag: required, End tag: forbidden |
| Version: | HTML 2, 3.2, 4, 4.01, 5 |
Syntax
The basic syntax of the <input> tag is given with:
HTML:<input>; XHTML:<input />
The example below shows the <input> tag in action.
Example
Try this code »<form action="action.php" method="post">
<label for="first-name">First name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" name="Reset">
</form>Tip: Use the HTML <label> element to define the labels for input controls. It will make the form more accessible for user.
Tag-Specific Attributes
The following table shows the attributes that are specific to the <input> tag.
| Attribute | Value | Description |
|---|---|---|
type |
button |
Specifies the type of control to create. See the tutorial on HTML Forms, HTML5 New Input Types to learn more about the input controls. |
accept |
file-extension content-type audio/* |
Specifies the types of files that the server accepts (only for type="file"). |
align |
left |
Obsolete Specifies the alignment of an image input (for type="image"). |
alt |
text | Specifies an alternative text to use when image is not available (for type="image"). |
autocomplete |
on |
Specifies whether the browser autofill feature for an input element is on or off. |
autofocus |
autofocus |
This Boolean attribute specifies that the input element should automatically get focus when the document is loaded. |
checked |
checked |
This boolean attribute specifies that the control is selected by default (for type="radio" or type="checkbox"). |
disabled |
disabled |
This Boolean attribute disables the control for user input or interaction. |
form |
form-id | Specifies the <form> element that the input element is associated with (its form owner). |
formaction |
URL | Specifies the URL of a program that processes the information submitted by the input (for type="submit" and type="image"). |
formenctype |
application/x-www-form-urlencoded |
Specifies how the form data should be encoded when submitting the form data to the server (for type="submit" and type="image"). |
formmethod |
get |
Specifies the HTTP method that the browser will use to submit the form data (for type="submit" and type="image"). |
formnovalidate |
formnovalidate |
This Boolean attribute specifies that the form control should not be validated when it is submitted (for type="submit" and type="image"). |
formtarget |
_blankframename |
Specifies a target to display the response that is received after submitting the form (for type="submit" and type="image") |
height |
pixels | Specifies the height of the image displayed as button (only for type="image"). |
list |
datalist-id | Refers to a list of pre-defined options to suggest to the user. The value must be an id of a <datalist> element in the same page. |
max |
number date-time |
Specifies the maximum value for an input control, which must not be less than its minimum (min attribute) value. |
maxlength |
number | Specifies the maximum number of characters that the user can enter in the input box. |
min |
number date-time |
Specifies the minimum value for an input control, which must not be greater than its maximum (max attribute) value. |
minlength |
number | Specifies the minimum number of characters required that the user should enter in the input box. |
multiple |
multiple |
This Boolean attribute indicates whether the user can enter more than one value. |
name |
text | Assign a name to an input control. |
pattern |
regexp | Specifies a regular expression that an input element's value is checked against. |
placeholder |
text | Provides a hint to the user of what can be entered in the input control. Placeholder text must not contain line breaks. |
readonly |
readonly |
This Boolean attribute indicates that the user cannot modify the value of the control. |
required |
required |
This Boolean attribute specifies that the user must fill in a value before submitting the form. |
size |
number | Sets the initial width, in characters, of the input control. If not specified, the default value of 20 is used. |
src |
URL | Specifies the location of the image to use as a submit button (for type="image"). |
step |
number date-time |
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. |
value |
text | Specifies the initial value of the input control. |
width |
pixels | Specifies the width of the image displayed as button (only for type="image"). |
Global Attributes
Like all other HTML tags, the <input> tag supports the global attributes in HTML5.
Event Attributes
The <input> tag also supports the event attributes in HTML5.
Browser Compatibility
The <input> tag is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: HTML Forms.
Other form-related tags: <fieldset>, <legend>, <label>, <form>, <textarea>, <select>, <optgroup>, <option>, <button>.
