:::

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 的部份是否有加上中括號 [] 即可。


:::

書籍目錄

展開 | 闔起

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

計數器

今天: 1465146514651465
昨天: 1416141614161416
總計: 7340112734011273401127340112734011273401127340112