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>
时间: 2024-10-10 04:37:55