HTML 5 <input> Tag
Example
A simple HTML form with two input fields and one submit button:
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form> |
Try it yourself » |
Definition and Usage
The <input> tag defines the start of an input field where the user can
enter data.
Differences Between HTML 4.01 and HTML 5
HTML 5 has many new attributes, and some HTML 4.01 attributes are not supported
in HTML5.
In HTML 5 the type attribute has a lot of new values.
Tips and Notes
Note: The input element is empty, it contains attributes only.
Tip: 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 |
If "on" browsers can store the form's input values, to
auto-fill the form if the user returns to the page.
If "off" browsers should not store this information. |
| 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. |
| formenctype |
application/x-www-form-urlencoded
multipart/form-data
text/plain |
Overrides the form's enctype attribute. Defines the mime
type used to encode the content of the form. |
| formmethod |
get
post
put
delete |
Overrides the form's method attribute. Defines the HTTP
method for sending data to the action URL. |
| formnovalidate |
true
false |
Overrides the form's novalidate attribute. If "true" the
input field should not be validated when submitted. |
| formtarget |
_blank
_self
_parent
_top |
Where to open the target URL.
- blank - the target URL will open in a new window
- _self - the target URL will open in the same frame as it was clicked
- _parent - the target URL will open in the parent frameset
- _top - the target URL will open in the full body of the window
|
| height |
pixels
% |
Defines the height of an input field. |
| list |
id of a datalist |
Reference to a datalist element. If defined, a suggestion list (drop down
list?) should be displayed, with predefined opions. |
| max |
number |
The input field's maximum value. Use togheter 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 |
The input field's minimum value. Use togheter 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 unique name for the input element. The name attribute is used to collect the fields value when submitted. |
| pattern |
JavaScript 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. Use the standard "title" attribute to describe the pattern. |
| 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 Note: Cannot be used with type: hidden, image,
button, submit, reset |
| 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
any |
Allowed when type=date,datetime,datetime-local,month,week,time,number, or range. |
| 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"
Note: This is not a required attribute, but we think you
should include it.
|
| 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 field. |
Standard Attributes
| class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title |
For a full description, go to Standard Attributes in HTML 5.
Event Attributes
| onabort, onbeforeunload, onblur, onchange, onclick,
oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,
ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress,
onkeyup, onload, onmessage, onmousedown, onmousemove,
onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect,
onsubmit, onunload |
For a full description, go to Event Attributes in HTML 5.
Start Creating a stunning, Flash website. It's easy and free!
Wix.com offers you a simple, powerful, drag & drop editing platform to create stunning Flash websites, layouts, and more.
With added e-commerce features such as search engine visibility and professional tools, Wix is the ultimate solution for creating a spectacular site.
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4500 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
|
