HTML5 <input> Tag

Example

A simple HTML form with two input fields and one submit button:

<form action="form_action.html" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>

Definition and Usage

The <input> tag specifies an input field where the user can enter data.

Differences Between HTML 4.01 and HTML5

In HTML 4.01 the "align" attribute was deprecated, and is not supported in HTML5, use CSS to align input elements.

The <input> tag in HTML5 has many new attributes.

The type attribute in HTML5 has many new values.

Tips and Notes

Note: The input element is empty, it contains attributes only.

Hint: Use the label element to define a label to a form control.

Attributes

Attribute Value Description
accept list_of_mime_types A comma-separated list of MIME types that indicates the MIME type of the file transfer.
Note:
Only used with type="file"
alt text Defines an alternate text for the image.
Note:
Only used with type="image"
autocomplete on
off
Specifies whether or not the the input field should have autocomplete enabled.
autofocus autofocus Makes the input field focused on page load.
Note:
Cannot be used with type="hidden"
checked checked Indicates that the input element should be checked when it first loads.
Note:
Used with type="checkbox" and type="radio"
disabled disabled Disables the input element when it first loads so that the user can not write text in it, or select it.
Note:
Cannot be used with type="hidden"
form formname Defines one ore more forms the input field belongs to
formaction URL Overrides the form's action attribute. Must be a valid URL that defines where to send the data when the form is submitted.
Note: Used with type="submit" and type="image"
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Overrides the form's enctype attribute. Specifies how form-data should be encoded before sending it to the server.
Note: Used with type="submit" and type="image"
formmethod get
post
Overrides the form's method attribute. Defines the HTTP method for sending data to the action URL.
Note: Used with type="submit" and type="image"
formnovalidate formnovalidate Overrides the form's novalidate attribute. If present the input field should not be validated when submitted
formtarget _blank
_self
_parent
_top
framename
Overrides the form's target attribute. Specifies the target window used when the form is submitted.
Note: Used with type="submit" and type="image"
height pixels
%
Defines the height of an input.
Note:
Only used with type="image"
list datalist-id Refers to a datalist containing predefined options for the input field
max number
date
The input field's maximum value. Use together with the "min" attribute to create a range of legal values
maxlength number Defines the maximum number of characters allowed in a text field
min number
date
The input field's minimum value. Use together with the "max" attribute to create a range of legal values
multiple multiple If present the user is allowed more than one value
name fieldname Defines a name for the input element. The name attribute is used to collect the fields value when submitted
pattern regexp_pattern Defines a pattern or format for the input field's value. Example: pattern="[0-9]" means that the input value must be a number between 0 an 9
placeholder text Defines a hint to help users fill out the input field
readonly readonly Indicates that the value of this field cannot be modified
required required Defines if the input field's value is required in order to submit the form.
size number of characters Defines how many characters should be visible in the input field.
src URL Defines the URL of the image to display.
Use with type="image"
step number Specifies the legal number intervals for the input field
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Indicates the type of the input element. The default value is "text".
value value For buttons: Defines the text on the button.
For image buttons:
Defines the symbolic result of the field passed to a script.
For checkboxes and radio buttons:
Defines the result of the input element when clicked. The result is sent to the form's action URL.
For hidden, password, and text fields:
Defines the default value of the element.
Note:
Cannot be used with type="file"
Note:
This attribute is required with type="checkbox" and type="radio"
width pixels
%
Defines the width of an input.
Note: Only used with type="image"

Standard Attributes

The <input> tag also supports the Standard Attributes in HTML5.

Event Attributes

The <input> tag also supports the Event Attributes in HTML5.


Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!