:::
22. 表單
22-1 表單群組
一、標籤在上，輸入框在下的表單群組
- 「表單群組」是指一組「標籤+輸入元件」。
- 在 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>
-
一樣，要修改後才能用，例如：
<div class="form-group"> <label for="name">姓名</label> <input type="text" class="form-control" name="name" id="name" placeholder="請輸入姓名"> </div>
二、標籤在左，輸入框在右的表單群組
- 在
.form-group後要加一個.row，才能變成水平輸入表單。 - 在
<label>中要加入.col-sm-*指定標籤空間大小，還要加入.col-form-label確保和輸入元件可以垂直對齊。 <input>外面要用<div>包起來，並加入.col-sm-*指定輸入框的空間大小- 若是希望標籤可以靠右邊對齊，則可加入
.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> -
如果要在欄位下方加上說明，可用
.form-text，並用.text-danger來設定成紅色，如：<p class="form-text text-danger"> 此為修改資料用的密碼 </p>
