HTML5: How to specify that the user is required to select a value before submitting the form?

Last update on February 12 2024 12:51:55 (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 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

Go to Exercise page