HTML forms: combo box MCQs Quiz | Class 10

Understanding HTML Forms and Combo Boxes

HTML forms are essential for user interaction on websites, allowing data collection such as login details, feedback, or selections. Among various form elements, the combo box (also known as a dropdown list or select box) is a versatile control that lets users choose one or more options from a predefined list.

What is a Combo Box (Dropdown List)?

A combo box in HTML is typically created using the <select> tag, combined with <option> tags for each item in the list. It conserves screen space by hiding options until clicked, making it ideal for long lists of choices (e.g., countries, states, product categories).

Key Concepts and Usage:

1. Basic Structure: <select> and <option>

The <select> tag creates the dropdown itself, and each <option> tag defines an individual item that can be selected from the list.

<select name="city" id="city">
  <option value="delhi">Delhi</option>
  <option value="mumbai">Mumbai</option>
  <option value="bangalore">Bangalore</option>
</select>

The name attribute of <select> is crucial for identifying the data when the form is submitted, while the value attribute of <option> is the actual data sent to the server.

2. Pre-selecting an Option

You can make one option pre-selected when the page loads by adding the selected attribute to the desired <option> tag.

<select name="color">
  <option value="red">Red</option>
  <option value="blue" selected>Blue</option>
  <option value="green">Green</option>
</select>

3. Allowing Multiple Selections

To enable users to choose more than one option from the list, add the multiple attribute to the <select> tag. When multiple is used, the dropdown typically appears as a scrollable box rather than a single-line dropdown. Users can select multiple options by holding down Ctrl (Windows) or Cmd (Mac) while clicking.

<select name="fruits" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

4. Grouping Options with <optgroup>

For better organization, especially with long lists, you can group related options using the <optgroup> tag. The label attribute of <optgroup> provides a heading for the group.

<select name="courses">
  <optgroup label="Science">
    <option value="physics">Physics</option>
    <option value="chemistry">Chemistry</option>
  </optgroup>
  <optgroup label="Arts">
    <option value="history">History</option>
    <option value="geography">Geography</option>
  </optgroup>
</select>

5. Sizing the Dropdown with size Attribute

The size attribute of the <select> tag specifies the number of visible options at once. If size is greater than 1, the list will appear as a scrollable box, even without the multiple attribute. If size is not specified, only one option is typically visible, and it behaves like a standard dropdown.

<select name="numbers" size="3">
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
</select>

Important Attributes for <select> and <option>

Quick Revision Points:

• <select> creates the dropdown list.
• <option> defines individual items within the list.
• value attribute of <option> is for data submission.
• selected attribute makes an option default.
• multiple attribute allows choosing several options.
• <optgroup> organizes options into categories.
• size attribute controls the number of visible options.

Extra Practice Questions:

1. Which HTML form element is best suited for selecting a country from a list of over 200 countries?
2. If you want to make a dropdown list mandatory, which attribute would you add to the <select> tag?
3. What is the primary difference in appearance and functionality between a <select> tag with size="1" and one with size="5" (without the multiple attribute)?
4. Explain how the name attribute of <select> and the value attribute of <option> work together when a form is submitted.
5. Write the HTML code for a dropdown list allowing multiple selections, showing three options visible by default, for choosing favorite programming languages (e.g., Python, Java, C++).