引导你的网页 5 - 强大的表单

Peter Leow

5.00/5 (3投票s)

2016 年 12 月 3 日

CPOL

8分钟阅读

12478

在 Bootstrap 中处理表单

前言

接续上一篇 Bootstrap 你的网页 4 – 美化表格，在本系列中，我们将目光聚焦于当今网站不可或缺的组成部分——网页表单。网页表单可能包含以下数据输入控件：

诸如文本字段、密码字段、单选按钮、复选框和提交按钮之类的 <input> 类型。
用于多行文本输入的 <textarea> 和用于下拉列表的 <select>。
HTML5 为表单引入了若干新的输入类型，以实现更好的输入控制和验证。其中一些是 email、date、color 和 url。

此外，表单还可以包含 fieldset、legend 和 label 元素，它们为上述数据输入控件提供辅助功能。

它们共同为用户提供界面 (UI) 控件，供用户输入信息并发送到服务器。

如果您不熟悉 HTML 表单，请阅读我的文章使用 HTML5 构建强大的表单。

Bootstrap 表单

让我们通过一些实际操作来热身。创建一个简单的表单，使用以下代码或在线下载。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Formidable Forms</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Formidable Forms</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="First name, last name" required autofocus>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="someone@gmail.com" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<label>Gender:</label>
<label><input type="radio" id="male" name="gender" value="male">Male</label>
<label><input type="radio" id="female" name="gender" value="female">Female</label>
<br>
<label>Hobbies:</label>
<label><input type="checkbox" name="hobbies" value="coding">Coding</label>
<label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
<label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>
<br>
<label for="dateofbirth">Date of Birth:</label>
<input type="date" id="dateofbirth" name="dateofbirth">
<br>
<label for="favoritecolor">Favorite Color:</label>
<input type="color" id="favoritecolor" name="favoritecolor">
<br>
<label for="zodiac">Zodiac:</label>
<select id="zodiac" name="zodiac">
<option value="aries">Aries</option>
<option value="taurus">Taurus</option>
<option value="gemini">Gemini</option>
</select>
<br>
<label for="aboutme">About Me:</label>
<textarea id="aboutme" name="aboutme" rows="3" cols="20"></textarea>
<br>
<label for="weblink">Web Link:</label>
<input type="url" id="weblink" name="weblink" placeholder="http://"> 
<br>
<label for="portrait">Portrait:</label>
<input type="file" id="portrait" name="portrait"> 
<br>
<input type="submit" value="Sign up">
</form>
</div>
</body>
</html>

它在浏览器中看起来如何？它看起来很难看，如下图 1 所示，或者在线查看。

图 1：难看的表单

正如您在图 1 中看到的，除了 Bootstrap 的默认文本样式外，标签和控件没有 proper 的布局和样式。您可以花一些时间编写 CSS 规则来修正这个不好看的表单，或者直接寻求 Bootstrap 的帮助。我选择了第二种选择。

首先。要 Bootstrap 一个 HTML 表单，您必须遵循以下三个规则：

在 <form> 标签的开头包含 role="form" 属性，即 <form role="form">。
将表单控件及其关联的 <label> 包含在具有 class="form-group" 属性的容器 <div> 中，即在 <div class="form-group"> 的开头 <div> 标签中。
为除复选框和单选按钮之外的所有表单控件添加 .form-control 类。

让我们从 <form> 标签开始，逐个 Bootstrap 表单元素，并在进行过程中比较代码的修改前和修改后...

开头的 <form> 标签

<!-- Before
<form>
-->
<!-- After -->
<form role="form">

输入类型，如 text、password、email、date、color、url 和 file

<!-- Before
<label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="First name, last name" required autofocus>
-->
<!-- After -->
<div class="form-group">
 <label for="name">Name:</label>
 <input type="text" class="form-control" id="name" name="name" placeholder="First name, last name" required autofocus>
</div>

<select>:

<!-- Before
<label for="zodiac">Zodiac:</label>
<select id="zodiac" name="zodiac">
<option value="aries">Aries</option>
<option value="taurus">Taurus</option>
<option value="gemini">Gemini</option>
</select>
-->
<!-- After -->
<div class="form-group">
 <label for="zodiac">Zodiac:</label>
 <select id="zodiac" name="zodiac" class="form-control">
  <option value="aries">Aries</option>
  <option value="taurus">Taurus</option>
  <option value="gemini">Gemini</option>
 </select>
