HTML5: How to define a name for the drop-down list?

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 define a name for the 
drop-down list</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/select-name-answer-demo.php"><!-- Start of form with method and action attributes -->
<select name="animal"><!-- Start of dropdown menu with name attribute -->
<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 one option from the provided choices.
Each option in the dropdown menu represents an animal.
The name attribute is added to the <select> tag, defining the name for the dropdown list. This name will be used to identify the dropdown list when the form is submitted.
The form includes a submit button for users to submit their selection.
When the form is submitted, the selected option will be sent to the specified URL along with any other form data.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page