How to Use the "required" Attribute on the <select> Element in HTML5

Solution with pure HTML

When the HTML required attribute is specified, the user should select a value before submitting the form.

The required attribute works only on empty values. So, you must leave the first value of the <select> element empty.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of applying the required attribute to the <select> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <select name="books" required>
        <option value="">Books</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </select>
      <input type="submit">
    </form>
  </body>
</html>

Try it Yourself »

Result

In the next example, we use two <select> elements, but the required attribute is only applied to the first <select> element.

Example of using the <select> element with and without the required attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>W3docs</h2>
    <form action="/form/submit" method="post">
      <section>
        <h3>Books</h3>
        <select name="books" required>
          <option value="">None</option>
          <option value="html">HTML</option>
          <option value="css">CSS</option>
        </select>
      </section>
      <section>
        <h3>Snippets</h3>
        <select name="snippets">
          <option value="">None</option>
          <option value="html">HTML</option>
          <option value="css">CSS</option>
        </select>
      </section>
      <br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>