HTML5: How to specify that the user is required to select a value before submitting the form?
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 the user is required to select a value before submitting the form</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-required-answer-demo.php"><!-- Start of form with method and action attributes -->
<select name="animals" required><!-- Start of dropdown menu with name and required attributes -->
<option value="">None</option><!-- Option for no selection -->
<option value="lion">Lion</option><!-- Option for Lion -->
<option value="tiger">Tiger</option><!-- Option for Tiger -->
<option value="elephant">Elephant</option><!-- Option for Elephant -->
</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 required attribute is added to the <select> tag, indicating that the user must select a value from the dropdown menu before submitting the form.
- An additional option with an empty value ("None") is included to allow users to choose not to select any animal.
- The form includes a submit button for users to submit their selection.
- When the form is submitted, if the user has not selected any value, a validation error will occur, prompting them to make a selection before the form can be submitted.
Live Demo:
See the Pen select-required-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics