HTML Input Attributes
Input attributes are settings on an input element that shape a field. A setting can name a field, preset its answer, or limit typing.
Name and value
The name labels the answer when the form is sent. The value presets the field with the word Paris.
<label for="city">City</label>
<input type="text" id="city" name="city" value="Paris">A placeholder hint
The placeholder shows a short hint inside the empty field. The hint vanishes as soon as typing starts.
<label for="town2">Town</label>
<input type="text" id="town2" name="town" placeholder="Enter your town">Readonly and disabled
A readonly field can be read but not changed. A disabled field is greyed out and cannot be used at all.
<label for="plan">Plan</label>
<input type="text" id="plan" value="Basic" readonly>
<label for="code2">Old code</label>
<input type="text" id="code2" value="X1" disabled>Size and maxlength
Size sets the width of a field in characters. Maxlength caps the number of characters a visitor can type.
<label for="pin">Pin code</label>
<input type="text" id="pin" name="pin" size="10" maxlength="4">Example
<!DOCTYPE html>
<html>
<head>
<title>Input Attributes</title>
</head>
<body>
<h1>Update Your Profile</h1>
<p>Check your details and save.</p>
<form>
<label for="town">Town</label>
<input type="text" id="town" name="town" value="Leeds">
<label for="nick">Nickname</label>
<input type="text" id="nick" name="nick" placeholder="Pick a nickname">
<label for="code">Code</label>
<input type="text" id="code" name="code" size="10" maxlength="4">
<input type="submit">
</form>
</body>
</html>Key points
- Name: the label that travels with an answer when a form is sent
- Value: the preset answer placed inside a field
- Placeholder: a hint that shows inside an empty field until typing starts
- Readonly: a setting that lets a visitor read a value but not change it
- Disabled: a setting that greys out a field so it cannot be used
- Input attributes name, preset, hint at, and limit a field.
In this example, each field carries input attributes. The town field has a name and a preset value of Leeds. The nickname field shows a placeholder hint while it stays empty. The code field has a size of ten characters and a maxlength of four. A submit input ends the form.
Note
A disabled field sends no answer. A readonly field still sends its value.
Try it Yourself
Edit the code, then press Run.
Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.
Exercise
Which attribute shows a hint inside an empty field?