The <input> element
The <input> tag creates an interactive form control for accepting user data. Its type attribute determines the kind of control rendered — text, email, password, checkbox, radio, date, and many more — making it the single most versatile element in HTML forms.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, interactive content (except type="hidden") |
| Content model | Empty — it’s a void element with no children |
| Tag omission | Void element — no end tag, ever |
| Permitted parents | Any element that accepts phrasing content |
| DOM interface | HTMLInputElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| type | The kind of control — text, email, password, checkbox, radio, number, date, file, and more |
| name | The key this field’s value is submitted under |
| value | The control’s current or default value |
| placeholder | Faint hint text shown when the field is empty |
| required | Blocks form submission until the field is filled in |
| disabled | Greys out the control and excludes it from submission |
| min / max / pattern | Constrain numeric ranges or match a text pattern for validation |
Common examples
An email field with built-in validation
The browser checks the format and shows the email keyboard on phones.
Checkboxes and a radio group
Radio buttons that share a name form one group, so only one can be chosen.
Numbers and dates
Number fields accept limits, and date fields give visitors a calendar picker.
<input> vs <textarea>
An <input> is a single-line field, and its type turns it into many specialised controls: email, password, number, date, checkbox, slider and more. A <textarea> is a multi-line box for longer free text and has no type.
Choose an input with the most specific type you can — it gives visitors validation and the right mobile keyboard for free. Choose a textarea when people need to write more than one line, such as a message, review or address notes. Note that an input sets its starting text with the value attribute, while a textarea puts it between its tags.
| <input> | <textarea> | |
|---|---|---|
| Lines of text | One | Many |
| Types | 20+ (email, date, checkbox…) | None |
| Default text | value=”…” | Between the tags |
Common mistakes to avoid
- Using the placeholder as the label. It disappears when typing starts and is often low-contrast. Add a real <label>.
- Using type=”text” for everything. The right type (email, tel, number, url) gives free validation and the right mobile keyboard.
- Giving radio buttons the same id. Every id must be unique; it’s the
namethat should be shared within a group. - Forgetting
name. A field without a name is not included when the form is sent.
Accessibility & SEO tips
- Add
autocompletevalues (email, name, tel, street-address…) so browsers can fill forms for visitors. - Use
inputmodeto fine-tune the mobile keyboard, e.g.inputmode="numeric"for codes that aren’t real numbers. - Mark invalid fields with
aria-invalid="true"and explain the problem in text that screen readers can reach. - Group related checkboxes or radio buttons in a <fieldset> with a
<legend>so the question is read together with the options.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions. All modern input types work in current browsers; older browsers simply treat unknown types as text.
Tutorials: How to make a button, How to make a contact form, HTML forms tutorial