形式

用於創建各種表單的表單控件樣式、佈局選項和自定義組件的示例和使用指南。

概述

Bootstrap 的表單控件使用類擴展了我們的 Rebooted 表單樣式。使用這些類來選擇它們的自定義顯示，以便在瀏覽器和設備之間實現更一致的呈現。

確保在所有輸入（例如，電子郵件地址或數字信息）上使用適當的type屬性，以利用更新的輸入控件，如電子郵件驗證、號碼選擇等。emailnumber

這是一個演示 Bootstrap 表單樣式的快速示例。繼續閱讀有關所需類、表單佈局等的文檔。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

表單控件

文本表單控件（如<input>s、<select>s 和<textarea>s）使用類進行樣式設置.form-control。包括一般外觀、焦點狀態、大小等的樣式。

請務必探索我們的自定義表單以進一步設計風格<select>。

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

對於文件輸入，交換.form-controlfor .form-control-file。

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

漿紗

.form-control-lg使用和之類的類設置高度.form-control-sm。

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

只讀

在輸入上添加readonly布爾屬性以防止修改輸入的值。只讀輸入看起來更輕（就像禁用輸入一樣），但保留標準光標。

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

只讀純文本

如果您想將<input readonly>表單中的元素設置為純文本樣式，請使用.form-control-plaintext該類刪除默認表單字段樣式並保留正確的邊距和填充。

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

範圍輸入

使用設置水平滾動範圍輸入.form-control-range。

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

複選框和收音機

默認複選框和單選在改進HTML 元素的佈局和行為的兩種輸入類型的單一類.form-check的幫助下得到改進。複選框用於在列表中選擇一個或多個選項，而單選框用於從多個選項中選擇一個。

支持禁用的複選框和無線電。該disabled屬性將應用較淺的顏色來幫助指示輸入的狀態。

複選框和單選按鈕支持基於 HTML 的表單驗證並提供簡潔易懂的標籤。因此，我們<input>的 s 和<label>s 是兄弟元素，而不是 a <input>within a <label>。這稍微有點冗長，因為您必須指定id和for屬性來關聯<input>和<label>。

默認（堆疊）

默認情況下，任何數量的直接同級複選框和單選都將垂直堆疊並以.form-check.

默認複選框

禁用複選框

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

默認電台

第二個默認收音機

禁用收音機

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

排隊

通過添加.form-check-inline任何.form-check.

3（禁用）

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3（禁用）

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

無標籤

添加.position-static到.form-check其中沒有任何標籤文本的輸入。請記住，仍然為輔助技術提供某種形式的可訪問名稱（例如， using aria-label）。

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

佈局

由於 Bootstrap 適用於我們幾乎所有的表單控件，因此默認情況下，表單將垂直堆疊display: block。width: 100%可以使用其他類來根據每個表單更改此佈局。

表單組

.form-group類是向表單添加一些結構的最簡單方法。它提供了一個靈活的類，鼓勵對標籤、控件、可選幫助文本和表單驗證消息進行適當的分組。默認情況下它只適用margin-bottom，但它會.form-inline根據需要選擇其他樣式。將它與<fieldset>s、<div>s 或幾乎任何其他元素一起使用。

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

表格網格

使用我們的網格類可以構建更複雜的表單。將這些用於需要多列、不同寬度和其他對齊選項的表單佈局。

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

表格行

您也可以換成.row標準.form-row網格行的變體，它覆蓋了默認的列間距，以獲得更緊湊和更緊湊的佈局。

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

還可以使用網格系統創建更複雜的佈局。

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

水平形式

.row通過將類添加到表單組並使用.col-*-*類來指定標籤和控件的寬度，使用網格創建水平表單。確保也添加.col-form-label到您<label>的 s 中，以便它們與其關聯的表單控件垂直居中。

有時，您可能需要使用邊距或填充實用程序來創建所需的完美對齊。例如，我們刪除padding-top了堆疊單選輸入標籤上的，以更好地對齊文本基線。

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

水平表單標籤大小

請務必使用.col-form-label-smor來正確遵循.col-form-label-lg您<label>的 s 或s的大小。<legend>.form-control-lg.form-control-sm

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

列大小

如前面的示例所示，我們的網格系統允許您在 a或中放置任意數量的.cols 。他們將在它們之間平均分配可用寬度。您還可以選擇列的子集以佔用更多或更少的空間，而其餘的 s 將其餘部分平均分配，具有特定的列類，例如..row.form-row.col.col-7

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

自動調整大小

