Go beyond basic inputs and learn how to build rich, interactive forms with dropdowns, radio buttons, checkboxes, date pickers, and validation attributes.
The <select> element creates a dropdown list that lets users choose one (or more) options. Each choice lives inside an <option> element.
Key attributes:
name on <select> — identifies the field when the form is submitted.value on <option> — the value sent to the server. If omitted, the text content is used.selected on <option> — pre-selects that option.multiple on <select> — allows selecting more than one option (hold Ctrl/Cmd).You can group related options with <optgroup label="Group Name"> for better organization in long lists.
<!-- Dropdown select -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">-- Choose --</option>
<option value="us">United States</option>
<option value="fr">France</option>
<option value="jp">Japan</option>
</select>
<!-- Radio buttons — same name = one choice only -->
<fieldset>
<legend>Preferred contact method</legend>
<label><input type="radio" name="contact" value="email"> Email</label>
<label><input type="radio" name="contact" value="phone"> Phone</label>
<label><input type="radio" name="contact" value="mail"> Mail</label>
</fieldset>
<!-- Checkboxes — independent toggles -->
<fieldset>
<legend>Interests</legend>
<label><input type="checkbox" name="interests" value="music"> Music</label>
<label><input type="checkbox" name="interests" value="sports"> Sports</label>
<label><input type="checkbox" name="interests" value="coding"> Coding</label>
</fieldset><fieldset> draws a visual box around a group of related form controls, and <legend> provides a caption for that group. This is not just cosmetic — it is essential for accessibility. Screen readers announce the legend text before each control inside the fieldset, giving users context.
<datalist> provides autocomplete suggestions for a text input. You wire them together by setting the input's list attribute to the datalist's id:
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>The user can still type a custom value — the datalist is purely suggestive, not restrictive.
HTML5 introduced many specialised input types that provide built-in UI widgets and validation:
| Type | Purpose |
|---|---|
date | Calendar date picker |
time | Time picker |
range | Slider control |
color | Colour picker |
number | Numeric spinner |
email | Email with basic validation |
url | URL with basic validation |
tel | Telephone (mobile keyboards adapt) |
Validation attributes let you enforce rules without JavaScript:
required — field must be filled.min / max — numeric or date boundaries.minlength / maxlength — text length limits.pattern — a regular expression the value must match.step — increment for number/range inputs.When a form is submitted and validation fails, the browser shows a native error tooltip and blocks submission.
What is the key difference between radio buttons and checkboxes?