Bootstrap4 表单控件

在 Bootstrap 4 中，表单控件包括多种常见的输入元素，如文本框、密码框、复选框、单选框、选择框、文件上传、文本区域等。Bootstrap 4 提供了许多样式和功能，可以帮助我们快速创建各种类型的表单控件。

1. 文本框（Text Input）

文本框是最常见的表单控件，用于获取单行文本输入。

示例：

<div class="form-group">
  <label for="exampleInputText">Text input</label>
  <input type="text" class="form-control" id="exampleInputText" placeholder="Enter text">
</div>

解释：

form-control：使输入框获得 Bootstrap 4 的样式。

2. 密码框（Password Input）

密码框用于输入隐私信息，文本会被掩码处理。

示例：

<div class="form-group">
  <label for="exampleInputPassword">Password</label>
  <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
</div>

解释：

type="password"：设置输入框为密码类型，显示为圆点（或星号）。

3. 电子邮件输入框（Email Input）

用于输入电子邮件地址，通常包括客户端验证。

示例：

<div class="form-group">
  <label for="exampleInputEmail">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email">
</div>

解释：

type="email"：指定输入框为电子邮件地址类型，浏览器会自动验证格式。

4. 文本区域（Textarea）

文本区域用于多行文本输入。

示例：

<div class="form-group">
  <label for="exampleTextarea">Example textarea</label>
  <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>

解释：

textarea：多行文本输入框。
rows="3"：设置文本区域的行数。

5. 选择框（Select）

选择框允许用户从预定义的选项中进行选择。

示例：

<div class="form-group">
  <label for="exampleSelect">Example select</label>
  <select class="form-control" id="exampleSelect">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

解释：

select：用于创建下拉菜单。
form-control：使选择框具有一致的外观。

6. 复选框（Checkbox）

复选框允许用户进行多项选择。

示例：

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="exampleCheck1">
  <label class="form-check-label" for="exampleCheck1">
    Check this checkbox
  </label>
</div>

解释：

form-check-input：为复选框添加的样式类。
form-check-label：为复选框标签添加的样式类。

7. 单选框（Radio Button）

单选框允许用户从一组选项中选择一个。

示例：

<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">
    Option 1
  </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">
    Option 2
  </label>
</div>

解释：

form-check-input：为单选框添加的样式类。
form-check-label：为单选框标签添加的样式类。
name：保证单选框是互斥的（同一组内只能选择一个选项）。

8. 文件上传（File Upload）

用于上传文件。

示例：

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

解释：

form-control-file：为文件输入框添加的样式类。

9. 禁用表单控件

可以禁用表单控件，使其不可交互。

示例：

<div class="form-group">
  <label for="exampleInputDisabled">Disabled input</label>
  <input type="text" class="form-control" id="exampleInputDisabled" placeholder="Disabled input" disabled>
</div>

解释：

disabled：禁用该控件，用户无法与之交互。

10. 表单控件的大小

可以通过添加 form-control-lg 或 form-control-sm 类来调整表单控件的大小。

示例：

<div class="form-group">
  <label for="exampleInputLarge">Large input</label>
  <input type="text" class="form-control form-control-lg" id="exampleInputLarge" placeholder="Large input">
</div>
<div class="form-group">
  <label for="exampleInputSmall">Small input</label>
  <input type="text" class="form-control form-control-sm" id="exampleInputSmall" placeholder="Small input">
</div>

解释：

form-control-lg：增大输入框的大小。
form-control-sm：缩小输入框的大小。

11. 表单控件验证

Bootstrap 4 提供了内置的表单验证功能，可以用 is-valid 和 is-invalid 类来表示输入的合法性。

示例：

<div class="form-group">
  <label for="exampleInputEmail">Email address</label>
  <input type="email" class="form-control is-invalid" id="exampleInputEmail" placeholder="Enter email" required>
  <div class="invalid-feedback">
    Please provide a valid email.
  </div>
</div>

解释：

is-valid：表示输入有效。
is-invalid：表示输入无效。
invalid-feedback：显示错误消息。

12. 表单控件的自定义

除了基础的输入框、复选框等，Bootstrap 4 还提供了一些自定义表单控件，如 自定义复选框、自定义单选框 等。

示例：

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

解释：

form-check-inline：使复选框或单选框以水平布局显示。

总结

form-control：用于为大多数表单控件添加基础样式。
form-group：用于包装表单元素，并保证它们有适当的间距和对齐。
form-check-input、form-check-label：用于样式化复选框和单选框。
form-control-lg、form-control-sm：用于调整表单控件的大小。
is-valid、is-invalid：用于表示表单控件的验证状态。

Bootstrap 4 的表单控件非常灵活，能够适应不同的需求和布局。通过简单的样式类，你可以快速构建漂亮且响应式的表单。