关于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& ...
随机推荐
- Sequence(组合数学,集合不同元素的个数)
Sequence [组合数学] 时间限制: 3 Sec 内存限制: 128 MB 提交: 138 解决: 52 [提交][状态][讨论版] 题目描述 在某个夜黑月高的晚上,!!!,原谅我编不下去了 ...
- 关于url路径的定义方式
一.概述 无论是做网页,还是WEB系统,我们都会用到链接,图片,文件的地方,这些地方都涉及到路径的问题,例如:background-image:url();这一CSS样式,而url()的定义方式有两种 ...
- 魔方公式xyz
x:(整个魔方以R的方向转动),x':(整个魔方以R'的方向转动) y:(整个魔方以U的方向转动),y':(整个魔方以U'的方向转动) z:(整个魔方以F的方向转动),z':(整个魔方以F'的方向 ...
- HDU 4119Isabella's Message2011成都现场赛I题(字符串模拟)
Isabella's Message Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- C#之out与ref的共性与区别以及用法
引入: 首先看一个例子: class Program { static void Main(string[] args) { ; int result = Test(number); Console. ...
- WPF样式和资源2
<Window.Resources> <FontFamily x:key="ButtonFontFamily">Time New Roman</Fon ...
- cordova-plugin-app-version插件使用
此插件用来获取开发软件的版本号! 首先安装此插件: 命令行中输入 cordova plugin add cordova-plugin-app-version 然后刷新项目,就会在在项目plugin ...
- HTML5画布(变形)
坐标变换 案例1: <!DOCTYPE html><html><head lang="en"> <meta charset="U ...
- 使用inline-block做水平垂直居中
父级宽高不定,如何使子元素水平垂直居中? 下面是用 display: inline-block 实现的: <!doctype html> <html lang="en&qu ...
- Animation 案例解释
Animation 案例解释: ------------摘自W3c 过度动画类型: linear:线性过渡.等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease:平滑过渡.等同于贝塞尔曲 ...