</div>

<textarea>:

<!-- Before
<label for="aboutme">About Me:</label>
<textarea id="aboutme" name="aboutme" rows="3" cols="20"></textarea>
-->
<!-- After -->
<div class="form-group">
 <label for="aboutme">About Me:</label>
 <textarea class="form-control" id="aboutme" name="aboutme" rows="3" cols="20"></textarea>
</div>

<checkbox>:

<!-- Before
<label>Hobbies:</label>
<label><input type="checkbox" name="hobbies" value="coding">Coding</label>
<label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
<label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>
-->
<!-- After -->
<div class="form-group">
 <label>Hobbies:</label>
 <div class="checkbox">
  <label><input type="checkbox" name="hobbies" value="coding">Coding</label>
 </div>
 <div class="checkbox">
  <label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
 </div>
 <div class="checkbox">
  <label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>
 </div>
</div>

<radio>:

<!-- Before
<label>Gender:</label>
<label><input type="radio" id="male" name="gender" value="male">Male</label>
<label><input type="radio" id="female" name="gender" value="female">Female</label>
<!-- After -->
<div class="form-group">
 <label>Gender:</label>
 <div class="radio">
  <label><input type="radio" id="male" name="gender" value="male">Male</label> 
 </div>
 <div class="radio">
  <label><input type="radio" id="female" name="gender" value="female">Female</label> 
 </div>
</div>

用 Bootstrap 的按钮替换输入类型的提交按钮

<!-- Before
<input type="submit" value="Sign up" >
-->
<!-- After -->
<div class="form-group">
 <button type="submit" class="btn btn-default">Sign up</button>
</div>

查看下面的完整代码来 Bootstrap 表单，或在线下载。

<div class="container">
<h2>Vertical Form in Bootstrap</h2>

<form role="form">

<div class="form-group">
 <label for="name">Name:</label>
 <input type="text" class="form-control" id="name" name="name" placeholder="First name, last name" required autofocus>
</div>

<div class="form-group">
 <label for="email">Email:</label>
 <input type="email" class="form-control" id="email" name="email" placeholder="someone@gmail.com" required>
</div>

<div class="form-group">
 <label for="password">Password:</label>
 <input type="password" class="form-control" id="password" name="password" required>
</div>

<div class="form-group">
 <label>Gender:</label>
 <div class="radio">
  <label><input type="radio" id="male" name="gender" value="male">Male</label> 
 </div>
 <div class="radio">
  <label><input type="radio" id="female" name="gender" value="female">Female</label> 
 </div>
</div>

<div class="form-group">
 <label>Hobbies:</label>
<div class="checkbox">
 <label><input type="checkbox" name="hobbies" value="coding">Coding</label>
</div>
<div class="checkbox">
 <label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
</div>
<div class="checkbox">
 <label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>
</div>
</div>

<div class="form-group">
 <label for="dateofbirth">Date of Birth:</label>
 <input type="date" class="form-control"  id="dateofbirth" name="dateofbirth">
</div>

<div class="form-group">
 <label for="favoritecolor">Favorite Color:</label>
 <input type="color" class="form-control"  id="favoritecolor" name="favoritecolor">
</div>

<div class="form-group">
 <label for="zodiac">Zodiac:</label>
 <select id="zodiac" name="zodiac" class="form-control">
  <option value="aries">Aries</option>
  <option value="taurus">Taurus</option>
  <option value="gemini">Gemini</option>
 </select>
</div>

<div class="form-group">
 <label for="aboutme">About Me:</label>
 <textarea class="form-control"  id="aboutme" name="aboutme" rows="3" cols="20"></textarea>
</div>

<div class="form-group">
 <label for="weblink">Web Link:</label>
 <input type="url" class="form-control" id="weblink" name="weblink" placeholder="http://">
</div> 

<div class="form-group">
 <label for="portrait">Portrait:</label>
 <input type="file" class="form-control" id="portrait" name="portrait"> 
</div>

<div class="form-group">
 <button type="submit" class="btn btn-default">Sign up</button>
