HTML5

on Note

label要素 フォームの項目にラベルを付ける

フォームの中には複数の項目(入力欄)があるのが普通です。名前の入力欄やメールアドレスの入力欄などですね。そして名前の項目であれば、名前の項目であることがユーザにわかるように「名前」と書き添えるでしょう。そこで、この「名前」が、この入力欄のラベルであると示し、これらを紐づける役割をするのがlabel要素です。

まず、label要素を用いることでどうなるのかを、わかりやすく具体例をあげて説明します。そうしてlabel要素を知った後、label要素の書き方を説明します。

label要素の効果を具体例で説明

label要素にはフォームの項目とラベル名を紐づける役割があります。そしてその効果は、ラジオボタンやチェックボックスを例にあげるとわかりやすいでしょう。

まずlabel要素を使わずにラジオボタンを示します。

選択肢1 選択肢2 選択肢3

上のラジオボタンでは、丸い部分にカーソルを合わせないと選択することができません。そのボタンを表すラベル名(文字の部分)にカーソルを合わせてクリックしても選択できないわけです。

ここでlabel要素を用いて、ラジオボタンとそのラベル名を紐づけると、ラベル名をクリックして選択することができます。次にlabel要素を用いたラジオボタンを示します。

label要素を使って、ラジオボタンとそれに対するラベル名を紐づけていますので、ラベル名をクリックしても選択の状態になります。

このようにlabel要素は、フォーム部品とそれに対するラベル名を紐づける役割を持ちます。またユーザに対して、フォームの項目のラベル名を明示することにも繋がります。

label要素の書き方

label要素の役割は、フォームの項目にラベル名を紐づけることにあります。そこで、どのようにそれらを紐づけるのか、というのがlabel要素の書き方になります。

フォームの項目とラベル名を紐づける方法は2通りあります。それら2通りの違いは、ラベル名の対象のフォーム項目の指定を、label要素のfor属性でするのか、それとも、対象のフォーム項目を、label要素内のコンテンツとして指定するのかです。

対象のフォーム項目をfor属性で指定する

まず1つ目の方法です。label要素でfor属性を指定して、そのfor属性の値に、紐づけるフォーム項目のID名を指定します。

次のようなHTMLがあるとします。

<p>
    ユーザ名
    <input type="text" name="user">
</p>

ユーザ名を入力する為のフォーム部品を定義しています。name属性でフォーム項目に名前をつけて、id要素で他の要素と区別する為のid名をつけています。これは次のようなユーザ名を入力する項目として表示されます。

ユーザ名

では、このフォーム部品のラベル名と項目をlabel要素で紐づけます。今回の方法としては、ラベル名に対する項目をfor属性で指定します。書式は
<label for="対象項目のid名">ラベル名</label>
となります。尚、for属性で対象の項目のid名を指定するので、フォーム項目側でid属性を定義する必要があります(id名は任意の名前で良い)。そうすると次のようなHTMLになります。

<p>
    <label for="name">ユーザ名</label>
    <input type="text" name="user" id="name">
</p>

label要素のfor属性で対象の項目のid名を指定することで、ラベル名とその項目が紐づきます。具体例を下に示します。

<p>
    <label for="name">ユーザ名</label>
    <input type="text" name="user" id="name">
</p>
<p>
    <label for="add">メールアドレス</label>
    <input type="text" name="mail" id="add">
</p>
<p>
    <input type="radio" name="sex" id="man">
    <label for="man">男性</label>
    <input type="radio" name="sex" id="woman">
    <label for="woman">女性</label>
</p>

これは次のように表示されます。

入力欄にしてもラジオボタンにしても、それぞれラベル名と紐づいていますので、ラベル名をクリックすれば、その項目を選択した状態になります。

では次の節でもう一つの方法を説明します。

対象のフォーム項目をlabel要素のコンテンツに含む

もう一つの方法は、対象のフォーム項目を、label要素内のコンテンツとして含んで指定する方法です。これは、ラベル名と対象の項目の両方を、コンテンツとしてlabel要素で囲むという書き方です。まとめられたラベル名と項目が紐づくわけです。

<p>
    <label>ユーザ名<input type="text" name="user"></label>
</p>
<p>
    <label>メールアドレス<input type="text" name="mail"></label>
</p>
<p>
    <label><input type="radio" name="sex">男性</label>
    </p>
<p>
    <label><input type="radio" name="sex">女性</label>
</p>

これで、先程と同じ表示結果になり、それぞれ、ラベル名と項目が紐づきます。

こちらのように、ラベル名とフォーム項目をまとめてlabel要素で囲む場合は、label要素にfor属性を指定しません。

label要素の概要

HTML5での分類
Flowコンテンツ
Phrasingコンテンツ
Interactiveコンテンツ
子要素にできるもの
Phrasingコンテンツ(ただし、ラベル名を紐づける対象でないフォーム項目を含まない。また、label要素を入れ子にしない。)

label要素を用いることで、ラベル名とフォーム項目を紐づけることができます。これは、ユーザに対してラベル名を明示することでもあります。

label要素に関するまとめ

label要素では、ラベル名とフォームの項目を紐づけることができます。

その方法には2通りあり、1つは、label要素のfor属性で、対象のフォーム項目をしていする方法です。書式は
<label for="対象項目のid名">ラベル名</label>
とします。for属性の値に、対象のフォーム項目のid名を指定して紐づけます

もう1つは、ラベル名とフォームの項目をlabel要素で囲む方法です。書式は
<label>ラベル名<input type="" name=""></label>
とします。