bootstrap

支持的表单控件

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

输入框

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

<form role="form">
  <div class="form-group">
    <label for="name">标签</label>
    <input type="text" class="form-control" placeholder="文本输入">
  </div>
 </form>

　　文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

　　复选框（Checkbox）和单选框（Radio）

复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

下面的实例演示了这两种类型（默认和内联）：

<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
  <label>
    <input type="checkbox" value="">选项 1
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" value="">选项 2
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>选项 1
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
  </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1">选项 1
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox2" value="option2">选项 2
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox3" value="option3">选项 3
  </label>
  <label class="checkbox-inline">
    <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>选项 1
  </label>
  <label class="checkbox-inline">
    <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">选项 2
  </label>
</div>

　　选择框（Select）

当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。

使用 <select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。
使用 multiple=”multiple” 允许用户选择多个选项。

下面的实例演示了这两种类型（select 和 multiple）：

<form role="form">
  <div class="form-group">
    <label for="name">选择列表</label>
    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <label for="name">可多选的选择列表</label>
    <select multiple class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

posted on 2020-11-30 13:08 季昂阅读(94) 评论(0) 编辑收藏举报