24. Selection Inputs: Checkboxes and Radio Buttons
These input types allow users to select from a predefined list of options.
24.1 Checkboxes (type="checkbox")
Checkboxes allow the user to select zero, one, or multiple options from a list.
html <input type="checkbox" id="news" name="subscription" value="newsletter"> <label for="news">Subscribe to newsletter</label><br>
<input type="checkbox" id="promo" name="subscription" value="promotions"> <label for="promo">Receive promotions</label>24.2 Radio Buttons (type="radio")
Radio buttons allow the user to select only one option from a list of mutually exclusive choices.
Crucial Rule: All radio buttons in a group must share the exact same name attribute value. This is how the browser knows they belong together.
html
<p>Preferred Contact Method:</p> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label><br> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label>24.3 Pre-selecting Options
Use the checked attribute to make an option selected by default.
html <input type="checkbox" name="remember_me" checked>