The <input>
element
A form control which will provide a value as part of the form data when it's submitted.
This is an empty element, so it shouldn't have a closing tag.
Full list of attributes
All the usual HTML global attributes are available
accept
- This gives the browser a hint as to what file types it should look for when a user is choosing a file to upload, for a
type=file
control. Value can be one or more of these separated by spaces:audio/*
,video/*
,image/*
, any full MIME type, or a file extension with a.
in front of it. alt
- Only used with
type=image
. Same as for an<img>
element. autocomplete
- Tells the browser whether it should offer suggestions of completed values to fill in. Must be either
on
(the default) oroff
. It's a good idea to turn this off for sensitive information like credit card numbers. checked
- For a checkbox or radio button control, this indicates that the element should be selected to start with.
dirname
- Gives a name to be used for submitting an additional piece of information in the form data. The actual value of the control will still be submitted with the name given by the
name
attribute, but this additional field will be included with the valueltr
orrtl
to indicate the directionality of the text the user entered. disabled
- If present, the control should be disabled so that the user can't manipulate it. Used for parts of the form which are not relevant in the current context. Some JavaScript code might add or remove this attribute to disable or enable parts of the form depending on how other parts are being filled in.
form
- Overrides the default association between a form control and it's form (usually just the
<form>
element it's inside). formaction
- Overrides the
action
attribute on the form's<form>
element. formenctype
- Overrides the
enctype
attribute on the form's<form>
element. formmethod
- Overrides the
method
attribute on the form's<form>
element. formnovalidate
- Overrides the
novalidate
attribute on the form's<form>
element. formtarget
- Overrides the
target
attribute on the form's<form>
element. height
- Only used with
type=image
. Same as for an<img>
element. inputmode
- Experimental attribute for giving the browser a hint as to what kind of input mode would be most suitable. For example, this could be used by a browser on a tablet computer to select the most appropriate virtual keyboard layout for a particular input control.
list
- The ID of a
<datalist>
element which the browser can use as a source of suggested values. It's not prescriptive, so the user can choose other values as well. max
- The maximum value that will be considered valid. Can be a number or date/time, depending on the
type
of this element. maxlength
- The maximum number of characters which a text box should allow the user to type in.
min
- The minimum number, date, or time appropriate to this
type
of<input>
element that will be considered valid. Also defines the start of a sequence of steps if thestep
attribute is used. minlength
- The minimum number of characters which a text box should allow the user to type in.
multiple
- Indicates that the browser should allow the user to enter multiple values into this control.
name
- The name that this control's value will be associated with in the data sent to the server when the form is submitted.
pattern
- A regular expression, in JavaScript's regex syntax, which is used to validate the value on form submission. Note that the pattern must match the whole of the input value, not just a substring as regular expressions normally would.
placeholder
- Contains a piece of text which should be displayed in a text box to indicate what it's for, but should be hidden when the user starts to enter text of their own. For example, a search box might have
placeholder=Search
so that the user knows what it's for without the need for a separate piece of text before the<input>
element explaining it. readonly
- If present, the form control cannot be edited by the user, but it's value is still submitted as part of the form's data.
required
- Indicates that the element should be considered invalid if there's no text entered, or no value selected in any other way.
size
- A hint to the browser about how bit a text input box should be. It should give the number of characters that should be visible at once. This doesn't constrain how much text can actually be entered.
src
- Only used with
type=image
. Same as for an<img>
element. step
- Indicates the granularity of valid values, and allows the browser to provide a control that only allows the user to select such values. Should be either a number (possibly with a decimal point) or the word
any
. type
- The kind of control to display. Valid values are:
hidden
,text
,search
,tel
,url
,email
,password
,datetime
,date
,month
,week
,time
,datetime-local
,number
,range
,color
,checkbox
,radio
,file
,submit
,image
,reset
, andbutton
. value
- The initial value of the form control. Used to prefill the form with a default value, especially when the form has already been submitted but the server has regenerated it to ask the user to correct mistakes.
width
- Only used with
type=image
. Same as for an<img>
element.