引導程式5|Html表單，提交必選欄位|使Bootstrap選擇需要？-有解無憂

我需要表單中選擇欄位的要求。

是否可以使用 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/[email protected]/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/[email protected]/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>

我找到了這篇文章，但不適合。

如何使 Bootstrap 下拉選單成為必需？

更新：

從這篇文章中，只有這個有效。

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

我需要一個空值的選項欄位。

uj5u.com熱心網友回復：

<!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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

試試這個它會作業

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/464299.html

標籤：html 形式引导程序 5

上一篇：如何將影像作為引數傳遞給post請求Flutter中的鍵？

下一篇：HTML表單成功后防止重新提交