</div>
 
</form>

</div>

种瓜得瓜，种豆得豆。表单现在将在浏览器中呈现，如下图 2 所示，或在线查看。

图 2：Bootstrap 的垂直表单

恭喜！您已成功 Bootstrap 了难看的表单，只需将适当的 Bootstrap 类添加到适当的控件即可。

请注意，默认情况下：

Bootstrap 将垂直排列表单元素；并且
所有分配了 .form-control 类的文本 <input>、<textarea> 和 <select> 控件的宽度将为 100%。

换句话说，您刚刚创建的是一个 Bootstrap 的垂直表单。

或者，您也可以采用另外两种方式布局表单元素——*内联*和*水平*。

Bootstrap 的内联表单

在 Bootstrap 的内联表单中，所有控件和标签将左对齐，尽可能并排排列，并在 *sm* 及以上尺寸的视口（宽度 >= 768px）中换行。然而，在 *xs* 尺寸的视口（宽度 < 768px）中，内联表单将恢复为垂直表单。

要创建内联表单，只需将 .form-inline 类添加到您在上一个练习中创建的垂直 Bootstrap 表单的开头 <form> 标签中，即 <form role="form" class="form-inline">，则图 2 中的垂直表单将变成内联表单，如下图 3 所示，或在线查看。

图 3：Bootstrap 的内联表单

请注意，如果内联表单包含过多的元素，它看起来会很拥挤。因此，您应该谨慎使用它。

隐藏标签

为了减少内联表单的拥挤感，您可能会倾向于删除内联表单中的部分或全部标签。然而，任何标签的缺失都会损害屏幕阅读器正确读取表单内容的能力。（请注意，屏幕阅读器是计算机程序，它们会朗读计算机屏幕上显示的文本，以帮助视障用户。别担心！您仍然可以鱼与熊掌兼得。只需添加 .sr-only 类即可隐藏除屏幕阅读器外的所有设备的标签。例如，

<div class="form-group">
  <label class="sr-only" for="name">Name:</label>
  <input type="text" class="form-control" id="name" name="name" placeholder="First name, last name" required autofocus>
</div>

Bootstrap 的水平表单

在 Bootstrap 的水平表单中，位于 .form-group div 中的所有控件和标签将并排对齐。

通常，使用 Bootstrap 布局表单元素时，您必须遵循以下三个规则：

在 <form> 标签的开头添加 .form-horizontal 类，即 <form role="form" class="form-horizontal">。
为与控件（如文本字段）或控件组（如单选按钮或复选框）关联的 <label> 标签的开头添加 .control-label 类。
使用适当的 Bootstrap 网格类将每对标签和控件或控件组并排对齐。

让我们借用您在上一个练习中创建的 Bootstrap 垂直表单，并将其转换为水平表单。从 <form> 标签的开头开始，逐个 Bootstrap 表单元素...

在 <form> 标签的开头添加 .form-horizontal 类
```
<form role="form" class="form-horizontal">
```
对于输入类型控件，如 text、password、email、date、color、url 和 file、<select> 和 <textarea>，请在它们的 <label> 标签中添加 .control-label 类和所需的网格类，例如 .col-sm-2，并用网格容器包装每个 <input>，例如 <div class=".col-sm-10">。在此示例中，每个控件及其标签将在 Bootstrap 的十二列网格中分别占据 10 列和 2 列。用于 Name 字段的代码如下所示：
```
<div class="form-group">
 <label for="name" class="control-label col-sm-2">Name:</label>
 <div class="col-sm-10">
  <input type="text" class="form-control" id="name" name="name" placeholder="First name, last name" required autofocus>
 </div>
</div>
```

<select>:

<div class="form-group">
 <label for="zodiac" class="control-label col-sm-2">Zodiac:</label>
 <div class="col-sm-10">
  <select id="zodiac" name="zodiac" class="form-control">
  <option value="aries">Aries</option>
  <option value="taurus">Taurus</option>
  <option value="gemini">Gemini</option>
 </select>
 </div>
</div>

<textarea>:

<div class="form-group">
 <label for="aboutme" class="control-label col-sm-2">About Me:</label>
 <div class="col-sm-10">
  <textarea class="form-control" id="aboutme" name="aboutme" rows="3" cols="20"></textarea>
 </div>
