How do you build an accessible HTML form? Explain <label>, the important input types, the name attribute, and built-in validation attributes.
Show the explanation
Model answer.
<form action="/apply" method="post">
<label for="fullname">Full name</label>
<input id="fullname" name="fullname" autocomplete="name" required>
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<label for="marks">Class 12 percentage</label>
<input id="marks" name="marks" type="number" min="0" max="100" step="0.01" aria-describedby="marks-help">
<p id="marks-help">Use your board percentage, not CGPA.</p>
<fieldset>
<legend>Preferred mode</legend>
<label><input type="radio" name="mode" value="regular" checked> Regular</label>
<label><input type="radio" name="mode" value="distance"> Distance</label>
</fieldset>
<button type="submit">Apply</button>
</form>- `<label>` linked by
for/id(or wrapping the input) gives the field an accessible name and a larger click target. A placeholder is not a label: it disappears as soon as you type. - Input types:
email,tel,url,number,date,password,checkbox,radio,file,search,range. They bring the right mobile keyboard and basic validation. - `name` is the key under which the value is submitted (and how radio buttons are grouped). An input without a name is not submitted.
- Validation attributes:
required,min/max,minlength/maxlength,pattern,step. They give instant feedback, but always validate again on the server, because they are easy to bypass. - `<fieldset>` + `<legend>` group related controls, such as radio buttons.
Original UniCircle question. Last reviewed 22 Oct 2026.