HTML forms: checkbox MCQs Quiz | Class 10

Understanding HTML Checkboxes for Multiple-Choice Input

HTML forms are essential for user interaction on websites, and the <input type="checkbox"> element is a fundamental component for allowing users to select one or more options from a given list. This section will delve into the details of using checkboxes effectively in web forms.

Key Concepts of Checkboxes

• Multiple Selection: Unlike radio buttons (<input type="radio">) where only one option can be selected within a named group, checkboxes allow users to select zero, one, or many options from a list.
• Boolean State: Each checkbox has a boolean state: it is either checked or unchecked. When a form is submitted, only the checkboxes that are checked (and have a name attribute) will have their value sent to the server.
• name Attribute: It is crucial to assign a name attribute to checkboxes. For a group of related checkboxes where multiple selections are possible, they should all share the same name attribute (e.g., <input type="checkbox" name="interests[]" value="sports">). This allows the server-side script to receive an array of selected values.
• value Attribute: The value attribute specifies the data to be sent to the server when the checkbox is checked. If no value attribute is specified, the default value “on” is sent.
• checked Attribute: This boolean attribute makes a checkbox pre-selected when the page loads.
• id and <label>: Always associate a <label> element with a checkbox using its id attribute. This improves accessibility, allowing users to click the label text to toggle the checkbox, and screen readers to correctly announce the control.

Example Usage

Consider a scenario where a user selects their favorite programming languages:

<form action="/submit-preferences" method="post">
  <p>Select your favorite programming languages:</p>
  <input type="checkbox" id="langHTML" name="languages[]" value="HTML">
  <label for="langHTML">HTML</label><br>

  <input type="checkbox" id="langCSS" name="languages[]" value="CSS">
  <label for="langCSS">CSS</label><br>

  <input type="checkbox" id="langJS" name="languages[]" value="JavaScript" checked>
  <label for="langJS">JavaScript</label><br>

  <input type="checkbox" id="langPython" name="languages[]" value="Python">
  <label for="langPython">Python</label><br>

  <button type="submit">Submit</button>
</form>

In this example, if the user checks HTML and Python, and JavaScript was pre-checked, the server would receive `languages[] = [“HTML”, “JavaScript”, “Python”]`.

Difference from Radio Buttons

The primary distinction between checkboxes and radio buttons lies in the number of selections allowed:

Quick Revision Points

• Use <input type="checkbox"> for multiple selections.
• Each checkbox needs a name and value attribute.
• Use checked attribute for default selection.
• Always pair with <label> for accessibility.
• Differentiate from radio buttons for single-choice scenarios.

Practice Questions

1. Which HTML input type allows users to select multiple options from a list?
1. <input type="radio">
2. <input type="text">
3. <input type="checkbox">
4. <input type="select">
2. What is the purpose of the value attribute in a checkbox?
1. To set the default checked state.
2. To specify the text displayed next to the checkbox.
3. To define the data sent to the server when the checkbox is checked.
4. To group related checkboxes together.
3. If no value attribute is specified for a checked checkbox, what value is sent to the server by default?
1. “true”
2. “on”
3. An empty string
4. The checkbox’s id
4. Which attribute is used to pre-select a checkbox when the page loads?
1. selected
2. default
3. active
4. checked
5. Why is it good practice to associate a <label> with an <input type="checkbox">?
1. It makes the checkbox visually larger.
2. It allows styling the checkbox more easily.
3. It improves accessibility and user experience.
4. It is required for the checkbox to function correctly.