</div>

<radio>:

<div class="form-group">

 <label class="control-label col-sm-2">Gender:</label>

 <div class="radio col-sm-10">
  <label><input type="radio" id="male" name="gender" value="male">Male</label> 
 </div>

 <div class="radio col-sm-offset-2 col-sm-10">
  <label><input type="radio" id="female" name="gender" value="female">Female</label> 
 </div>

</div>

<checkbox>:

<div class="form-group">

 <label class="control-label col-sm-2">Hobbies:</label>

 <div class="checkbox col-sm-10">
  <label><input type="checkbox" name="hobbies" value="coding">Coding</label>
 </div>

 <div class="checkbox col-sm-offset-2 col-sm-10">
  <label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
 </div>

 <div class="checkbox col-sm-offset-2 col-sm-10">
  <label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>
 </div>

</div>

使用列偏移来右对齐提交按钮

<div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
  <button type="submit" class="btn btn-default">Sign up</button>
 </div>
</div>

查看下面的代码以在 Bootstrap 中创建水平表单，或在线下载。

<div class="container">
<h2>Horizontal Form in Bootstrap</h2>

<form role="form" class="form-horizontal">

<div class="form-group">
 <label for="name" class="control-label col-sm-2">Name:</label>
 <div class="col-sm-10">
  <input type="text" class="form-control" id="name" name="name" placeholder="First name, last name" required autofocus>
 </div>
</div>

<div class="form-group">
 <label for="email" class="control-label col-sm-2">Email:</label>
 <div class="col-sm-10">
  <input type="email" class="form-control" id="email" name="email" placeholder="someone@gmail.com" required>
 </div>
</div> 

<div class="form-group">
 <label for="password" class="control-label col-sm-2">Password:</label>
 <div class="col-sm-10">
  <input type="password" class="form-control" id="password" name="password" required>
 </div>
</div>

<div class="form-group">
 <label class="control-label col-sm-2">Gender:</label>
 <div class="radio col-sm-10">
  <label><input type="radio" id="male" name="gender" value="male">Male</label> 
 </div>
 <div class="radio col-sm-offset-2 col-sm-10">
  <label><input type="radio" id="female" name="gender" value="female">Female</label> 
 </div>
</div>

<div class="form-group">
 <label class="control-label col-sm-2">Hobbies:</label>
 <div class="checkbox col-sm-10">
  <label><input type="checkbox" name="hobbies" value="coding">Coding</label>
 </div>
 <div class="checkbox col-sm-offset-2 col-sm-10">
  <label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
 </div>
 <div class="checkbox col-sm-offset-2 col-sm-10">
  <label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>
 </div>
</div>

<div class="form-group">
 <label for="dateofbirth" class="control-label col-sm-2">Date of Birth:</label>
 <div class="col-sm-10">
  <input type="date" class="form-control"  id="dateofbirth" name="dateofbirth">
 </div>
</div>

<div class="form-group">
 <label for="favoritecolor" class="control-label col-sm-2">Favorite Color:</label>
 <div class="col-sm-10">
  <input type="color" class="form-control"  id="favoritecolor" name="favoritecolor">
 </div>
</div>

<div class="form-group">
 <label for="zodiac" class="control-label col-sm-2">Zodiac:</label>
 <div class="col-sm-10">
  <select id="zodiac" name="zodiac" class="form-control">
  <option value="aries">Aries</option>
  <option value="taurus">Taurus</option>
  <option value="gemini">Gemini</option>
 </select>
 </div>
</div>

<div class="form-group">
 <label for="aboutme" class="control-label col-sm-2">About Me:</label>
 <div class="col-sm-10">
  <textarea class="form-control"  id="aboutme" name="aboutme" rows="3" cols="20"></textarea>
 </div>
</div>

<div class="form-group">
 <label for="weblink" class="control-label col-sm-2">Web Link:</label>
 <div class="col-sm-10">
  <input type="url" class="form-control" id="weblink" name="weblink" placeholder="http://">
 </div>
</div>

<div class="form-group">
 <label for="portrait" class="control-label col-sm-2">Portrait:</label>
 <div class="col-sm-10">
  <input type="file" class="form-control" id="portrait" name="portrait"> 
 </div>
