Selection controls let users choose from predefined options.

Radio Buttons

Allow selecting one option from a group:

<label>
  <input type="radio" name="color" value="red"> Red
</label>
<label>
  <input type="radio" name="color" value="blue"> Blue
</label>
<label>
  <input type="radio" name="color" value="green"> Green
</label>

Key points:

• All radios in a group share the same name.
• Each has a different value.
• Only one can be selected at a time.

Pre-selecting an Option

Use the checked attribute:

<input type="radio" name="color" value="blue" checked> Blue

Checkboxes

Allow selecting multiple options (or none):

<label>
  <input type="checkbox" name="toppings" value="cheese"> Cheese
</label>
<label>
  <input type="checkbox" name="toppings" value="pepperoni"> Pepperoni
</label>
<label>
  <input type="checkbox" name="toppings" value="mushrooms"> Mushrooms
</label>

Single Checkbox

Often used for boolean values like “agree to terms”:

<label>
  <input type="checkbox" name="agree" value="yes" required>
  I agree to the terms
</label>

Pre-checking

<input type="checkbox" name="newsletter" value="yes" checked>

Select Dropdown

Choose from a list of options:

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</select>

Default Selection

Use selected:

<option value="uk" selected>United Kingdom</option>

Placeholder Option

Create a non-selectable prompt:

<select name="country" required>
  <option value="" disabled selected>Choose a country</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</select>

Disabled Options

<option value="unavailable" disabled>Currently Unavailable</option>

Option Groups

Organize options into categories:

<select name="car">
  <optgroup label="German">
    <option value="bmw">BMW</option>
    <option value="mercedes">Mercedes</option>
  </optgroup>
  <optgroup label="Japanese">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>

Multiple Selection

Allow selecting multiple options:

<select name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

Users hold Ctrl/Cmd to select multiple items.

Setting Size

Show multiple options without scrolling:

<select name="items" size="5">
  ...
</select>

Datalist

Provide suggestions while allowing custom input:

<label for="browser">Browser:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Unlike <select>, users can type any value.

When to Use Each

Control	Use When
Radio buttons	2-5 mutually exclusive options
Checkboxes	Multiple selections allowed
Select	Many options (5+) or limited space
Datalist	Suggestions with custom input allowed

Accessibility Tips

1. Always use labels.
2. Group related controls with <fieldset> and <legend>.
3. Provide clear option text.

<fieldset>
  <legend>Shipping Method</legend>
  <label>
    <input type="radio" name="shipping" value="standard">
    Standard (5-7 days)
  </label>
  <label>
    <input type="radio" name="shipping" value="express">
    Express (1-2 days)
  </label>
</fieldset>

Lessons in this unit:

0:	Introduction
1:	How to Create HTML Forms
2:	How to Use HTML Text Input Types
3:	How to Validate HTML Forms
4:	▶︎ How to Use Selection Controls in HTML Forms
5:	How to Use Advanced HTML Input Types