關於bootstrap--表單（下拉、輸入框、文本域 復選框 和單選按鈕 ）

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>