<input> Input
All-purpose form control; type picks text, email, number, checkbox, date and more.
<input> is a void element and the most flexible form control there is. Its type decides what it becomes: text, email, password, number, tel, url, search, date, time, color, range, file, checkbox, radio, hidden, submit and others. Pick the right type and phones show a fitting keyboard while the browser validates the value for you.
Every input needs a name and a connected <label>. Radio buttons in one group share a name. required, min, max and pattern check the value before the form goes out.
Every type from text to color is defined in the input element in the HTML Living Standard (opens in a new tab). The Input Types lesson lets you try them.
Void element: it has no content and no closing tag.
Syntax
<label for="id">Label</label>
<input type="text" id="id" name="name">When to use it
<input> takes one value: a name, an email address, a quantity, a date, a yes-or-no checkbox. Text that might run over several lines, like a delivery note, belongs in a textarea. When the answer comes from a fixed list, offer a select or a group of radio inputs instead of a free text field.
As a submit button, <input type="submit"> behaves exactly like <button>. The button can hold an icon or formatted text, though, so most of the time it is the more flexible pick.
The type people get wrong most often is type="number", used for things made of digits that are not amounts. Card numbers, postcodes, phone numbers and PINs are codes. A number field adds spinner arrows, and scrolling over it while focused can change the value. Nobody wants their PIN incremented. Use type="text" with inputmode="numeric" and a pattern; phones still bring up a digit keyboard. The Input Types lesson covers the other types.
Attributes
| Attribute | What it does |
|---|---|
type | Kind of control: text (default), email, password, number, checkbox, radio, date, file... |
name | Name sent with the value. |
value | Initial value, or the value sent for checkboxes and radios. |
id | Connects the input to a label's for attribute. |
placeholder | Example text shown when empty. Not a replacement for a label. |
required | Must be filled in before submitting. |
min | Minimum value (numbers and dates). |
max | Maximum value (numbers and dates). |
step | Allowed steps between values. |
minlength | Minimum number of characters. |
maxlength | Maximum number of characters. |
pattern | Regular expression the value must match. |
checked | Selects a checkbox or radio by default. |
disabled | Disables the control; its value is not sent. |
readonly | Value cannot be edited but is still sent. |
autocomplete | Autofill hint, such as email, name or current-password. |
multiple | Allows several values (email, file). |
accept | File types allowed, such as image/*. |
list | Id of a datalist with suggestions. |
Live example
Edit the code and watch the preview.
<label for="n">Name</label>
<input type="text" id="n" name="name" required>
<label for="age">Age</label>
<input type="number" id="age" name="age" min="1" max="120">
<label for="c">Favourite color</label>
<input type="color" id="c" name="color" value="#3366cc">
<label><input type="checkbox" name="terms"> I agree</label>More examples
Delivery date and time
This delivery form puts limits on the date and time types. min on the date rules out past days. On the time field, min, max and step allow only whole hours within opening times. Enter an invalid time and submit to see what happens.
<form>
<label for="day">Delivery day</label>
<input type="date" id="day" name="day" min="2026-11-01" required>
<label for="slot">Time (9:00 to 17:00)</label>
<input type="time" id="slot" name="slot" min="09:00" max="17:00" step="3600" required>
<button>Book delivery</button>
</form>Postcode and phone number
A postcode is made of digits, yet nobody adds postcodes together. So it gets type="text", inputmode="numeric" and a five-digit pattern. The phone field is type="tel". Both carry autocomplete values for the browser's autofill.
<form>
<label for="zip">Postcode (5 digits)</label>
<input type="text" id="zip" name="zip" inputmode="numeric" pattern="[0-9]{5}" autocomplete="postal-code" required>
<label for="tel">Phone</label>
<input type="tel" id="tel" name="tel" autocomplete="tel">
<button>Save address</button>
</form>Tip: Pick the most specific type you can, such as email, tel or date.
Browser support
input works in every browser and is defined in the HTML Living Standard. All current browsers have date and time pickers, each with its own look per system. month and week are still missing in some browsers, which fall back to a plain text field. The date and time input support (opens in a new tab) table has the details.
Support for the color picker is wide as well (color input support (opens in a new tab)). Its dialog is the operating system's.
Accessibility
Each input needs a programmatic label. Fields asking for personal data should carry the right autocomplete value (WCAG 1.3.5) so people can fill them in fast. The autocomplete values are listed in the W3C note Understanding Identify Input Purpose (opens in a new tab).
Common mistakes
Wrong
<input type="text" placeholder="Email">Right
<label for="em">Email</label>
<input type="email" id="em" name="email" autocomplete="email">It needs the right type, a label, a name and autocomplete.
Wrong
<input type="text"></input>Right
<input type="text">input is void, so there is no end tag.
Frequently asked questions
Which input type should I use for a phone number?
type="tel". Phones show a numeric keypad for it, but no format is enforced, since phone numbers differ from country to country. Add autocomplete="tel" so browsers can fill it in. Skip type="number": it is meant for quantities and may drop leading zeros or add increment arrows. The HTMLInput generator for accessible inputs (opens in a new tab) builds a tel field with the right attributes.
How do I make an input required?
Add the boolean required attribute. If the field is empty, the browser blocks submission and shows a message. Pair it with types like email or url and attributes like minlength, pattern or min for basic built-in validation. Validate again on the server as well, since client-side checks can be bypassed. See required in action in the Built-in Validation lesson.
Practise it
- Forms and Inputs (Module 6: Forms)
- Labels (Module 6: Forms)
- Input Types (Module 6: Forms)
- Textarea, Select, Radio, Checkbox (Module 6: Forms)
- Buttons and Fieldsets (Module 6: Forms)
- Built-in Validation (Module 6: Forms)