こんにちは。sagayuriです。
コーディングの学習を初めて結構経ちますが、フォームのコーディングが未だにちゃんと覚えられないわたし…
毎度毎度検索してしまっています。
今回は、チェックボックスを作る時に、テキスト部分をクリックしてもチェックを入れられるようにするやり方について！です。（初歩的な内容ですみません…）
通常のコーディングはこんな感じ
チェックボックスを作る時は、inputタグとlabelタグを使用します。
例えば下記のような感じで書きます。
<input type=”checkbox” name=”accept”>
<label>個人情報の取扱いについて、同意の上送信します。</label>
<label>個人情報の取扱いについて、同意の上送信します。</label>
このように記述すると下記の画像のような見た目になりますが、チェックボックスの部分をポンポイントでクリックしないとチェックを入れることができません。
チェックボックスのテキストをクリックできるように
チェックボックスの横のテキストをクリックしてもチェックが入る方が、ユーザビリティが高くなるので、チェックボックスを作るときはチェックボックスに付随するテキストまで意識して作ると良いでしょう。
テキストをクリックできるようにするには、idとforを使用します。
先ほどの例を使用して書き換えます。
先ほどの例を使用して書き換えます。
<input type=”checkbox” name=”accept” id=”checked”>
<label for=”checked”>個人情報の取扱いについて、同意の上送信します。</label>
<label for=”checked”>個人情報の取扱いについて、同意の上送信します。</label>
inputタグにidで任意の名前をつけて、labelタグにfor+id名を付けます。
見た目上は変化しませんが、画像のようになります。
見た目上は変化しませんが、画像のようになります。
簡単ですね！
少しの手間でユーザビリティは改善される
このように、ほんのちょっとの手間でユーザビリティを改善することができます。
コーディングするときは、最終的に使うユーザーのことを考えて、ユーザーが使いやすくなることを心がけましょう。
