3.5 Select, checkbox and radio inputs - HTML / CSS / JavaScript for Beginners

A name needs free text, but an event session usually comes from predefined choices. First decide how many answers are allowed: a dropdown suits a longer single-choice list, checkboxes suit independent choices and radio buttons suit one choice from a group.

select and option

<label for="session">Session</label>
<select id="session" name="session">
  <option value="morning">Morning reading</option>
  <option value="afternoon">Afternoon discussion</option>
</select>

option text is visible; value is submitted. Choosing Afternoon discussion produces session=afternoon. A normal single-select usually starts with its first option; selected on an option sets the initial choice. selected is a boolean attribute.

Independent checkboxes

input type="checkbox" creates an independent on/off choice. An associated label makes its text clickable too. Checkboxes can share a name for related values, but each id must be unique and each value should be explicit.

Checked boxes contribute name/value pairs; unchecked boxes normally contribute no field. Without value, the default is usually on, which is unhelpful when distinguishing choices. checked sets the initial selected state; remove it to disable that initial selection.

Mutually exclusive radio buttons

input type="radio" creates a radio button. Radios with the same name in the same form form a group: selecting one clears the other. Their ids and values differ, but their name matches. Different names can allow both to remain selected.

fieldset groups related controls and legend names the group, such as Attendance. Keep a label for each individual option as well.

Try the dropdown and checkboxes in the Lab, then the radio group. Change one radio name and observe the loss of mutual exclusion. Restore it and keep only one initial checked option. Never duplicate ids to express group membership.

Compare the examples, then change one part of the HTML using the observation prompt. Compare the source with the real rendered page.

Both checkboxes can stay checked; visible option labels and submitted values can differ.

Edit complete HTML · live preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <form action="/register" method="post">
    <p><label for="session">Session</label>
    <select id="session" name="session">
      <option value="morning">Morning reading</option>
      <option value="afternoon">Afternoon discussion</option>
    </select></p>
    <fieldset>
      <legend>Interests (choose any)</legend>
      <input id="fiction" name="interest" type="checkbox" value="fiction">
      <label for="fiction">Fiction</label>
      <input id="poetry" name="interest" type="checkbox" value="poetry">
      <label for="poetry">Poetry</label>
    </fieldset>
  </form>
</body>
</html>

Browser preview

Tab title: (no title)

The preview uses native browser headings, paragraphs and form controls. Switching examples replaces your edits; Reset lab restores the initial state. Follow in-page links, type and select options. This practice preview does not send form data or run scripts. To try locally, save the complete code as index.html and open it in a browser.

QUESTION

How do two radios in the same form become mutually exclusive?

Create index.html, write a complete page using the requirements below, then save and open it in a browser. Interact with the page to check it. The reference is one possible implementation; wording may differ.

Create a two-session select and two interest checkboxes with explicit values.
Add a fieldset/legend with two attendance radios sharing a name but using distinct ids; connect labels for every control.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Leaflet Club</title> </head> <body> <form action="/register" method="post"> <p><label for="session">Session</label> <select id="session" name="session"> <option value="morning">Morning reading</option> <option value="afternoon">Afternoon discussion</option> </select></p> <fieldset> <legend>Interests (choose any)</legend> <input id="fiction" name="interest" type="checkbox" value="fiction"> <label for="fiction">Fiction</label> <input id="poetry" name="interest" type="checkbox" value="poetry"> <label for="poetry">Poetry</label> </fieldset> </form> </body> </html>

Select, checkbox and radio inputs

select and option

Independent checkboxes

Mutually exclusive radio buttons

Page experiment: Select, checkbox and radio inputs

KNOWLEDGE QUIZ

Build it yourself: Select, checkbox and radio inputs

Select, checkbox and radio inputs

select and option

Independent checkboxes

Mutually exclusive radio buttons

Page experiment: Select, checkbox and radio inputs

KNOWLEDGE QUIZ

Build it yourself: Select, checkbox and radio inputs