3-3-1 用AI建立發布文章的自適應表單

1. 要建立一個BootStrap5的表單可以參考：https://bootstrap5.hexschool.com/docs/5.0/forms/overview/
2. 可上傳的表單基本結構：

   <form action="admin.php" method="post" enctype="multipart/form-data">
   
     <!-- 各種表單元件 -->
   
     <div class="text-center">
       <input type="hidden" name="欄位name" value="隱藏值" />
       <button type="submit" class="btn btn-primary">送出</button>
     </div>
   </form>
   

   1. action 是指表單按下送出後，要將表單資料送往何處，此例會將變數送到 admin.php
   2. method 則是表單傳遞方法，預設為 get（通常用於搜尋），大部分會設成 post
   3. 若是要上傳檔案，務必加上 enctype="multipart/form-data"
   4. 送出鈕一定要是 type="submit" 才真能送出表單（放在表單中任何位置都可以）
3. 要建立表單之前，得先知道我們要存放哪些資料，如此才能設計表單。
4. 依據 https://blog.tcust.edu.tw/ 頁面可以知道，我們至少需要「文章標題」、「文章內容」、「發布者資訊」、「文章日期」、「文章類別」以及「上傳相片或影片」等欄位。
5. 因為自己建立表單太累，所以這種粗重的工作就交給AI來做：
   1. 開啟Bito外掛，若是還未登入，請輸入Email登入，並至信箱收取驗證碼，輸入驗證碼後，選擇帳號旁的「Sign-In」即可登入使用
      
   2. 輸入以下提示詞：
      請產生一個BootStrap5的中文橫式可上傳檔案的表單，也就是欄位標題在左邊，輸入框在右邊。   
      欄位包含：「文章標題」title、「文章內容」content、「發布者資訊」author、「文章日期」date、「文章類別」category以及「上傳相片或影片」media 等欄位。   
      「文章類別」請用下拉選單，其值與選項文字對應分別為：1=校園日誌、2=榮譽榜、3=媒體新聞   
      「上傳相片或影片」可以上傳多個檔案，並只限制 png、jpg、gif、mp4等格式可以上傳
      輸入框需有該欄位的輸入提示文字，例如：「請輸入...」
      送出後，以post方式送至admin.php。最後只要產生表單部份即可，不需要完整網頁。

   3. 將產生的語法插入到程式中
      

   4. 產生的語法如下，幾乎可以直接使用了。

      <form action="admin.php" method="post" enctype="multipart/form-data">
        <div class="mb-3 row">
          <label for="title" class="col-sm-3 col-form-label">文章標題</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="title" name="title" placeholder="請輸入文章標題">
          </div>
        </div>
        <div class="mb-3 row">
          <label for="content" class="col-sm-3 col-form-label">文章內容</label>
          <div class="col-sm-9">
            <textarea rows="8" class="form-control" id="content" name="content" placeholder="請輸入文章內容"></textarea>
          </div>
        </div>
        <div class="mb-3 row">
          <label for="author" class="col-sm-3 col-form-label">發布者資訊</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="author" name="author" placeholder="請輸入發布者資訊">
          </div>
        </div>
        <div class="mb-3 row">
          <label for="date" class="col-sm-3 col-form-label">文章日期</label>
          <div class="col-sm-9">
            <input type="date" class="form-control" id="date" name="date" placeholder="請選擇文章日期">
          </div>
        </div>
        <div class="mb-3 row">
          <label for="category" class="col-sm-3 col-form-label">文章類別</label>
          <div class="col-sm-9">
            <select class="form-select" id="category" name="category">
              <option value="1">校園日誌</option>
              <option value="2">榮譽榜</option>
              <option value="3">媒體新聞</option>
            </select>
          </div>
        </div>
        <div class="mb-3 row">
          <label for="media" class="col-sm-3 col-form-label">上傳相片或影片</label>
          <div class="col-sm-9">
            <input type="file" class="form-control" id="media" name="media[]" multiple accept=".png, .jpg, .gif, .mp4">
          </div>
        </div>
        <div class="mb-3 row">
          <div class="col-sm-9 offset-sm-3">
            <button type="submit" class="btn btn-primary">送出</button>
          </div>
        </div>
      </form>

       

   5. 檢查一下 name 的部份是否和資料庫欄位名稱一致即可，還有檔案上傳 name 的部份是否有加上中括號 [] 即可。