Goal
You’ll be able to build select dropdowns, textareas, checkboxes, and radio buttons correctly, and understand the key structural difference between checkboxes (independent) and radio buttons (mutually exclusive groups).
Learn
Beyond basic text inputs, forms need several other genuinely different input types for different data shapes:
Select dropdown — choosing one option from a predefined list:
<select name="country"> <option value="us">United States</option> <option value="uk">United Kingdom</option> </select>
Textarea — multi-line free text input, unlike a single-line text input:
<textarea name="comments" rows="4"></textarea>
Checkboxes — each one is independent; a user can select any number of them, including zero or all:
<input type="checkbox" id="terms" name="terms"> <label for="terms">I agree to the terms</label>
Radio buttons — mutually exclusive; selecting one automatically deselects any other with the same name value, since that shared name is exactly what groups them together as one set:
<input type="radio" id="small" name="size" value="s"> <label for="small">Small</label> <input type="radio" id="large" name="size" value="l"> <label for="large">Large</label>
The genuinely important detail: radio buttons only behave as a mutually-exclusive group because they share the exact same name attribute — this is what tells the browser they belong together as one choice set, not their visual proximity or grouping in the HTML.
Decision Task
A form has two radio buttons for shipping speed, but a developer accidentally gives them different name attributes (“shipping1” and “shipping2”) instead of the same one. Before reading on: what practical problem does this cause?
Show Answer
Both radio buttons can now be selected simultaneously, since the browser only treats radio buttons as a mutually-exclusive group when they share the exact same name — different names make them behave as two entirely independent, unrelated radio buttons instead of one connected choice set, defeating the whole purpose of using radio buttons at all.
Common Mistake
Assuming radio buttons automatically become mutually exclusive just because they’re visually grouped together or nested in the same container. The actual mechanism is entirely the shared name attribute — visual or structural grouping in the HTML has no effect on this behavior at all; two radio buttons in the same fieldset with different names will still both be independently selectable.
Practice Questions
1. Write two radio button inputs for “Yes” and “No” that correctly behave as a mutually exclusive pair.
Show Answer
<input type="radio" id="yes" name="answer" value="yes"><label for="yes">Yes</label><input type="radio" id="no" name="answer" value="no"><label for="no">No</label> — same name=”answer” on both is the essential connecting piece.
2. Can a user select multiple checkboxes at once, all independent of each other?
Show Answer
Yes — unlike radio buttons, checkboxes are always independent; selecting one has no effect on any other checkbox’s state.
3. Write a select dropdown with three size options: Small, Medium, Large.
Show Answer
<select name="size"><option value="s">Small</option><option value="m">Medium</option><option value="l">Large</option></select>
4. True or False: a textarea is just a styled version of a single-line text input, functionally identical otherwise.
Show Answer
False — textarea specifically supports genuine multi-line free text input, which a standard single-line text input does not.
5. What single attribute determines whether two radio buttons belong to the same mutually-exclusive group?
Show Answer
A shared, identical name attribute value — nothing about visual grouping or nesting affects this.
Try It Yourself
Without looking back, write three radio buttons for a payment method choice (Credit Card, PayPal, Bank Transfer) that correctly behave as one mutually exclusive group.
Show Answer
All three inputs need type=”radio” and the exact same name attribute (e.g. name=”payment”), each with a distinct value and id, each connected to its own label via matching for/id — the shared name is what makes them mutually exclusive as one group.
Quick Check
1. What HTML element creates a dropdown of selectable options?
Show Answer
<select>, with <option> elements inside it.
2. What’s the key functional difference between checkboxes and radio buttons?
Show Answer
Checkboxes are independent (any number can be selected); radio buttons in the same group are mutually exclusive (only one can be selected).
3. What specifically makes a set of radio buttons behave as one mutually exclusive group?
Show Answer
Sharing the exact same name attribute value.
4. What does textarea provide that a standard text input doesn’t?
Show Answer
Genuine multi-line free text input.
5. Does visual grouping or nesting in the HTML affect whether radio buttons are mutually exclusive?
Show Answer
No — only the shared name attribute determines this, regardless of visual/structural grouping.