:::

3-3-2 認識表單元件

  1. 檔案上傳的部份, name media[],表示這將傳送一個多值的陣列,加入 multiple 屬性,表示可以多選畢竟相片可能不只一張,並可用accept屬性來篩選允許上傳的副檔名

    <input type="file" class="form-control" id="media" name="media[]" multiple accept=".png, .jpg, .gif, .mp4">
  2. 表單元件可以參考:https://bootstrap5.hexschool.com/docs/5.0/forms/form-control/
  3. input (一般輸入框):
    <input
      type="輸入框類型"
      class="form-control"
      name="輸入框name"
      id="輸入框ID"
      placeholder="提示用的佔位文字"
      value="預設值"
    />

     

  4. textarea (大量文字框):

    <textarea
      class="form-control"
      name="輸入框name"
      id="輸入框ID"
      placeholder="提示用的佔位文字"
      rows="行數"
    >
    預設值
    </textarea>
  5. radio 單選或 checkbox 多選可參考:https://bootstrap5.hexschool.com/docs/5.0/forms/checks-radios/#inline
  6. radio 單選(行內用法)預設值用checked標出
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="輸入框name" id="輸入框1ID" value="選項值1" checked>
      <label class="form-check-label" for="輸入框1ID">選項文字1</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="輸入框name" id="輸入框2ID" value="選項值2">
      <label class="form-check-label" for="輸入框2ID">選項文字2</label>
    </div>

     

  7. checkbox 多選(行內用法)預設值用checked標出,可多個,注意 name 要加上 [] 才能多選。
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" name="輸入框name[]" id="輸入框1ID" value="選項值1" checked>
      <label class="form-check-label" for="輸入框1ID">選項文字1</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" name="輸入框name[]" id="輸入框2ID" value="選項值2">
      <label class="form-check-label" for="輸入框2ID">選項文字2</label>
    </div>

     

  8. select 下拉選單基本語法(https://bootstrap5.hexschool.com/docs/5.0/forms/select/):
    <select class="form-select" name="輸入框name" id="輸入框ID">
      <option selected>請選擇</option>
      <option value="值1">選項1</option>
      <option value="值2">選項2</option>
      <option value="值3">選項3</option>
      <option value="值4">選項4</option>
    </select>

:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1791

計數器

今天: 1534153415341534
昨天: 2198219821982198
總計: 7326392732639273263927326392732639273263927326392