章节
问答
课签
笔记
评论
占位
占位

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

在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在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>

 

任务

我来试试:

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

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

入代码是否正确。)

 

?不会了怎么办

参考代码:

  <div class="form-group has-error has-feedback">
    <label class="control-label" for="email">email地址</label>
    <input type="text" class="form-control" id="email" placeholder="在这里输入你的email地址">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>
||
1
2
<!doctype html>
<html lang="en"
    >
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
body{
padding: 100px
      ;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

已采纳回答 / 慕工程328861
<...code...><head><meta charset="utf-8"><title>demo</title><link rel="stylesheet" href="css/bootstrap.min.css"></style> //这行多余了,导致html出错了吧</head>

最新回答 / 清风小
已解决,label中忘加类名了

最新回答 / aixiu
<h3>示例3</h3><form role="form">    <div class="form-group has-error has-feedback">        <label class="control-label" for="inputemail">Email地址</label>        <input type="text" class="form-control" id="inputemail" pl...

最新回答 / angelpray
原因有以下:确认自己的bootstrap版本与教程中的版本一致(不同版本的肯定会有一些改变)教程中的运行结果是在一个小窗口中,而在本地网页则完全是自己的浏览器,这里会产生差异是非常正常的,这个可能性比较大代码完全一致,那有可能是浏览器缓存了你上一次的运行结果,需要强制刷新浏览器,这个可能性比较小。        你可以把你的代码和效果截图发到这,看看差异在哪。

最新回答 / 丶橙续缘
for的作用是为了点击文字可以聚焦到文本框。<...code...><...code...>

已采纳回答 / qq_馒头_29
<...图片...>还是这个,都在水平上图标也在原来的位置上&al"form role="form" class="form-horizontal"&ss   &feediv class="form-group has-success has-feedback"&-sm    &="ilabel class="control-label col-sm-2" for="inputSuccess1"&-sm成...

已采纳回答 / 慕粉4086570
Bootstrap在页面宽度大于等于768px的情况下,control-label的文本采用右对齐方式,而之所以你去掉之后其位置也没有变化是因为你的label并未设置宽度,你可以在Bootstrap的css文件中找到.form-horizontal .control-label在其中加入width=100%文本就会右对齐了。而你说的颜色问题是因为这个颜色与.has-success .control-label挂钩,缺一不可。如图:<...图片...>

已采纳回答 / 慕粉2243585596
好像是因为你的<label ></label>标签名写错了,你试试看改一下看能否正常显示

已采纳回答 / 杜塞尔多夫
后台AJAX验证成功后返回成功状态,前台JS脚本改变你需要验证成功样式!

最新回答 / 胖官与他的面包
其实还可以写空的div 设置col的值,就是在你前面的div col-md-4的后面补齐一个空的div 设置col-md-8,这样也会显示独占一行但是 不能居中显示 offset这个设置一下应该也是可以的

已采纳回答 / YoloMonkey
<...code...>复制过去之后,要在 href 后面加上 http:

最新回答 / qq_心的烙印_03691531
for你可以理解就是指向的意思,是label标签的一个必须属性,input的id就是for的内容,

已采纳回答 / 勒布朗小詹詹
要等一会,我也是这样,等一会就会出来图案
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言