Drop-Down List & Adding a Combo Box - CBSE Class 10
1. 🧭 Adding a Drop-Down List
Key Point 1: Meaning and Purpose
- A drop-down list is a menu on a web page that displays a list of options.
- The user can select one or (with a special setting) multiple options.
- It saves space compared to using lots of radio buttons or checkboxes.
- Useful for selecting things like city, subject, or country.
Examples:
- Choosing your city from a long list (e.g., Delhi, Mumbai, Kolkata).
- Selecting your favorite fruit (e.g., Apple, Mango, Banana).
Key Point 2: Basic Structure/Tags
- Use the <select> tag to make the list.
- Add <option> tags for each item inside the list.
Syntax Example:
<select name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
</select>
Examples:
<select name="language">
<option value="english">English</option>
<option value="hindi">Hindi</option>
</select>
<select name="vehicle">
<option value="car">Car</option>
<option value="bike">Bike</option>
</select>
Key Point 3: Important Attributes of <select> and <option>
For <select>
- name — Sets the name for the data when sent to the server.
- size — How many options to show at once.
- multiple — Allow selecting more than one item.
- disabled — Stops any user from using the list.
For <option>
- value — What gets sent to the server if selected.
- selected — Sets a default choice.
- disabled — Stops that choice from being selected.
Examples:
<select name="subject" size="3" multiple>
<option value="science">Science</option>
<option value="math" selected>Mathematics</option>
<option value="english">English</option>
</select>
<select name="class" disabled>
<option value="10">Class 10</option>
<option value="12">Class 12</option>
</select>
Key Point 4: Multiple Selection & Display Size
- Add
multipleto the <select> tag so users can select more than one item. - Use
sizeto show more options at once. - Otherwise, only one option shows unless opened.
Example:
<select name="hobbies" multiple size="4">
<option value="drawing">Drawing</option>
<option value="sports">Sports</option>
<option value="music">Music</option>
<option value="reading">Reading</option>
</select>
- Here, the user can choose several hobbies at once.
Key Point 5: When and Why to Use Drop-Down
- Use drop-downs when you want to keep the web page clean and not show lots of buttons.
- Ideal for forms (such as registration or surveys).
Examples:
- A school admission form where the user selects their standard (Class 6, 7, 8, 9, 10).
- An online shopping site asking to choose a product category (Clothes, Shoes, Electronics).
2. 🧩 Adding a Combo Box
Key Point 1: Meaning and Function
- A combo box is like a combination of a text box and a drop-down list.
- It allows a user to either select from a list or type their own answer.
- In simple HTML <select>, typing is not possible, but in HTML5, this is supported using <input> with <datalist>.
Examples:
- Gmail’s “To” field: you can select emails from the drop-down or type a new one.
- Typing the name of your country with suggestions showing as you type.
Key Point 2: Classic HTML Combo Box Structure
- In CBSE Class 10 (subject code 165), a combo box = <select> + options.
- Technically, only picking is allowed, but conceptually, a combo box means either pick or (sometimes) type.
Example:
<select name="favorite_color">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</select>
- You can't type here, but you select a color.
Key Point 3: Modern Combo Box (with <datalist>)
- HTML5 lets users type or select from suggestions.
- Use an <input> box linked to a <datalist>.
Example:
<input list="colors" name="colors" />
<datalist id="colors">
<option value="Red"></option>
<option value="Green"></option>
<option value="Blue"></option>
</datalist>
- The user can type "Purple" or pick from "Red", "Green", or "Blue".
Another Example:
<form>
<label for="city">Type or select your city:</label>
<input list="cities" id="city" name="city" />
<datalist id="cities">
<option value="Delhi"></option>
<option value="Mumbai"></option>
<option value="Chennai"></option>
<option value="Kolkata"></option>
</datalist>
</form>
Key Point 4: When to Use a Combo Box
- When there are many possible entries and the user may want to add a new one not in the list.
- Useful for city names, email addresses, product names, etc.
Examples:
- Entering your favorite book, with some suggestions.
- Selecting or typing your hobby for a survey.
Key Point 5: Main Differences (Drop-down vs Combo Box)
- Drop-down list — only select from options, no new typing (with <select>).
- Combo box — can select or type (with <datalist> and <input> in HTML5).
- Combo box offers greater flexibility.
| Feature | Drop-Down List | Combo Box |
|---|---|---|
| User can type? | ❌ No | ✅ Yes (with <datalist>) |
| User can only select? | ✅ Yes | ✅ Yes |
| Allows multiple select? | ✅ Yes (multiple) | ❌ Generally No |
| For small list? | ✅ Best | ✅ Good |
| For big or new values? | ❌ Not possible | ✅ Possible |
🎲 FUN Activity: Try Making a Drop-Down and Combo Box
Activity 1: Create a Simple Drop-Down List
Steps
- Open Notepad or any text editor.
- Type this code:
<form>
<label for="pet">Choose your pet:</label><br />
<select name="pet" id="pet">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="parrot">Parrot</option>
</select>
</form>
- Save the file as
dropdown.html. - Double-click to open in your browser.
Observations:
- Only one pet can be chosen.
- The list saves space and looks neat.
Activity 2: Create a Combo Box using <datalist>
Steps
- In your text editor, type this code:
<form>
<label for="fruit">Select or type a fruit:</label>
<input list="fruits" id="fruit" name="fruit" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Mango"></option>
<option value="Banana"></option>
<option value="Grapes"></option>
</datalist>
</form>
- Save the file as
combobox.html. - Open in your browser.
Observations:
- You can type "Pineapple" (not in the list) or pick "Apple", "Mango", "Banana", or "Grapes" from the suggestions list.
- If you type a new fruit, it is accepted.
Scenario Based Questions
-
Scenario: You are designing a feedback form for your school canteen. The menu changes weekly and students may want to suggest a new dish.
- Question: Would you use a drop-down list or a combo box for the "Favorite Dish" input? Why?
- Answer: Use a combo box so students can either pick from a list of current dishes or suggest a new one by typing.
-
Scenario: Your school has exactly four houses – Red, Blue, Green, and Yellow. No new house will ever be added.
- Question: What kind of input control is best for choosing a house?
- Answer: A drop-down list using <select> is best since the options never change and only one can be picked.
-
Scenario: In an online quiz form, the subject list may change next year as new subjects are introduced.
- Question: How would you design the subject input field for future flexibility?
- Answer: Use a combo box (with <datalist>) to let students select from current subjects or type a new one in case new subjects are introduced.
-
Scenario: A registration form asks for "Country". There are so many countries and sometimes users enter names that are not standard.
- Question: What is the best strategy for country selection?
- Answer: Use a combo box so users can type their country name or choose from a list, ensuring both and flexibility.convenience
-
Scenario: On a feedback page, you want users to pick their mood emoji from five fixed choices (e.g., 🙂, 😁, 😒, 😠, 😢).
- Question: What input field will you use and why?
- Answer: Use a drop-down list with five emoji options because the choices are fixed and only one should be selected.