关于bootstrap--表单控件(disabled表单禁用、显示表单验证的样式)
1、disabled:
(1)在input中加入disabled可使表单禁用,如图:
<input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用,不可输入" disabled></div>
(2)如果fieldset设置了disabled属性,整个域都将处于被禁用状态,如图:
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">禁用的输入框</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
<div class="form-group">
<label for="disabledSelect">禁用的下拉框</label>
<select id="disabledSelect" class="form-control">
<option>不可选择</option>
</select>
</div>
</fieldset>
2、legend:如果legend中有输入框的话,这个输入框是无法被禁用的,如图:
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend>
3、表单验证状态:加上has-feedback,并且加一个
<span class="glyphiconglyphicon-ok form-control-feedback"></span>
标签,才会出现小图标;在<input>下面加上<span class="help-block">来显示“你们输入的正确信息”。
<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="help-block">你输入的信息是正确的</span>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="help-block">请输入正确信息</span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="help-block">你是输入的信息是错误的</span>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
关于bootstrap--表单控件(disabled表单禁用、显示表单验证的样式)的更多相关文章
- 如何给动态添加的form表单控件添加表单验证
最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...
- html5 新增表单控件和表单属性
新的输入型控件 email:电子邮箱文本框,跟普通的没什么区别 当输入不是邮箱的时候,验证通不过 移动端的键盘会有变化 tel:电话号码 一般用于手机端,是一个键盘切换 url:网页的 ...
- html5新增表单控件和表单属性
表单验证 Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false) 阻止默认验证:ev.preventDefault() formnova ...
- HTML5自学笔记[ 2 ]新增表单控件和表单属性
新增<input>属性type="email",自动验证,若输入不为邮箱,则不能提交. 新增<input>属性type="tel",在移 ...
- 前端笔记——如何控制表单控件中的disabled
0.前言 本文主要说明如何使能或禁止表单控件.表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料[1].下面就通过一个简单的例子说明如 ...
- Bootstrap关于表单控件(Radio,CheckBox)
表单控件(复选框checkbox和单选择按钮radio) Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio ...
- 表单控件之select
一.表单控件之表单 1.依次获取表单里的所有控件: for (i = 0; i < document.getElementById("formName").length; i ...
- FineUI第六天---表单控件
表单控件 所有表单控件都有的属性有: ShowLabel:是否显示标签(默认值:true). ShowEmptyLabel:是否显示空白的标签(默认值:false). Label:标签文本(默认值:& ...
- Angular19 自定义表单控件
1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...
- bootstrap 表单控件 控件状态 控件大小 help-block
bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...
随机推荐
- JS(七)
JS又上完了,还是感觉JS技巧性很强,需要多积累经验...看了一下PHP的内容,感觉搭建环境好麻烦,结果回来下了个wamp感觉好像就可以了..... 1.红绿蓝颜色条: <!DOCTYPE ht ...
- Jetty监控线程使用情况的配置
Jetty监控线程使用情况配置 第一步,配置xml文件 jetty-monitor.xml 参数说明: threads: 线程池中的线程 busyThreads: 使用中的线程 idleThreads ...
- ajax返回json数组遍历添加到html
大致需求为类型限制根据类型获取不同结果列表,再根据模糊查询搜索出结果,效果如下:
- Mac phpstorm破解版安装(简单,有效)
如果是公司作为商业用途的,还是希望你能购买正版的,如果是苦逼的穷学生,亦或是我这样的苦逼码农,那就往下看, 之前有个只需要在"License server address"里输入 ...
- 【C#通用类】日志记录类
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...
- JDK版本错误:Unsupported major.minor version 51.0
错误原因 有时候把项目从本机编译文件部署到服务器,或者发给别人使用时,会报如下异常: java.lang.UnsupportedClassVersionError: test_hello_world ...
- POJ 1386 有向图欧拉通路
题意:给你一些字符串,这些字符串可以首位相接(末位置如果和另一个字符串的首位置相同的话就可以相连) .然后问你是否可以全部连起来. 思路:就是取出每个字符串的首尾位置,然后求出出度和入度,根据有向欧拉 ...
- NPOI心得
一个Excel文件表示为一个IWookbook,Sheet是ISheet,其它细分为IRow,ICell. 2003和2007版本为IWookbook接口的不同实现:HSSFWookbook和XSSF ...
- 转载——SqlServer之like、charindex、patindex
转载自:http://www.2cto.com/database/201305/214967.html SqlServer之like.charindex.patindex 1.环境介绍 测试环境 ...
- DataGrid简单数据绑定实例2
1.Image列显示: 后台绑定: //获取文件夹下的图片 string path = @"K:\Picture\jpg"; private void Button_Click(o ...