In HTML, you can allow users to select multiple options from a <select> dropdown by adding the multiple attribute. When the multiple attribute is present, the <select> element displays as a list box (instead of a dropdown) where users can choose more than one option by holding down the Ctrl key (Windows) or Command key (Mac) while clicking the desired options.
Syntax
<select name="element_name" multiple>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
multiselect-dropdown.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiselect 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" multiple>
<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.
Previous Next Home
No comments:
Post a Comment