按鈕不能按卻沒說原因？讓訪客知道還缺什麼

改網站模板時，把「下一步」按鈕設成灰色很容易；難的是讓訪客知道為什麼不能按。如果原因藏在未填欄位、勾選條件或滑鼠提示裡，手機使用者往往只看到一個沒有反應的按鈕。

先把原因放在畫面上

例如網站要有聯絡信箱才能繼續填寫需求，就在欄位或按鈕附近寫「請先填入聯絡Email」，不要只靠顏色表示缺漏。條件改變後，提示也要跟著改；格式不對時，指出問題，不要一直顯示籠統的「資料不完整」。

真的不能操作，才用disabled

原生disabled按鈕通常不能被鍵盤聚焦，也不能點擊。這適合確實尚不能進行的動作，但原因要另外放在可閱讀的位置；不要把說明全塞在按鈕自己的滑鼠hover裡。

<label for="contact_email">聯絡Email</label>
<input id="contact_email" type="email">
<p id="next_hint" aria-live="polite">請先填入聯絡Email。</p>
<button type="button" disabled>檢查聯絡資料</button>

頁面可在輸入改變時檢查條件，合格後再解除disabled並更新提示。這個例子的按鈕只檢查Email格式，資料接收與後端驗證仍是另一段工作，不能把前端放行當成資料已收妥。

不一定要先禁用按鈕

如果訪客需要按下去才知道哪裡要改，也可以保持按鈕可操作，送出前再把錯誤放在對應欄位並引導焦點。兩種方法各有用途：不要為了避免錯誤，把整個填寫過程變成猜謎。

修改後，用Tab走過欄位與按鈕，再在手機看看提示是否就在問題附近。也試一次填入錯誤Email、修正內容、全部清空；按鈕狀態與文字應一致。檢查過前端後，接收端仍要驗證資料，不能靠disabled防止不合格請求。

參考資料

資料核對於2026年10月3日；範例與文件可能更新。