Challenge · medium
HTML Order Form Example: Radio, Checkbox, Select
Goal: Build a pizza order form with radio buttons, checkboxes, a select and a textarea.
Learn
Pick the control that fits the question. Radio buttons (opens in a new tab) allow one answer and no more. Every radio in a group has the same name and its own value. Checkboxes allow as many answers as people like. For a longer list of options, a <select> takes up less room, and free text goes in a <textarea>.
Put related radios or checkboxes in a <fieldset> and write the question in its <legend>. A screen reader then reads the legend along with each option, which is how the fieldset section of the HTML standard (opens in a new tab) means it to work.
If you put a control inside its <label>, the two are connected with no id needed, and clicking the text ticks the box. The labels lesson shows this and the for-and-id method next to each other.
The short version
- Radios in one group share a
nameand sit in a<fieldset>whose<legend>asks the question. - Pre-select one radio, and only one, with
checked. - Checkboxes handle several picks. A
<select>keeps a long list small, and a<textarea>takes the notes. - Every control needs a label, wrapped around it or linked with
forandid.
Example
<fieldset>
<legend>Drink</legend>
<label><input type="radio" name="drink" value="tea" checked> Tea</label>
<label><input type="radio" name="drink" value="coffee"> Coffee</label>
</fieldset>Your task
Fill in the pizza order form inside the <form> that is already there:
- A
<fieldset>with the legend 'Size' holding 3 radio buttons namedsize(small, medium, large). Each one has avalueand sits inside a<label>. Exactly one is checked by default. - A second fieldset, legend 'Toppings', with 2 or more checkboxes that have a
name, each inside a label. - A
<select id="crust">with at least 2 options and a<label for="crust">. - A
<textarea id="notes">with anameand a<label for="notes">. - A button with the text 'Place order'.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Frequently asked questions
How do I make a radio button checked by default in HTML?
Put the checked attribute on one radio in the group: <input type="radio" name="size" value="medium" checked>. It is a boolean attribute, so writing the word is enough. Give it to one radio per group only. If several have it, the browser picks the last. Checkboxes take checked in exactly the same way, as the lesson on radios, checkboxes, select and textarea shows.
How do checkboxes with the same name get sent?
As separate pairs. Every ticked box sends its own name=value, so two toppings arrive as toppings=mushrooms&toppings=olives. Boxes left unticked send nothing at all. In a GET form, those pairs become the query string (opens in a new tab) of the URL. Most server languages can collect every value for one name into a list. PHP is the odd one out: it wants the name to end in [], as in name="toppings[]".