Think of filling out a sign-up page. Clear fields make the job simple; confusing fields make people leave.
What You Need to Know
Here is a small, realistic example focusing on radio button.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<fieldset>
<legend>Choose your favorite season</legend>
<label><input type="radio" name="season" value="summer"> Summer</label>
<label><input type="radio" name="season" value="winter"> Winter</label>
</fieldset>Let’s Read the Code
- <fieldset>: The fieldset keeps related choices together.
- <legend>: The legend names a fieldset question.
- type: Type changes what sort of control or resource the browser uses.
- name: The name is the key used for the submitted value.
What the example shows: The markup gives the browser a clear starting point for radio button. Look at the labels, names, and values rather than only the visual appearance.
What Happens in the Browser?
The HTML controls work in the browser, but saving an answer requires the example action path to be handled by a real server.
What gets sent? With ordinary form submission, the browser builds a set of name/value entries. For checkboxes, only checked choices are normally included. Radio buttons in the same group contribute one selected value. Open the browser Network panel to see the request rather than guessing.
Your Turn
Change one meaningful attribute, submit the form, and compare the result with the original.
Common Beginner Mistakes
- Copying the example without giving the fields a clear label and a usable name.
- A browser may render the control differently from another browser without changing the HTML meaning.
Key Takeaways
- With radio Button Groups with Explicit Legends, the main idea is to match the HTML to the visitor’s task, not just to copy an unfamiliar attribute.
- <fieldset>: The fieldset keeps related choices together.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.