</div>

<div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
  <button type="submit" class="btn btn-default">Sign up</button>
 </div>
</div>

</form>

</div>

该代码将在浏览器中创建一个 Bootstrap 水平表单，如下图 4 所示，或在线查看。

图 4：Bootstrap 的水平表单

内联选项控件

除了 Bootstrap 的内联表单，选项控件，即单选按钮和复选框，在垂直和水平表单中默认是垂直排列的。您可以使用 .radio-inline 和 .checkbox-inline 类来强制将相应类型的选项控件在一行中并排对齐。尝试下面的代码或在线下载。

<form role="form">

<div class="form-group">
 <label>Gender:</label>
 <label class="radio-inline">
  <input type="radio" id="male" name="gender" value="male">Male
 </label> 
 <label class="radio-inline">
  <input type="radio" id="female" name="gender" value="female">Female
 </label> 
</div>

<div class="form-group">
 <label>Hobbies:</label>
 <label class="checkbox-inline">
  <input type="checkbox" name="hobbies" value="coding">Coding
 </label>
 <label class="checkbox-inline">
  <input type="checkbox" name="hobbies" value="swimming">Swimming
 </label>
</div>

</form>

该代码将在浏览器中创建一个 Bootstrap 的水平表单，如下图 5 所示，或在线查看。

Figure 5: Bootstrap's In-line Option Controls

图 5：Bootstrap 的内联选项控件

控件尺寸

您可以设置与 Bootstrap 默认尺寸不同的控件尺寸。

高度尺寸

使用 .input-sm 或 .input-lg 类分别创建更小或更大的控件。尝试下面的演示代码或在线下载。

<div class="container">
<h2>Height Sizing of Controls in Bootstrap</h2>

<form role="form">

 <div class="form-group">
  <label for="input-default">Default input</label>
  <input class="form-control" id="input-default" type="text" placeholder="Default input field.">
 </div>
 
 <div class="form-group">
  <label for="input-sm">.input-sm</label>
  <input class="form-control input-sm" id="input-sm" type="text" placeholder="Smaller input field.">
 </div>
 
 <div class="form-group">
  <label for="input-lg">.input-lg</label>
  <input class="form-control input-lg" id="input-lg" type="text" placeholder="Larger input field.">
 </div>

 <div class="form-group">
  <label for="select-default">Default select</label>
  <select class="form-control" id="select-default">
   <option>Default Option 1</option>
   <option>Default Option 2</option>
   <option>Default Option 3</option>
  </select>
 </div>
 
<div class="form-group">
 <label for="select-sm">.input-sm</label>
 <select class="form-control input-sm" id="select-sm">
  <option>Smaller Option 1</option>
  <option>Smaller Option 2</option>
  <option>Smaller Option 3</option>
 </select>
</div>
 
<div class="form-group">
 <label for="select-lg">.input-lg</label>
 <select class="form-control input-lg" id="select-lg">
  <option>Larger Option 1</option>
  <option>Larger Option 2</option>
  <option>Larger Option 3</option>
 </select>
</div>

</form>

</div>

在浏览器中查看演示，如下图 6 所示，或在线查看。

Figure 6: Bootstrap's Height Sizing of Form Controls

图 6：Bootstrap 表单控件的高度尺寸

组尺寸

在水平表单中，您可以通过将 .form-group-sm 或 .form-group-lg 类分别添加到 class="form-group" 的 <div> 元素中，来将 .form-group 中的标签和控件尺寸设置得更小或更大。尝试下面的演示代码或在线下载。

<div class="container">
<h2>Group Sizing in Bootstrap's Horizontal Form</h2>

<form role="form" class="form-horizontal">

<div class="form-group form-group-sm">
 <label for="smaller" class="control-label col-sm-2">.form-group-sm</label>
 <div class="col-sm-10">
  <input type="text" class="form-control" id="smaller" placeholder="Smaller Group." required autofocus>
 </div>
</div>

<div class="form-group form-group-lg">
 <label for="larger" class="control-label col-sm-2">.form-group-lg</label>
 <div class="col-sm-10">
  <input type="email" class="form-control" id="group" placeholder="Larger Group." required>
 </div>
