defines a form input or control
<form method="post" action="process.php">
Your name: <input type="text" name="username">
<input type="submit">
</form>
<input
> is used to define input fields and other controls within a <form
>. There are many types of inputs, from simple textfields to checkboxes and buttons.
Note: This is an empty element; it has no closing tag. In XHTML documents, the <input />
syntax is recommended.
Attribute | Description | Values |
---|---|---|
Element Attributes | ||
accept | allowed MIME types for uploads | |
align | how to align the enclosed content |
|
alt | alternate text for an input with type=image | |
autocomplete | whether browser may store the form's input values |
|
autofocus | focus this input on page load | |
checked | radio button or checkbox will be on by default on page load | |
disabled | if present, disables control | |
form | name of the form the input belongs to | |
formaction | overrides the form's action attribute | |
formenctype | overrides the form's enctype attribute | |
formmethod | overrides the form's method attribute | |
formnovalidate | overrides the form's novalidate attribute | |
formtarget | overrides the form's target attribute | |
list | id of a related | |
max | maximum value | |
maxlength | if text input, maximum number of characters | |
min | minimum value | |
multiple | if present, user may provide more than one value | |
name | unique name for input | |
pattern | a JavaScript regex pattern which the value must match | |
placeholder | placeholder text when no value specified | |
readonly | if present, input value can't be edited | |
required | if present, value is required to submit form | |
size | number of characters visible | |
src | for image inputs, URL of image | |
step | granularity of value steps | |
type | type of input |
|
value | initial value for input | |
width | pixel or percentage width of input field | |
Standard Attributes | ||
accesskey | defines a key used to focus the element | |
class | class of this element | |
contenteditable | whether element is user editable | |
contextmenu | specifies a menu that corresponds to this element | |
dir | text direction | |
draggable | whether element is draggable | |
hidden | whether element should be displayed | |
id | unique identifier for this element | |
itemprop | defines a microdata property of the element in the item. | |
itemscope | creates a microdata group for the element | |
lang | language used within element | |
spellcheck | whether spellchecking is enabled for this element | |
style | CSS styling rules | |
subject | associates a microdata property with a non-parent item | |
tabindex | defines tab key navigation ordering for the element | |
title | title of this element | |
translate | whether translation tools should translate the element's content | |
xml:lang | language used within element |
Handler | Description | |
---|---|---|
Event Handlers | ||
onchange | run when an element changes | |
onclick | run when element is clicked | |
oncontextmenu | run when contextual menu is triggered | |
ondblclick | run when element is double-clicked | |
ondrag | run when element is dragged | |
ondragend | run at end of a drag operation | |
ondragenter | run when element has been dragged to a valid drop target | |
ondragleave | run when element leaves a valid drop target | |
ondragover | run while element is over a valid drop target | |
ondragstart | run at start of drag operation | |
ondrop | run when dragged element is dropped | |
onfocus | run when element receives focus | |
onformchange | run when form changes | |
onforminput | run when form gets input | |
oninput | run when element gets user input | |
oninvalid | run when element is invalid | |
onkeydown | run when a key gets pressed | |
onkeypress | run when a key gets pressed then released | |
onkeyup | run when a pressed key is released | |
onmousedown | run when mouse button gets pressed | |
onmousemove | run when the mouse pointer moves | |
onmouseout | run when the mouse pointer leaves the element | |
onmouseover | run when the mouse pointer enters the element | |
onmouseup | run when a pressed mouse button is released | |
onmousewheel | run when the mouse wheel is used | |
onreset | run when a form reset is performed | |
onscroll | run when element is being scrolled | |
onselect | run when element is selected | |
onsubmit | run when form is submitted | |
Media Event Handlers | ||
onabort | run when media resource loading is aborted | |
oncanplay | run when media can start to play | |
oncanplaythrough | run when media can be played completely to its end | |
ondurationchange | run when duration of media has changed | |
onemptied | run when a media resource becomes empty | |
onended | run when media playback reaches end | |
onerror | run when an error occurs during element loading | |
onloadeddata | run when media resource is loaded | |
onloadedmetadata | run when media metadata is loaded | |
onloadstart | run when media resource has started to load | |
onpause | run when media resource is paused | |
onplay | run when media resource will start playing | |
onplaying | run when media resource is playing | |
onprogress | run when browser has received additional media resource data | |
onratechange | run when media resource playback rate changes | |
onreadystatechange | run when media resource ready state changes | |
onseeked | run after media resource seeking operation has been performed | |
onseeking | run during media resource seeking operation | |
onstalled | run when media resource loading has stalled | |
onsuspend | run when browser stops fetching media resource before finished | |
ontimeupdate | run when media resource playback position changes | |
onvolumechange | run when media resource volume is changed or muted | |
onwaiting | run when media resource has stopped playing but expects to resume |