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>)的更多相关文章

  1. spring mvc:常用标签库(文本框,密码框,文本域,复选框,单选按钮,下拉框隐藏于,上传文件等)

    在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...

  2. 关于jQuery表单下拉selected设置无效的解决方案

    表单下拉选项使用selected设置,发现第一次默认选中成功,在页面不刷新的情况下,再次下拉,selected属性设置了,默认选中不生效 研究发现是浏览器兼容的问题 一,解决浏览器缓存问题,在HTML ...

  3. palacehoder的自定义样式【输入框input /文本域textarea】

    7.palacehoder的自定义样式[输入框input /文本域textarea] 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和texta ...

  4. 下拉选择select和复选框checkbox的状态的各种方式

    复选框的状态 <input name="ck" value=" " type="checkbox"  checked> 或者&l ...

  5. Form表单之复选框checkbox操作

    input复选(checkbox): <label>input复选1组:</label> <input type="checkbox" name=&q ...

  6. 可分组的选择框控件(MVVM下)(Toggle样式 仿造单选框RadioButton,复选框CheckBox功能)

    原地址: http://www.cnblogs.com/yk250/p/5660340.html 效果图如下:支持分组的单选框,复选框样式和MVVM下功能的实现.这是项目中一个快捷键功能的扩展. 1, ...

  7. Yii 生成表单下拉选框及查询下拉选框

    CHtml类参考: http://www.yiichina.com/api/CHtml#activeDropDownList-detail activeDropDownList() 方法 public ...

  8. asp.net MVC4 表单 - 下拉框

    1.下拉框代码方式 控制器内构建下拉项目: List<SelectListItem> list = new List<SelectListItem>(); list.Add(n ...

  9. Bootstrap3 表单-被支持的控件:文本域

    支持多行文本的表单控件.可根据需要改变 rows 属性. <textarea class="form-control" rows="3"></ ...

随机推荐

  1. Javascript:数组和字符串的相互转化

    中午吃饭的时候,和室友讨论前端的问题,然后一个有趣的问题被抛出来: javascript用什么方法可以把“hello world”位置反转输出,即输出:"dlrow olleh"? ...

  2. 修改文件权限 chmod

    $ chmod u+x file                   给file的属主增加执行权限 $ chmod 751 file                   给file的属主分配读.写.执 ...

  3. [Android开发常见问题-14] Unexpected namespace prefix "abc" found for tag SomeThing

    很多开发者朋友可能会自己定义一些控件,以此来扩展现有控件的功能,在扩展空间的时候通常会自己定义一些属性,例如: [html]  view plain copy   <android.alex.v ...

  4. Java正則表達式语法

    Java正則表達式语法 字符 说明 \ 将下一字符标记为特殊字符.文本.反向引用或八进制转义符.比如,"n"匹配字符"n"."\n"匹配换行 ...

  5. tomcat与resin的比较

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

  6. C++11: final与override

    C++11中增加了final与override关键字,貌似是从Java语言中借鉴而来,用途也一样.看例子代码: 01.#include <iostream> 02.  03.using n ...

  7. DataGrid( 数据表格) 组件[3]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  8. 查看 SELinux状态及关闭SELinux

    查看SELinux状态: 1./usr/sbin/sestatus -v      ##如果SELinux status参数为enabled即为开启状态 SELinux status:         ...

  9. 使用.NET框架、Web service实现Android的文件上传(二)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYUAAAKpCAIAAADcx6fPAAAgAElEQVR4nOydd1hT5+LHg1attbfr1t ...

  10. 有几数组表单,js怎么获得数组并动态相加输出到文本框

    有几数组表单,js如何获得数组并动态相加输出到文本框<input   name= "fee1[] "> <input   name= "fee2[] & ...