input is a single element that becomes many different controls depending on its type. It is an empty element.
index.html
HTML
<form>
<label for="name">Your name</label>
<input type="text" id="name" name="name" placeholder="Asha Verma" required>
</form>Key attributes
| Attribute | Purpose |
|---|---|
type | What kind of control it is (default text) |
name | The name sent with the value |
id | Connects the field to its label |
value | The starting value |
placeholder | A hint shown while the field is empty |
required | The field must be filled in |
disabled | The field cannot be used or sent |
readonly | The value can be seen and sent, but not changed |
autocomplete | Helps the browser fill the field in |
index.html
HTML
<form>
<label for="city">City</label>
<input type="text" id="city" name="city" value="Hillford" readonly>
<label for="code">Gift code</label>
<input type="text" id="code" name="code" maxlength="8" autocomplete="off">
</form>Placeholders are not labels
A placeholder disappears as soon as the visitor starts typing, and often has poor contrast. Always provide a real label too, as shown in HTML Labels.
warning
Using disabled when you mean readonly
A
disabled field is not sent with the form. If the server needs the value, use readonly.