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) or off. 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 value ltr or rtl 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 the step 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, and button.
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.

Further information

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

enquiries@thewebdesign.academy

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom