1HTML 表單：從零建立與常用輸入元件
學習重點
<form>用於收集輸入：action指定提交目標，method指定 GET 或 POST。name代表「提交欄位名稱」：PHP 以$_GET["name"]或$_POST["name"]取值。id主要供 CSS／JavaScript 選取、以及<label for>對應；不等同提交欄位。- 常用輸入元件：
text、password、date、time（時間選擇器）、select、複選框（checkbox）、submit。
瀏覽器提交表單時，並不會把整個 HTML 送到伺服器，而是把具備 name 的欄位整理成一組 name=value 的資料，再送至伺服器端程式處理。
action：提交到哪個 URL（通常是某個 PHP 檔案）。method：資料如何傳送；常用get或post。
name：伺服器端取值用（提交鍵）。id：前端定位用（CSS/JS/label）。
常見錯誤是只寫 id 而忘記 name，導致 $_POST／$_GET 取不到資料。
若同一組複選框要提交多個值，可用 name="hobby[]" 令 PHP 以陣列形式接收，再用 foreach 逐項處理。
表單骨架：最少需要哪些欄位？
<form action="handle.php" method="post">
<label>姓名：<input type="text" name="studentName"></label>
<button type="submit">提交</button>
</form>
- 提交目標：
action指向負責處理的 PHP 檔案。 - 提交方法：
method決定用$_GET還是$_POST接收。 - 欄位命名：每個需要提交的元件必須具備
name。
常用輸入元件與適用情境
| 元件 | HTML 範例 | 常見用途 | 注意事項 |
|---|---|---|---|
| 文字框 | <input type="text" ...> |
姓名、關鍵字、一般文字 | 仍需伺服器端有效性檢驗（例如長度） |
| 密碼框 | <input type="password" ...> |
密碼輸入 | 只遮蔽顯示，不代表安全；不可把明文密碼存入曲奇 |
| 日期 | <input type="date" ...> |
生日、日期選擇 | 不同瀏覽器呈現略異；伺服器端仍要檢查格式 |
| 時間 | <input type="time" ...> |
預約時間、上課開始時間 | 伺服器端仍要檢查格式與合理範圍（例如只接受 08:00–18:00） |
| 下拉式選單 | <select name="...">...</select> |
班別、選項限制輸入範圍 | 伺服器端應用 in_array() 驗證值是否在允許清單 |
| 複選框 | <input type="checkbox" ...> |
興趣多選 | 多值建議用 name="x[]"，伺服器端以陣列接收 |
| 提交按鈕 | <button type="submit">...</button> |
提交表單 | 可配合必填提示，但不可取代伺服器端檢查 |
代碼小練習：表單實作（2 個任務）
每個任務均提供：提示／核對答案／顯示參考答案。請在下方以分頁切換任務，逐題完成。
任務 1：重組示範表單（填寫 action／method／class）
- 只修改標示為
TODO的位置：action、method、以及每個label的class。 - 完成後按「核對答案」：系統會檢查表單是否使用指定的提交位置及排版類別。
任務 2：情境題：設計一個「活動預約表單」
- 依題目要求，在表單內同時使用：
text、password、date、time、select、checkbox、submit。 - 只需要完成 HTML（本題不要求 PHP 處理）。
2GET 與 POST 的選用原則
學習重點
- GET：資料出現在劃一資源定位（URL）的查詢字串；適合搜尋、篩選、分享結果。
- POST：資料放在 request body；較適合登入、提交個人資料、更新操作。
- PHP 接收：GET 用
$_GET；POST 用$_POST；顯示回頁面時應使用htmlspecialchars()。
差異、優缺點與適用情境（表格）
| 比較項 | GET | POST |
|---|---|---|
| 資料位置 | URL 查詢字串（可見） | request body（URL 不直接顯示） |
| 可分享／可書籤 | 容易（URL 包含參數） | 一般不便（URL 不含提交內容） |
| 私隱與保安 | 較弱：容易被記錄於瀏覽器歷史、伺服器日誌 | 較佳：不直接暴露於 URL（但仍需 HTTPS 才能保護傳輸） |
| 資料量 | 受 URL 長度限制 | 一般可提交較多資料 |
| 常見用途 | 搜尋、排序、篩選、分頁 | 登入、註冊、提交表單、更新／刪除操作 |
選用原則：以問題導向作判斷
- 需要分享或收藏結果嗎？若需要，通常選 GET（例如搜尋結果）。
- 包含敏感資料嗎？若包含（例如密碼、身份資料），應選 POST，並配合 HTTPS。
- 資料是否會改變伺服器狀態？若會（新增／更新／刪除），一般選 POST（或其他方法）。
- 資料量是否較大？若較大，通常選 POST。
即時示範：GET 搜尋（顯示輸入）
Checkpoint：GET 與 POST 的選用原則（≥40 題）
本小測以四選一為主，涵蓋情境判斷、URL 可見性、長度限制與私隱風險。
（按「開始小測」或「下一題」開始）
3伺服器端有效性檢驗：不可只依賴客戶端
學習重點
- 客戶端（client-side）檢查可提升體驗，但可被關閉或繞過；最終必須由伺服器端（server-side）把關。
- 常用函數：
isset()、empty()、in_array()、is_numeric()、is_string()、strlen()、strpos()。 - 典型流程：存在性 → 必填 → 型別／格式 → 範圍／白名單 →（需要時）輸出前處理。
常用函數速查：檢查甚麼、回傳甚麼、常見陷阱
| 函數 | 檢查內容 | 回傳值（重點） | 常見陷阱／注意 | 簡例 |
|---|---|---|---|---|
isset($x) |
變數是否存在且不為 null |
布爾值：存在且非 null → true |
只代表「存在」，不代表「不空」 | if(isset($_POST['name'])) ... |
empty($x) |
是否為「空值」 | 布爾值：空 → true |
"0" 亦視為空；若 0 合法，應改用更精準判斷 |
if(empty($_POST['age'])) ... |
in_array($v,$arr) |
值是否在允許清單（白名單）內 | 布爾值：找到 → true |
必要時使用第三參數 true 作嚴格比較 |
in_array($cls,$allow,true) |
is_numeric($x) |
是否可視為數值 | 布爾值 | 通過後仍建議轉型（例如 (int)）再作範圍檢查 |
if(!is_numeric($age)) ... |
is_string($x) |
是否為字串（string） | 布爾值 | 表單輸入多數是字串；更常用的是長度／格式／白名單 | if(is_string($name)) ... |
strlen($s) |
字串長度 | 整數 | 用於最少／最多字元限制；輸入前可先 trim() |
if(strlen($pw)<8) ... |
strpos($s,$sub) |
子字串首次出現的位置 | 整數位置或 false |
0 代表「在第一個位置找到」；判斷找不到必須用 === false |
if(strpos($email,'@')===false) ... |
代碼小練習：以多個函數完成輸入檢查（填空題｜7 個任務）
請以分頁切換任務。每個任務均提供：提示／核對答案／顯示參考答案／講解；請只修改題目標示為 TODO 的位置。
任務 1：用 isset() 檢查欄位是否存在
- 在伺服器端先確認必須欄位（例如
user、age）是否存在於$_POST。 - 如缺少欄位，請把訊息加入
$errors，並輸出錯誤清單。
任務 2：用 empty() 檢查必填欄位
- 把輸入
trim()後，再用empty()檢查是否留空。 - 如留空，請輸出清楚的錯誤原因（例如「用戶名稱不可留空」）。
任務 3：用 is_numeric() 檢查數值（並加上範圍）
- 檢查年齡是否為數字；若不是，加入錯誤。
- 如是數字，請把它轉為整數並檢查範圍（例如 1–120）。
任務 4：用 is_string() 與 strlen() 檢查字串長度
- 檢查用戶名稱是否為字串（示範用途），並限制長度介乎 3–12 字元。
- 如不符合，請輸出對應錯誤訊息。
任務 5：用 in_array() 做白名單驗證（選單值）
- 把允許值寫成陣列（白名單），再用
in_array()驗證。 - 建議使用嚴格比對（第三個參數設為
true）。
任務 6：用 strpos() 檢查格式（處理 0 的陷阱）
- 檢查電郵是否包含
@。 - 提示：
strpos()找到位置 0 代表「在第一個字元找到」；判斷找不到必須用=== false。
任務 7：綜合練習：串連多個函數完成輸入檢查
- 按「存在 → 必填 → 格式 → 範圍／白名單」的順序完成檢查。
- 把所有錯誤集中顯示（不要只顯示第一個錯誤）。
Checkpoint：伺服器端有效性檢驗（≥40 題）
本小測以四選一為主，包含：函數配對、常見陷阱（特別是 strpos()）、以及程式片段判讀。
（按「開始小測」或「下一題」開始）
4曲奇（Cookie）：用途、好處與壞處、適用與不適用情境
學習重點
- 曲奇是瀏覽器儲存的小型文字檔案，並會在之後的請求自動帶回伺服器。
- 常見用途：記住偏好（主題、語言）、保留某些狀態（例如「已同意提示」）。
- 風險：曲奇可被竄改，亦可能被用於追蹤；不應存放敏感資料（例如明文密碼）。
曲奇可存甚麼？不應存甚麼？
- 適合：偏好設定（例如字體大小、介面主題）、非敏感標記（例如「已完成新手導覽」）。
- 不適合：明文密碼、身份證號碼等敏感資料；以及會直接影響權限的關鍵資料（除非配合簽署／伺服器端驗證）。
基本用法：設置與讀取
<?php
// 設置：把鍵值寫入曲奇（實務上可加入有效期等參數）
setcookie("username", "amy", time() + 86400);
// 讀取：從 $_COOKIE 取得
$u = $_COOKIE["username"] ?? "";
echo "歡迎，" . htmlspecialchars($u);
?>
即使資料來自曲奇，仍應視為外來輸入：必要時要做伺服器端驗證，輸出前亦要使用 htmlspecialchars()。
清除指定曲奇：把有效期設為過去
<?php
// 刪除：把同名曲奇的有效期設為過去（並確保 path 與建立時一致）
setcookie("username", "", time() - 3600, "/");
?>
要成功刪除曲奇，path/domain 等參數必須與原本設置時一致；否則可能出現「看似刪除，但實際上仍存在」的情況。
互動示範：以曲奇（Cookie）記住使用者名稱（可試玩）
情境：網站希望在使用者下次回訪時顯示「歡迎回來，使用者名稱」。
請在下方模擬器輸入名稱並提交，然後再次提交或按「執行」，觀察 $_COOKIE 的變化；再按「清除曲奇」。
注意：此模擬器為教學用途，setcookie() 在同一次執行中亦會即時反映於 $_COOKIE（與真實伺服器環境「下次請求才會讀到」的行為略有差異）。
Checkpoint：曲奇（Cookie）（≥40 題）
本小測以四選一為主，涵蓋用途、好處／壞處、以及情境判斷（應否使用曲奇）。
（按「開始小測」或「下一題」開始）
5Session：概念、基本用法與曲奇的分別
學習重點
- Session 用於在伺服器端保存用戶狀態（例如登入狀態），並可跨多次請求維持。
- 基本流程：
session_start()→ 讀寫$_SESSION[...]→（需要時）登出清除。 - Session 與曲奇的關係：瀏覽器通常會保存一個 Session ID（常以曲奇形式帶回），伺服器端再以此對應 Session 資料。
甚麼是 Session？為何常用於登入？
HTTP 請求本質上無狀態；若要「記住」某位用戶已通過身份核對，便需要保存狀態。 Session 把狀態資料放在伺服器端，通常只把一個識別碼交由瀏覽器保存並帶回，因此比把完整狀態直接放在曲奇更合適用於登入。
基本流程（示意）
- 在需要使用 Session 的頁面最上方呼叫
session_start()。 - 登入成功後：設定
$_SESSION["logged_in"] = true，並保存必要的用戶識別資料（例如user_id）。 - 受保護頁面：先檢查
$_SESSION是否存在登入標記；不符合則導向登入頁。 - 登出：清除 Session（例如
session_unset()或session_destroy()）。
代碼示範：登入、受保護頁面與登出
以下以三個檔案示範最基本流程：登入成功後建立 Session；受保護頁面先檢查 Session；登出時清除 Session。實務上仍需配合 HTTPS、伺服器端有效性檢驗及更嚴謹的權限控制。
login.php（建立 Session）
<?php
session_start();
if (!empty($_POST)) {
$user = trim($_POST['user'] ?? '');
$pw = trim($_POST['pw'] ?? '');
// 示範：以固定帳號/密碼判斷（實務應使用資料庫與雜湊）
if ($user === 'student' && $pw === 'abc') {
$_SESSION['logged_in'] = true;
$_SESSION['username'] = $user;
header('Location: welcome.php');
exit;
} else {
$error = '帳號或密碼錯誤。';
}
}
?>
<form method="post">
<label class="inline-input">帳號：<input name="user"></label>
<label class="inline-input">密碼：<input type="password" name="pw"></label>
<button class="btn" type="submit">登入</button>
</form>
<?php
if (!empty($error)) echo '<p>' . htmlspecialchars($error) . '</p>';
?>
welcome.php（檢查 Session）
<?php
session_start();
if (empty($_SESSION['logged_in'])) {
header('Location: login.php');
exit;
}
$u = $_SESSION['username'] ?? '';
?>
<p>歡迎，<strong><?php echo htmlspecialchars($u); ?></strong>！</p>
<p><a href="logout.php">登出</a></p>
logout.php（清除 Session）
<?php
session_start();
session_unset();
session_destroy();
header('Location: login.php');
exit;
?>
互動示範：以 Session 保存登入狀態（可試玩）
情境：網站需要在多次 HTTP 請求之間保存「已登入」狀態。
請在下方模擬器使用測試帳號登入，觀察登入後內容如何由 $_SESSION 控制；再按「登出」清除 Session。
此示範把「登入頁面」與「會員區」寫在同一檔案內，以便在模擬器中試玩；在真實網站中可拆成多頁並配合導向（redirect）流程。
Session 與曲奇：如何比較？
| 項目 | 曲奇（Cookie） | Session |
|---|---|---|
| 主要儲存位置 | 客戶端（瀏覽器） | 伺服器端 |
| 資料可否被用戶改動 | 較容易（可被修改） | 較難（用戶通常只持有 Session ID） |
| 常見用途 | 偏好、非敏感狀態 | 登入狀態、權限控制 |
| 保安重點 | 不應存敏感資料；內容需驗證 | 保護 Session ID、避免被盜用；伺服器端設計需嚴謹 |
Checkpoint：Session 概念與流程（≥40 題）
本小測以四選一為主，涵蓋 Session 基本概念、session_start()、$_SESSION 用法，以及 Session vs 曲奇分辨。
（按「開始小測」或「下一題」開始）
6其他常見延伸課題：表單安全、XSS 與錯誤訊息
學習重點
- 不要信任前端：客戶端限制可被繞過；伺服器端必須以白名單（允許清單）做檢查。
- 基本輸入清理（輸出前處理）：把用戶輸入顯示回頁面前，使用
htmlspecialchars()降低 XSS 風險。 - 錯誤訊息設計：避免洩露伺服器細節（檔案路徑、SQL、堆疊追蹤），同時提供足夠提示讓用戶修正。
表單安全：以白名單驗證為核心
前端可提供下拉式選單限制輸入，但用戶仍可自行構造請求提交未列於選單的值。
因此伺服器端應把可接受的值列入「允許清單」，並以 in_array() 等方法檢查；不符合即拒絕處理。
<?php
$allow = ["1A","1B","1C"];
$cls = $_POST["class"] ?? "";
if (!in_array($cls, $allow, true)) {
die("班別不在允許清單內。");
}
?>
XSS 基本概念：為何要做輸出前處理？
若把用戶輸入直接輸出到網頁，輸入內容可能被瀏覽器當作 HTML／JavaScript 解讀，造成跨網站腳本攻擊（XSS）。
基本防線是：在輸出前使用 htmlspecialchars() 把特殊字元轉換為安全形式。
<?php
$msg = $_GET["msg"] ?? "";
echo "<p>留言：" . htmlspecialchars($msg) . "</p>";
?>
錯誤訊息設計：既要清楚，又要避免洩露細節
- 給用戶看的訊息：指出哪個欄位不符合要求，以及如何修正（例如「密碼最少 8 字元」）。
- 避免洩露：不要直接輸出伺服器路徑、資料庫錯誤全文、或系統堆疊追蹤。
- 給開發者看的細節：可記錄到伺服器日誌（本課程先理解概念即可）。
Checkpoint：延伸課題（≥40 題）
本小測以四選一為主，涵蓋：白名單驗證、輸出前處理（XSS 概念）、以及錯誤訊息的設計原則。
（按「開始小測」或「下一題」開始）
✍️頁末 20 題 Coding（一行一題）
每題均提供：提示／核對答案／顯示參考答案／講解。請在模擬器內完成代碼，然後按「核對答案」。