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>