<input>

defines a form input or control

Example

<form method="post" action="process.php">
  Your name: <input type="text" name="username">
  <input type="submit">
</form>

Description

<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.

Attributes Table

Attribute Description Values
Element Attributes
accept allowed MIME types for uploads
    align how to align the enclosed content
    • bottom
    • left
    • middle
    • right
    • top
    alt alternate text for an input with type=image
      autocomplete whether browser may store the form's input values
      • no
      • yes
      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 element
                          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
                                                  • button
                                                  • checkbox
                                                  • color
                                                  • date
                                                  • datetime
                                                  • datetime-local
                                                  • email
                                                  • file
                                                  • hidden
                                                  • image
                                                  • month
                                                  • number
                                                  • password
                                                  • radio
                                                  • range
                                                  • reset
                                                  • search
                                                  • submit
                                                  • tel
                                                  • text
                                                  • time
                                                  • url
                                                  • week
                                                  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

                                                      DOM Reference

                                                      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