Drop-Down List and Combo Box - CBSE Class 10 – Long Answer Questions
Medium Level (Application & Explanation)
Q1. Explain the process of creating a drop-down list in an HTML form. List any three important attributes of the <select> tag with examples.
Answer:
A drop-down list in HTML is made using the <select> tag along with inside <option> tags for each item. This list helps users choose one option from many. Three important attributes of the <select> tag are:
- name: Helps identify the selected value after form submission (e.g., <select name="city">).
- size: Shows how many items are visible at a time. Value above 1 makes it look like a list box (e.g., <select size="3">).
- multiple: Lets users pick more than one option, making the list a multi-select box (e.g., <select multiple>).
Using these attributes makes the list more user-friendly and interactive in web forms.
Q2. Differentiate between the <select> and <datalist> tags by highlighting their main features and usage with examples.
Answer:
The <select> tag creates a classic drop-down or list box, where users choose from fixed options provided by <option> tags. For example,
<select name="city">
<option value="delhi">Delhi</option>
</select>
The <datalist> tag, used with an <input> element, acts like a combo box. It lets users either select from a list or type their own value. Example:
<input list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Banana"></option>
</datalist>
While <select> does not allow typing new entries, <datalist> provides both options, giving more flexibility.
Q3. How can you set a default selected value in a drop-down list? Illustrate with code and explanation.
Answer:
A default selected value in a drop-down is set using the selected attribute with the <option> tag. For example:
<select name="subject">
<option value="maths">Maths</option>
<option value="science" selected>Science</option>
<option value="english">English</option>
</select>
Here, “Science” is pre-selected when the page loads. The selected attribute highlights that option by default, making it the first visible choice to the user until changed.
Q4. Which attributes control whether a user can select multiple options from a drop-down list? Write code to support your explanation.
Answer:
The multiple attribute in the <select> tag allows users to pick more than one option. The size attribute sets how many items are visible at once.
Example:
<select name="languages" multiple size="3">
<option value="python">Python</option>
<option value="java">Java</option>
<option value="html">HTML</option>
</select>
This code lets users hold Ctrl (Windows) or Cmd (Mac) to select several languages at once. Without multiple, users can pick only one option.
Q5. Describe the steps to add a combo box in an HTML form using <datalist>. Also, explain why a combo box is more flexible than an ordinary drop-down list.
Answer:
To add a combo box, use an <input> tag with a list attribute that links to a <datalist> by id.
Example:
<input list="colors" name="color" />
<datalist id="colors">
<option value="Red"></option>
<option value="Green"></option>
<option value="Blue"></option>
</datalist>
A combo box is more flexible because it allows users to either pick from suggestions or type their own value. In contrast, a drop-down list only allows selection among listed choices.
High Complexity (Analysis & Scenario-Based)
Q6. Suppose you are creating a college admission form with subjects. The school offers “Physics,” “Chemistry,” “Mathematics,” and “Biology.” You want some students to select only one subject, but others may take multiple. How will you design this using HTML tags? Explain the reasoning.
Answer:
If some students can select only one subject, use a drop-down list without the multiple attribute:
<select name="subject">
<option value="physics">Physics</option>
<option value="chemistry">Chemistry</option>
<option value="maths">Mathematics</option>
<option value="biology">Biology</option>
</select>
For students who can select multiple, add the multiple attribute:
<select name="subjects" multiple size="4">
<option value="physics">Physics</option>
<option value="chemistry">Chemistry</option>
<option value="maths">Mathematics</option>
<option value="biology">Biology</option>
</select>
This design gives both single and multiple choice options, according to the rules for admission.
Q7. A web form designer wants to prevent users from choosing “Chennai” in the city drop-down list because admissions are closed there. Show how this can be achieved and explain the impact on user experience.
Answer:
Use the disabled attribute inside the <option> tag:
<select name="city">
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="chennai" disabled>Chennai</option>
</select>
With this, “Chennai” appears in the list but is greyed out and cannot be selected.
It informs users that the option exists but is not available, improving clarity and saving users’ time.
Q8. Analyze the pros and cons of using a combo box (<input> with <datalist>) for a country selection field on a large website, where users can be from any country in the world.
Answer:
Pros:
- Users can type their country name, saving time with long lists.
- Autocomplete suggestions reduce spelling mistakes.
- Both common and rare country names are accessible.
Cons:
- Large lists (200+ options) can slow down browsers.
- <datalist> does not restrict inputs, so users can type invalid entries.
- No built-in support for selecting multiple countries or complex search.
Thus, combo boxes offer flexibility but may not always prevent mistakes, especially for big, standardized lists.
Q9. A student tries to submit a form, but the drop-down list for class selection is greyed out and unavailable. How could this happen? What should the form designer check and correct in the HTML code?
Answer:
A greyed out drop-down means it is disabled using the disabled attribute in the <select> tag, like this:
<select name="class" disabled>
<option value="X">10th</option>
</select>
The designer should check whether disabled is needed. If not, remove it so it becomes active:
<select name="class">
<option value="X">10th</option>
</select>
This correction ensures the list becomes usable by the student.
Q10. Suggest and explain two scenarios where using the size attribute in a drop-down list is useful for a school registration website.
Answer:
First scenario: When displaying a list of all available clubs during registration. Setting size="5" allows five clubs to be seen at once, making selection faster and avoiding extra scrolling.
Second scenario: For selecting the year of study (for example, classes 1–12), size="12" shows all options together. This helps students see every year in a glance and reduces the chance of missing an option.
Thus, the size attribute improves visibility and user