LESSON-12 · starter
你會依序完成3個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：入口頁可以開啟
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、style.css、main.js
本堂焦點：用狀態樣式與鍵盤操作讓表單和按鈕可理解
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：請在 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; }預期結果：Tab 進入欄位時控制項與父層都有狀態。
驗收證據：Tab、Computed outline、:focus-within。
常見錯誤：一次修改太多責任。
第一個檢查：只檢查目前指定的檔案與區塊。
現在要做：請在 main.js 的「invalid state」完成：同步 validity、aria-invalid 與 aria-describedby 錯誤訊息
貼上位置：main.js：invalid state 區塊。
email.setAttribute("aria-invalid", String(!email.checkValidity()));預期結果：錯誤 Email 顯示文字並聚焦。
驗收證據：Elements 屬性、錯誤文字與 activeElement。
常見錯誤：一次修改太多責任。
第一個檢查：只檢查目前指定的檔案與區塊。
現在要做：請在 index.html 的「disabled and aria-disabled」完成：比較 disabled 與 aria-disabled 的操作行為
貼上位置：index.html：disabled and aria-disabled 區塊。
<button type="button" aria-disabled="true">尚未開放</button>預期結果：能解釋 Tab 與 click 的差異。
驗收證據：Tab 順序、Elements 屬性與 click。
常見錯誤：一次修改太多責任。
第一個檢查：只檢查目前指定的檔案與區塊。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
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 starter</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" required><small>TODO：把錯誤訊息與欄位建立可讀關聯。</small></div><button type="submit">驗證表單</button><button type="button" disabled>真正 disabled</button><button id="aria-disabled" type="button" aria-disabled="true">aria-disabled</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{padding:.75rem;border:1px solid #9bb8c8}/* TODO：加入 :focus-within、:invalid 與 :focus-visible。 */[aria-disabled="true"]{opacity:.55}
main.jsP0 專章互動與 Console 證據。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
const form=document.querySelector("#contact-form");form.addEventListener("submit",(event)=>{event.preventDefault();document.querySelector("#status").textContent="TODO：同步 validity、錯誤文字與焦點。";});Starter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。