Checkboxes, Radio Buttons and Select
What Is It?
Checkboxes allow several choices. Radio buttons allow one choice in a group. Select gives a dropdown list.
What the Tags Mean
checkbox: an independent choice.radio: one choice from a shared name group.selectandoption: a dropdown.fieldsetandlegend: a named group of fields.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkboxes, Radio Buttons and Select</title>
</head>
<body>
<fieldset>
<legend>What do you like?</legend>
<label><input type="checkbox" name="interest" value="reading"> Reading</label>
<label><input type="checkbox" name="interest" value="music"> Music</label>
</fieldset>
</body>
</html>Browser preview
What you see: You can select Reading, Music, or both.
Example 2: Another Use
Use the same name on radio buttons when only one answer is allowed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkboxes, Radio Buttons and Select</title>
</head>
<body>
<fieldset>
<legend>Choose a session</legend>
<label><input type="radio" name="session" value="morning"> Morning</label>
<label><input type="radio" name="session" value="evening"> Evening</label>
</fieldset>
</body>
</html>Browser preview
Simple Tip
Give every choice a visible label and a useful value.
Try It Yourself
Add a third radio choice named Afternoon.