Radio buttons and checkboxes in HTML - Browser Rendering Trace

Render Flow - Radio buttons and checkboxes

Read <form>

→Create FORM node

↓

Read <input type=radio>

→Create RADIO button node

↓

Read <input type=checkbox>

→Create CHECKBOX node

↓

Read <label>

→Create LABEL node linked to input

↓

Add text nodes inside labels

↓

Close FORM

The browser reads the form element and creates nodes for radio buttons and checkboxes. Labels are linked to inputs for accessibility and interaction.

Render Steps - 3 Steps

Code Added:<input type="radio" name="color" value="red"> inside label

Before

[ ] (empty form)

→

After

[ ( ) ] Red
[ ] (empty space below)

Adding a radio button inside a label shows a small circle that can be selected, with the text 'Red' next to it.

🔧 Browser Action:Creates radio button control and label text node

Code Sample

This code shows two radio buttons grouped by the same name and one checkbox, each with a label. The user can select one radio option or toggle the checkbox.

HTML

<form>
  <label><input type="radio" name="color" value="red"> Red</label>
  <label><input type="radio" name="color" value="blue"> Blue</label>
  <label><input type="checkbox" name="subscribe"> Subscribe</label>
</form>

Render Quiz - 3 Questions

After step 2, what happens when you click one radio button?

A Neither radio button changes

B Both radio buttons become selected

C Only that radio button becomes selected, the other deselects

D Both radio buttons become deselected

Common Confusions - 3 Topics

Why can I select only one radio button but many checkboxes?

Radio buttons with the same name form a group where only one can be selected. Checkboxes are independent and can be checked or unchecked separately.

💡 Radio = circles, one selected; Checkbox = squares, multiple selected

Why clicking the label text also selects the radio or checkbox?

Labels linked to inputs make the entire text clickable, improving accessibility and user experience.

💡 Label wraps input or uses 'for' attribute to connect

Why do radio buttons with different names act independently?

The 'name' attribute groups radio buttons. Different names mean different groups, so selections don't affect each other.

💡 Same name = one choice; different names = separate choices

Property Reference

Input Type	Selection Behavior	Visual Shape	Grouping Behavior	Common Use
radio	Select one option only	Circle	Grouped by 'name' attribute	Choose one from many
checkbox	Select any number of options	Square	Independent unless scripted	Toggle options on/off

Concept Snapshot

Radio buttons use circles and allow only one selection per group (same name). Checkboxes use squares and allow multiple selections. Labels linked to inputs make text clickable. Grouping radio buttons by name controls selection behavior. Checkboxes toggle independently.