表單的文字放在欄位旁邊，點它卻沒有反應，常見原因是label沒有正確連到欄位。使用for時，它的值要與輸入欄位的id完全一致，而且這個id在整份文件中必須唯一。畫面位置接近、欄位的name相同，都不能代替這個關聯。
這種問題特別容易在複製聯絡表單、彈出視窗或會員資料卡後出現。原本的一組能用，第二組卻點到第一組欄位。先查標籤實際連到哪個控制項，再修id，比替每段文字加一個點擊事件更直接，也能保留原生表單的操作方式。
一組最小可用的標籤與欄位
<label for="contact-name">姓名</label>
<input id="contact-name" name="name" type="text">把這段存成獨立HTML頁，點擊「姓名」。瀏覽器會把焦點放進輸入框，讓你開始打字。for與id負責建立關聯；name則是提交資料時使用的欄位名稱。它們可以不同，不需要為了連接標籤而把name也改成id。
假如for寫成contact-name，輸入框id卻是contact_name，一個用減號、一個用底線，便無法關聯。這裡比對的是識別字，不會依文字意思自動找「最像的欄位」。若輸入框只有name而沒有id，明確的for關聯也找不到目標。
在瀏覽器開發者工具選中label，檢查它的for值，再搜尋對應id是否存在。也可以查看label的control屬性，確認它實際關聯到哪個元素。這比只看HTML原始碼裡似乎有一個相近名稱更可靠，尤其模板會在載入後新增內容時。
實際點三組標籤，看看差在哪裡
以下片段展示正確、不匹配及重複id三種情況。重複id刻意作為錯誤範例，不能用在正式頁面。你可以點擊三段文字，觀察焦點與核取方塊的勾選位置。
<label for="contact-name">姓名</label>
<input id="contact-name" name="name">
<label for="wrong-name">錯誤標籤</label>
<input id="actual-name">
<label for="notify">第二份通知</label>
<input type="checkbox" id="notify">
<input type="checkbox" id="notify">在Chromium154的這組頁面裡，點姓名後焦點到了contact-name；點錯誤標籤沒有找到對應控制項；點第二份通知時，第一個notify核取方塊被勾選，第二個仍未勾選。標籤不會猜測你想操作第二個，也不會依最近的畫面位置選目標。
同一份文件若有多個相同id，label會依第一個符合id的元素判斷關聯。如果那個元素不是可標記控制項，後面即使還有同id的input，也不能拿這種重複結構期待它自動補救。id重複是要修正的HTML問題，不是可利用的選擇策略。
複製模板時，id與for要一起改
假設桌面版與彈窗各有一份姓名欄位，可以用contact-name-main與contact-name-dialog這類清楚的id。每個label的for跟著改成對應值，name則仍按後端需要保留為name。只改input的id而漏掉label，是另一種常見的半套修正。
如果表單是在迴圈裡建立，應讓每筆資料產生穩定且唯一的id，再把同一個值傳給label。不要每次重繪隨機換識別字，導致其他描述關聯也跟著失效。框架有產生id的工具時，可以按它的規則使用，但仍要確認輸出到DOM後沒有重複。
檢查範圍要涵蓋整頁：藏起來的表單、尚未開啟的彈窗、手機與桌面兩份版型，都可能留在同一份文件中。看不到不代表id不會參與比對。因此不能只在目前可見區域搜尋，或以為用CSS隱藏後就可以重用id。
也可以把欄位放進label裡
<label>
接收更新通知
<input type="checkbox" name="notify" value="yes">
</label>這是隱含關聯，input直接在label裡，不必使用for與id才能建立這個標記。它適合某些簡單核取方塊排版；若你的設計要把標籤和欄位分成不同欄位，明確的for/id則比較容易安排。選擇方式時也應考慮輔助工具的相容性，而不是只看少幾個字。
一個label不要包進多個需要操作的欄位，也不要用它當整張卡片的任意點擊容器。標籤要有清楚的控制項對象。如果另外有條款連結或說明按鈕，最好放在合適的位置，避免使用者原本要勾選卻打開連結，或要開連結卻切換欄位。
可見標籤與placeholder用途不同
placeholder可以提供填寫例子，但輸入後會消失，不適合單獨承擔欄位名稱。修for時也順便看看頁面是否有持續可見的標籤，讓使用者在修改已填資料時仍知道每格是什麼。不要只為了排版乾淨，把所有label都刪掉。
對輸入框而言，正確關聯有助於工具取得欄位名稱，也增加可點擊的範圍。不過單靠這組點擊測試，不能推論所有瀏覽器與螢幕閱讀器組合的表現。正式功能應再使用鍵盤走過表單，確認每個欄位有清楚名稱、焦點看得見，錯誤提示也能對應到適當欄位。
改完後先驗三件事
檢查標籤時可以再看label.control是不是你預期的欄位。如果它是null，先回到for、id與可標記元素種類；如果它指向另一個欄位，則優先查重複id和模板複製。這個屬性可用來排查關聯，不需要為了修表單在網站裡長期插入一段自動改寫所有標籤的程式。
不要把label和其他描述關聯混用。label應讓人知道欄位要填什麼，提示可以說明格式或選填規則，錯誤則應指出目前要改的內容。改了id後，若其他描述也引用同一個識別字，應一起核對，避免欄位名稱修好，補充提示卻指向了舊元素。
有些版型把「姓名」做成普通span，看起來與label相同，但span不會自動把點擊交給輸入框。若這段文字就是欄位標籤，應使用合適元素建立關聯；若是區塊標題，則保留它的用途，不要把整個標題區都改成label。
核取方塊尤其需要留意可點擊範圍。小方框本身不容易點中，正確標籤能讓文字也參與操作；但外層再套一個會跳頁的卡片連結，可能讓點擊結果混亂。先保留簡單的一組標籤和欄位確認行為，再逐步加回外層版型，較容易找到是哪個元素影響操作。
先點可見文字，確認焦點或勾選落在正確欄位；再用Tab走過表單，確認沒有為了修標籤而加入多餘的焦點停留；最後提交合成資料，核對欄位名稱仍符合後端約定。for/id修好了，不表示name與value也一定正確。
若點標籤還是沒有反應，再看是不是有覆蓋元素攔住點擊，或控制項本身被停用。這些問題與關聯錯誤不同，應分別查證。不要一律加JavaScript click來繞過，否則容易把模板裡真正的錯誤留在頁面，之後複製到其他表單時又再次出現。
評論0