LEARNING OBJECTIVES ⌵
- Master the role of the
nameattribute as the strict scope boundary for radio button mutual exclusivity. - Construct multi-question survey forms and evaluation matrix grids without radio group crosstalk.
- Understand how the browser's form serialization algorithm processes multiple distinct radio groups.
- Architect accessible rating tables (Likert scales) with synchronized row-level namespaces.
🎬 INTERACTIVE VISUAL PIPELINE
Core Architecture Simulation
1. Input
Directives & Tags
2. Parse
Tokenizer & AST
3. Layout
Box Model & Flow
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.
📖 The Mental Model & Story (Intuitive Foundation)
Imagine walking into an official government election polling booth. You are handed a single physical paper ballot containing multiple independent elections:
+-------------------------------------------------------------+
| OFFICIAL BALLOT |
| |
| Section 1: Office of the President |
| ( ) Candidate A (*) Candidate B ( ) Candidate C |
| |
| Section 2: Office of the Governor |
| (*) Candidate X ( ) Candidate Y ( ) Candidate Z |
| |
| Section 3: Chief Justice of the Supreme Court |
| ( ) Candidate 1 ( ) Candidate 2 (*) Candidate 3 |
+-------------------------------------------------------------+
When you fill in the bubble for Candidate B in the Presidential race, it does not erase your vote for Candidate X in the Governor race. Why? Because each election is an isolated contest with its own independent boundary.
In HTML forms, the name attribute is the boundary title of each contest.
- All
<input type="radio">tags withname="president"compete against each other. - All tags with
name="governor"form a completely separate, isolated group. - All tags with
name="justice"operate independently.
If you mistakenly assign the same name attribute to every question on your form, your questions will "cross-talk"—selecting an answer on question 3 will instantly wipe out the user's answer on question 1!
Technical Deep Dive & Specifications
The Radio Grouping Algorithm (WHATWG Spec)
Under the WHATWG HTML standard, a radio button's group is defined by two criteria:
- Form Owner: All radio buttons within the same
<form>(or all radio buttons not belonging to any form). - Exact
nameMatch: The case-sensitive string value of thenamecontent attribute.
+-------------------------------------------------------------------------------+
| RADIO GROUP REGISTRY ENGINE |
+-------------------------------------------------------------------------------+
<form id="feedback-form">
|
+---> Group Key: "service_quality"
| +--- ( ) poor [name="service_quality"]
| +--- (*) good [name="service_quality"] <-- Active in Group 1
| +--- ( ) excel [name="service_quality"]
|
+---> Group Key: "food_taste"
| +--- ( ) bad [name="food_taste"]
| +--- ( ) ok [name="food_taste"]
| +--- (*) great [name="food_taste"] <-- Active in Group 2
|
+---> Group Key: "cleanliness"
+--- (*) 5-stars [name="cleanliness"] <-- Active in Group 3
+--- ( ) 4-stars [name="cleanliness"]
Multi-Group HTTP Payload Serialization
When the user submits a form containing multiple radio groups, the browser's serialization algorithm collects exactly one value per group (provided each group has an option selected):
HTTP Request Transmission:
POST /api/survey HTTP/1.1
Content-Type: application/x-www-form-urlencoded
service_quality=good&food_taste=great&cleanliness=5-stars
If a radio group has no item selected, that specific name key is omitted entirely from the submitted payload.
The Rating Matrix (Likert Scale) Pattern
A common enterprise UI pattern is the Evaluation Matrix Grid, where multiple rows of questions share identical rating columns (e.g., 1 = Strongly Disagree to 5 = Strongly Agree).
+-------------------------------------------------------------------------------+
| Category | 1 (Poor) | 2 (Fair) | 3 (Good) | 4 (Great) |
+------------------------+------------+------------+------------+---------------+
| System Responsiveness | ( ) | ( ) | (*) | ( ) |
| UI Simplicity | ( ) | (*) | ( ) | ( ) |
| Documentation Clarity | ( ) | ( ) | ( ) | (*) |
+-------------------------------------------------------------------------------+
To build this correctly:
- Each row must have a unique
nameattribute (e.g.,name="rate_speed",name="rate_ui",name="rate_docs"). - Columns across rows share the same
valueattribute (e.g.,value="1",value="2",value="3",value="4"). - Each input must have a globally unique
id(e.g.,id="speed-3",id="ui-2") paired with its matching<label for="...">.
💻 Interactive Code Playground
Starter Code
Line-by-Line Code Breakdown
- Lines 59–66 (Row 1): All 4 radio buttons in this row share
name="mod_html". Clicking any rating in this row toggles only HTML ratings without touching CSS or JavaScript. - Lines 68–75 (Row 2): All 4 radio buttons share
name="mod_css", maintaining strict isolation from the other two rows. - Lines 77–84 (Row 3): All 4 radio buttons share
name="mod_js". - Submitted Payload: When submitted, the browser serializes three distinct keys:
mod_html=3&mod_css=4&mod_js=2.
Expected Browser Render Output
Course Evaluation Survey
Please rate the following course modules on a scale from 1 (Poor) to 4 (Excellent).
+----------------------+----------+----------+----------+---------------+
| Module | 1 - Poor | 2 - Fair | 3 - Good | 4 - Excellent |
+----------------------+----------+----------+----------+---------------+
| HTML Foundations | ( ) | ( ) | (*) | ( ) |
| CSS Architecture | ( ) | ( ) | ( ) | (*) |
| JavaScript Core | ( ) | (*) | ( ) | ( ) |
+----------------------+----------+----------+----------+---------------+
[ Submit Feedback ]🏋️ Hands-On Exercise
🎯 The Challenge: Build an Employee Performance Evaluation Form
Instructions:
- Create an evaluation form with three distinct performance criteria:
- Technical Competency (
name="eval_technical") - Team Communication (
name="eval_communication") - Problem Solving & Initiative (
name="eval_problem_solving")
- Technical Competency (
- Wrap each criterion in its own
<fieldset>with an informative<legend>. - Inside each fieldset, provide three radio choices:
- Needs Improvement (
value="needs_improvement") - Meets Expectations (
value="meets_expectations", defaultchecked) - Exceeds Expectations (
value="exceeds_expectations")
- Needs Improvement (
- Ensure all radio inputs have unique
idattributes and are explicitly tied to<label>elements. - Verify that selecting an option in one category does not affect the selections in the other categories.
🏁 Starter Code Sandbox
⚠️ Common Pitfalls
- Accidental Name Collisions in Reused Components: If you render two identical product rating cards on the same page and both use
name="rating", clicking a star on Product A will deselect the star on Product B. Always prefix component names with a unique identifier (e.g.,name="rating_prod_${productId}"). - Duplicate
idAttributes: While radio buttons in a group share the samename, they must never share the sameid. Each element in an HTML document must have a globally uniqueid. - Missing
valueAttributes Across Matrix Grids: If you omitvalue="..."on a 5-point rating grid, every radio button will submit"on". The backend will receiverate_speed=on, having no idea whether the user gave a 1 or a 5!
💡 Pro Tips
- Scoped Radio Groups Across Forms: If multiple
<form>elements exist on a single HTML document, radio buttons with the samenamein Form 1 will not interfere with radio buttons in Form 2. The browser automatically scopes radio groups to their parent<form>. - WAI-ARIA
aria-labelledbyfor Matrix Tables: For dense Likert tables where visible<label>tags are impractical in every cell, usearia-labelledby="row-header col-header"on each radio button to create rich screen reader announcements (e.g., "HTML Foundations, 4 - Excellent, radio button").
📌 Key Takeaways
- The
nameattribute defines the exact boundary of mutual exclusivity for radio buttons. - Forms can host unlimited independent radio groups as long as each group has a unique
name. - In multi-group forms, the browser submits one key-value pair per group:
group1=val&group2=val. - Every radio button in a group shares the same
name, but must have a uniqueidfor<label for="...">binding. - When building Likert scale rating matrices, rows define unique
namegroups while columns share consistentvalueratings. - --
Question 1 / 3
What happens if two separate questions on the same form mistakenly share the same name="feedback" attribute on their radio buttons?
Topic: HTML Fundamentals
Question 2 / 3
In a multi-group form with 3 independent radio groups (group_a, group_b, and group_c), what is the maximum number of key-value pairs submitted from these radio buttons?
Topic: HTML Fundamentals
Question 3 / 3
Which of the following attributes MUST be unique for every individual radio button element on an HTML page?
Topic: HTML Fundamentals