HTML5: How to specify that multiple options can be selected at once?

Last update on February 12 2024 12:52:30 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to specify that multiple 
options can be selected at 
once</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<form method="post" action="https://www.w3resource.com/html-css-exercise/basic/solution/input-list-answer-demo.php"><!-- Start of form with method and action attributes -->
<select name="animal" multiple><!-- Start of dropdown menu with name and multiple attributes -->
<option value="Lion">Lion</option><!-- First option in the dropdown menu -->
<option value="Tiger">Tiger</option><!-- Second option in the dropdown menu -->
<option value="Elephant">Elephant</option><!-- Third option in the dropdown menu -->
</select><!-- End of dropdown menu -->
<input type="submit"><!-- Submit button for the form -->
</form><!-- End of form -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a form and a dropdown menu.
The form is set to submit data using the POST method to a specified URL.
The dropdown menu allows users to select multiple options simultaneously.
Each option in the dropdown menu represents an animal.
The multiple attribute is added to the <select> tag, indicating that multiple options can be selected at once.
The form includes a submit button for users to submit their selections.
All selected options will be submitted to the specified URL when the form is submitted.

Live Demo:

See the Pen select-multiple-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page