HTML forms: radio buttons MCQs Quiz | Class 10

This interactive quiz on HTML Forms focuses on Radio Buttons, covering essential concepts for Class X Computer Applications (Code 165), Unit 4: Lab Exercises. Test your understanding of single-choice input elements in HTML. Submit your answers to see your score and download a detailed answer PDF for review.

Understanding HTML Radio Buttons for Single-Choice Inputs

HTML radio buttons are fundamental form elements designed to allow users to select only one option from a predefined set of choices. They are perfect for scenarios where mutually exclusive options are presented, ensuring that a user commits to a single decision.

Key Concepts of Radio Buttons

Purpose: To offer a group of related options where only one can be selected.
HTML Tag: Created using the <input> tag with type="radio".
The name Attribute: This is critical! All radio buttons in a group must share the exact same name attribute. This tells the browser that they belong together, enforcing the single-choice selection.
The value Attribute: Each radio button must have a unique value attribute. This value is what gets sent to the server when the form is submitted if that particular radio button is selected.
The checked Attribute: You can pre-select one radio button in a group by adding the checked attribute to its <input> tag. Only one can be checked initially.
Associating Labels: Using the <label> tag with its for attribute (matching the radio button’s id) makes radio buttons more accessible and user-friendly. Clicking on the label will also select the corresponding radio button.

Radio Buttons vs. Checkboxes

It’s important to differentiate radio buttons from checkboxes, which also use the <input> tag but with type="checkbox".

Feature	Radio Button	Checkbox
Selection	Single choice (only one option can be selected in a group)	Multiple choices (any number of options can be selected)
`type` attribute	`radio`	`checkbox`
`name` attribute	Same `name` for all options in a group	Unique `name` for each individual checkbox (often)

Example HTML Structure

<form>
  <p>Select your favorite programming language:</p>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>

  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>

  <input type="radio" id="javascript" name="fav_language" value="JavaScript" checked>
  <label for="javascript">JavaScript</label>
</form>

Quick Revision Points

Use <input type="radio"> for single-choice selection.
All radios in a group MUST have the same name attribute.
Each radio needs a unique value attribute.
Use the checked attribute to pre-select an option.
Pair radio buttons with <label> tags for better usability.
Radio buttons are for “choose ONE”, checkboxes are for “choose MANY”.

Practice Questions

What is the primary purpose of the name attribute in a group of radio buttons?
How do you make a specific radio button pre-selected when the page loads?
Explain the difference in functionality between an HTML radio button and a checkbox.
Which HTML tag is used to create a radio button input?
If you have two groups of radio buttons on a single form, how would you ensure they function independently?

Author

CBSE Quiz Editorial Team

Content created and reviewed by the CBSE Quiz Editorial Team based on the latest NCERT textbooks and CBSE syllabus. Our goal is to help students practice concepts clearly, confidently, and exam-ready through well-structured MCQs and revision content.

Your Result