Everything about Dropdown List in HTML
Dropdown List is one of the most use feature to get user to select data from dropdown without writing it, easy and fast - no error input.
Dropdown List is created using <select> tag in HTML.
Inside <select> tag we use <option> tag to create options for user to select.
We can also use <optgroup> tag to group options inside dropdown list.
1. Simple Dropdown List in HTML
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Output Result:
Lear more detail in video How to Create Dropdown List Options With Select Tag in HTML in Khmer
2. Dropdown List with Group Option in HTML
<select multiple size="4">
<option value="">select a car</option>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
Output Result: Multple selection just Ctrl + Click
Watch for more detail How to Create Dropdown List With Group Option in HTML speak khmer
3. Select Properties in HTML
We can use some properties with <select> tag to make it more useful.
- name: Specifies the name of the dropdown list.
- id: Specifies the id of the dropdown list.
- multiple: Allows the user to select multiple options.
- size: Specifies the number of visible options in the dropdown list.
- disabled: Disables the dropdown list.
- autofocus: Automatically focuses on the dropdown list when the page loads.
- required: Makes the dropdown list a required field in a form.
- selected: Make default selection on any item.
Bonus
If you are vs code fan, you will love this 9 vs code extensions love by developer: Best 9 VS Code Extensions for HTML
Free Khmer Ebook Download (PDF): Database | Microsoft Access | Python Programming