<input>: The INPUT Element
Last updated: 2026-10-13
<input>The INPUT Element
The <input> element is the most common form control, creating various input fields. The type attribute switches between text, password, checkbox, radio, date pickers and more. It's a void element.
| Category | Forms |
|---|---|
| Content Model | None (void element) |
| Allowed Parents | Any element that accepts phrasing content, usually inside <form> |
| Content Tag | Self-closing — no closing tag needed |
| Status | Standard |
📝 Syntax
<input type="text" name="field-name" placeholder="placeholder text">⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
type | Keyword | The type of the input, determines the control's form.
|
name | Text | The field name submitted with the form; groups radio buttons. |
value | Text | The current or default value. |
placeholder | Text | Hint text shown when the field is empty. |
required | Boolean | Marks the field as required. |
disabled | Boolean | Disables the field; not submitted. |
readonly | Boolean | Read-only; visible but not editable. |
maxlength | Number | Maximum number of characters. |
checked | Boolean | Default checked state for checkbox/radio. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <input> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： Always set the name attribute, otherwise the field's value won't be submitted.
❓ FAQ
QWhat are the commonly used input types?
AText:
text, password, email, url, tel, search; selection: checkbox, radio, file; numeric: number, range; date: date, time, datetime-local; plus hidden, color, submit, and more. Picking the right type brings the matching mobile keyboard and native validation.QIs input a void element?
AYes — no end tag, no content; everything is configured through attributes (value, placeholder, required, etc.). This differs from
<textarea>, which has an end tag and holds its initial value between the tags.QCan a placeholder replace a label?
ANo. The placeholder disappears after typing and screen-reader support is spotty; relying on it as the only label harms accessibility. The
<label> is the official input name; the placeholder only holds hint examples such as format samples.🏷️ Related Tags
💡 Related Cases
📚 Related Tutorials
