关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明。通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性、可用性和可交互性。
role的作用是描述一个非标准的tag的实际作用。比如用div做button,那么设置div 的 role=“button”,辅助工具就可以认出这实际上是个button比如,
<div role="checkbox" aria-checked="checked"></div>
辅助工具就会知道,这个div实际上是个checkbox的角色,为选中状态。
1、下拉菜单(单选):
<form role="form">
<div class="form-group">
<select class="form-control">
<option>踢足球</option>
<option>游泳</option>
<option>慢跑</option>
<option>跳舞</option>
</select>
</div>
</form>
2、下拉菜单(多选):
<form role="form">
<div class="form-group">
<select multiple class="form-control">
<option>踢足球</option>
<option>游泳</option>
<option>慢跑</option>
<option>跳舞</option>
</select>
</div>
</form>
3、输入框(input):
</form>
<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="输入邮箱"> </div>
</form>
4、文本域(textare)
</form>
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>(rows:可以输入的行数)
</div>
</form>
设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。
因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
5、复选框checkbox和单选按钮radio(纵向排列)
<form role="form">
<h3>案例1</h3>
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
</label>
</div> </form>
6、复选框checkbox和单选按钮radio(横向排列)
1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”
<form role="form">
<div class="form-group">
<label class="radio-inline">
<input type="radio" value="option1" name="sex"> 男性
</label>
<label class="radio-inline">
<input type="radio" value="option2" name="sex"> 女性
</label>
<label class="radio-inline">
<input type="radio" value="option3" name="sex"> 中性
</label>
</div>
</form>
关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)的更多相关文章
- spring mvc:常用标签库(文本框,密码框,文本域,复选框,单选按钮,下拉框隐藏于,上传文件等)
在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...
- 关于jQuery表单下拉selected设置无效的解决方案
表单下拉选项使用selected设置,发现第一次默认选中成功,在页面不刷新的情况下,再次下拉,selected属性设置了,默认选中不生效 研究发现是浏览器兼容的问题 一,解决浏览器缓存问题,在HTML ...
- palacehoder的自定义样式【输入框input /文本域textarea】
7.palacehoder的自定义样式[输入框input /文本域textarea] 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和texta ...
- 下拉选择select和复选框checkbox的状态的各种方式
复选框的状态 <input name="ck" value=" " type="checkbox" checked> 或者&l ...
- Form表单之复选框checkbox操作
input复选(checkbox): <label>input复选1组:</label> <input type="checkbox" name=&q ...
- 可分组的选择框控件(MVVM下)(Toggle样式 仿造单选框RadioButton,复选框CheckBox功能)
原地址: http://www.cnblogs.com/yk250/p/5660340.html 效果图如下:支持分组的单选框,复选框样式和MVVM下功能的实现.这是项目中一个快捷键功能的扩展. 1, ...
- Yii 生成表单下拉选框及查询下拉选框
CHtml类参考: http://www.yiichina.com/api/CHtml#activeDropDownList-detail activeDropDownList() 方法 public ...
- asp.net MVC4 表单 - 下拉框
1.下拉框代码方式 控制器内构建下拉项目: List<SelectListItem> list = new List<SelectListItem>(); list.Add(n ...
- Bootstrap3 表单-被支持的控件:文本域
支持多行文本的表单控件.可根据需要改变 rows 属性. <textarea class="form-control" rows="3"></ ...
随机推荐
- rac 10g 加入节点具体解释
目标: 当前我环境中是有两个节点RAC1和RAC2 节点.如今添加一个RAC3节点. 概要:为现有的Oracle10g RAC 加入节点大致包含下面步骤: 1. 配置新的server节点上的硬件及 ...
- JAVA把字符串当作表达式执行
直接能够穿一个字符串执行 private static void test(String pm1) { ScriptEngineManager manager = new ScriptEngineMa ...
- license文件生成原理
byte解密weblogic加密oraclehex 现在很多J2EE应用都采用一个license文件来授权系统的使用,特别是在系统购买的早期,会提供有限制的license文件对系统进行限制,比如试 ...
- uploadify3.1 参数 中文详解
langFile: 'http://www.static-xxx.nu/uploader/uploadifyLang_en.js',//语言包的路径,能设置所有的提示文字 swf: 'http://w ...
- [转]iOS设备唯一标识探讨
转自:http://www.jianshu.com/p/b83b0240bd0e iOS设备唯一标识探讨 为了统计和检测应用的使用数据,几乎每家公司都有获取唯一标识的业务需求,在iOS5以前获取唯一标 ...
- OD: Universal Shellcode
本节讲如果开发通用的 Shellcode. Shellcode 的组织 shellcode 的组织对成功地 exploit 很重要. 送入缓冲区的数据包括: . 填充物.一般用 0x90 (NOP) ...
- Jqgrid的用法总结与分页功能的拓展
这是本人写的第一个与技术相关的博客,但是非挑战技术的,而是对工作的总结,另外加一点点拓展. Jqgrid的功能十分强大,强大到可以做到与数据grid相关的任何功能,同时由于在用的过程中总是不能够一气呵 ...
- 【socket.io研究】3.手机网页间聊天核心问题
前面我们已经说了服务器相关的一些内容,且又根据官网给出的一个例子写了一个可以聊天的小程序,但是这还远远不够呀,这只能算是应用前的准备工作.接下来,一起来考虑完善一个小的聊天程序吧. 首先,修改服务器的 ...
- xcode下载方式
1.去AppStore下载 对于Xcode老是在AppStore升级失败,而且下载慢,可取找到了这个--> 官方 Xcode .dmg 文件下载链接:超级传送门 2.开发者中心官网下载 可参考这 ...
- Ajax从服务器端获取数据---原生态Ajax
写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...