纯 HTML 解决方案

当指定了 HTML required 属性时,用户应该在提交表单之前选择一个值。

required 属性仅适用于空值。
因此,我们必须将 <select> 元素的第一个值留空。

将 required 属性应用于 <select> 元素的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</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>

在下一个示例中,我们使用两个 <select> 元素,但 required 属性仅应用于第一个 <select> 元素。

使用带有和不带有 required 属性的 <select> 元素的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <h2>onitroad</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>
如何在 HTML5 中的 <select> 元素上使用“required”属性
日期:2020-06-02 22:15:13 来源:oir作者:oir