:::

3-3-4 建立發布文章RWD表單

一、基本表單

  1. 要建立一個BootStrap5的表單可以參考:https://bootstrap5.hexschool.com/docs/5.0/forms/overview/
  2. 可上傳的表單基本結構:
    <form action="admin/index.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/index.php 因為日後我們想將後台放到 admin 目錄下的 index.php
    2. method則是表單傳遞方法,預設為 get(通常用於搜尋),大部分會設成 post
    3. 若是要上傳檔案,務必加上enctype="multipart/form-data"
    4. 送出鈕一定要是type="submit"才真能送出表單
       

二、水平表單

  1. 所謂水平表單指的就是欄位標題在左邊,輸入框在右邊的一種版型
  2. 水平表單的排版方式如下,詳細可參考:https://bootstrap5.hexschool.com/docs/5.0/forms/layout/#horizontal-form
    <div class="row mb-3">
      <label for="表單元件ID" class="col-md-2 col-form-label">
        文字標籤
      </label>
      <div class="col-md-10">
        表單元件
      </div>
    </div>
  3.  主要用 .row 來產生水平列
  4. 左邊 labelfor 會對應到表單元件的 id,class 務必加上 col-form-label
  5. 左右兩邊的大小用col-斷點-N來分,以 col-md-2 來說,就是標籤在平板以上的解析度時,就分成左邊2欄,右邊10欄之意。

:::

書籍目錄

展開 | 闔起

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

計數器

今天: 4158415841584158
昨天: 5069506950695069
總計: 5134606513460651346065134606513460651346065134606