Bootstrap 5 表单，提交必填选择字段 |使 Bootstrap 下拉/选择需要？答案

【问题标题】：Bootstrap 5 form, required select field for submit | Make Bootstrap dropdown/select required?Bootstrap 5 表单，提交必填选择字段 |使 Bootstrap 下拉/选择需要？
【发布时间】：2022-06-28 22:01:18
【问题描述】：

我需要表单中的选择字段。

是否可以使用 bootstrap 5 或 html

要提交表单，您必须选择 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>

我找到了这篇文章，但不适合。

How to make a Bootstrap dropdown required?

更新：

从这篇文章中，只有这个有效。

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

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

【问题讨论】：

标签： html forms bootstrap-5

【解决方案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>

试试这个就行了

【讨论】：