LESSON-12 · 零基礎學生教材
用狀態樣式與鍵盤操作讓表單和按鈕可理解
完成滑鼠與鍵盤都能辨識的表單狀態，並在窄版看見清楚的錯誤提示。
先理解：這堂課解決什麼問題？
聯絡頁看似完成，但使用鍵盤或填寫錯誤時，訪客不一定知道目前焦點與問題在哪裡。
本堂要完成：完成滑鼠與鍵盤都能辨識的表單狀態，並在窄版看見清楚的錯誤提示。
學習邊界：先完成「用狀態樣式與鍵盤操作讓表單和按鈕可理解」，不提前引入尚未教過的框架或建置工具。
先備知識與操作環境
本章專用教材只使用既定技術邊界。先開啟 examples/minimal.html，再依 Starter→Checkpoint→Solution 留下 Tab 順序、focus-visible、欄位錯誤、disabled 狀態與對比檢查 證據。
- 檔案位置：先找到
contact.html、button、input、textarea、:hover、:focus-visible與 aria-label，再從本頁的最小實驗開始。 - 瀏覽器：開啟最小實驗與階段頁；每次修改後儲存並重新整理。
- DevTools：依本堂內容使用 Elements、Styles、Computed、Console 或 Network，記下第一個可觀察證據。
- 操作習慣：每次只修改一個檔案或一個責任，先預測、再操作、最後驗收。
先做最小實驗：先看見結果
這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。
- 入口：開啟
examples/minimal.html。 - 操作：開啟專章最小範例，以 Tab 完成一次操作，並比對畫面、Elements、Console 與 390px。
- 預期：畫面只呈現 :focus-within、:invalid 與 :user-invalid、aria-invalid 與 aria-describedby、disabled 與 aria-disabled 的本章責任，不出現跨章模板。
- 重設：重新整理
examples/minimal.html，不寫入正式資料也不執行正式部署。
學生練習流程
依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。
-
1
最小實驗
先閱讀本頁的問題、檔案地圖、名詞卡與最小例子。 -
2
Step 2
自己回答互動問答 4 題，再展開解析。 -
3
最小實驗 2
開啟最小實驗，實際操作一次並記下證據。 -
4
Starter
把 Starter 複製到自己的工作資料夾，照 3 張微步驟卡逐一完成；每一步都要看到結果再繼續。 -
5
Checkpoint
前往 Checkpoint，只處理 1 個本堂核心缺口；先預測，再用指定證據驗收。 -
6
Solution
前往 Solution，先看逐檔差異與修改原因，再決定要不要把完整內容帶回自己的檔案。 -
7
變體驗收
完成情境變體與獨立挑戰，留下檔案位置、操作、結果與驗收證據，並閱讀下一堂銜接：Transition 與整理：下一堂會讓狀態變化更平順，並整理共用樣式。
檔案地圖：每個位置負責什麼？
先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。
contact.html專章檔案：負責 用狀態樣式與鍵盤操作讓表單和按鈕可理解 的可執行結果。button專章檔案：負責 用狀態樣式與鍵盤操作讓表單和按鈕可理解 的可執行結果。input專章檔案：負責 用狀態樣式與鍵盤操作讓表單和按鈕可理解 的可執行結果。textarea專章檔案：負責 用狀態樣式與鍵盤操作讓表單和按鈕可理解 的可執行結果。:hover專章檔案：負責 用狀態樣式與鍵盤操作讓表單和按鈕可理解 的可執行結果。:focus-visible 與 aria-label專章檔案：負責 用狀態樣式與鍵盤操作讓表單和按鈕可理解 的可執行結果。
先學會這些詞
先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。
焦點與驗證
2 個詞:focus-within:focus-within 白話意思：用來理解「:focus-within」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 :focus-within 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 :focus-within 或排查相關問題時。
- 最小範例
- :focus-within
- 可觀察證據
- 能在專章範例指出 :focus-within 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
:invalid 與 :user-invalid:invalid 與 :user-invalid 白話意思：用來理解「:invalid 與 :user-invalid」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 :invalid 與 :user-invalid 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 :invalid 與 :user-invalid 或排查相關問題時。
- 最小範例
- :invalid 與 :user-invalid
- 可觀察證據
- 能在專章範例指出 :invalid 與 :user-invalid 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
錯誤與停用契約
2 個詞aria-invalid 與 aria-describedbyaria-invalid 與 aria-describedby 白話意思：用來理解「aria-invalid 與 aria-describedby」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 aria-invalid 與 aria-describedby 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 aria-invalid 與 aria-describedby 或排查相關問題時。
- 最小範例
- aria-invalid 與 aria-describedby
- 可觀察證據
- 能在專章範例指出 aria-invalid 與 aria-describedby 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
disabled 與 aria-disableddisabled 與 aria-disabled 白話意思：用來理解「disabled 與 aria-disabled」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 disabled 與 aria-disabled 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 disabled 與 aria-disabled 或排查相關問題時。
- 最小範例
- disabled 與 aria-disabled
- 可觀察證據
- 能在專章範例指出 disabled 與 aria-disabled 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
驗收與除錯
2 個詞可觀察證據可觀察證據 白話意思：用來理解「可觀察證據」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 可觀察證據 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 可觀察證據 或排查相關問題時。
- 最小範例
- 可觀察證據
- 可觀察證據
- 能在專章範例指出 可觀察證據 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
單一變因除錯單一變因除錯 白話意思：用來理解「單一變因除錯」的實務概念。 展開查看正式定義、範例與驗收證據
- 正式定義
- 本章將 單一變因除錯 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
- 什麼時候用
- 實作 單一變因除錯 或排查相關問題時。
- 最小範例
- 單一變因除錯
- 可觀察證據
- 能在專章範例指出 單一變因除錯 的操作結果。
- 容易混淆
- 只記名稱卻沒有實際操作或驗收證據。
最小例子：先看懂，再複製
這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。
:focus-visible { outline:3px solid #1d4ed8; outline-offset:3px; }
.field:focus-within { outline:2px solid #176b87; }Live Lab：逐段讀碼與驗證
每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。
-
Step 1
建立鍵盤焦點與欄位組狀態
- 目的
- 不依賴 hover 也能辨識位置。
- 修改位置
style.css
建立鍵盤焦點與欄位組狀態- 預期結果
- Tab 進入欄位時控制項與父層都有狀態。
- 驗收證據
- Tab、Computed outline、:focus-within。
- 卡住先查
- 只檢查目前指定的檔案與區塊。
-
Step 2
同步 validity、aria-invalid 與 aria-describedby 錯誤訊息
- 目的
- 錯誤同時可視且可被輔助技術理解。
- 修改位置
main.js
同步 validity、aria-invalid 與 aria-describedby 錯誤訊息- 預期結果
- 錯誤 Email 顯示文字並聚焦。
- 驗收證據
- Elements 屬性、錯誤文字與 activeElement。
- 卡住先查
- 只檢查目前指定的檔案與區塊。
-
Step 3
比較 disabled 與 aria-disabled 的操作行為
- 目的
- 依互動責任選擇停用機制。
- 修改位置
index.html
比較 disabled 與 aria-disabled 的操作行為- 預期結果
- 能解釋 Tab 與 click 的差異。
- 驗收證據
- Tab 順序、Elements 屬性與 click。
- 卡住先查
- 只檢查目前指定的檔案與區塊。
-
Step 4
恢復被移除的焦點
- 目的
- 修正鍵盤無法辨識位置。
- 修改位置
style.css
恢復被移除的焦點- 預期結果
- Tab 有高對比外框。
- 驗收證據
- 純鍵盤截圖與 Computed outline。
- 卡住先查
- 只檢查目前指定的檔案與區塊。
-
Step 5
專章驗收：:focus-within
- 目的
- 將概念轉成可重現的實作證據。
- 修改位置
examples/minimal.html與對應 stage files
操作 :focus-within 並記錄結果。- 預期結果
- 能展示 :focus-within 的畫面、DOM、Console 或 Network 證據。
- 驗收證據
- 檔案位置、操作、預期、實際與重新驗證。
- 卡住先查
- 只重做一個最小操作並查看第一個錯誤。
-
Step 6
專章驗收：:invalid 與 :user-invalid
- 目的
- 將概念轉成可重現的實作證據。
- 修改位置
examples/minimal.html與對應 stage files
操作 :invalid 與 :user-invalid 並記錄結果。- 預期結果
- 能展示 :invalid 與 :user-invalid 的畫面、DOM、Console 或 Network 證據。
- 驗收證據
- 檔案位置、操作、預期、實際與重新驗證。
- 卡住先查
- 只重做一個最小操作並查看第一個錯誤。
讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。
互動問答
先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。
Q1概念理解 「:focus-within」在本堂要解決什麼問題？ 本題線索：:focus-within；回到名詞卡與 能在專章範例指出 :focus-within 的操作結果。 展開解析收合解析
白話解析：
用來理解「:focus-within」的實務概念。 正式來說，本章將 :focus-within 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
對照位置：
回到名詞卡「:focus-within」，再看 能在專章範例指出 :focus-within 的操作結果。
預期觀察：
你應該能用自己的話說出：實作 :focus-within 或排查相關問題時。
常見錯誤：
不要只回答「它是:focus-within」；那是重複名詞，不是說明責任。
立即驗證：
開啟 examples/minimal.html，依序做「開啟專章最小範例，以 Tab 完成一次操作，並比對畫面、Elements、Console 與 390px。」並記下畫面或工具證據。
Q2程式碼閱讀
修改指定規則後，你預測畫面會看到什麼？
本題線索：style.css；要修改：建立鍵盤焦點與欄位組狀態；觀察：Tab、Computed outline、:focus-within。
展開解析收合解析
白話解析：
先看檔案責任，再預測結果。這一步的目的：不依賴 hover 也能辨識位置。
對照位置：
對照 Live Lab Step 1，位置是 style.css；範例內容：:focus-visible { outline:3px solid #1d4ed8; outline-offset:3px; }
.field:focus-within { outline:2px solid #176b87; }
預期觀察：
Tab 進入欄位時控制項與父層都有狀態。
常見錯誤：
如果只改了檔案但沒有結果，先不要重寫全部；只檢查目前指定的檔案與區塊。
立即驗證：
實際操作後檢查 Tab、Computed outline、:focus-within。。
Q3概念比較
「:focus-within」和「:invalid 與 :user-invalid」在本堂的責任有什麼不同？
本題線索：比較 :focus-within 與 :invalid 與 :user-invalid；操作位置：main.js
展開解析收合解析
白話解析：
:focus-within：用來理解「:focus-within」的實務概念。；:invalid 與 :user-invalid：用來理解「:invalid 與 :user-invalid」的實務概念。
對照位置：
對照兩張名詞卡的正式定義：本章將 :focus-within 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。／本章將 :invalid 與 :user-invalid 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
預期觀察：
你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。
常見錯誤：
不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。
立即驗證：
在 main.js 做「同步 validity、aria-invalid 與 aria-describedby 錯誤訊息」，再用 Elements 屬性、錯誤文字與 activeElement。 比較前後差異。
Q4除錯驗收
如果完成操作後結果不對，你會先從哪一個證據開始查？
本題線索：examples/minimal.html 與對應 stage files；第一個檢查位置：檔案位置、操作、預期、實際與重新驗證。
展開解析收合解析
白話解析：
先描述症狀，再提出一個最小假設。本堂常見錯誤是：只口頭說明完成。
對照位置：
對照最後一段 Live Lab：examples/minimal.html 與對應 stage files；檢查方式：只重做一個最小操作並查看第一個錯誤。
預期觀察：
你要能指出一個具體位置，而不是一次修改很多檔案。
常見錯誤：
不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。
立即驗證：
重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。
常見誤解
- 看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
- 能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
- 本堂只使用既定的 HTML、CSS、JavaScript、Vue CDN、Apps Script mock 與 Cloudflare Pages 驗收範圍。
本堂任務與驗收
完成滑鼠與鍵盤都能辨識的表單狀態，並在窄版看見清楚的錯誤提示。
- 能用 Tab 順序 留下可重現證據。
- 能用 focus-visible 留下可重現證據。
- 能用 欄位錯誤 留下可重現證據。
- 能用 disabled 狀態與對比檢查 留下可重現證據。
- Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
- 遇到問題時能先寫出症狀，再檢查一個最小假設。
官方延伸閱讀
正式延伸｜自主學習
把「表單狀態與鍵盤操作」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。
開啟自主學習入口｜4 個獨立 topic
- 先選一個 topic，讀懂成果、檔案與定位。
- 在自己的 Starter 檔案修改一小段。
- 重新載入，用畫面、Elements、Computed、Console 或文件留下證據。
建議第一個 topic：:focus-within。
Learning map
- :focus-within｜code-edit｜files/starter/style.css｜activeId=email-field、focused=true、focusWithin=true，父層 computed outline 可見
- :invalid 與 :user-invalid｜code-edit｜files/starter/main.js｜invalidBefore=true、userInvalidAfter=true、validAfter=true
- aria-invalid 與 aria-describedby｜code-edit｜files/starter/index.html｜before=false、after=true、ariaInvalid=true、describedByExists=true
- disabled 與 aria-disabled｜code-edit｜files/starter/index.html｜activeId=aria-disabled-button、focused=true；required facts disabledFocused=false、ariaDisabledFocused=true、blockedClicks=1