Radio buttons and checkboxes in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding radio button grouping

What happens when multiple radio buttons share the same name attribute in an HTML form?

A Only one radio button in the group can be selected at a time.

B All radio buttons can be selected independently.

C The radio buttons become disabled automatically.

D The radio buttons behave like checkboxes and allow multiple selections.

💡 Hint

Think about how radio buttons are designed to let users pick one option from many.

Radio buttons with the same name attribute form a group where only one option can be selected at a time. Selecting another option deselects the previous one.

📝 Syntax

intermediate

Correct checkbox syntax

Which option shows the correct HTML syntax for a checkbox input with label 'Subscribe'?

A <input type="checkbox" id="subscribe"> <label for="subscribe">Subscribe</label>

B <checkbox id="subscribe">Subscribe</checkbox>

C <input type="check" id="subscribe"> <label>Subscribe</label>

D <input type="checkbox" name="subscribe">Subscribe</input>

💡 Hint

Remember the correct input type and how labels link to inputs.

The correct way is to use <input type="checkbox"> and a <label> with a matching for attribute to the input's id.

❓ rendering

advanced

Visual result of grouped radio buttons

What will the user see when this HTML code is rendered in a browser?

<form>
  <input type="radio" name="color" id="red" value="red">
  <label for="red">Red</label>
  <input type="radio" name="color" id="blue" value="blue">
  <label for="blue">Blue</label>
</form>

A Two buttons labeled 'Red' and 'Blue' that submit the form when clicked.

B Two checkboxes labeled 'Red' and 'Blue' that can be selected independently.

C Two radio buttons labeled 'Red' and 'Blue' where only one can be selected at a time.

D Two text input fields labeled 'Red' and 'Blue' for typing.

💡 Hint

Look at the input types and the shared name attribute.

The code creates two radio buttons with the same name, so the user can select only one color at a time.

❓ accessibility

advanced

Improving checkbox accessibility

Which option best improves accessibility for a checkbox input labeled 'Accept Terms'?

A <input type="checkbox" id="terms"><label>Accept Terms</label>

B <input type="checkbox" aria-labelledby="terms-label"><span id="terms-label">Accept Terms</span>

C <input type="checkbox" id="terms" aria-label="Accept Terms">

D <input type="checkbox" id="terms"><label for="terms">Accept Terms</label>

💡 Hint

Consider how screen readers associate labels with inputs.

The best practice is to use <label> with a matching for attribute to the input's id. This ensures screen readers correctly announce the label and makes the label text clickable for better usability.

❓ selector

expert

CSS selector for checked checkboxes

Which CSS selector correctly styles only the checkboxes that are checked?

A input[type="checkbox"]:check { background-color: lightgreen; }

B input[type="checkbox"]:checked { background-color: lightgreen; }

C input:checked[type="checkbox"] { background-color: lightgreen; }

D input[type="checkbox" checked] { background-color: lightgreen; }

💡 Hint

Look for the correct pseudo-class syntax for checked inputs.

The :checked pseudo-class selects checked checkboxes. The syntax must be input[type="checkbox"]:checked.