:::

22-1 表單群組

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

  1. 「表單群組」是指一組「標籤+輸入元件」。
  2. 在 Visual Studio Code 中輸入b4-form-groupEnter 可以快速產生一組表單元件群組的語法。
    <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>

     


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D971

計數器

今天: 3387338733873387
昨天: 1988198819881988
總計: 7390278739027873902787390278739027873902787390278