聯絡頁看起來很乾淨：三個空格，裡面淡淡寫著姓名、電子郵件、留言。可是一填內容，欄位名稱就消失了。訪客回頭檢查時，得靠順序猜自己填了什麼。這通常不是程式故障，而是把 placeholder 當成了欄位標籤。
欄位名稱要留下來
placeholder 適合放簡短例子，例如「[email protected]」。它只在欄位沒有內容時顯示，輸入後消失是正常行為。需要一直看見的「電子郵件」應放在 label；字數上限、必填條件等說明則放在欄位旁，別全部塞進會消失的提示。
對照圖中，兩邊都填入同一個地址。左邊只剩地址，右邊的「電子郵件」仍留在上方。訪客不用先清空欄位，才能知道這格要填什麼。
把 label 接到正確欄位
若你能修改表單 HTML，可從一個欄位開始：
<label for="contact-email">電子郵件</label>
<input id="contact-email" name="email"
type="email" placeholder="例如 [email protected]"
aria-describedby="email-hint">
<p id="email-hint">請填可收信的地址。</p>label 的 for 要與 input 的 id 完全一致，而且同一頁不要重複 id。name 是提交資料時使用的欄位名稱，不能拿它代替 id 來配對。這樣點「電子郵件」文字也能聚焦輸入框；輔助工具則有可辨識的標籤。aria-describedby 將補充說明連到欄位，並不代替 label。
使用表單插件時，先找欄位的「標籤」設定，確認輸入後仍顯示。插件可能自行產生 id，別在外面再貼一份相同 id。修改前保存原設定或 HTML；如果點標籤跳到別格，先還原，再查配對。
手機上也要能回頭檢查
把標籤放在欄位上方，通常比左右並排更容易留住窄螢幕的空間。試著用手機填滿所有欄位、切到下一格，再回頭讀名稱與說明；也用鍵盤 Tab 檢查焦點是否按順序移動。只有把瀏覽器縮窄，還看不到手機鍵盤打開後的遮擋。
這段程式只處理欄位標示，不包含收件或寄信功能。放回自己的聯絡表單時，要保留原有收件設定，再測一次實際送出結果。先把「這格填什麼」說清楚，才有辦法分辨後續問題出在填寫、驗證還是寄送。
參考資料
資料核對：2026年10月4日。文件與網站環境可能更新，操作前請核對自己的設定。
評論0