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

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>
时间: 2024-10-06 22:28:08

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

表单控件状态(禁用状态)

Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”. 在使用了“form-control”的表单控件中,样式设置了禁用表单背景色为灰色,而且手型变成了不准输入的形状.如果控件中不使用类名“form-control”,禁用的控件只会有一个不准输入的手型出来. 在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态. 对于整个禁用的域中,如果legend中有输入框的话,这个输入框

Bootstrap 表单(慕课笔记)

整理自慕课笔记 基础表单 表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. 对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制.主要将这些元素的margin.padding和border等进行了细化设置. 当

bootstrap中的表单信息验证

前端对表单输入信息的格式进行验证有很多方法,下面两种方式效果比较不错也很简单.其中第一种仅在点击提交按钮后显示,而第二种很灵活. 对于使用Bootstrap开发的前端,感觉第二种风格比较统一. 第一种:利用html5的新特性 在<input>标签中加入新的属性 required:要求不能为空 patten="正则表达式":设置内容的格式 title="提示信息":弹出框的显示内容 这一种比较简单,没有利用Bootstrap的特性.效果如下: 第二种:配合

Bootstrap之表单控件状态

Bootstrap中的表单控件状态主要有三种:焦点状态,禁用状态,验证状态. 一.焦点状态:该状态告诉用户可输入或选择东西 焦点状态通过伪类“:focus”以实现. bootstrap.css相应源码: .form-control:focus { border-color: #66afe9; outline: 0; //删除了outline的默认样式 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 1

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

在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义.就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误.换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误. 但是真正的表单验证是什么? 是一种优化. 之所以说表单验证是一种优化,是因为仅通过表单验证机制不足以保证提交给服务器的表单数据是正确和有效的.另一方面,设计表单验证是为了让Web应 用更快地抛出错误.换句话说,最好利用浏览器内置的处理机制来告知用户网页内包含无效的表单控件值.过去

YII中表单验证

关于表单的验证有三种: 1.yii的客户端验证 2.yii的服务器端验证 3.yii的ajax验证 例如: 1.在表单对应的模型中定义一个rules方法(该方添加后,在表单提交时,将自动被调用) public function rules() { return array( array("表单元素名也就是字段名","验证类","message"=>"提示信息"), array("表单元素名也就是字段名"

Bootstrap历练实例:表单控件状态(焦点)

输入框焦点 当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:表单控件状态(焦点)</title> <m

Html5之高级-3 HTML5表单验证(验证属性、验证状态)

一.验证属性 Required 属性 - Required 属性主要防止域为空时提交表单.该属性不需要设置任何值 - 语法: Pattern 属性 - Pattern 属性的作用是实现元素的验证.它支持使用正则表达式定制验证规则 - 语法: Min 和 Max 属性 - min.max和step属性用于为包含数字或日期的input类型规定限定(约束) - 语法: Minlength 和 Maxlength 属性 - Minlength 和 Maxlength 属性的作用是定制元素允许的最小字符数

Bootstrap历练实例:表单控件状态(禁用)

禁用的输入框 input 如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Boots