Radio buttons and checkboxes in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main difference between radio buttons and checkboxes in HTML?

Radio buttons allow the user to select only one option from a group, while checkboxes let the user select multiple options independently.

beginner

How do you group radio buttons so only one can be selected at a time?

Give all radio buttons in the group the same name attribute value. This links them so only one can be selected.

beginner

What attribute do you use to make a checkbox or radio button selected by default?

Use the checked attribute on the <input> element to make it selected when the page loads.

beginner

Why should you use <label> elements with radio buttons and checkboxes?

Labels improve accessibility by making it easier to click the input and help screen readers understand the form controls.

intermediate

How can you make a group of checkboxes or radio buttons accessible for keyboard users?

Use <label> tags linked with inputs, ensure logical tab order, and use <fieldset> with <legend> to group related controls.

Which attribute groups radio buttons so only one can be selected?

A name

B id

C value

D checked

Radio buttons with the same 'name' attribute belong to the same group, allowing only one selection.

What happens if you give checkboxes the same name attribute?

A Checkboxes behave like radio buttons

B Only one checkbox can be selected

C Checkboxes become disabled

D Multiple checkboxes can be selected independently

Checkboxes with the same name can still be selected independently; the name attribute does not limit selection for checkboxes.

Which HTML element improves accessibility by linking text to a checkbox or radio button?

A <div>

B <span>

C <label>

D <section>

The element associates descriptive text with form controls, improving accessibility and usability.

How do you make a radio button selected by default?

A Add the attribute active

B Add the attribute checked

C Add the attribute default

D Add the attribute selected

The 'checked' attribute marks a radio button or checkbox as selected when the page loads.

Which input type allows multiple selections?

A checkbox

B radio

C text

D button

Checkboxes allow users to select multiple options independently.

Explain how to create a group of radio buttons where only one option can be selected. Include how to make one option selected by default.

Think about how browsers know which radio buttons belong together.

Describe the accessibility best practices when using checkboxes and radio buttons in a form.

Consider how people using keyboards or screen readers interact with forms.