HTML 5 <input> tag
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 no longer supported.
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.
Example
| Source |
Output |
<form
action="form_action.asp"
method="get">
First name:
<input type="text" name="fname" value="Mickey"
/>
<br />
Last name:
<input type="text" name="lname" value="Mouse"
/>
<br />
<input type="submit" value="Submit" />
</form>
<p>
If you click the "Submit" button, you will send your input to a new page
called form_action.asp.
</p> |
If you click the "Submit" button, you will send your input to a new page called
form_action.asp.
|
Attributes
- 4: indicates if the attribute is defined in HTML 4.01
- 5: indicates if the attribute is defined in HTML 5
| Attribute |
Value |
Description |
4 |
5 |
| 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" |
4 |
5 |
| align |
left
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom |
Defines the alignment of text following the image. Not
Supported. Use CSS instead |
4 |
|
| alt |
text |
Defines an alternate text for the image. Note: Only used with type="image" |
4 |
5 |
| autocomplete |
|
|
|
5 |
| autofocus |
true
false |
Makes the input field focused on page load Note:
Cannot be used with type="hidden" |
|
5 |
| checked |
true
false |
Indicates that the input element should be checked when
it first loads. Note: Used with type="checkbox" and type="radio" |
4 |
5 |
| disabled |
true
false |
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" |
4 |
5 |
| form |
true
false |
Defines one ore more forms the input field belongs to. |
|
5 |
| inputmode |
inputmode |
Defines what kind of input to expect |
|
5 |
| list |
id of a datalist |
Reference to a datalist element. If defined, a drop down
list can be used to insert value to an input field |
|
5 |
| max |
number |
The input field's maximum value |
|
5 |
| maxlength |
number |
Defines
the maximum number of characters allowed in a text field. |
4 |
5 |
| min |
number |
The input field's minimum value |
|
5 |
| name |
field_name |
Defines a unique name for the input element. |
4 |
5 |
| pattern |
|
|
|
5 |
| readonly |
readonly |
Indicates that the value of this field cannot be modified. |
4 |
5 |
| replace |
text |
Defines what to to with the input field when the form has been submitted |
|
5 |
| required |
true
false |
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 |
|
5 |
| size |
number_of_char |
Defines the size of the input element. No longer supported. |
4 |
|
| src |
URL |
Defines the URL of the image to display. Note: Only used with
type="image" |
4 |
5 |
| step |
|
|
|
5 |
| template |
template |
Defines one or more templates |
|
5 |
| type |
button
checkbox
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
submit
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.
|
4 |
5 |
| value |
value |
For buttons, reset buttons and submit 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"
|
4 |
5 |
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.
Try-It-Yourself Demos
Text fields
How to create text fields on an HTML page. A user can
write text in a text field.
Password fields
How to create a password field on an HTML page.
Checkboxes
How to create check-boxes on an HTML page. A user can select or unselect a checkbox.
Radiobuttons
How to create radio-buttons on an HTML page.
Create a button
How to create a button. On the button you can define your own text.
Form with input fields and a submit button
How to add a form to a page. The form contains two input fields and a submit
button.
Form with checkboxes
This form contains two checkboxes, and a submit button.
Form with radiobuttons
This form contains two radio buttons, and a submit button.
Learn XML with <oXygen/> XML Editor - Free Trial!
 |
|
oXygen helps you learn to define,
edit, validate and transform XML documents. Supported technologies include XML Schema,
DTD, Relax NG, XSLT, XPath, XQuery, CSS.
Understand in no time how XSLT and XQuery work by using the intuitive oXygen debugger!
Do you have any XML related questions? Get free answers from the oXygen
XML forum
and from the video
demonstrations.
Download a FREE 30-day trial today!
|
|
