The <select> element in HTML is used to create a drop-down list of options, allowing users to choose one (or more, in some cases) from a predefined set of values. It is often used in forms when there are multiple options to choose from, like a country, state, or product category.
Structure of the <select> Element
The <select> element contains one or more <option> elements, which define the available choices. You can also group options using the <optgroup> element.
Attributes of the <select> Element
1. name: Defines the name of the select element, used to reference its value when submitting a form.
2. id: Used to uniquely identify the <select> element for use with labels and scripts.
3. multiple: Allows multiple selections if set. Users can hold down the Ctrl (Windows) or Command (Mac) key to select multiple items.
4. size: Determines the number of visible options in the drop-down. By default, only one option is visible.
dropdown.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Example</title>
</head>
<body>
<form action="https://httpbin.org/post" method="POST">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
<option value="mercedes">Mercedes</option>
</select><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Above snippet generate below screen.
The <select> element creates a drop-down list with the label "Choose a car". Each <option> element represents an item in the list. The value attribute defines what is submitted with the form. When a user selects an option, the corresponding value is sent to the server upon form submission.
Grouping Options with <optgroup>
If you have related options, you can group them together using the <optgroup> element.
dropdown-group-elements.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Example</title>
</head>
<body>
<form action="https://httpbin.org/post" method="POST">
<label for="fruits">Select a fruit:</label>
<select id="fruits" name="fruits" style="width: 100px">
<optgroup label="Citrus Fruits">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
</optgroup>
<optgroup label="Berries">
<option value="strawberry">Strawberry</option>
<option value="blueberry">Blueberry</option>
</optgroup>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html>
Above snippet generate below screen.
No comments:
Post a Comment