W3docs
en
Log in

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

The “required” attribute works only on empty values. In this snippet, we’ll show how to apply it to the HTML <select> element. Read and find some examples.

Tags

Solution with pure HTML

When the HTML <span class="attribute">required</span> attribute is specified, the user should select a value before submitting the form.

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

Example of applying the <span class="attribute">required</span> attribute to the <select> element:

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

<div class="demo p-2.5 mt-1 mb-5 not-prose"> <form action-xhr="/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">``</input> </form> </div>In the next example, we use two <select> elements, but the <span class="attribute">required</span> attribute is only applied to the first <select> element.

Example of using the <select> element with and without the <span class="attribute">required</span> attribute:

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>
Try it Yourself »