HTML

HTML基礎講座　フォームを作りましょう｜ラベル

 

ラベルを使ってより使いやすいフォームにしましょう。

具体的には、ラベルを使うとチェックボックスの小さな領域にマウスカーソルを合わせてチェックする必要がなく、項目自体をクリックすることでチェックボックスにチェックできるようになります。ラジオボタンも一緒です。

ラベル

では、ラベルを使ってみましょう。

書き方は次の通りです。

<form action="example.php" method="post" name="contact_form">
    <input type="checkbox" name="color" value="赤" id="red">
    <label for="red">赤</label>
    <input type="checkbox" name="color" value="青" id="blue">
    <label for="blue">青</label>
    <input type="checkbox" name="color" value="黄" id="yellow">
    <label for="yellow">黄</label>
</form>

inputタグにid属性が付き対となるfor属性がlabelタグについています。

対にしないと効果はありません。また、対は同じファイル内で１か所のみ使えます。

結果は次の通りです。

コードをこのように書く事によって、直接チェックボックスをクリックしなくても、項目名をクリックすることで、チェックボックスにチェックすることができたと思います。

このようにひと手間加えることで、ユーザーがチェックボックスの小さな領域にわざわざマウスカーソルを合わせなくてもよくなり満足度が向上します。

RELATED POST