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表单禁用、显示表单验证的样式)的更多相关文章

  1. 如何给动态添加的form表单控件添加表单验证

    最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...

  2. html5 新增表单控件和表单属性

    新的输入型控件 email:电子邮箱文本框,跟普通的没什么区别 当输入不是邮箱的时候,验证通不过 移动端的键盘会有变化         tel:电话号码 一般用于手机端,是一个键盘切换 url:网页的 ...

  3. html5新增表单控件和表单属性

    表单验证 Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false) 阻止默认验证:ev.preventDefault() formnova ...

  4. HTML5自学笔记[ 2 ]新增表单控件和表单属性

    新增<input>属性type="email",自动验证,若输入不为邮箱,则不能提交. 新增<input>属性type="tel",在移 ...

  5. 前端笔记——如何控制表单控件中的disabled

    0.前言     本文主要说明如何使能或禁止表单控件.表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料[1].下面就通过一个简单的例子说明如 ...

  6. Bootstrap关于表单控件(Radio,CheckBox)

    表单控件(复选框checkbox和单选择按钮radio) Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio ...

  7. 表单控件之select

    一.表单控件之表单 1.依次获取表单里的所有控件: for (i = 0; i < document.getElementById("formName").length; i ...

  8. FineUI第六天---表单控件

    表单控件 所有表单控件都有的属性有: ShowLabel:是否显示标签(默认值:true). ShowEmptyLabel:是否显示空白的标签(默认值:false). Label:标签文本(默认值:& ...

  9. Angular19 自定义表单控件

    1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...

  10. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

随机推荐

  1. eclipse中svn插件的安装与使用

    eclipse中svn插件的安装与使用 一.    eclipse中svn插件的安装 eclipse里安装SVN插件,一般来说,有两种方式: 直接下载SVN插件,将其解压到eclipse的对应目录里 ...

  2. apache ab工具对网站进行压力测试

    Apache -- ab工具主要测试网站的(并发性能) 这个工具非常的强大. 基本语法 :   cmd>ab.exe –n 请求总次数  -c 并发数 请求页面的url     进入到ab.ex ...

  3. C#。4 数组

    一.跳出循环的俩个关键字 1.break与continue.        这两个关键字一般放在循环的花括号里面使用.break——结束整个循环.continue——结束本次循环,进入下次循环. br ...

  4. javascript正则

      <script type="text/javascript"> //去除两边空格,如果要去除所有空格,使用/\s*即可/ String.prototype.trim ...

  5. asp.net动态设置button的Text,Enabled属性,向后台传递参数

    前台代码:根据后台传递过来的参数动态设置 <asp:Button ID="Button1" runat="server" CommandArgument= ...

  6. java 后台线层也叫守护线层

    import java.util.concurrent.locks.*; class Do9 { public static void main(String[] args) { Ds d=new D ...

  7. python 查看插件命令 pip freeze 以及django3.4链接mysql

    https://github.com/PyMySQL/PyMySQL/issues/244 pip freeze命令可以显示python插件版本 MySQLdb只支持Python2.*,还不支持3.* ...

  8. 对于js原型和原型链继承的简单理解(第二种,对象冒充)

    关键代码    this.parent = Cat;    this.parent.apply(this); function Cat(){ this.climb = function(){ aler ...

  9. json_encode如何防止汉字转义成unicode

    众所周知,json_encode通常会把json中的汉字转义成unicode,但是这并不一定是我们想要的.有时候,我们需要获得汉字形式的json字符串,比如需要获得gbk编码的json字符串(只要把汉 ...

  10. javascript事件详细说明

    javascript事件列表解说javascript事件列表解说事件 浏览器支持 解说一般事件 onclick IE3.N2 鼠标点击时触发此事件ondblclick IE4.N4 鼠标双击时触发此事 ...