下面的示例使用 flexbox 實用程序將內容和更改垂直居中.col，以便.col-auto您的列只佔用所需的空間。換句話說，列大小本身基於內容。

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

然後，您可以再次將其與特定於大小的列類重新混合。

<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

當然也支持自定義表單控件。

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

內聯表單

使用.form-inline該類在單個水平行上顯示一系列標籤、表單控件和按鈕。內聯表單中的表單控件與其默認狀態略有不同。

控件是display: flex，折疊任何 HTML 空白，並允許您使用間距和flexbox實用程序提供對齊控制。
控件和輸入組接收width: auto以覆蓋 Bootstrap 默認值width: 100%。
控件僅在至少 576 像素寬的視口中內嵌顯示，以解決移動設備上的窄視口。

您可能需要使用間距實用程序手動解決單個表單控件的寬度和對齊問題（如下所示）。最後，確保始終<label>在每個表單控件中包含一個，即使您需要使用.sr-only.

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

還支持自定義表單控件和選擇。

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

隱藏標籤的替代品

如果您沒有為每個輸入添加標籤，那麼屏幕閱讀器等輔助技術將無法處理您的表單。對於這些內聯表單，您可以使用.sr-only類隱藏標籤。還有其他替代方法可以為輔助技術提供標籤，例如aria-label、aria-labelledby或title屬性。如果這些都不存在，輔助技術可能會求助於使用該placeholder屬性（如果存在），但請注意，placeholder不建議使用 of 作為其他標籤方法的替代品。

幫助文本

.form-text可以使用（以前稱為.help-blockv3）創建表單中的塊級幫助文本。內聯幫助文本可以使用任何內聯 HTML 元素和實用程序類（如.text-muted.

將幫助文本與表單控件相關聯

幫助文本應與使用該aria-describedby屬性相關的表單控件顯式關聯。這將確保輔助技術（例如屏幕閱讀器）在用戶聚焦或進入控件時宣布此幫助文本。

輸入下方的幫助文本可以使用.form-text. 此類包括display: block並添加了一些頂部邊距，以便與上面的輸入輕鬆間隔。

密碼您的密碼長度必須為 8-20 個字符，包含字母和數字，並且不得包含空格、特殊字符或表情符號。

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

內聯文本可以使用任何典型的內聯 HTML 元素（可以是<small>、<span>或其他東西），只不過是一個實用程序類。

<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

禁用表格

在輸入上添加disabled布爾屬性以防止用戶交互並使其看起來更輕。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

將disabled屬性添加到 a<fieldset>以禁用其中的所有控件。

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

錨點警告

瀏覽器將 a 內的所有原生表單控件（<input>、<select>和<button>元素）<fieldset disabled>視為已禁用，從而阻止了鍵盤和鼠標在它們上的交互。

但是，如果您的表單還包含自定義的類似按鈕的元素，例如<a ... class="btn btn-*">，則這些元素只會被賦予pointer-events: none. 正如關於按鈕禁用狀態的部分（特別是錨元素的子部分）中所述，此 CSS 屬性尚未標準化，並且在 Internet Explorer 10 中不完全支持。基於錨的控件也將仍然是可使用鍵盤進行對焦和操作。您必須通過添加手動修改這些控件，tabindex="-1"以防止它們接收焦點並將aria-disabled="disabled"它們的狀態發送給輔助技術。

跨瀏覽器兼容性

disabled雖然 Bootstrap將在所有瀏覽器中應用這些樣式，但 Internet Explorer 11 及更低版本並不完全支持<fieldset>. 使用自定義 JavaScript 禁用這些瀏覽器中的字段集。

驗證

通過 HTML5 表單驗證向您的用戶提供有價值的、可操作的反饋 -在我們所有支持的瀏覽器中都可用。從瀏覽器默認驗證反饋中進行選擇，或使用我們的內置類和啟動器 JavaScript 實現自定義消息。

我們知道目前無法訪問客戶端自定義驗證樣式和工具提示，因為它們沒有暴露於輔助技術。在我們研究解決方案時，我們建議使用服務器端選項或默認瀏覽器驗證方法。

這個怎麼運作

下面是表單驗證如何與 Bootstrap 一起工作：

