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

Last Updated : 01 Jun, 2023

The purpose of this article is to specify that the user is required to select a value before submitting the form in HTML5. This will force the user to enter a value before a form is submitted.

The <select> required attribute can be used for this purpose. It is a boolean attribute that states an input field must be filled in before the form can be submitted. The text, URL, tel, email, password, date pickers, number, checkbox, radio, and file are supported by the required attribute.

Syntax:

<select name="" required>

The below example will demonstrate this approach:

Example 1: In this example, we will use a select tag and required attribute for checking that the input field should be filled.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <form method="post" action="/">
        <h3>
            How to specify that the user is
            required to select a value before
            submitting the form in HTML5
        </h3>
        <select name="Language" required>
            <option value="">
                None
            </option>
            <option value="python">
                Python
            </option>
            <option value="cpp">
                Cpp
            </option>
            <option value="java">
                Java
            </option>
        </select>
        <input type="submit" />
    </form>
</body>
</html>

Output: As we can see, we need to select the item in the list before submitting the form.

Example 2: In this example, we will make the checkbox input a required field.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <form method="post" action="/">
        <h3>
            How to specify that the user is required
            to select a value before
            submitting the form in HTML5
        </h3>
        <input type="checkbox"
               id="python"
               name="python"
               value="language" required />
        <label for="vehicle1"> Python</label>
        <br />
        <input type="checkbox"
               id="cpp"
               name="cpp"
               value="language" required />
        <label for="vehicle2"> Cpp</label>
        <br />
        <input type="checkbox"
               id="java"
               name="java"
               value="language" required />
        <label for="vehicle3"> Java</label>
        <br />
        <input type="submit" />
    </form>
</body>
 
</html>