22-1 表單群組

一、標籤在上，輸入框在下的表單群組

1. 「表單群組」是指一組「標籤+輸入元件」。
2. 在 Visual Studio Code 中輸入b4-form-group按 Enter 可以快速產生一組表單元件群組的語法。

   <div class="form-group">
     <label for=""></label>
     <input type="text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
     <small id="helpId" class="text-muted">Help text</small>
   </div>

3. 一樣，要修改後才能用，例如：

   <div class="form-group">
       <label for="name">姓名</label>
       <input type="text" class="form-control" name="name" id="name" placeholder="請輸入姓名">
   </div>

二、標籤在左，輸入框在右的表單群組

1. 在.form-group後要加一個.row，才能變成水平輸入表單。
2. 在<label>中要加入.col-sm-* 指定標籤空間大小，還要加入.col-form-label確保和輸入元件可以垂直對齊。
3. <input>外面要用<div>包起來，並加入.col-sm-* 指定輸入框的空間大小
4. 若是希望標籤可以靠右邊對齊，則可加入.text-sm-right，如此，只有螢幕大於576px時才會靠右，小螢幕時，最自動回到左上方。例如：

   <div class="form-group row">
       <label for="name" class="col-sm-2 col-form-label text-sm-right">姓名</label>
       <div class="col-sm-10">
           <input type="text" class="form-control" name="name" id="name" placeholder="請輸入姓名">
       </div>
   </div>

5. 如果要在欄位下方加上說明，可用.form-text，並用.text-danger來設定成紅色，如：

   <p class="form-text text-danger">
       此為修改資料用的密碼
   </p>