HTML 表單驗證通過 CSS 的兩個偽類:invalid和:valid. 它適用於<input>、<select>和<textarea>元素。
Bootstrap 將:invalid和:valid樣式限定為父.was-validated類，通常應用於<form>. 否則，任何沒有值的必填字段在頁面加載時顯示為無效。這樣，您可以選擇何時激活它們（通常在嘗試提交表單之後）。
要重置表單的外觀（例如，在使用 AJAX 進行動態表單提交的情況下），請在提交後再次刪除.was-validated該類。<form>
作為後備，可以使用類.is-invalid而.is-valid不是偽類來進行服務器端驗證。他們不需要.was-validated父類。
由於 CSS 工作方式的限制，如果沒有自定義 JavaScript 的幫助，我們（目前）無法將樣式應用於<label>DOM 中表單控件之前的樣式。
所有現代瀏覽器都支持約束驗證 API，這是一系列用於驗證表單控件的 JavaScript 方法。
反饋消息可能會使用瀏覽器默認設置（每個瀏覽器不同，並且無法通過 CSS 設置樣式）或我們的自定義反饋樣式以及額外的 HTML 和 CSS。
setCustomValidity您可以在 JavaScript 中提供自定義有效性消息。

考慮到這一點，請考慮以下演示，了解我們的自定義表單驗證樣式、可選的服務器端類和瀏覽器默認設置。

自定義樣式

對於自定義 Bootstrap 表單驗證消息，您需要將novalidate布爾屬性添加到您的<form>. 這將禁用瀏覽器默認反饋工具提示，但仍提供對 JavaScript 中表單驗證 API 的訪問。嘗試提交以下表格；我們的 JavaScript 將攔截提交按鈕並將反饋轉發給您。嘗試提交時，您會看到應用於表單控件的:invalid和樣式。:valid

自定義反饋樣式應用自定義顏色、邊框、焦點樣式和背景圖標以更好地傳達反饋。s 的背景圖標<select>僅適用於.custom-select，而不適用於.form-control。

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

瀏覽器默認值

對自定義驗證反饋消息或編寫 JavaScript 來更改表單行為不感興趣？一切都好，您可以使用瀏覽器默認設置。嘗試提交下面的表格。根據您的瀏覽器和操作系統，您會看到略有不同的反饋風格。

雖然這些反饋樣式無法使用 CSS 設置樣式，但您仍然可以通過 JavaScript 自定義反饋文本。

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

服務器端

我們建議使用客戶端驗證，但如果您需要服務器端驗證，您可以使用.is-invalid和指示無效和有效的表單字段.is-valid。請注意，.invalid-feedback這些類也支持。

對於無效字段，請確保無效的反饋/錯誤消息使用與相關的表單字段相關聯aria-describedby。此屬性允許id引用多個，以防字段已指向其他表單文本。

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

支持的元素

驗證樣式可用於以下表單控件和組件：

<input>s 和<textarea>s 與.form-control
<select>s.form-control或.custom-select
.form-checks
.custom-checkboxs 和.custom-radios
.custom-file

文本區域

請在文本區域中輸入消息。

選中此自定義復選框

無效反饋文本示例

切換此自定義收音機

或切換此其他自定義收音機

更多示例無效反饋文本

示例無效的自定義選擇反饋

選擇文件...

示例無效的自定義文件反饋

無效輸入組反饋示例

選項

無效輸入組反饋示例

選擇文件...

無效輸入組反饋示例

<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

工具提示

如果您的表單佈局允許，您可以將類交換.{valid|invalid}-feedback為.{valid|invalid}-tooltip類以在樣式工具提示中顯示驗證反饋。確保有一個父position: relative級用於工具提示定位。在下面的示例中，我們的列類已經具有此功能，但您的項目可能需要其他設置。

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

定制

驗證狀態可以通過 Sass 與$form-validation-states地圖進行自定義。位於我們的_variables.scss文件中，這個 Sass 映射被循環生成默認valid/invalid驗證狀態。包括用於自定義每個州的顏色和圖標的嵌套地圖。雖然瀏覽器不支持其他狀態，但使用自定義樣式的用戶可以輕鬆添加更複雜的表單反饋。

請注意，我們不建議在不修改form-validation-statemixin 的情況下自定義這些值。

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

輸入組驗證

要通過驗證檢測輸入組內哪些元素需要圓角，輸入組需要一個額外的.has-validation類。

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

請選擇用戶名。

自定義表格

要獲得更多自定義和跨瀏覽器一致性，請使用我們完全自定義的表單元素來替換瀏覽器默認值。它們建立在語義和可訪問標記之上，因此它們是任何默認表單控件的可靠替代品。

複選框和收音機

每個複選框和單選框<input>以及<label>配對都包含在 a<div>中以創建我們的自定義控件。從結構上講，這與我們的默認方法相同.form-check。

我們對所有狀態使用同級選擇器 ( ~) 來正確設置自定義表單指示器的樣式。當與類結合時，我們還可以根據的狀態為每個項目設置文本樣式。<input>:checked.custom-control-label<input>

