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. StoryBoard 设置TabBar SelectImage 和tintColor

    如图:StoryBoard 结构是 Tabbar + Navi + ViewController 需求:需要修改TabBar的Image 和SelectImage 设置Image 设置SelectIm ...

  2. lesson1:threadlocal的使用demo及源码分析

    本文中所使用的demo源码地址:https://github.com/mantuliu/javaAdvance 其中的类Lesson1ThreadLocal 本文为java晋级系列的第一讲,后续会陆续 ...

  3. android后台截屏实现(3)--编译screencap

    修改好之后就要编译了,screencap的编译是要在源码环境中进行的. 将修改后的screencap.cpp文件替换源码中的原始文件,然后修改screencap的Android.mk文件,修改后的文件 ...

  4. Struts2属性驱动与模型驱动

    为什么要使用属性驱动和模型驱动 struts2与struts很大的不同点在于,struts的execute方法提供了HttpServletRequest和HttpServletResponse方法在获 ...

  5. cavium octeon 处理器启动总线Bootbus 简介

    cavium octeon 处理器启动总线Bootbus 简介: 韩大卫@吉林师范大学 Boot-bus(启动总线)是cavium octeon处理器的一种用于启动系统的硬件. CPU通过boot b ...

  6. tomcat与resin的比较

    Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun 和其他一些公司及个人共同开发而成.由于有了 ...

  7. laravel敏捷应用

    App Category Recipes dealing with Laravel's App facade Checking Your Environment Checking if You're ...

  8. Web ADF 编程步骤.

    从Web Controls 开始(工具来中的 ArcGIS Web Controls). 访问Resource Manager. 找到待访问的 Resource. 决定 Resource支持哪个 Fu ...

  9. MySQL sql 执行步骤

    基本步骤是  1.from  2.join on  3.where  4.group by  5.having  6.order by  7.select  8.distinct ,sum,...  ...

  10. Xcode使用xib拖线时出现: could not insert new outlet connection

    解决方法: 1.在新建类的时候没有选择将这个类加入到对应的"Target"中. 2.重新将文件加入项目 操作步骤就是选中出问题的.m和.h文件,点删除键,然后选"Remo ...