商用網站架設實務

LESSON-12 · solution

用狀態樣式與鍵盤操作讓表單和按鈕可理解

這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。

Starter3 個小成果
Checkpoint一個核心缺口
Solution4 個差異

開始前確認

這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。

會用到的檔案：index.html、style.css、main.js

本堂焦點：用狀態樣式與鍵盤操作讓表單和按鈕可理解

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

差異 1

不依賴 hover 也能辨識位置。

目的

不依賴 hover 也能辨識位置。

修改檔案

style.css

程式碼位置

:focus-visible and :focus-within

現在要做：先對照差異，再檢查 在 style.css 的「:focus-visible and :focus-within」對照這項變更：:focus-visible { outline:3px solid #1d4ed8; outline-offset:3px; } .field:focus-within { outline:2px solid #176b87; }

貼上位置：style.css 的 :focus-visible and :focus-within 區塊

:focus-visible { outline:3px solid #1d4ed8; outline-offset:3px; }
.field:focus-within { outline:2px solid #176b87; }

預期結果：Tab 進入欄位時控制項與父層都有狀態。

驗收證據：Tab、Computed outline、:focus-within。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 2

錯誤同時可視且可被輔助技術理解。

目的

錯誤同時可視且可被輔助技術理解。

修改檔案

main.js

程式碼位置

invalid state

現在要做：先對照差異，再檢查 在 main.js 的「invalid state」對照這項變更：email.setAttribute("aria-invalid", String(!email.checkValidity()));

貼上位置：main.js 的 invalid state 區塊

email.setAttribute("aria-invalid", String(!email.checkValidity()));

預期結果：錯誤 Email 顯示文字並聚焦。

驗收證據：Elements 屬性、錯誤文字與 activeElement。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 3

依互動責任選擇停用機制。

目的

依互動責任選擇停用機制。

修改檔案

index.html

程式碼位置

disabled and aria-disabled

現在要做：先對照差異，再檢查 在 index.html 的「disabled and aria-disabled」對照這項變更：<button type="button" aria-disabled="true">尚未開放</button>

貼上位置：index.html 的 disabled and aria-disabled 區塊

<button type="button" aria-disabled="true">尚未開放</button>

預期結果：能解釋 Tab 與 click 的差異。

驗收證據：Tab 順序、Elements 屬性與 click。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 4

修正鍵盤無法辨識位置。

目的

修正鍵盤無法辨識位置。

修改檔案

style.css

程式碼位置

:focus-visible

現在要做：先對照差異，再檢查 在 style.css 的「:focus-visible」對照這項變更：:focus-visible { outline:3px solid #1d4ed8; outline-offset:3px; }

貼上位置：style.css 的 :focus-visible 區塊

:focus-visible { outline:3px solid #1d4ed8; outline-offset:3px; }

預期結果：Tab 有高對比外框。

驗收證據：純鍵盤截圖與 Computed outline。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 solution 的可執行入口

index.htmlP0 專章可執行入口。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>LESSON-12 solution</title><link rel="stylesheet" href="style.css"></head><body><main><h1>表單狀態與鍵盤操作</h1><form id="contact-form"><div class="field"><label for="email">Email</label><input id="email" name="email" type="email" aria-describedby="email-help email-error" required><small id="email-help">使用可回覆的信箱。</small><p id="email-error" hidden>請輸入有效 Email。</p></div><button type="submit">驗證表單</button><button id="aria-disabled" type="button" aria-disabled="true">尚未開放</button><p id="status" role="status"></p></form></main><script src="main.js" defer></script></body></html>
style.cssP0 專章樣式與狀態證據。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC",sans-serif;line-height:1.7;color:#17324d;background:#eef5f8}body>main,body>header,body>footer,main{width:min(100% - 2rem,760px);margin:1rem auto;padding:1rem}a{color:#155e75}button,input,textarea{font:inherit}button{padding:.65rem .9rem}input,textarea{display:block;width:100%;padding:.6rem}@media(max-width:390px){body>main,body>header,body>footer,main{width:min(100% - 1rem,760px)}}
.field:focus-within{outline:2px solid #176b87;outline-offset:.35rem}input:user-invalid{border-color:#b42318}[aria-invalid="true"]{border-color:#b42318}[aria-disabled="true"]{opacity:.55}:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}
main.jsP0 專章互動與 Console 證據。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
const form=document.querySelector("#contact-form");const email=document.querySelector("#email");form.addEventListener("submit",(event)=>{event.preventDefault();const valid=email.checkValidity();email.setAttribute("aria-invalid",String(!valid));document.querySelector("#email-error").hidden=valid;document.querySelector("#status").textContent=valid?"驗證通過":"請修正 Email";if(!valid)email.focus();});

完成驗收

下一步

Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。

回到 README，整理本堂證據並銜接下一堂

繼續自主學習

開啟 examples/supplement/index.html；自學檔案不混入 Solution files。