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. 什么是Emit,什么是反射,二者区别到底是什么?(转)

    Emit的准确定义,我们看看微软给出的答案 System.Reflection.Emit 命名空间包含{ 允许编译器或工具发出元数据和发出 Microsoft 中间语言 (MSIL) ,并可选择在磁盘 ...

  2. MyBatis ehcache二级缓存

    ehcache二级缓存的开启步骤: 1.导入jar 2.在映射文件中指定用的哪个缓存 3.加一个配置文件,这个配置文件在ehcache jar包中就有 使增删改对二级缓存不刷新: 对一级缓存没有用的, ...

  3. nodejs-supervisor

    小技巧——使用 supervisor 如果你有 PHP 开发经验,会习惯在修改 PHP 脚本后直接刷新浏览器以观察结果,而你在开发 Node.js 实现的 HTTP 应用时会发现,无论你修改了代码的哪 ...

  4. Android中asset文件夹与raw文件夹的区别深入解析(转)

    *res/raw和assets的相同点:1.两者目录下的文件在打包后会原封不动的保存在apk包中,不会被编译成二进制.*res/raw和assets的不同点:1.res/raw中的文件会被映射到R.j ...

  5. 基于python的Appium自动化测试的坑

    真的感谢@虫师 这位来自互联网的老师,让我这个原本对代码胆怯且迷惑的人开始学习自动化测试. 一开始搜索自动化测试的时候,虫师的博客园教程都是在百度的前几位的,我就跟着虫师博客园里面的教程学习.后来学s ...

  6. web图形方案比较html5、GML、SVG、VML

    GML.SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下面简单介绍一下. GML(Geography Markup  ...

  7. Golang之interface（多态，类型断言）

    多态用法 package main //一种事物的多种形态,都可以按照统一的接口进行操作 //多态 import ( "fmt" "math/rand" &qu ...

  8. Linux mmap函数简介

    一.简介 Linux提供了内存映射函数mmap, 它把文件内容映射到一段内存上(准确说是虚拟内存上), 通过对这段内存的读取和修改, 实现对文件的读取和修改, 先来看一下mmap的函数声明: 头文件: ...

  9. MySQL中触发器

    触发器是与某个事件相关的特殊存储过程,与存储过程不同的是,存储过程需要用 call 调用而出发器不需要使用call调用调用. 也就是自己预先定义好了,当某个事件发生时,就会自动出发触发器进行相关的操作 ...

  10. Python打开文件open()的注意事项

    刚刚用open(fileName)来打开txt格式的文件,总是出现错误,总是找不到文件读取的内容,后来才发现是open()在使用过程中自动关闭了.这里介绍另种方法解决这个问题. 第一种方法. with ...