关于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& ...
随机推荐
- Java学习之List接口
List接口 List接口的定义如下: public interface List<E>extends Collection<E> 可以发现List接口时Collection接 ...
- Android TextView属性
android:autoLink设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/phone/map/all)android:a ...
- [React] React Router: Named Components
In this lesson we'll learn how to render multiple component children from a single route. Define a n ...
- 多线程下载 HttpURLConnection
Activity /**实际开发涉及文件上传.下载都不会自己写这些代码,一般会使用第三方库(如xUtils)或Android提供的DownloadManager下载*/ public class Ht ...
- 广播接收者 BroadcastReceiver 示例-1
广播机制概述 Android广播分为两个方面:广播发送者和广播接收者,通常情况下,BroadcastReceiver指的就是广播接收者.广播作为Android组件间的通信方式,可以使用的场景如下: 1 ...
- SplitButton( 分割按钮)
一. 加载方式//class 加载方式<a href="javascript:void(0)" id="edit" class="easyui- ...
- C#中的一些技巧
VS编辑器的虚线如何设置和取消:使用快捷键Ctrl+E+C VS自带的反编译工具是什么:il dasm
- Set,Map数据结构
/*Set : 多个value的集合, value不重复Map : 多个key-value对的集合, key不重复 1. Set容器 1). Set() 2). Set(array) 3). add( ...
- Hadoop shuffle与排序
Mapreduce为了确保每个reducer的输入都按键排序.系统执行排序的过程-----将map的输出作为输入传给reducer 称为shuffle.学习shuffle是如何工作的有助于我们理解ma ...
- GitHub 相关内容
1. Git是分布式版本控制系统 集中式版本控制系统:版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所以要先从中央服务器取得最新的版本,然后开始干活,干完活了,再把自己的活推送给中 ...