-HTML- ラジオボタン・チェックボックスの文字でも判定させる

ラジオボタン・チェックボックスの文字でも判定させる (HTML)

<label>を使用すると、ボタン部分ではなく文字の部分をクリックするだけで項目を選択できます。

ユーザビリティな入力フォームを考えるならチェックしたい。
ラジオボタンやチェックボックスのボタンだけでチェックさせていませんか？

<label>を使用すると、ボタン部分ではなく文字の部分をクリックするだけで項目を選択できます。

---

DEMO(はい・いいえの文字を選択しても判定します)

ユーザビリティですか？	はい
	いいえ

---

CODE

ユーザビリティですか？
<label for="check-0">
  <input type="radio" name="check" value="0" id="check-0">
  はい
</label>
<label for="check-1">
  <input type="radio" name="check" value="1" id="check-1">
  いいえ
</label>

---

TEXTボックスでも

ラジオボタンやチェックボックスだけでなく、他の入力フォームでも使用できます

サンプル(氏名漢字・氏名カナをクリックで入力へ)

氏名(漢字)
氏名(カナ)

<label for="namekanji">氏名(漢字)</label>
<input type="text" name="" id="namekanji">
<label for="namekana">氏名(カナ)</label>
<input type="text" name="" id="namekana">

---

まとめ

一般的に、特に気にせずラジオボタンなどのボタン部分をクリックしている人が多いのではないでしょうか。

なので、<label>を対応したらユーザビリティが格段にあがるわけではないかもしれませんが
いろんなユーザーにとって使いやすい入力フォームになればと思います。