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

 

 

来源：https://www.cnblogs.com/shark1100913/p/5633182.html