关于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& ...
随机推荐
- 中介者模式(Mediator) 笔记
中介者模式(Mediator Pattern):定义一个中介对象来封装系列对象之间的交互.中介者使各个对象不需要显示地相互引用,从而使其耦合性松散,而且可以独立地改变他们之间的交互. 类图: Medi ...
- js让菜单栏一直悬浮在顶部,经典代码
js让菜单栏一直悬浮在顶部,经典代码 很简单,你只需要把下面代码放到js中:$(function(){ //获取要定位元素距离浏览器顶部的距离 var na ...
- SpringMVC文件上传与下载
一.关键步骤 ①引入核心JAR文件 SpringMVC实现文件上传,需要再添加两个jar包.一个是文件上传的jar包,一个是其所依赖的IO包.这两个jar包,均在Spring支持库的org.apach ...
- 【Python爬虫基础】抓取知乎页面所有图片
抓取地址所有图片 #! /usr/bin/env python from urlparse import urlsplit from os.path import basename import ur ...
- (3)选择元素——(9)为交替的列加样式(Styling alternate rows)
Two very useful custom selectors in the jQuery library are :oddand :even. Let's take a look at how w ...
- USB HID Report Descriptor 报告描述符详解
Report descriptors are composed of pieces of information. Each piece of information is called an Ite ...
- Spring简单的小例子SpringDemo,用于初略理解什么是Spring以及JavaBean的一些概念
一.开发前的准备 两个开发包spring-framework-3.1.1.RELEASE-with-docs.zip和commons-logging-1.2-bin.zip,将它们解压,然后把Spri ...
- 服务 远程服务 AIDL 进程间通讯 IPC
Activity aidl接口文件 package com.bqt.aidlservice; interface IBinderInterface { /* 更改文件后缀为[.aidl]去掉 ...
- easyui-form添加自定义表单验证
easyui自定义表单验证规则其实不是很复杂,只要重写一下重写 $.fn.validatebox.defaults.rules 自定义示例 $.extend($.fn.validatebox.defa ...
- OD: Universal Shellcode
本节讲如果开发通用的 Shellcode. Shellcode 的组织 shellcode 的组织对成功地 exploit 很重要. 送入缓冲区的数据包括: . 填充物.一般用 0x90 (NOP) ...