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.
The Altova MissionKit is an integrated suite of tools ideal for:
- XML development
- Web & Web services development
- Data mapping & integration
- Rendering & publishing XML & database data
- XBRL validation, taxonomy editing, transformation & rendering
The MissionKit for XML Developers includes XMLSpy® - the industry-leading XML editor; MapForce® - a
graphical data mapping, conversion, and integration tool; StyleVision® - a visual XSLT stylesheet designer;
DiffDog® - an XML-aware diff/merge tool; and 2 additional tools.
Try all 6 products free for 30 days!
Download a fully-functional free trial
|
|
|
|
