<input>
An input field; its kind is set by the `type` attribute.
Syntax
<input type="text" name="name">Attributes
| Parameter | Type | Description |
|---|---|---|
| type | text | email | password | number | checkbox | … | The kind of field. |
| name | text | The name the value is sent under. |
| value | text | Optional. The initial value. |
| placeholder | text | Optional. A hint inside the empty field. |
| required | — | Optional. Makes the field required. |
Examples
Different kinds of fields:
<p><input type="text" placeholder="Name"></p>
<p><input type="number" min="1" max="10" value="5"></p>
<p><input type="date"></p>A field with a label and an initial value:
<label for="city">City</label>
<input id="city" name="city" value="London">Notes
The tag is single. Without type you get a text field. Every field needs a <label> — placeholder does not replace it, because it disappears as you type.
See also
- type — The kind of an `<input>` field: from text and numbers to a date, colour and file.
- <label> — A label for a form field.
- <form> — A form: collects data from its fields and sends it to the server.
- <input type="checkbox"> — A checkbox is an independent yes/no choice; a radio button picks one option from a group.
- inputmode — Tells phones and tablets which on-screen keyboard to show for a field, without changing what the field accepts.
Related recipes
- How to add and style a field hint (placeholder)
- How to add suggestions to an input field
- How to highlight errors in a form
- How to make a range slider
- How to make a search field
- How to style a file input
- How to style input fields
- How to turn off or set up field autofill
- How to validate an email, a phone or a field format
In the tutorial
- Forms — How a form works in HTML — the form tag, the input field, the name attribute, the submit button, action and the GET and POST methods.