Module 6: Forms · Lesson 4 of 7
HTML Radio Buttons, Checkboxes, Select and Textarea
All lessons in Module 6
- Forms and Inputs
- Labels
- Input Types
- Textarea, Select, Radio, Checkbox
- Buttons and Fieldsets
- Built-in Validation
- Project: Sign-up Form
Goal: Pick the right control for long text, a single choice or several choices.
Learn
Some questions are easier to answer with a click than with typing. Match the control to the question:
<textarea>takes several lines of free text, like a message. It has a closing tag, which input does not.<select>with<option>s inside makes a dropdown for one choice from a long list.type="radio"gives exactly one choice from a few visible options. Radios with the same name form a group, so picking one unpicks the others.type="checkbox"is a yes/no tick, or one of several picks.
For radios, checkboxes and options, the value attribute is what gets sent. Leave it out and a radio sends on, which tells you nothing. Wrap each radio or checkbox in its own <label> so the text is clickable too. The HTML standard describes exactly how a radio button group (opens in a new tab) is formed.
The short version
- Let the question choose the control:
<textarea>for long text, radios for one of a few,<select>for one of many, checkboxes for any number. - Radios become one group only when they share a
name. - The
valueattribute is what gets sent. An unticked checkbox sends nothing at all. <textarea>has a closing tag, and whatever sits between its tags becomes the starting text.
Example
<form>
<label for="drink">Drink</label>
<select id="drink" name="drink">
<option value="tea">Tea</option>
<option value="coffee">Coffee</option>
</select>
<label><input type="radio" name="cup" value="small"> Small</label>
<label><input type="radio" name="cup" value="large"> Large</label>
<label><input type="checkbox" name="sugar" value="yes"> Sugar</label>
<button>Order</button>
</form>Your task
Complete the pizza builder. Replace each comment with:
- A
<select>withid="size"andname="size", holding at least 3<option>s. - At least 2 radio buttons sharing
name="crust", each with its ownvalueand wrapped in a<label>. - A checkbox for extra cheese, wrapped in a
<label>. - A
<textarea>withid="notes"andname="notes".
Then submit the form and look at which values arrive.
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
Common mistakes
Wrong
<textarea id="notes" name="notes" value="No onions"></textarea>Right
<textarea id="notes" name="notes">No onions</textarea>Textareas ignore a value attribute, so put the starting text between the opening and closing tags.
Wrong
<textarea id="notes" name="notes" placeholder="Any requests?">
</textarea>Right
<textarea id="notes" name="notes" placeholder="Any requests?"></textarea>The line break and spaces before the closing tag count as content, so the box starts out filled and the placeholder never appears.
Go deeper
The data these controls send holds a few surprises. An unticked checkbox is left out entirely, so the server has to read a missing name as "no". A radio group with nothing picked is left out too, and that is why many forms pre-check a sensible default. Several checkboxes can share one name, like a set of name="topping" boxes. Each ticked box is sent as its own pair: topping=ham&topping=olives.
<select> can do more. <optgroup label="Veggie"> sorts a long list under headings (see the optgroup element (opens in a new tab) in the standard), and the multiple attribute allows several picks. A multiple select is clumsy, though. It needs Ctrl or Cmd clicks, and most people find checkboxes friendlier.
A <textarea> gets its starting size from rows and cols, and maxlength caps how much can be typed. Visitors can usually drag its corner to resize it. The textarea reference lists its other attributes.
Put the most common choice first in a select, or pre-select it. Most visitors then never open the list at all.
Frequently asked questions
What is the difference between radio buttons and checkboxes?
Radio buttons allow exactly one choice from a group. Picking one unpicks the others, and a shared name is what ties the group together. Checkboxes work independently, so a visitor can tick none, one or several. Ask "Thin or thick crust?" with radios and "Which toppings?" with checkboxes. A lone checkbox also handles a yes/no question such as agreeing to terms. The radio button (opens in a new tab) is named after old car radios, where pressing one station button popped the others out.
How do I make an option selected by default in HTML?
Add the selected attribute to an <option>: <option value="medium" selected>Medium</option>. Radio buttons and checkboxes use checked on the input. Both are boolean attributes, so writing the word is enough. A dropdown with no selected option starts on its first option.
When should I use a select dropdown instead of radio buttons?
When the list is long. With a few options, roughly five or fewer, radios win: every choice stays visible and takes one click. A <select> suits longer lists, such as countries or years, where showing every option would eat too much space. If visitors need to compare the options side by side, visible radios usually work better.