TL;DR – HTML input is added by the user and sent to the server. It comes in various types from text to files.
Contents
Understanding HTML Input
In HTML, user input can be collected using the <input> element. It does not have any content itself and therefore is an empty element that does not need a closing tag:
<form>
My favourite food is:
<input type="text">
My pet name is:
<input type="text">
My pet is:
<input type="radio" name="specie" checked>
Dog
<input type="radio" name="specie">
Cat
<input type="radio" name="specie">
Rabbit
<input type="submit" value="Add to Database">
</form>In terms of display, <input> is an inline element. That means it will stay in the line it was originally placed in, and the default behavior of the browser will be to place a few input elements of little width side by side:
<form>
<input type="radio" name="day" value="monday" checked>Monday
<input type="radio" name="day" value="tuesday">Tuesday
<input type="radio" name="day" value="wednesday">Wednesday
</form>Using the HTML <input> element, you can collect user input and use it in scripts or databases later. It is one of the most popular HTML form elements.
Using Attributes to Define Input
The reason behind the popularity of <input> is its versatility. Using different attributes and their values, you can get dramatically different results from a simple text field to a submit button or a file upload form.
A huge selection of possible combinations and their specific use makes <input> one of the most complex elements in HTML.
The type Attribute
The way the <input> element works relies on the assigned type attribute and its value. If you omit this information, the form element will automatically set it to text.
Note: to add an attribute, include a name–value pair in the opening tag.
Here are the most common HTML input types:
| Type | Definition |
|---|---|
| text | Allows typing a line of text (usually under 32 characters) |
| date | Provides access to a calendar to choose a date |
| Allows typing an email address and validates it | |
| checkbox | Allows selecting multiple options from a predefined set |
| radio | Allows selecting a single option from a predefined set |
| submit | Creates a submit button needed to send the input to the server |
Other Available Attributes
There is a whole bunch of other attributes for input in HTML that get used less often. However, they can be quite useful, so get to know them by using the table below:
| Attribute | Definition |
|---|---|
| accesskey | Defines an access key (a keyboard shortcut) |
| autocomplete | Defines if the input field should be completed automatically by the browser |
| autofocus | Defines if the input field should be focused automatically by the browser |
| border | DEPRECATED. Defined the border for the input element |
| checked | Defines if an option should be selected automatically by the browser |
| disabled | Disables the input element |
| form | Connects the input element to an HTML form |
| formaction | Defines the URL address for data submission |
| formenctype | Defines how the user input will be sent to the server |
| formmethod | Defines the method to be used when sending user input |
| formtarget | Defines where the server response should be opened by the browser |
| height | Defines the height if the user input is an image |
| language | DEPRECATED. Defined the language used for input-related events |
| list | Defines the ID the the <datalist> element |
| max | Defines maximum value for the input element |
| maxlength | Defines maximum text length for the input element |
| multiple | Allows entering multiple values |
| min | Defines minimum value for the input element |
| name | Defines the name of the input element |
| pattern | Defines a regular expression used in validation |
| placeholder | Defines places holder text to textual input elements |
| readonly | Forbids the user to modify input value |
| required | Forbids the user to submit the form if the required field has no input |
| size | Defines input size in characters |
| src | Defines the image input source |
| step | Defines the interval between valid numeric values |
| value | Defines a default value or selection |
HTML input: Useful Tips
- Be careful when using the
autofocusattribute: it can cause issues for screen readers, as they will automatically move to the form control without warning the user. - Some browsers have an automatic translation functionality. However, they do not translate attributes. That's why using a <label> element to explain input in HTML makes much more sense than a placeholder in many cases.