The HTML <select> tag is used to create a drop-down list for user input, containing <option> tags to display the available choices. It provides functionality for selecting one or multiple options from a list.
<html>
<body>
<form>
<label for="fruits">Choose a fruit:</label>
<select id="fruits" name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
</form>
</body>
</html>
- The <label> element with the for attribute associates the label with the <select> element, enhancing accessibility.
- The <select> element with the id and name attributes defines the drop-down list, containing multiple <option> elements representing the available choices.
Syntax:
<select>
<option>
</option>
...
</select>Attributes
The following are commonly used attributes and their respective descriptions:
- autofocus: Automatically focuses the dropdown when the page loads using the autofocus attribute.
- disabled: Makes the dropdown unclickable and unusable with the disabled attribute.
- form: Specifies one or more forms that the select element belongs to through the form attribute.
- multiple: Allows selecting multiple values from the dropdown by using the multiple attribute.
- name: Defines a name for the dropdown to reference form data or JavaScript via the name attribute.
- required: Ensures a value is selected before form submission with the required attribute.
- size: Controls the number of visible options in the dropdown list using the size attribute.
Basic Dropdown Menu
<