input

An input field provides an interface between the browser and the user which allows data to be requested in specific ways.

The input element is multi-faceted, presenting itself to the user as: text input, radio buttons, check boxes, buttons, color pickers, dates and times, and more.

Input elements are typically placed subordinate to a form element.

type

This attribute controls the appearance and functionality of the element.

Text types:

• text A single-line text field.
• password A single-line text field whose value is obscured. Use the maxlength and minlength attributes to specify the acceptable length of the value that can be entered.
• search A field for entering search strings.
• email A field for entering an e-mail address.
• tel A field for entering a telephone number.
• url A field for entering a URL.
• number A field for entering a number.
• hidden An input area that is not displayed but whose value is submitted to the server.

Radios and checkboxes:

• radio A radio button, allowing a single value to be selected out of multiple choices.
• checkbox A check box allowing single values to be selected/deselected.

Date and time types:

• date An input for entering a date (year, month, and day).
• time An input for entering a time value.
• datetime-local An input for entering a date and time.
• month An input for entering a month and year.
• week An input for entering a date consisting of a week-number and a year.

Single purpose types:

• color An input for specifying a color using the browser's color picker user interface.
• range An input for entering an integer value between a minimum and maximum.
• file A way to let the user select a file. Use the accept attribute to define the types of files that the control can select.

Button types:

• button A push button with no default behavior.
• reset A button that resets the contents of the form to default values.
• submit A button that submits the form.
• image A graphical submit button. The src attribute defines the source of the image. The alt attribute defines alternative text. The height and width attributes define the size of the image.

name

The name attribute is used as the key name in the key/value pairs submitted to the server.

value

When the form is first loaded, this value is used to preset the element's display.

When the form is submitted, this is the value that will be sent to the server.

list

This attribute is used to associate a list of predefined acceptable values which have been specified with a datalist element. Provide the ID of the datalist.

form

This attribute may be used to declare the input to be part of a form even when it is not directly subordinate to it. Provide the ID of the form.

readonly

The input should be visible, but unchangable. Its value will be included in the submission.

disabled

The input should be visible, but unchangable. Its value will not be included in the submission.

required

When present, this field must not be left blank.

autofocus

Identifies this input element as the one that should receive keyboard focus when the page is loaded.

autocomplete

on The browser can assist the user by automatically providing values that were previously used on similar forms.

off The browser should not provide any automatic assistance.

name The browser should automatically provide the user's full name.

honorific-prefix The browser should automatically provide the user's prefix or title, like "Dr.", "Ms.", etc.

given-name The browser should automatically provide the user's first name.

additional-name The browser should automatically provide the user's middle name.

family-name The browser should automatically provide the user's last name.

honorific-prefix The browser should automatically provide the user's suffix, like "Jr.", "PhD.", etc.

nickname The browser should automatically provide the user's nickname.

email The browser should automatically provide the user's email address.

username The browser should automatically provide the user's account name.

See the MDN documentation for more possibilities.