详解Bootstrap中的表单

Bootstrap 是一种流行的 CSS 框架，用于设计和构建现代 Web 应用程序。它提供了众多可重用的组件，特别是在表单设计方面很有用。在本文中，我们将深入研究 Bootstrap 中表单的设计。

一、表单介绍

表单是一个用于收集用户输入的 HTML 元素和控件集合。在 Web 开发中，表单用于收集各种信息，例如订阅、注册和登录等。在 Bootstrap 中，通过使用表单控件和表单组件，开发人员可以轻松快速地创建各种表单。

二、表单控件和表单组件

在 Bootstrap 中，表单由表单控件和表单组件组成，可以创建任何类型的表单。表单控件使用 HTML 元素，例如 <input>、<textarea>、<checkbox> 和 <radio>。 Bootstrap 表单组件是表单附加的特殊样式。

例如：

<div class="form-group">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>

在这个例子中，我们使用了表单控件 <input> 元素。然后，我们将这个控件包含到一个表单组件中，用于分组和样式化。

三、Bootstrap 中常用的表单控件

Bootstrap 支持各种表单控件，包括文本框、复选框、单选按钮、下拉列表和日期选择器等。

1. 文本框

文本框是 Bootstrap 中最常见的表单控件，用于接受用户输入的文本信息。在 Bootstrap 中，文本框可以用 <input> 标记实现，设置 type 属性值为 "text" 即可。

例如：

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

这里，我们使用了表单控件 <input> 跟 type 属性值为 "password"，使输入的密码不被直接显示，而是以点或者星号等符号代替。

2. 复选框和单选按钮

复选框和单选按钮是表示二选一或多选一的选择控件。在 Bootstrap 中，它们可以用 <input> 标记实现，设置 type 属性值为 "checkbox" （复选框）和 "radio" （单选按钮）即可。

例如：

<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="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

3. 下拉列表

下拉列表是一种常见的控件，用于从预定义的选项列表中选择一个值。在 Bootstrap 中，可以使用 <select> 标记创建下拉列表。

例如：

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

4. 日期选择器

日期选择器是一种输入日期的控件，在 Bootstrap 中可以使用插件实现。 Bootstrap 通常与日期选择器插件集成得很好，其中最受欢迎的是 Bootstrap-datepicker。

例如：

<div class="form-group">
  <label for="example-datepicker">Date</label>
  <div class="input-group date">
    <input type="text" class="form-control">
    <span class="input-group-addon">
      <i class="glyphicon glyphicon-th"></i>
    </span>
  </div>
</div>

在这个例子中，我们使用了 Bootstrap-datepicker 插件，在文本框周围包装了 <div> 元素和添加元素，形成了一个集成了日期选择器的正常文本框。

四、表单布局

在 HTML 中，表单布局可以使用表格布局或其他方法来实现。但是在 Bootstrap 中，使用网格布局可以使表单布局更容易。

Bootstrap 网格布局由一系列行和列组成，可以将表单各部分分组并在页面中定位。它是响应式的，可以根据不同的屏幕大小自动调整布局，使表单更易于使用。

下面是一个简单的示例，说明如何使用 Bootstrap 网格布局：

<form>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="exampleInputName1">Name</label>
        <input type="text" class="form-control" id="exampleInputName1" placeholder="Enter name">
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

在这个例子中，我们使用了 Bootstrap 网格布局将表单分为两列和一行。每个输入控件用一个 <div> 元素包装，然后添加了必要的表单控件和表单组件。

五、表单验证

表单验证是一种验证表单输入是否正确的方法。在 Bootstrap 中，表单验证可以使用插件或手动编程实现。

使用 Bootstrap 验证插件，可以轻松添加和验证表单字段。示例代码如下：

<form id="contactForm" method="post" novalidate="novalidate">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" name="name" required data-msg="Please enter your name" placeholder="Enter your name">
    <div class="validation"></div>
  </div>
  <div class="form-group">
    <label for="email">Email Address</label>
    <input type="email" class="form-control" id="email" name="email" required data-msg="Please enter your email" placeholder="Enter your email">
    <div class="validation"></div>
  </div>
  <div class="form-group">
    <label for="message">Message</label>
    <textarea class="form-control" id="message" name="message" rows="5" required data-msg="Please enter your message" placeholder="Enter your message"></textarea>
    <div class="validation"></div>
  </div>
  <div class="text-center"><button type="submit" class="btn btn-primary btn-lg" style="margin-top:20px">Send Message</button></div>
</form>

这里我们使用了表单验证插件。将 data-msg 属性添加到每个输入窗格中，以指定错误消息。插件将自动验证输入内容，并在不正确的情况下显示错误消息。

结论

Bootstrap 提供了极大的方便，使我们可以轻松快速地创建现代和互动的表单前端。在实现表单设计的时候，我们要多多了解和使用 Bootstrap 的表单控件和表单组件，以及表单布局和表单验证等内容，以实现一个高质量的表单设计。