3-13 表单控件状态(验证状态)
本节编程练习不计算学习进度，请电脑登录imooc.com操作

表单控件状态(验证状态)

在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。

<form role="form">
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">警告状态</label>
  <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">错误状态</label>
  <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
</div>
</form>

运行效果如下或查看右侧结果窗口：

从效果可以看出，三种状态下效果都是一样的，只是颜色不一样而以。

其他两种状态省略源码不在此展示。
很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  ......
</div>
<div class="form-group has-error has-feedback">
  ......
</div>
</form>

运行效果如下或查看右侧结果窗口：

从效果图中可以看出，图标都居右。在 Bootstrap 的小图标都是使用@font-face来制作（后面的内容中将会着重用一节内容来介绍）。而且必须在表单中添加了一个 span 元素：

<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>

 

任务

我来试试：

摹似编写一个邮箱地址输入框输错地址后的效果，如下图：

(备注:这一小节没有正确性验证，请查看结果窗口与教案所给的结果图片是否一致，从而判断输

入代码是否正确。)

 

index.htmlstyle.css 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. 	<title>表单控件状态——验证状态</title>
  6. 	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7.     <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. <h3>示例1</h3>
  11. <form role="form">
  12.   <div class="form-group has-success">
  13.     <label class="control-label" for="inputSuccess1">成功状态</label>
  14.     <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  15.   </div>
  16.   <div class="form-group has-warning">
  17.     <label class="control-label" for="inputWarning1">警告状态</label>
  18.     <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
  19.   </div>
  20.   <div class="form-group has-error">
  21.     <label class="control-label" for="inputError1">错误状态</label>
  22.     <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
  23.   </div>
  24. </form>  
  25. <br>
  26. <br>
  27. <br>
  28. <h3>示例2</h3>   
  29. <form role="form">
  30.   <div class="form-group has-success has-feedback">
  31.     <label class="control-label" for="inputSuccess1">成功状态</label>
  32.     <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  33.     <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  34.   </div>
  35.   <div class="form-group has-warning has-feedback">
  36.     <label class="control-label" for="inputWarning1">警告状态</label>
  37.     <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
  38.     <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  39.   </div>
  40.   <div class="form-group has-error has-feedback">
  41.     <label class="control-label" for="inputError1">错误状态</label>
  42.     <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
  43.     <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  44.   </div>
  45.  
  46. </form>
  47. </body>
  48. </html>
  1. body{
  2.   padding: 100px;
  3. }
下一节