Bootstrap4 表單控件

Bootstrap4 支持以下表單控件：

  • input
  • textarea
  • checkbox
  • radio
  • select

Bootstrap Input

Bootstrap 支持所有的 HTML5 輸入類型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。

注意：: 如果 input 的 type 屬性未正確聲明，輸入框的樣式將不會顯示。

以下實例使用兩個 input 元素，一個是 text，一個是 password ：

實例

<div class="form-group"> <label for="usr">用戶名:</label> <input type="text" class="form-control" id="usr"> </div> <div class="form-group"> <label for="pwd">密碼:</label> <input type="password" class="form-control" id="pwd"> </div>

Bootstrap textarea

以下實例演示了 textarea 的樣式。

實例

<div class="form-group"> <label for="comment">評論:</label> <textarea class="form-control" rows="5" id="comment"></textarea> </div>

Bootstrap 複選框(checkbox)

複選框用於讓用戶從一系列預設置的選項中進行選擇，可以選一個或多個。

以下實例包含了三個選項。最後一個是禁用的：

實例

<div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 1 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 2 </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" disabled>Option 3 </label> </div>

使用 .form-check-inline 類可以讓選項顯示在同一行上：

實例

<div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 1 </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 2 </label> </div> <div class="form-check form-check-inline disabled"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" disabled>Option 3 </label> </div>

Bootstrap 單選框(Radio)

單選框用於讓用戶從一系列預設置的選項中進行選擇，只能選一個。

以下實例包含了三個選項。最後一個是禁用的：

實例

<div class="radio"> <label><input type="radio" name="optradio">Option 1</label> </div> <div class="radio"> <label><input type="radio" name="optradio">Option 2</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio" disabled>Option 3</label> </div>

使用 .radio-inline 類可以讓選項顯示在同一行上：

實例

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label> <label class="radio-inline"><input type="radio" name="optradio">Option 2</label> <label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

Bootstrap select 下拉菜單

當您想讓用戶從多個選項中進行選擇，但是默認情況下只能選擇一個選項時，則使用選擇框。

以下實例包含了兩個下拉菜單：

實例

<div class="form-group"> <label for="sel1">下拉菜單:</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div>