4-3 修改編輯表單使之可以送出資料

1. 修改 templates/create.tpl
2. 可上傳的表單基本結構：

   <h2 class="my-4">文章編輯表單</h2>
   <form action="admin.php" method="POST" enctype="multipart/form-data">
   
       <!-- 各種表單元件 -->
   
       <input type="hidden" name="op" value="store">
       <button type="submit" class="btn btn-primary">提交</button>
   </form>

   1. action 是指表單按下送出後，要將表單資料送往何處，此例會將變數送到 admin.php
   2. method 則是表單傳遞方法，預設為 get（通常用於搜尋），大部分會設成 post
   3. 若是要上傳檔案，務必加上 enctype="multipart/form-data"
   4. 這裡放了一個隱藏欄位 <input type="hidden" name="op" value="store"> 用來告知 admin.php 要執行什麼動作
   5. 送出鈕一定要是 type="submit" 才真能送出表單（放在<form></form>表單中的任何位置都可以）

 常用表單元件

1. 表單元件可以參考：https://bootstrap5.hexschool.com/docs/5.0/forms/form-control/
2. 掌握幾個重點：
   1. 表單元件一定要有 name 屬性，此 name 的值送出後會變成PHP的變數，用  get 送出，得到 $_GET['xxx']，用  post 送出，得到 $_POST['xxx']
   2. 我們通常用 class 屬性來設定外觀或者是否必填
   3. id 屬性在設定是否必填時一定要有（通常是給 javascript抓取用）

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>