The selected attribute in the <select> element in HTML is used to pre-select an option from the dropdown when the page loads. When an <option> element has the selected attribute, it appears as the default choice in the dropdown menu, ensuring that the user sees this option pre-selected unless they choose otherwise.
How to Use the selected Attribute
You can apply the selected attribute to any <option> element inside a <select> element. The user can still change their selection, but the option with selected will be highlighted by default when the page first loads.
preselect.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>
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
<option value="strawberry" selected>Strawberry</option>
<option value="blueberry">Blueberry</option>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html>
Above snippet generate below screen.
Previous Next Home
No comments:
Post a Comment