Bootstrap 表单 http://www.runoob.com/try/try2.php?filename=bootstrap3-form-controlstate （这链接里有简介）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" >

</head>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<style>

    .right_20{right:20px;}

</style>

<body>

    <div class="width90_">

        <form class="form-horizontal bs-example bs-example-form">

            <div class="form-group form-group-sm has-success">

                <label class="fontSize12 col-sm-4 control-label" for="old_pwd">

                    <span style = 'color:red;'></span>成功

                </label>

                <div class="col-sm-6">

                    <input maxLength = '50' class="form-control" type="text" id="old_pwd" placeholder="" >

                    <span class="glyphicon glyphicon-ok form-control-feedback right_20"></span>

                </div>

            </div>

            <div class="form-group form-group-sm has-warning">

                <label class="fontSize12 col-sm-4 control-label" for="new_pwd">

                    <span style = 'color:red;'></span>警告

                </label>

                <div class="col-sm-6">

                    <input maxLength = '50' class="form-control" type="text" id="new_pwd" placeholder="" >

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

                </div>

            </div>

            <div class="form-group form-group-sm has-error">

                <label class="fontSize12 col-sm-4 control-label" for="re_new_pwd">

                    <span style = 'color:red;'></span>错误

                </label>

                <div class="col-sm-6">

                    <input class="form-control" type="text" id="re_new_pwd" placeholder="">

                    <span class="glyphicon glyphicon-remove form-control-feedback right_20"></span>

                </div>

            </div>

        </form>

    </div>

</body>

</html>

Bootstrap中表单控件状态(验证状态)的更多相关文章

  1. Bootstrap 表单控件状态(验证状态)

    在制作表单时,不免要做表单验证.同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果.1..has-warning:警告状态(黄色)2..has-error:错误状态(红色)3.. ...

  2. Bootstrap 表单控件状态(禁用状态)

    Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”.和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处 ...

  3. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  4. Bootstrap历练实例：验证状态

    验证状态 Bootstrap 包含了错误.警告和成功消息的验证样式.只需要对父元素简单地添加适当的 class(.has-warning. .has-error 或 .has-success)即可使用 ...

  5. vue列表中表单的验证

    先上效果图: 在点击确认的时候会验证带有验证的字段 嵌套逻辑: 表单 表格 表格项 表单项 表单项 表格项 表格 表单 代码部分: <!-- 注意此处的model,需要一个对象,而我们的数据是一 ...

  6. elementUI中表格中表单的验证

    表格中的表单验证,就是在将表格放在表单中,将表格绑定的数据也放在表单中. 最重要的是要给表格中需要验证的字段动态添加prop,再给其绑定规则. <el-form :model="tab ...

  7. Bootstrap之表单控件状态

    Bootstrap中的表单控件状态主要有三种:焦点状态,禁用状态,验证状态.   一.焦点状态:该状态告诉用户可输入或选择东西 焦点状态通过伪类“:focus”以实现. bootstrap.css相应 ...

  8. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

  9. HTML5中表单验证的8种方法(转)

    在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义.就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误.换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并 ...

随机推荐

  1. Controller和View传递数据的几种方式

    使用ViewBag存储数据,如ViewBag.time=2012/7/1,View中可以直接用ViewBag("time")的方式取出数据. 使用ViewData存储数据,存储对象 ...

  2. 隐藏Android下的虚拟按键

    要隐藏Android下的虚拟按键,可通过如下办法操作 adb root adb remount adb shell ls -al /system/build.prop   (查看文件权限) -rw-r ...

  3. 【BZOJ3489】A simple rmq problem【kd树】

    题意 给出一个长度为n的序列,给出M个询问:在[l,r]之间找到一个在这个区间里只出现过一次的数,并且要求找的这个数尽可能大.如果找不到这样的数,则直接输出0.我会采取一些措施强制在线. 分析 预处理 ...

  4. interrupt和isInterrupted的基本使用方法

    java线程是协作式,而非抢占式 调用一个线程的interrupt() 方法中断一个线程,并不是强行关闭这个线程,只是跟这个线程打个招呼,将线程的中断标志位置为true,线程是否中断,由线程本身决定. ...

  5. Country Meow

    Country Meow 和这基本一样 https://www.cnblogs.com/Fighting-sh/p/9809518.html #include<iostream> #inc ...

  6. APP测试功能点总结

    1.功能性测试:   ——根据产品需求文档编写测试用例. ——软件设计文档编写用例.注意:就是根据产品需求文档编写测试用例而进行测试. 2.兼容性测试:   ——android版本的兼容性 ——手机分 ...

  7. 和大于S的最小子数组 · Minimum Size Subarray Sum

    ［抄题］: 给定一个由 n 个正整数组成的数组和一个正整数 s ,请找出该数组中满足其和 ≥ s 的最小长度子数组.如果无解,则返回 -1. 给定数组 [2,3,1,2,4,3] 和 s = 7, 子 ...

  8. sql游标使用

    一.游标的作用:Select时,返回的是一个结果集,若需要为结果集返回的过程中,读取到一行数据.需要对此行数据进行处理,比如按读取到的数据作为查询条件返回一个查询结果集等等,应用都需要用到游标.游标可 ...

  9. error:while loading shared libraries: libevent-2.1.so.6: cannot open shared object file: No such file or directory

    执行 memcached 启动命令时,报错,提示:error while loading shared libraries: libevent-2.1.so.6: cannot open shared ...

  10. 2.QWidget类

    简述: QWidget类是所有用户界面对象的基类. Widget是用户界面的基本单元:它从窗口系统接收鼠标,键盘和其他事件,并在屏幕上绘制自己. 每个Widget都是矩形的,它们按照Z-order进行 ...