<input>我們用和隱藏默認值opacity並使用.custom-control-label來構建一個新的自定義表單指示器。不幸的是，我們不能僅從構建自定義元素，因為 CSS不適用於該元素。::before::after<input>content

在選中狀態下，我們使用來自Open Iconic的base64 嵌入式 SVG 圖標。這為我們提供了跨瀏覽器和設備的樣式和定位的最佳控制。

複選框

選中此自定義復選框

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

當通過 JavaScript 手動設置時，自定義復選框也可以使用:indeterminate偽類（沒有可用的 HTML 屬性來指定它）。

選中此自定義復選框

如果您使用的是 jQuery，那麼這樣的內容就足夠了：

$('.your-checkbox').prop('indeterminate', true)

收音機

切換此自定義收音機

或切換此其他自定義收音機

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

排隊

切換此自定義收音機

或切換此其他自定義收音機

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

已禁用

自定義復選框和收音機也可以禁用。將disabled布爾屬性添加到中<input>，自定義指標和標籤描述將自動設置樣式。

選中此自定義復選框

切換此自定義收音機

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

開關

開關具有自定義復選框的標記，但使用.custom-switch該類來呈現切換開關。開關也支持該disabled屬性。

切換此開關元件

禁用的開關元件

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

自定義<select>菜單只需要一個自定義類，.custom-select即可觸發自定義樣式。自定義樣式僅限於s 的初始外觀，並且由於瀏覽器限制<select>無法修改s。<option>

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

您還可以從小型和大型自定義選擇中進行選擇，以匹配我們類似大小的文本輸入。

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

multiple還支持該屬性：

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

作為size屬性：

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

範圍

<input type="range">使用.創建自定義控件.custom-range。軌道（背景）和拇指（值）的樣式都在瀏覽器中顯示相同。由於只有 IE 和 Firefox 支持從拇指的左側或右側“填充”其軌跡以直觀地指示進度，因此我們目前不支持它。

示例範圍

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

min範圍輸入分別具有和max—0和的隱含值100。min您可以為使用和max屬性的那些指定新值。

示例範圍

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

默認情況下，範圍輸入“捕捉”到整數值。要更改此設置，您可以指定一個step值。在下面的示例中，我們使用step="0.5".

示例範圍

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

文件瀏覽器

動畫自定義文件輸入的推薦插件： bs-custom-file-input，這就是我們目前在我們的文檔中使用的。

文件輸入是最複雜的，如果您想將它們與功能選擇文件...和選定的文件名文本掛鉤，則需要額外的 JavaScript。

選擇文件

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

<input>我們通過隱藏默認文件opacity，而是設置<label>. 按鈕生成並使用定位::after。最後，我們聲明一個widthandheight以<input>保證周圍內容的適當間距。

使用 SCSS 翻譯或自定義字符串

:lang()偽類用於允許將“瀏覽”文本翻譯成其他語言。$custom-file-text使用相關的語言標籤和本地化字符串覆蓋或添加條目到Sass 變量。英文字符串可以用同樣的方式定制。例如，以下是添加西班牙語翻譯的方法（西班牙語的語言代碼是es）：

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

以下是lang(es)針對西班牙語翻譯的自定義文件輸入的實際操作：

選擇檔案

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

您需要正確設置文檔（或其子樹）的語言才能顯示正確的文本。這可以使用元素上的lang屬性或 HTTP 標頭以及其他方法來完成。<html>Content-Language

使用 HTML 翻譯或自定義字符串

Bootstrap 還提供了一種方法來翻譯 HTML 中的“瀏覽”文本，該data-browse屬性可以添加到自定義輸入標籤中（例如荷蘭語）：

Voeg je 文件腳趾

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>

形式

概述

表單控件

漿紗

只讀

只讀純文本

範圍輸入

複選框和收音機

默認（堆疊）

排隊

無標籤

佈局

表單組

表格網格

表格行

水平形式

水平表單標籤大小

列大小

自動調整大小

內聯表單

隱藏標籤的替代品

幫助文本

將幫助文本與表單控件相關聯

禁用表格

錨點警告

跨瀏覽器兼容性

驗證

這個怎麼運作

自定義樣式

瀏覽器默認值

服務器端

支持的元素

工具提示

定制

輸入組驗證

自定義表格

複選框和收音機

複選框

收音機

排隊

已禁用

開關

選擇菜單

範圍

文件瀏覽器

使用 SCSS 翻譯或自定義字符串

使用 HTML 翻譯或自定義字符串