The HTML <input> tag
In short
The HTML <input> element is the all-purpose form control. Its type attribute selects the kind of control: text, email, password, number, checkbox, radio, date, file, range, color and more. It is a void element (no closing tag) and should always be paired with a <label>.
Overview
The <input> element is the most versatile control in HTML: a single void element that becomes a text box, checkbox, radio button, slider, date picker, color picker, file uploader or more, all decided by its type attribute.
The type also brings built-in behavior and validation: email and url check the format, number and range enforce min/max/step, and attributes like required, pattern and maxlength add constraints. On mobile, set inputmode and autocomplete for the right keyboard and autofill.
Every input needs an accessible name, which almost always means an associated <label>. The control's name is what gets submitted with its value.
Syntax
<label for="email">Email</label>
<input id="email" name="email" type="email" required>Attributes
The <input> element supports the following attributes, in addition to the global attributes available to every HTML element.
| Attribute | Value | Description |
|---|---|---|
accept |
A comma-separated list of extensions (.pdf), MIME types (image/png), or the image/*, video/* and audio/* wildcards. |
Lists the file types a file input should offer. |
alt |
A short, descriptive string. Use an empty value (alt="") for purely decorative images. |
Provides alternative text for an image. |
autocomplete |
on, off, or a specific token such as email, name, current-password, one-time-code. |
Controls browser autofill for a field. |
capture |
user (faces the user) environment (faces outward) |
Asks a file input to use the device's camera or microphone. |
checked |
A boolean attribute. If present, the checkbox or radio button starts out checked. | Pre-checks a checkbox or radio button. |
dirname |
A field name to submit the direction under, e.g. comment.dir. |
Submits a field's text direction with the form. |
disabled |
A boolean attribute: present or absent. | Disables a form control. |
formaction |
A URL. | Overrides the form action for one submit button. |
formenctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
Overrides the form encoding for one button. |
formmethod |
get post dialog |
Overrides the form method for one submit button. |
formnovalidate |
On a submit button, presence alone skips validation for that button. | Skips validation for one submit button. |
formtarget |
_self _blank _parent _top a named context |
Overrides the form target for one button. |
height |
A non-negative integer (pixels). | Sets the height of the element in pixels. |
list |
The id of a <datalist> element. |
Connects an input to a datalist of suggestions. |
max |
A number, or a date or time string in the input type's format. | Sets the maximum allowed value. |
maxlength |
A non-negative integer. | Limits the maximum character count. |
min |
A number, or a date or time string in the input type's format. | Sets the minimum allowed value. |
minlength |
A non-negative integer. | Sets the minimum character count. |
multiple |
A boolean attribute that lets the control take more than one value. | Allows multiple values or selections. |
name |
A string (the field name used in the submitted data). | Names a form control for submission. |
pattern |
A JavaScript regular expression (without delimiters). | Validates input against a regular expression. |
placeholder |
A string of hint text. | Shows hint text in an empty field. |
popovertarget |
The id of an element that has the popover attribute. |
Makes a button toggle a popover. |
popovertargetaction |
toggle (default) show hide |
Sets whether a popover button shows, hides or toggles. |
readonly |
Written alone or as readonly=readonly, it locks the value against edits. | Makes a field read-only. |
required |
Needs no value to make the control mandatory. | Marks a form control as mandatory. |
size |
A positive integer. | Sets the visible size of the control. |
src |
A URL pointing to the resource. | Specifies the URL of an embedded resource. |
step |
A positive number, or any. |
Sets the interval between the values an input allows. |
type |
text (default) email password number tel url search date time datetime-local month week color range checkbox radio file hidden submit reset button image |
Sets the type of an input control. |
value |
A string or number, depending on the element and input type. | Sets a control's value. |
width |
A non-negative integer (pixels). | Sets the width of the element in pixels. |
Example
<label for="q">Search</label>
<input id="q" name="q" type="search" placeholder="Type to search…" style="padding:8px; width:100%;">More Examples
Best practices
- Always pair an input with a <label>; never rely on placeholder as the label.
- Choose the most specific type for the data, then enhance mobile with inputmode and autocomplete.
- Use native validation attributes (required, min/max, pattern) and validate on the server too.
- Give each input a name so its value is submitted.
- For file uploads, set accept, and use multiple when several files are allowed.
Accessibility
The single most important rule: every input must have a label. A programmatically-associated <label> gives the field its accessible name and makes the label clickable. Beyond that:
- Do not use placeholder text as the only label; it vanishes on input and has poor contrast.
- Convey requirement and errors with required, aria-invalid and aria-describedby, not color alone.
- Group radio buttons and related checkboxes in a <fieldset> with a <legend>.
Frequently asked questions
How many input types are there?
Over twenty, set with the type attribute, including
text, email, password, number, tel, url, search, date, time, color, range, checkbox, radio and file.How do I label an input?
Why use inputmode if I set the type?
For values that are not strictly a number (like a PIN or card number), keep
type="text" for flexible validation and add inputmode="numeric" to summon a number pad on mobile.How do I make a required input?
Is <input> a self-closing element?
Yes. It is a void element with no closing tag and no content; its value is an attribute, not text between tags.
How do I get the value of an input in JavaScript?
How do I create a date picker in HTML?
Use
<input type="date"> for the browser's native calendar picker. Related types include datetime-local, time, month and week.
