Bootstrap 5 | Html 表单，提交所需的 select 字段 |要求 Bootstrap select？

Question

我需要表单中 select 字段的必填项。

是否可以使用 bootstrap 5 或 html

要提交表单，您必须 select A 或 B，就像您必须使用消息字段

<!doctype html>
<html lang="en">
  <head>    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
<div class="container bg-light">
    <div class="row">
            <form method="post">
            <div class="col-sm-12">
                <select class="form-select" required="required">
                    <option selected>Select:</option>
                    <option value="1" >A</option>
                    <option value="2" >B</option>
                </select>
            </div>
            <div class="col-sm-12">
              <label for="message" class="form-label"><b>Message</b></label>
              <input type="text" class="form-control" id="message" name="message" required>
            </div>          
            <button class="w-100 btn btn-primary btn-lg" type="submit"><b>Submit</b></button>
            
            </form>
       </div>
    </div>   

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>

<select class="form-selec" required="required">
 <option selected>Select:</option>
 <option value="1" >A</option>
 <option value="2" >B</option>
</select>

<select class="form-select" required>
 <option selected>Select:</option>
 <option value="1" >A</option>
 <option value="2" >B</option>
</select>

<select class="form-select" required>
 <option selected disabled>Select:</option>
 <option value="1" >A</option>
 <option value="2" >B</option>
</select>

我找到了这个 post 但不合适。

How to make a Bootstrap dropdown required?

更新：

来自这个 post，只有这个有效。

<select class="form-select" required="required">
 <option value="">Select:</option>
 <option value="1" >A</option>
 <option value="2" >B</option>
</select>

我需要一个空值的选项字段。

Answer 1

<!doctype html>
<html lang="en">
   <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
<body>
  <div class="container bg-light">
     <div class="row">
        <form method="post">
           <div class="col-sm-12">
              <select class="form-select" name="A" id="A" required>
                 <option value="">Select</option>
                 <option value="A">A</option>
                 <option value="B">B</option>
              </select>
           </div>
           <div class="col-sm-12">
              <label for="message" class="form-label"><b>Message</b></label>
              <input type="text" class="form-control" id="message" name="message" required>
           </div>
           <button class="w-100 btn btn-primary btn-lg" type="submit"><b>Submit</b></button>
        </form>
     </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

尝试一下它会起作用

Bootstrap 5 | Html 表单，提交所需的 select 字段 |要求 Bootstrap select？

Bootstrap 5 | Html form, required select field for submit | Make Bootstrap select required?

html

forms

bootstrap-5