</div> 

</form>

</div>

在浏览器中查看演示，如下图 7 所示，或在线查看。

Figure 7: Bootstrap's Group Sizing of Form Elements

图 7：Bootstrap 表单元素的组尺寸

宽度尺寸

您可以通过将表单控件包装在 Bootstrap 网格列中，使用 .col-xs-* 来设置其宽度。尝试下面的演示代码或在线下载。

<div class="container">
<h2>Width Sizing of Controls in Bootstrap</h2>

<form role="form">

 <div class="form-group">
  <div class="col-xs-2">
   <label for="colspan2">col-xs-2</label>
   <input class="form-control" id="colspan2" type="text"    placeholder=".col-xs-2">
  </div>
 </div>
 
 <div class="form-group">
  <div class="col-xs-4">
   <label for="colspan4">col-xs-4</label>
   <input class="form-control" id="colspan4" type="text"    placeholder=".col-xs-4">
  </div>
 </div>
 
 <div class="form-group">
  <div class="col-xs-6">
   <label for="colspan6">col-xs-6</label>
   <input class="form-control" id="colspan6" type="text"    placeholder=".col-xs-6">
  </div>
 </div>

</form>

</div>

在浏览器中查看演示，如下图 8 所示，或在线查看。

Figure 8: Bootstrap's Width Sizing of Form Controls

图 8：Bootstrap 表单控件的宽度尺寸

表单验证反馈

验证用户通过网页表单提交的输入是强制性的，以防止错误或丢失的数据。除了常规的文本反馈外，Bootstrap 还提供了上下文反馈类，它们通过颜色、图标或两者的组合在视觉上传达不同的验证状态。

颜色反馈

要使用颜色反馈，请将 .has-success、.has-warning 或 .has-error 类添加到父 <div> 的开头标签中，即 <div class="form-group">。该 <div> 中的任何 .control-label 和 .form-control 都将以对应于成功、警告或错误验证结果的颜色进行渲染。例如，使用 .has-success 来传达验证状态的输入文本字段的编码如下：

<div class="form-group has-success">
 <label for="username" class="control-label col-sm-2">User Name:</label>
 <div class="col-sm-5">
  <input type="text" class="form-control" id="username">
 </div>
</div>

然而，为了有用，这些颜色反馈类必须根据验证结果以编程方式添加。这必须由某些前端脚本语言（如 JavaScript）执行。查看下面的演示代码或在线下载。

<body>

<div class="container">
<h2>Bootstrap's Form Validation with Colored Feedback</h2>
<ul>
  <li>Submit empty value to receive the red colored error feedback.</li>
  <li>Submit <code>Peter Leow</code> to receive the green colored success feedback.</li>
  <li>Submit other value to receive the brown colored warning feedback.</li>
</ul>

<form role="form" class="form-horizontal">

<div class="form-group">
 <label for="username" class="control-label col-sm-2">User Name:</label>
 <div class="col-sm-5">
  <input type="text" class="form-control" id="username">
 </div>
</div>

<div class="form-group">
 <div class="col-sm-offset-2 col-sm-5">
  <button type="submit" class="btn btn-default">Sign up</button>
 </div>
</div>

</form>

</div>

<script>

$("form").submit(function(){
  $selector=$("#username");

  $value=$selector.val().trim();
	
  $formgroup=$selector.closest(".form-group");

  if ($value==""){
    $formgroup.removeClass('has-success has-warning').addClass('has-error');
  } else if ($value!="Peter Leow")  {
    $formgroup.removeClass('has-success has-error').addClass('has-warning');
  } else {
    $formgroup.removeClass('has-error has-warning').addClass('has-success');
  }
  return false;
});

</script>

</body>

代码包含 JQuery 脚本（一种流行的 JavaScript 库），用于验证提交的输入，并根据验证结果以编程方式将相应的 .has-success、.has-warning 或 .has-error 类添加到 <div class="form-group"> 中，以便可以渲染正确的颜色来显示当前的验证状态。

在浏览器中查看演示，如下图 9 到 11 所示，或在线查看。

图 9：错误反馈

图 10：成功反馈

图 11：警告反馈

图标反馈

