[54] ラベルを付けて使いやすくしよう label要素

<label>要素は、項目名（ラベル）とフォーム部品を関連づけて、ユーザに使いやすくするための要素です。
フォームの部品になるわけでもなく、単独で使う事もありませんが、便利で大事な要素です。

下の「お名前：」の部分をクリックしてください。入力欄がアクティブになります。
「お名前：」のテキストとフォーム部品を <label>要素で囲んでいるので。

お名前：

<label>はこのように、項目名と部品を関連づけ、 項目名をクリックするだけで、部品をアクティブにできます。
入力フィールドだとあまり恩恵を感じないのですが、
ラジオボタン や、チェックボックス だと、クリックできる面積が増えてとっても便利です。

使用する要素	<label> 〜 </label>

<label>の属性	for：フォーム部品の id名を呼び出す
	form：親の<form>のID名を呼び出して関連づける ＊注意：label要素の form属性は HTML5.1から無効になりました。
	グローバル属性

<label>が使える フォーム部品	<input> (type="hidden"を除く) <button> <textarea> <select> <progress> <meter> <output> <keygen>

<label>の入れ子は不可です。
それから、1つの<label>で複数のフォーム部品を関連づけるのも不可。
1つの<label>で関連づけられるラベルと部品は1セットのみですよ。

<label>の使い方は 2パターン

ではさっそく使っていきましょう。
<label>の使い方は「for属性を使う」「全部囲む」の 2パターンがあります。

●サンプル1
1つめの方法は「for属性を使う」方法。
項目名だけを <label>要素で囲み、<input>の id名を、for属性で呼び出して関連づけます。

お名前：　

HTMLはこのようになっています ↓

<label for="fullname">お名前：</label><input name="name1" id="fullname">

ちなみに、上のサンプルの<input>には「type属性」が無い。それでもテキストフィールドになってますね。type属性のデフォルトは「text」だから。省略すると、type="text"なので。

●サンプル2
2つめは「全部囲む」
項目名と部品を<label>〜</label>でごっそり囲んでワンセットにする方法。
サンプルは、上のとまったく見た目が同じだけど一応 ↓

お名前：　

HTMLはこちら。こっちのほうが シンプルで使いやすく、オススメです。

<label>お名前：<input name="name2"></label>

「注釈」なども含める事ができます

1つの部品に関する「注釈」などなら、項目名と同じく<label>内に入れられます。

●サンプル3
このサンプルには、入力フィールドの左に「Format：」として「注釈」をつけています。（<small>要素を使っています）
1行目の「Format：」部分は、クリックすると入力部品が反応しますね。
でも、2行目の「Format：」は反応しません。これは、2行目の<small>が<label>で関連づけられていないから。

お名前： Format：姓と名を半角スペースで区切ってください

郵便番号： Format：123-4567

送信内容を確認：

HTMLはこちら。

<form>
<p>
<label>お名前：
<input name="name"> <small>Format：姓と名を半角スペースで区切ってください</small>
</label>
</p>
<p>
<label for="zipCode">郵便番号：</label>
<input name="zipCode" 
  maxlength="8" id="zipCode" pattern="\d{3}-?\d{4}" title="3桁+ハイフン(-)+4桁で入力してください。">
<small>Format：123-4567</small>
</p>
<p>
<label>送信内容を確認：<input type="submit" value="確認する" /></label>
</p>
</form>

最初の「お名前」（2〜6行目）は、<label>要素で全部（項目名, 部品, 注釈）囲んでいます。
次の「郵便番号」（7〜12行目）は、項目名のみ<label>要素のfor属性で部品と関連づけています（8行目）。
なので、注釈の<small>（ハイライト部分）は、部品との関連付けに漏れてしまったわけです。

この<small>要素にid名を付けてもダメ。<label>のfor属性は複数指定不可です。

というわけで、
for属性を使う方法で「項目名テキスト・フォーム部品 以外」を関連づけるのは不可ってことになります。
注釈なども含めたいなら、<label>〜</label>でごっそり囲むのがベスト。

