<input>
The <input> element is the workhorse form control: a single element whose type attribute reshapes it into a text box, email field, password field, checkbox, radio button or number spinner, keyed for submission by its name.
Definition
<input> is the most versatile control in an HTML form. It is a single, self-closing element that takes no children; its type attribute is what gives it a shape, turning the same tag into a text box, a checkbox, a radio button, a password field or a numeric spinner. Because one element covers so many roles, learning <input> is most of learning forms.
Every <input> should be introduced by a <label> so the user and assistive technology know what it collects, and it should carry a name so its value is included when the form is submitted. For the wider picture of how controls fit together, see HTML Forms — the basics.
Syntax
<input type="text" name="city" value="Berlin" required>
<!-- type: text | email | password | checkbox |
radio | number | search | tel | url | ... -->Parameters
The behaviour of an <input> is driven almost entirely by its attributes. These are the four you will set most often, plus a hint attribute shown in the code below the table.
| Attribute | Description |
|---|---|
type | Chooses the control's shape and validation. Common values: text, email, password, checkbox, radio, number. Defaults to text when omitted. |
name | The key under which the value is submitted. The browser builds a name=value pair for each named control; a control with no name is not submitted at all. |
value | The control's current value. For text-like inputs it is the initial text; for a checkbox or radio it is the value sent when that control is checked. |
placeholder | Short hint text shown inside the empty field to suggest the expected input. It disappears once the user types and never becomes the submitted value — it is only a visual cue. |
required | A boolean attribute. When present, the form will not submit while the control is empty (or, for a checkbox, unchecked), and the browser shows a built-in message. |
A fifth attribute you will use constantly supplies faint hint text inside an empty field — a preview of the kind of value expected — which disappears as soon as the user types. It never becomes the submitted value; it is only a visual cue:
<input type="search" name="q" placeholder="Search products…">
<input type="email" name="email" placeholder="[email protected]" required>Return value
There is no return value — <input> is markup, not a function — but it has a well-defined rendered result and default behaviour. The browser draws an interactive control sized and styled for its type: text, email and password render a single-line box (with password masking the characters); checkbox and radio render small toggles; and number renders a text box with up/down spinners that only accepts numeric input. Whatever the user enters or selects becomes the element's live value.
- On submit, each named
<input>contributes onename=valuepair to the form data; an unnamed input contributes nothing. checkboxandradiocontribute their pair only when checked — an unchecked toggle is simply absent from the submission.- With
requiredpresent, the browser blocks submission and reports the first empty control instead of sending the form. type="email",type="url"andtype="number"add built-in format validation on top ofrequired, rejecting values of the wrong shape.
Examples
A basic text input with a label
<label for="city">City</label>
<input id="city" type="text" name="city">Several input types together
One form, one control element — six different shapes, chosen entirely by the type attribute:
A required field that blocks empty submission
Browser & runtime support
<input> is part of HTML itself and is supported in every browser that has ever existed — it is one of the oldest elements on the platform. The individual type values vary in age: text, password, checkbox and radio are original, while email, number, url and the date pickers arrived with HTML5. In an older browser an unknown type gracefully falls back to a plain text box, so using a modern type is always safe.
Frequently asked questions
What is the default type of an input element?
text. If you write <input> with no type attribute, the browser renders a single-line text box.Why is my input value not being submitted?
name attribute. The browser only builds a name=value pair for named controls, so an input without a name sends nothing even when the user types into it.What is the difference between a checkbox and a radio input?
checkbox toggles independently, so several can be checked at once. Radio inputs that share the same name form a group in which only one may be selected at a time.