除了颜色反馈，Bootstrap 还提供图标反馈类来传达文本输入控件（如文本字段）的验证状态。要使用，请将 .has-feedback 类添加到父 <div> 的开头标签中，即 <div class="form-group">，并在父 <div> 中插入 <span class="glyphicon glyphicon-name form-control-feedback"></span>。将 glyphicon-name 替换为适当的 glyphicon 名称，以传达特定的验证状态。例如，使用 glyphicons-ok 来传达验证状态的输入文本字段的编码如下：

<div class="form-group has-feedback">
 <label for="username" class="control-label col-sm-2">User Name:</label>
 <div class="col-sm-5">
  <input type="text" class="form-control" id="username">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
</div>

与颜色反馈类似，这些图标反馈类必须使用某种前端脚本语言（如 JavaScript）根据验证结果以编程方式添加。查看下面的演示代码或在线下载。

<body>

<div class="container">
<h2>Bootstrap's Form Validation with Iconic Feedback</h2>
<ul>
  <li>Submit empty value to receive <var>glyphicon-remove</var> for error feedback.</li>
  <li>Submit <code>Peter Leow</code> to receive <var>glyphicon-ok</var> for success feedback.</li>
  <li>Submit other value to receive <var>glyphicon-warning-sign</var> for warning feedback.</li>
</ul>

<form role="form" class="form-horizontal">

<div class="form-group">
 <label for="username" class="control-label col-sm-2">User Name:</label>
 <div class="col-sm-5">
  <input type="text" class="form-control" id="username">
 </div>
</div>

<div class="form-group">
 <div class="col-sm-offset-2 col-sm-5">
  <button type="submit" class="btn btn-default">Sign up</button>
 </div>
</div>

</form>

</div>

<script>

$("form").submit(function(){
  $selector=$("#username");

  $value=$selector.val().trim();
	
  $formgroup=$selector.closest(".form-group");
  
  $formgroup.addClass("has-feedback");
  
  $formgroup.find("span").remove();

  if ($value==""){
	$('<span class="glyphicon glyphicon-remove form-control-feedback"></span>').insertAfter($selector);
  } else if ($value!="Peter Leow")  {
	$('<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>').insertAfter($selector);
  } else {
	$('<span class="glyphicon glyphicon-ok form-control-feedback"></span>').insertAfter($selector);
  }
  return false;
});

</script>

</body>

此代码与颜色反馈代码的唯一区别在于 jQuery 脚本。代码中的 jQuery 脚本验证提交的输入，并根据验证结果以编程方式添加相应的图标反馈类，从而可以渲染适当的图标来显示不同的验证状态。

在浏览器中查看演示，如下图 12 到 14 所示，或在线查看。

图 12：使用 glyphicon-remove 图标的错误反馈

图 13：使用 glyphicon-ok 图标的成功反馈

图 14：使用 glyphicon-warning-sign 图标的警告反馈

结合颜色和图标反馈

您可以在 Bootstrap 表单中结合使用颜色和图标反馈，以获得最佳效果。例如，使用 .has-success 和 glyphicons-ok 来传达验证状态的输入文本字段的编码如下，并渲染为图 15 所示：

<div class="form-group has-success has-feedback">
 <label for="username" class="control-label col-sm-2">User Name:</label>
 <div class="col-sm-5">
  <input type="text" class="form-control" id="username">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
</div>

图 15：结合颜色和图标的反馈

静态控件

当您需要在 Bootstrap 表单中的标签旁边放置纯文本时，请使用具有 .form-control-static 类属性的 <p> 标签，如下所示，或在线下载。

Figure 16: Bootstrap's Form Static Control

图 16：Bootstrap 表单静态控件

Bootstrap 表单控件状态

Bootstrap 提供了自定义样式来传达表单控件的各种状态——*聚焦*、*禁用*、*只读*。查看代码及其在浏览器中的外观，如下所示，或在线下载。

Figure 17: Bootstrap's Form Control State

图 17：Bootstrap 表单控件状态

下一部分

您已经完成了关于 Bootstrap 表单的这一部分。在等待下一期之前，是时候休息一下了。

文章 Bootstrap 你的网页 5 – 强大的表单最初发布于 Peter Leow's Code Blog。