Select, Radio and Checkbox Controls

Radio Buttons

Radio buttons are used when you want the user to select exactly one option from a list of choices (like answering a True/False question).

To create a radio button, use <input type="radio">.

To make a group of radio buttons work together (so that clicking one deselects the others), they must all share the exact same name attribute!

Code Example

<p>What is your favorite color?</p>
<input type="radio" id="red" name="favorite_color" value="red">
<label for="red">Red</label><br>

<input type="radio" id="blue" name="favorite_color" value="blue">
<label for="blue">Blue</label>

Checkboxes

Checkboxes are used when the user can select zero, one, or multiple options from a list (like selecting extra toppings on a pizza).

To create a checkbox, use <input type="checkbox">.

<p>Select your pizza toppings:</p>
<input type="checkbox" id="cheese" name="topping" value="extra_cheese">
<label for="cheese">Extra Cheese</label><br>

<input type="checkbox" id="pepperoni" name="topping" value="pepperoni">
<label for="pepperoni">Pepperoni</label>

Interactive Dropdowns

If you have a very long list of options (like choosing your country), radio buttons take up too much space. Instead, use a dropdown menu!

Dropdowns are created using the <select> tag to create the menu, and <option> tags inside it for each choice.

Syntax / Structure

<label for="cars">Choose a car:</label>
<select id="cars" name="car_choice">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Try It Yourself

Try building a form that asks a user for their favorite pizza topping using checkboxes, and their favorite car using a select dropdown!

Key Takeaways

• Use <input type="radio"> when the user can only choose one option. Ensure they share the same name.
• Use <input type="checkbox"> when the user can choose multiple options.
• Use <select> and <option> to create space-saving dropdown menus.
• Always use the value attribute so the server knows what was actually selected.