Bootstrap - 表單

本章將討論 Bootstrap 表單。表單允許使用者輸入資料，例如姓名、電子郵件地址、密碼等，然後可以傳送到伺服器進行處理。Bootstrap 提供了類來建立各種樣式、佈局和自定義元件的表單。

基本表單

Bootstrap 中的表單控制元件擴充套件了重置的表單樣式，並使用了類。為了在不同瀏覽器和裝置上實現一致的渲染和自定義顯示，請使用這些類。
要使用更新的輸入控制元件，例如電子郵件驗證、數字選擇和其他功能，請確保在所有輸入元素上使用適當的 type 屬性（例如，電子郵件地址使用 email 或數值資料使用 number）。

以下示例演示了 Bootstrap 的基本表單。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <form>
      <div class="mb-3">
        <label for=" sampleInputEmail" class="form-label">Username</label>
        <input type="email" class="form-control" id=" sampleInputEmail" aria-describedby="emailHelp">
      </div>
      <div class="mb-3">
        <label for="sampleInputPassword" class="form-label">Password</label>
        <input type="password" class="form-control" id="sampleInputPassword">
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="sampleCheck">
        <label class="form-check-label" for="sampleCheck">Remember me</label>
      </div>
      <button type="submit" class="btn btn-primary">Log in</button>
    </form>
  </body>
  </html>

停用表單

要阻止使用者互動並使輸入看起來更淺，請使用 disabled 布林屬性。
要停用 <fieldset> 中的所有控制元件，請新增 disabled 屬性。瀏覽器將把包含在 fieldset <disabled> 中的原生表單控制元件的 <input>、<select> 和 <button> 元素都視為已停用，從而阻止鍵盤和滑鼠與它們進行互動。
如果表單具有自定義按鈕式元素，例如 <a class="btn btn-*">...</a>，則它們設定了 pointer-events: none，這意味著它們仍然可聚焦和鍵盤操作。要阻止它們接收焦點，請使用 tabindex="-1"，並使用 aria-disabled="disabled" 向輔助技術發出其狀態訊號。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <form>
      <fieldset disabled>
        <div class="mb-3">
          <label for="disabledEmailInput" class="form-label">Disabled Input</label>
          <input type="text" id="disabledEmailInput" class="form-control" placeholder="Email Id">
        </div>
        <div class="mb-3">
          <label for="disabledPasswordInput" class="form-label">Disabled Input</label>
          <select id="disabledPasswordInput" class="form-select">
            <option>Password</option>
          </select>
        </div>
        <div class="mb-3">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="disabledcheckbox" disabled>
            <label class="form-check-label" for="disabledcheckbox">
              Disabled Check Box
            </label>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Disabled Button</button>
      </fieldset>
    </form>
  </body>
  </html>

可訪問性

每個表單控制元件都具有輔助技術使用者可以訪問的適當名稱。使用標籤元素或 <button>...</button> 中的描述性文字是最簡單的實現方法。
當沒有提供可見的“標籤”或適當的文字內容時，請使用其他方法獲取可訪問的名稱，例如
- 使用類 .visually-hidden 隱藏 <label> 元素。
- 使用 aria-labelledby 指向充當 <label> 的現有元素。
- 包含 title 屬性。
- 使用 aria-label 設定元素的可訪問名稱。
當這些方法都不可用時，輔助技術會使用 placeholder 屬性作為 <input> 和 <textarea> 元素的可訪問名稱的後備。
使用視覺隱藏內容將有助於輔助技術使用者，但是某些使用者仍然可能在缺少可見標籤文字時遇到問題。

列印頁面