PHP 程式設計師必備的 HTML 表單與輸入元素完整指南

PHP 後端處理表單提交是基礎核心技能，熟悉 HTML 表單屬性、輸入類型、編碼規則與檔案上傳細節，能避免大量常見 Bug。本文系統整理表單核心知識點。

表單基礎結構

<form name="form1" id="form1" method="GET|POST" action="提交URL" 
      target="_blank|_parent|_self|_top" enctype="multipart/form-data">
  <!-- 表單元素 -->
</form>

關鍵屬性說明

• method：GET 參數顯於 URL（長度限制、可書籤），POST 隱於請求主體（無長度限制、檔案上傳必須用 POST）
• enctype：
  • application/x-www-form-urlencoded（預設）：一般表單資料
  • multipart/form-data：檔案上傳必須指定
  • text/plain：極少用
• target：控制回應顯示位置，_blank 新分頁、_self 當前頁（預設）

輸入元素完整速查表

文字類

<input type="text" name="" id="" value="" class="" />
<input type="password" name="" id="" value="" class="" />
<input type="hidden" name="" id="" value="" class="" />

檔案上傳

<input type="file" name="" id="" value="" class="" accept="" />

accept 屬性 MIME 類型速查（可多值，逗號分隔）

• 圖片：image/*、image/jpeg、image/png、image/gif
• 文件：application/msword、application/pdf、application/vnd.ms-excel、application/zip
• 音訊：audio/*、audio/mpeg、audio/wav
• 視訊：video/*、video/mp4、video/quicktime
• 多類型：accept="image/jpeg, image/png, application/pdf"

選擇類

<input type="radio" name="group" value="1" checked="checked" /> 
<input type="checkbox" name="items[]" value="1" checked="checked" /> 
<select name="single"><option value="1" selected>選項</option></select>
<select name="multi[]" multiple size="5"><option value="1">選項</option></select> 
<textarea name="desc" rows="5" cols="40">內容</textarea>

按鈕類

<input type="submit" value="提交" />   
<input type="reset" value="重置" />   
<input type="button" value="按鈕" />  
<input type="image" src="btn.png" />  

PHP 端接收重點

• $_GET、$_POST：對應 method 取得一般欄位
• $_FILES：檔案上傳資訊（name、tmp_name、size、error、type）
• 核取方塊陣列：name="items[]" → $_POST['items'] 為陣列
• id 屬性在頁面唯一，name 可重複（單選/核取方塊分組）

URL 編碼與特殊字元處理

• 中文、空格、&、=、?、# 等特殊字元在 URL 參數中需編碼
• PHP 編碼：urlencode()、rawurlencode()（RFC 3986，空格編為 %20）
• PHP 解碼：urldecode()、rawurldecode()
• JS 編碼：encodeURIComponent()、decodeURIComponent()

常見坑點提醒

1. 檔案上傳忘設 enctype → $_FILES 為空
2. GET 請求超長截斷 → 改用 POST
3. 核取方塊未勾選不傳值 → PHP 需用 isset() 判斷
4. 多選下拉選單 name 必須加 [] → 否則只取得最後一個值
5. id 重複導致 JS/label 關聯錯誤 → 確保唯一

掌握表單細節，能讓後端驗證、資料綁定、檔案處理更順暢，減少前後端溝通成本與隱性 Bug。