
在使用網頁的單選按鈕(radio button)時,常遇到一種情況,就是文字區塊不能點選,只能點擊小小的圓圈才能選擇。比如圖中的信用卡驗證碼頁面,只能點擊紅色的區域做選擇,點擊綠色的文字則沒有反應。
但其實文字的區塊是可以被點選的,HTML 預設就有這個功能,很多網頁都沒有注意到這個細節。
讓可點擊的區域變大,使用者在操作時會更便利,尤其是對使用 mobile 裝置的人。
改法非常簡單,只要在 label 加上 for 的屬性和相對應的 input id 就可以了。以圖中的 HTML 為例:
<div>
<input type="radio" id="VDQS">
</div>
<div>
<label for="VDQS">VDQS</label>
</div>
加上 for 的 label 就可以點選了!
