【Bootstrap V4系列】学习入门教程之 组件-表单（Forms）

表单（Forms）

用于创建各种表单的表单控件样式、布局选项和自定义组件的示例和使用指南。

一、Overview

Bootstrap的表单控件通过类扩展了我们重新启动的表单样式。使用这些类可以选择进入其自定义显示，以便在浏览器和设备之间实现更一致的渲染。

确保在所有输入上使用适当的类型属性（例如，电子邮件地址为电子邮件，数字信息为数字），以利用电子邮件验证、数字选择等较新的输入控件。

这里有一个快速的例子来演示Bootstrap的表单样式。

<!--Overview-->
<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>

页面展示效果：

二、Form controls 表单控件

文本形式控件（如<input>s、<select>s和<textarea>s）使用.form-control 控件类进行样式设置。包括一般外观、焦点状态、大小等样式。

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </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-control控件替换为.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>

页面展示效果：

2.1 Sizing 尺寸

使用.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">

页面展示效果：

2.2 Readonly 只读

在输入上添加readonly 只读布尔属性，以防止修改输入的值。只读输入看起来更轻（就像禁用输入一样），但保留标准光标。

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

页面展示效果：

2.3 Readonly plain text 只读纯文本

如果你想让表单中的<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@example.com">
    </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@example.com">
  </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>

页面展示效果：

三、Checkboxes and radios 复选框和单选框

默认复选框和单选在.form-check的帮助下得到了改进，它是一个用于两种输入类型的类，可以改进其HTML元素的布局和行为。复选框用于选择列表中的一个或多个选项，而单选框用于从多个选项中选择一个。

支持禁用复选框和单选框。disabled属性将应用较浅的颜色来帮助指示输入的状态。

复选框和单选按钮支持基于HTML的表单验证，并提供简洁、可访问的标签。因此，我们的<input>s和<label>s是兄弟元素，而不是<label>中的<input>。这稍显冗长，因为您必须指定id和for属性来关联<input>和<label>。

3.1 Default (stacked) 默认值（堆叠）

默认情况下，任何数量的直接同级复选框和单选框都将垂直堆叠，并与.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>

页面展示效果：

3.2 Inline 内联

通过将.form-check-inline 复选框内联到任何 .form-check复选标记中，将复选框或单选项分组到同一水平行上。

<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>

页面展示效果：

<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>

页面展示效果：