:::

3-3-4-1 input 表單元件(一般輸入框)

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

    例如:

    <div class="row mb-3">
      <label for="title" class="col-md-2 col-form-label"> 文章標題 </label>
      <div class="col-md-10">
        <input type="text" name="title" id="title" class="form-control" placeholder="請輸入文章標題" value="" />
      </div>
    </div>
    
    <div class="row mb-3">
      <label for="info" class="col-md-2 col-form-label"> 相關資訊 </label>
      <div class="col-md-10">
        <input type="text" name="info" id="info" class="form-control" placeholder="可輸入撰稿人、拍照者...等資訊" value="" />
      </div>
    </div>
    
    <div class="row mb-3">
      <label for="date" class="col-md-2 col-form-label"> 活動日期 </label>
      <div class="col-md-10">
        <input type="date" name="date" id="date" class="form-control" placeholder="請設定活動日期" value="" />
      </div>
    </div>
    
    <div class="row mb-3">
      <label for="files" class="col-md-2 col-form-label"> 相片或影片 </label>
      <div class="col-md-10">
        <input type="file" name="files[]" id="files" class="form-control" placeholder="請上傳相片或影片"
          accept=".jpg,.jpeg,.png,.gif,.mp4" multiple />
      </div>
    </div>

     

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

  4. 最後看起來像這樣:


:::

書籍目錄

展開 | 闔起

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

計數器

今天: 4240424042404240
昨天: 5069506950695069
總計: 5134688513468851346885134688513468851346885134688