关于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>

时间: 2024-11-06 06:23:27

关于bootstrap--表单控件(disabled表单禁用、显示表单验证的样式)的相关文章

bootstrap-表单控件——复选框checkbox和单选择按钮radio

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>表单控件--复选框checkbox和单选择按钮radio</title>

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

新的输入性表单控件: email:电子邮箱文本框,跟普通的没什么区别 - 当输入不是邮箱的时候,验证不通过 - 移动端的键盘会发生变化 tel:电话号码 url:网页的URL search:搜索引擎 - chrome下输入文字后,会多出一个关闭的X range:特定范围内的数值选择器 - min.max.step(步数) - 例子: 用js来显示当前数值 number:只能包含数字的输入框 - 输入框末尾有两个箭头 上为加 下为减 color:颜色选择器    - 点击显示颜色版   datet

控制表单控件-获取表单内文本框的个数

代码: ———————————————————— <script type="text/javascript">            //获取表单内文本框的个数            function getInputCount(){                var f = document.forms[0];            //获取表单DOM                var elements = f.elements;        //获取所有的控

表单控件和表单属性

forms 输入型控件 email:电子邮件文本框,跟普通的没什么区别 —当输入不是邮箱的时候,验证不通过, —移动端的键盘会有变化 tel:电话号码,它的功能主要在移动端,一个键盘的切换 url:网页的url search:搜索引擎. —Chrome下输入文字后,会多出一个关闭的× range:特定范围内的数值选择器 number:只能包含数字的输入框 color:颜色选择器 datetime:显示完整日期(Opera浏览器下起作用) datetime-local:显示完整日期  不含时区 t

控制表单控件-修改表单的提交方法

代码: —————————————————————————— <script type="text/javascript">            //修改表单的提交方法            function modifyMethod(){                var f = document.forms[0];            //获取表单DOM                var method = f.myMethod.value;    //选择的

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

新增<input>属性type="email",自动验证,若输入不为邮箱,则不能提交. 新增<input>属性type="tel",在移动端切换到数字键盘,其他无变化. 新增<input>属性type="url",自动验证,若输入不为url,则不能提交. 新增<input>属性type="search",输入框内显示删除文本按钮,其他无变化. 新增<input>属性t

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

表单控件(复选框checkbox和单选择按钮radio) Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题).使用Bootstrap框架,开发人员无需考虑太多,只需要按照下面的方法使用即可. <form role="form"> <div class="checkbox"> <labe

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

0.前言 本文主要说明如何使能或禁止表单控件.表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料[1].下面就通过一个简单的例子说明如何设置和读取disabled属性. [示例页面--代码] <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <meta charset="utf

JavaScript与表单控件

JavaScript与表单控件 1.表单控件 a) 在HTML中表单控件是客户端与服务器进行数据传输的工具,用来收集客户端的信息,并允许客户端的用户以标准格式向服务器提交数据 b) <form name="frmName" action="frmAction" [method="post(默认)/get" [target="targetType"] [enctype=""]></form&

FineUI第六天---表单控件

表单控件 所有表单控件都有的属性有: ShowLabel:是否显示标签(默认值:true). ShowEmptyLabel:是否显示空白的标签(默认值:false). Label:标签文本(默认值:""). LabelSeparator:表单中字段与标签的分隔符,可以通过Web.config.PageManager.Form三个级别进行控制,一般不需要设置此属性(默认值:PageManager中的设置参数). ShowRedStar:在标签后面显示红色的星号(用来标识必填项),一般与R