input elements allow input of different types of values into a document. They're generally used in the context of a form.
- All in Input
type attribute sets data type and associated form control for the input:
hiddenallows submission of an arbitrary string that is not made visible to the user. This is useful for persisting values across multi-step processes, or for submitting identifiers related with an item being edited.
textallows input of a single line of text, with line breaks automatically removed from the input. For multi-line text entry, see `textarea`.
searchbehaves like text, except that it may include a clear button in the field for easy reset and may cause mobile browsers to show a search icon in the keyboard.
telis an input designed for phone number input, and should cause mobile devices to show a numeric keypad.
text, but has specialised navigation and may cause mobile devices to display an appropriate keyboard.
passwordbehaves like a
textfield, except that its value is masked (e.g. with
dateallows input of a year, month and day. The input should be in the user's locale, but the output will be in ISO-8601 format (
monthlets the user input a month and year. Output is in the form
weekallows entry of a week number and year. Output is in the form
timeallows entry of a time with no time zone. Output is in the form
datetime-localallows the user to input a local date and time, which may not be valid in their local timezone. The input should be in the user's locale, and output may or not be a valid ISO-8601 format (
YYYY-MM-DDTHH:MM) until after normalisation. It's not well supported in MobileSafari and should be avoided for now.
numberprovides a simple number input, and may cause browsers to show a numeric input. Desktop browsers may show increment and decrement buttons.
rangeallow input of a numeric value between
coloryields a native colour picker. Depending on the browser, input may be in multiple different colour systems (RGB, HSL, hex), but the specification mandates that the output be a 7-charcter hex string (e.g .
checkboxcreates a checkbox which allows toggling a single boolean value.
radiocreates an individual radio button which may be grouped with others by
filelets the user select a file for upload.
submitbuttons submit the form.
imageallows use of an image for an upload button.
resetcreates a button which resets the values of all form elements to their default values. Use of this is usually an antipattern; it is not a commonly intended behaviour.
buttoncreates a button with no associated behaviour.
These attributes apply to all inputs, regardless of type:
autocomplete accepts a space-delimited list of values:
offdisables autocomplete, and should be used where there are security concerns with the
onenables autocomplete, but provides no hints as to how and leaves the behaviour at the browser's discretion.
namemeans the full name. Although not recommended due to broad differences in locale, it can be further broken down:
given-namefor the given/first name.
additional-namefor middle names.
family-namefor the family/last name.
honorific-suffixfor the suffix (Jr, PhD., etc.).
nicknamefor a nickname/handle.
usernamefor a username.
new-passwordfor a new password for an account. This should be used for both the password and confirmation fields.
current-passwordfor the password currently in use.
one-time-codefor one-time passwords.
organization-titlefor a job title.
organizationfor a place of work.
street-addressfor a complete street address; may be a multi-line field.
address-line3for individual address lines. Must not be present alongside
address-level1represent administrative parts of an address, from most to least precise.
countryfor a country or territory code.
country-namefor a country or territory name.
postal-codefor a postal or zip code.
cc-namefor the full name, as printed on a credit card, or alternatively:
cc-given-namefor the given/first name.
cc-additional-namefor the middle names.
cc-family-namefor the family/last name.
cc-expfor the expiration date, typically expressed in the form
cc-exp-monthfor the expiration month.
cc-exp-yearfor the expiration year.
cc-cscfor the CSC/CVV number, usually a three or four digit number.
cc-typefor the type of payment instrument (e.g. Visa, MasterCard, Amex).
transaction-currencyfor the currency of the transaction.
transaction-amountfor the amount to be billed, in the currency specified by
languagefor a preferred language, as per BCP 47.
bdayfor a birth date, expressed as a full date, or:
bday-dayfor the day.
bday-monthfor the month.
bday-yearfor the year.
sexfor gender identity.
telfor a complete telephone number, or:
tel-country-codefor the international dialling code, e.g.
1for the USA or
44for the UK.
tel-nationalfor a full number within the country, e.g.
0808 2000 247.
tel-area-codefor the area code.
tel-localfor a valid local phone number.
tel-extensionfor a telephone extension within the phone number (e.g. room/suite number).
imppfor an IM protocol endpoint.
urlfor a URL.
photofor the URL of a photo.
autofocusfocuses the input when it or its parent dialog are made visible.
disabledindicates that the control should be disabled.
formallows explicit association of the element with a form (using its
namespecifies the name of the input control, and the name against which the value will be submitted. Without this, the value will not be included in submissions.
patternspecifies a regular expression that a value must match to be considered valid.
placeholdertext is displayed to the user in the form as an example/hint of what is expected.
valuesets the initial value of the input. Note that button types display this on the control.
The remaining attributes are based on the
typeotherwise doesn't accept a numeric or text value:
listcan be set to the
idof a `datalist` containing predefined values to suggest to the user. This does not constrain the user to these values.
multipledetermines whether or not to allow multiple values.
acceptallows specifying the expected type of a selected
filein a comma-delimited list:
.my-extensionindicates a file extension.
application/x-some-formatindicates a MIME type.
srcspecifies the address of the referenced image.
altspecifies alternative text to be used if the image is unavailable.
checkedindicates that the input should be pre-selected.
dirnameindicates the name of the form field to use for submission of the field's text directionality.
formtargetoverride the form's corresponding elements.
- If the
typeallows specification of a numeric or date/time value:
minsets the minimum valid value.
maxsets the maximum valid value.
stepindicates how much the value should increase by. For numeric types this defaults to 1, for dates it it's expressed in seconds and defaults to 60.
- If the type allows specification of text:
minlengthsets the minimum length of the value (in UTF-16 code units).
maxlengthsets the maximum length of the value (in UTF-16 code units).
- If the input allows free entry of text:
readonlybehaves similarly to
disabled, but the input's
valuewill still be submitted along with the form.
requireddetermines whether an empty
valuewill pass validation.