網站製作
欄位有提示就夠了？輸入後再檢查表單標籤
表單空白時，每格看起來都寫了用途；一填資料，提示卻不見了。今天只練一件事：確認一個文字欄位在填入後，仍有可見、且與欄位正確關聯的標籤。適合自己做網站、維護表單的個人、工作室與中小企業；準備桌面瀏覽器、純文字編輯器及本機練習頁，不需後台或付費外掛。
【先分清兩種文字】
placeholder 是欄位沒有值時顯示的簡短提示，例如「例如：DEMO-01」。標籤則告訴讀者這格在問什麼，例如「練習代號」。MDN 說明，提示會在欄位有值時消失，不能拿來取代標籤。提示可以示範格式，但不要把必要說明只藏在裡面。
W3C 的表單教學建議使用 label，將標籤與控制項關聯。明確關聯的常見做法，是讓 label 的 for 完全對應 input 的 id。文字放在欄位旁邊，視覺上像標籤，仍不代表程式已建立這個關係。
今天只查標籤、關聯與點擊焦點，不代表完整無障礙合規或收件驗收。
【建立不會送出資料的教材】
下面兩個欄位都屬虛構練習，只填 DEMO 代號。在自己的 HTML 草稿建立兩個 type 為 text 的 input；文件用 UTF-8 保存為 demo.html，並設定 meta 的 charset 為 utf-8。
A：id 設 a，placeholder 設「填入測試代號」，先不加 label。
B：id 設 b，placeholder 設「例如：DEMO-01」。另加文字為「練習代號」的 label，for 設 b。
不要放送出按鈕、後端網址或真實聯絡資料。保存後用瀏覽器開啟，勿覆蓋官網。
不熟 HTML 可用自己的測試表單模擬；先確認沒連正式收件流程。不確定就做紙上比較，別在他人表單測試。
【照四步核對】
1. 空白時先截圖，畫五欄：「欄位位置／標籤文字／提示文字／關聯方式／填入後觀察」。A 記只有提示；B 的標籤記「練習代號」，提示另記。不要因兩格都看得到字，就把兩欄填成同一種文字。
2. 在 B 填 DEMO-01，再在 A 填 DEMO-02。觀察提示是否消失，以及欄位外是否仍有用途名稱。B 應保留「練習代號」；A 的「填入測試代號」不再顯示。
3. 在自己的教材按右鍵「檢查」，找到 B 的 label 與 input，對照 for="b" 和 id="b"。把兩個原值抄下，不只寫「有標籤」。若同頁複製了多個 id="b"，先列待修，不依第一次點擊似乎正常就放行。正式頁只讀檢查，修改應由有權限的人在來源或後台完成。
4. 先點 A，再點 B 外面的「練習代號」文字，確認焦點是否移到 B；可看輸入游標或焦點框。保存點擊後截圖並記環境。這筆只驗收桌面滑鼠；若交付手機或輔助科技使用情境，仍需另測，不把桌面觀察代填成全部通過。
【本日實際觀察】
2026/10/25，我建立本機雙欄位教材，在桌面 Chrome 透過本機 HTTP 開啟。填入上述兩個代號後，畫面中 A 只剩輸入值，B 上方仍有「練習代號」。點該標籤後，確認目前焦點是 B。教材原始碼的 for 與 id 也都為 b。
本次保存填入前後的語意快照與截圖。快照仍可能用 placeholder 替 A 顯示一個名稱，所以「快照有名字」不能取代畫面、標籤關聯與實際操作核對。我沒有測螢幕閱讀器、鍵盤導覽、手機或真實收件流程，也沒有修改正式官網。
【遇到不同寫法，先記錄】
有些頁面把 input 放在 label 裡，形成另一種關聯；也可能使用 aria-label 或 aria-labelledby。不要只因沒看到 for，就斷言完全沒有名稱。先抄實際標記，交維護者確認。反過來，程式提供了名稱，也不代表一般讀者一定看得到標籤；這是兩項不同觀察。
標籤應說明用途，格式範例與較長的填寫說明另行安排。常見錯誤是只把提示顏色加深、複製相同 id，以及只在瀏覽器暫改屬性就宣稱網站已保存。
【作業、驗收與費用】
交出 A、B 兩列五欄紀錄，附填入前後及點擊標籤後的畫面。預期成果是能指出哪段是標籤、哪段是提示，以及 B 的實際關聯與焦點結果。請另一人照紀錄重做；未請人複核就標自行核對，沒操作的項目留未測。
紙筆、編輯器與本機範例可零額外工具費完成；正式改版、平台進階功能及完整無障礙驗收可能另計。這個練習不要求購買訂閱，也不宣稱改善多少填寫率、詢問或排名。
官方依據（2026-10-25 查核）：
整理／配圖：客脈 AI。配圖為 AI 示意圖，非實際網站或驗收認證。
0
0
163 0
拍手
留言
分享
Line
複製連結
收藏