「ラジオボタン」と「チェックボックス」には必須

「ラジオボタン」と「チェックボックス」は部品が小さいので、項目名のテキストをクリックして反応するほうがゼッタイ便利。必ず<label>と併用しよう。

●サンプル4
項目名のテキストをクリックしても、ラジオボタンやチェックボックスが反応します。

ご利用について： はじめて 2〜4回 5回以上

ご購読中の新聞： 毎日新聞 読売新聞 朝日新聞 日経新聞 その他

サンプルでは、ラジオボタンには「for属性を使った方法」を、
チェックボックスには「<label>要素で囲む方法」を使っています。
HTMLはこちら ↓

<form>
<p><span>ご利用について：</span>
<input type="radio" name="freq" id="frst" value="はじめて"><label for="frst">はじめて</label>
<input type="radio" name="freq" id="scnd" value="2〜4回"><label for="scnd">2〜4回</label>
<input type="radio" name="freq" id="five" value="5回以上"><label for="five">5回以上</label></p>
<p><span>ご購読中の新聞：</span>
<label><input type="checkbox" name="newspaper" value="毎日新聞">毎日新聞</label>
<label><input type="checkbox" name="newspaper" value="読売新聞">読売新聞</label>
<!--〜略〜--> </p>
<input type="submit" value="送信する" />
</form>

●サンプル5
<label>要素にCSSを指定する事によって、マウスオーバーで文字色や背景色を変化させて、ユーザビリティを上げることができます。（PCブラウザのみですが）
これは、部品と項目名を<label>でごっそり囲む方法が適しています。
下のサンプルにマウスオーバーしてみてください。

よく使うアプリを教えてください（複数可）

LINE Facebook Twitter Yahoo! JAPAN Instagram 楽天市場 Amazon その他

HTMLはこちら。

<form class="labelSmp1">
<p>よく使うアプリを教えてください（複数可）</p>
<p>
<label><input type="checkbox" name="appli" value="LINE">LINE</label>
<label><input type="checkbox" name="appli" value="Facebook">Facebook</label>
<label><input type="checkbox" name="appli" value="Twitter">Twitter</label>
<label><input type="checkbox" name="appli" value="Yahoo">Yahoo! JAPAN</label>
<label><input type="checkbox" name="appli" value="Instagram">Instagram</label>
<label><input type="checkbox" name="appli" value="Rakuten">楽天市場</label>
<label><input type="checkbox" name="appli" value="Amazon">Amazon</label>
<label><input type="checkbox" name="appli" value="others">その他</label>
</p>
</form>

CSSはこちら。
疑似クラス「:hover」を<label>に指定し「label:hover」というセレクタにします（9行目）

.labelSmp1 {
	padding:.5em 1.2em;
	border:2px solid #eee}
.labelSmp1 p {margin:.5em 0}
.labelSmp1 label {
	width:10em;  /*←label の幅を統一*/
	margin-right:.5em;
	display:inline-block}   
.labelSmp1 label:hover {
	background:#c08b9b;
	color:#fff;
	font-weight:bold}
.labelSmp1 input {margin:.5em}

フォームをCSSで整えるとき…

上の「サンプル3」「サンプル4」「サンプル5」では、<p>要素や <span>要素が使われていますね。
これは、フォームの見た目を整えるために使っています。この <p>要素や <span>要素でまとめたグループに CSS で指定してレイアウトを整えます。

このとき <label>要素を使ってしまいたくなりますが、CSSで見た目を整えるため「だけ」に <label>要素を使うのは NG 。
<label>はあくまでも、フォームの部品をラベリングするための要素。
その役目どおりに使って、なおかつCSSでも利用できるならOKですが。
整列させる役目なら、<p> <div> <span>や、リストの要素<ul> <ol> <dl> を使おう。

フォームをCSSで整える方法は、[60] で紹介する予定です。

次回予告

次回は <output>要素。計算などの「結果の出力欄」のための要素です。
ほかのフォーム部品と組み合わせて、計算し（計算そのものはJavaScriptを使います）、その結果を表示するための要素。HTML5 からの新要素です。