Radio buttons, checkboxes and <select> lists all let users choose from predefined options, but they solve different problems. Use radio buttons for one choice from a small visible set, checkboxes for independent choices where several may be selected, and a select list when a longer list needs to fit into less space.
A normal <select> allows one selected option. Add the multiple attribute only when the form genuinely needs multiple values.
| Control | Typical selection | Best use |
|---|---|---|
| Radio buttons | One option from a group | Small set of mutually exclusive choices |
| Checkboxes | Zero, one or several options | Independent choices or preferences |
| Select list | One by default; several with multiple | Longer lists where compact presentation is useful |
Radio buttons are mutually exclusive when the controls share the same name. Each radio button should still have its own unique id so its label can identify it.
<fieldset>
<legend>Delivery method</legend>
<input type="radio" name="delivery" id="standard" value="standard">
<label for="standard">Standard</label>
<input type="radio" name="delivery" id="express" value="express">
<label for="express">Express</label>
</fieldset>If express is chosen, the submitted pair is typically delivery=express.
Checkboxes are appropriate when each option can be selected independently. An unchecked checkbox is normally absent from the submitted form data, so server-side code should not assume every checkbox name will be present.
<fieldset>
<legend>Topics</legend>
<input type="checkbox" name="topics[]" id="html" value="html">
<label for="html">HTML</label>
<input type="checkbox" name="topics[]" id="css" value="css">
<label for="css">CSS</label>
</fieldset>The bracketed name topics[] is useful when the receiving PHP page expects multiple submitted values under one logical field name.
A standard select control submits the value of its selected <option>. Use a visible <label>; the first option can act as a prompt when it has an empty value.
<label for="city">City</label>
<select name="city" id="city">
<option value="">Choose a city</option>
<option value="hyderabad">Hyderabad</option>
<option value="mumbai">Mumbai</option>
</select>Add selected to the option that should initially be selected.
<option value="mumbai" selected>Mumbai</option>Add multiple when several values may be selected. On desktop systems, selecting several items may require keyboard modifiers, so for a small set of choices checkboxes can be easier to discover and use.
<label for="skills">Skills</label>
<select name="skills[]" id="skills" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>For all three control types, the browser submits the control's name together with the selected value. Controls generally need a name to participate in form submission.
<label>.<fieldset> and <legend> for a related group of radio buttons or checkboxes.for to a unique control id.Radio buttons are mutually exclusive only when the group uses the same name.
Unchecked checkboxes are normally omitted from form submission, so handle the missing value correctly on the server.
A normal select is single-choice. Multiple selection requires the multiple attribute.
id connects labels, scripts and page references to one element. name identifies the submitted form field.
Users can alter submitted values. Validate selected values against an allowlist on the server.
Radio buttons are normally used when one choice must be selected from a group. Checkboxes represent independent choices, so zero, one or several may be selected.
Yes. A select is single-choice by default. Add the multiple attribute when users should be able to select several options.
The shared name makes the controls one mutually exclusive radio group and identifies the field submitted with the selected value.
Normally no. An unchecked checkbox is absent from the submitted form data, so the receiving code should handle that case.
The id identifies an element in the page and connects it with a label. The name identifies the field in submitted form data.
No. Client-side controls can be modified, so the server should validate submitted values against the values it allows.