ラベル

ラベルは部品とそれに対応する文字列を関連付けるために使います。具体的な例で見てみます。

<form action="#" method="post">
<p>
<input type="radio" name="q1" value="man" />男性
<input type="radio" name="q1" value="woman" />女性
</p>
</form>

上記を実際にWebページに配置すると次のように表示されます。

ラジオボタンなので、白丸の部分をクリックすれば選択することが可能です。ところが各白丸の右にある文字列をクリックしても反応はありません。これはラジオボタンの場合、表示されている文字列はたまたまinput要素の次に記述してあるためラジオボタンのラベルのように見えていますが、実際にはラジオボタンと文字列には何の関連もないためです。

次のように記述してみると分かりやすくなります。

<form action="#" method="post">
<p>
<input type="radio" name="q1" value="man" />
男性
<input type="radio" name="q1" value="woman" />
女性
</p>
</form>

そこで文字列をクリックした時にも対応するラジオボタンがクリックされたように関連付けるために使われるのがlabel要素です。次のように使用します。

<label>コンテンツ</label>

関連付けを行いたい文字列とinput要素などをlabel要素でマークアップすることで、関連付けが設定されます。

具体的には次のように記述します。

<form action="#" method="post">
<p>
<label>
<input type="radio" name="q1" value="man" />男性
</label>
<label>
<input type="radio" name="q1" value="woman" />女性
</label>
</p>
</form>

実際にWebページに配置すると次のように表示されます。

見た目上は先ほどと変わりがありませが、今度は文字列の部分をクリックしても対応するラジオボタンが選択されます。

関連付けの別の方法

先ほどは関連付けを行う文字列と要素をlabel要素でマークアップしました。この方法だと文字列と対応する要素が離れた位置にある場合使えません。このような場合にはfor属性を使います。

<label for="関連付ける要素のID">文字列</label>

この方法の場合、まずは対象の要素にid属性を記述し、値としてユニークな値を設定しておきます。そして先ほどの要素に関連付けたい文字列をlabel要素でマークアップしてからlabe要素のfor属性の値に対応する要素のid属性に設定した値を指定します。

具体的には次のように記述します。

<form action="#" method="post">
<p>
<input type="radio" name="q1" value="man" id="man" />
<label for="man">男性</label>
<input type="radio" name="q1" value="woman" id="woman" />
<label for="woman">女性</label>
</p>
</form>

実際にWebページに配置すると次のように表示されます。

今度の記述方法の場合も文字列の部分をクリックすれば対応するラジオボタンが選択されます。

今回はラジオボタンを例にしてみましたが、チェックボックスなど他の部品でも同じように関連付けを行うことができます。