Learning objectives
Choose one-choice and multiple-choice controls; group controls with fieldset and legend; distinguish a fixed selection from free-text suggestions.
Prerequisites
Understand form names, values, labels, and basic keyboard navigation.
Match the control to the decision
Checkboxes represent independent on/off choices. Several can share a submission name when the server expects multiple values. A radio group represents one choice among alternatives: controls with the same name and form owner form a group. Give every option a meaningful value so the receiving application can distinguish selections.
An unchecked checkbox usually contributes no entry to submitted form data. Do not assume it submits false. A checked checkbox without an explicit value typically contributes the default value on, which is rarely as descriptive as a deliberate token. A radio group can begin with no selection; deciding whether to preselect an option is a product decision with real consequences for consent and preference collection.
Expose the question as well as the answers
Fieldset groups related controls, and its first legend provides their shared question. Individual labels identify the choices. Both levels matter: an option labeled Morning is unclear without a question such as Which session can you attend? Native radio groups also provide expected arrow-key behavior that is expensive to reproduce correctly in custom controls.
A select with option children presents a set of choices. Use optgroup when a long list has meaningful categories. A multiple select permits more than one value but can be difficult to discover and operate; for a short set, labeled checkboxes may be clearer. The selected attribute defines the initial selected option, while the live selected state can change during interaction.
Know when the value remains free text
A datalist supplies suggestions to a compatible input. It does not restrict the field to those suggestions. People can type another value unless a separate constraint prevents it. Browser presentation and assistive-technology support vary, so do not rely on datalist for essential instructions or as a universal replacement for a well-designed select.
Textarea accepts multiline text. Its initial content goes between the tags rather than in a value attribute. Rows and cols suggest a starting size, while CSS can control the layout. Keep resizing available where possible and explain meaningful length limits. Preserve line breaks when presenting a user’s saved message, but escape that message safely rather than treating it as trusted HTML.
Working example
<fieldset>
<legend>Which workshop can you attend?</legend>
<label><input type="radio" name="session" value="morning" required> Morning</label>
<label><input type="radio" name="session" value="afternoon"> Afternoon</label>
</fieldset>
<fieldset>
<legend>Equipment to borrow</legend>
<label><input type="checkbox" name="equipment" value="laptop"> Laptop</label>
<label><input type="checkbox" name="equipment" value="headphones"> Headphones</label>
</fieldset>Another example
<label for="topic">Topic</label>
<select id="topic" name="topic"><option value="">Choose a topic</option><option value="html">HTML</option><option value="css">CSS</option></select>
<label for="message">What would you like to learn?</label>
<textarea id="message" name="message" rows="4" maxlength="500"></textarea>Expected output
The radio choices are mutually exclusive, while both equipment checkboxes can be selected. The second example provides a fixed topic list and a multiline response area.
Common mistakes
Do not give each radio in one question a different name. Do not assume unchecked controls are sent to the server. Do not use selected="false" or checked="false" to turn a boolean attribute off. Do not treat datalist entries as an authorization list.
Accessibility and browser notes
Clicking a label should activate its control, which increases the usable target. Test native radio groups with Tab and arrow keys. Keep group instructions near the legend and avoid inserting long unrelated explanations into every option label.
Practice
Write a required choice between online and in-person attendance, with neither option initially selected.
Review the solution and reasoning
<fieldset><legend>Attendance format</legend>
<label><input type="radio" name="format" value="online" required> Online</label>
<label><input type="radio" name="format" value="in-person"> In person</label>
</fieldset>The shared name forms one radio group. Required on a member requires the group to have a selection. No checked attribute is present, so the interface does not assume the person’s preference.