HTML【フォーム】11～ラベル（label）

label要素は、フォームの部品に項目名（ラベル）を付けて、ユーザが使いやすくするための要素です。
単独で使う事はありませんが、便利で大事な要素です。
今回は、フォームで使われる部品を補助するlabel要素についてまとめたいと思います。

フォームについては、こちらのページもご参照下さい。

HTML 【フォーム】1 ～ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ～ form要素の使い方
HTML 【フォーム】3 ～ form要素で使う主な属性の使い方
HTML 【フォーム】4 ～ fieldset要素とlegend要素
HTML 【フォーム】5 ～ input要素（1）フォーム部品一覧
HTML 【フォーム】5 ～ input要素（2）テキスト入力部品
HTML 【フォーム】5 ～ input要素（3）ラジオボタンとチェックボックス
HTML 【フォーム】5 ～ input要素（4）日時の入力部品
HTML 【フォーム】5 ～ input要素（5）数値の入力部品
HTML 【フォーム】5 ～ input要素（6）レンジ（range）の入力部品
HTML 【フォーム】5 ～ input要素（7）色（color）の入力部品
HTML 【フォーム】5 ～ input要素（8）ファイル送信のための部品
HTML 【フォーム】5 ～ input要素（9）隠し情報（hidden）
HTML 【フォーム】5 ～ input要素（10）ボタン（submit、reset、button）
HTML 【フォーム】5 ～ input要素（11）画像ボタン（image）
HTML 【フォーム】6 ～ button要素で作るボタン
HTML 【フォーム】7 ～ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ～ セレクトリスト
HTML 【フォーム】9 ～ 入力候補（datalist）
HTML 【フォーム】10 ～ テキストエリア（textarea）
HTML 【フォーム】11 ～ ラベル（label）（ 本ページ ）
HTML 【フォーム】12 ～ 出力欄（output）
HTML 【フォーム】13 ～ 数量や割合のゲージ（meter）
HTML 【フォーム】14 ～ 進捗状況を示すプログレスバー（progress）
HTML 【フォーム】15 ～ キーを発行して暗号化（keygen）
HTML 【フォーム】16 ～ CSSでフォームを整える

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. label要素

下の「ＩＤ：」の部分がlabel要素で作っているラベルです。
「ＩＤ：」の部分をクリックすると、入力欄がアクティブになります。

ＩＤ：

label要素はこのように、項目名と部品を関連付けを行う他に、項目名をクリックすると部品をアクティブな状態にすることもできます。
特に、フォームにラジオボタンやチェックボックスを設置する場合は、クリックできる範囲が広がって便利です。

label要素の属性	for属性	フォーム部品の id名を呼び出す
	form属性	親のform要素のid名を呼び出して関連付ける
	グローバル属性	id属性、class属性、title属性、style属性など

　

label要素が使える フォーム部品	<input>（type=”hidden”を除く）
	<button> <textarea> <select>
	<progress> <meter> <output> <keygen>

▲目次へ戻る

2. ラベルの作成

label要素を入れ子にすることはできません。
また、１つのlabel要素で複数のフォーム部品を関連付けることもできません。
１つのlabel要素で関連付けられるラベルと部品は１：１の関係です。

label要素は、for属性を使う、全部囲む、のどちらかの方法でラベルを作成します。

●ラベルテキストだけをlabel要素で囲み、for属性でinput要素のid名を指定して関連付ける方法でラベルを作成します。

ＩＤ：

上の表示に対するhtmlコードは、以下の通りです。

<label for="id_no1">ＩＤ：</label><input name="sample" id="id_no1">

input要素にid名を付けて（id=”id_no”）、label要素のfor属性でそのid名を指定しています（for=”id_no”）。
こうすることで、label要素とinput要素との関連付けが行われ、ラベルテキストをクリックすると関連付けられた部品がアクティブの状態になります。

input要素にtype属性の指定がありませんが、type属性のデフォルト値がtextなので、自動的にテキストボックスが作成されます。

●<label>～</label>内にラベルテキストと部品を記載する方法でラベルを作成します。

ＩＤ：

先ほどの例と見た目は変わりませんが、htmlコードは以下の通りです。

<label>ＩＤ：<input name="sample"></label>

id属性やfor属性を指定せずにlabel要素とinput要素との関連付けが行えるので、書きやすくて便利です。

●<label>～</label>内に、ラベルのテキストとフォーム部品の他に注釈などを入れることもできます。

ＩＤ：※半角英数字でご記入下さい

「※」として注釈を付けています。
htmlコードは以下の通りです。

<label>ＩＤ：<input name="sample"><small>※半角英数字でご記入下さい</small></label>

<label>～</label><内に注釈を入れることで、label要素やinput要素との関連付けが行われるため、注釈部分をクリックしてもinput要素で作られた部品がアクティブ状態になります。

尚、label要素のfor属性は、複数指定ができないので、for属性を使う方法でラベルテキストとフォーム部品以外の要素を関連付けることはできません。
ですので、注釈等の関連付けをしたい場合は、<label>～</label><内に記載します。

●ラジオボタンとチェックボックスにラベルテキストを付けます。

ラジオ１　ラジオ２　ラジオ３

チェック１　チェック２

ラベルテキストをクリックすると、onとoffの入力ができます。
ラジオボタンやチェックボックスは、部品が小さいので、ラベルテキストをクリックして入力できると大変便利です。ラジオボタンやチェックボックスを設置する場合には、label要素と併用するようにしましょう。

ラジオボタンやチェックボックスも、for属性を使った方法とlabel要素で囲む方法のどちらの方法でも記載できます。
上の例では、ラジオボタンはfor属性を使った方法で、チェックボックスはlabel要素で囲む方法で書いています。

●label要素にCSSを指定して、ロールオーバーで文字色や背景色を変化させることができます。

チェック１
チェック２
チェック３

HTMLファイルとCSSファイルの記述は以下の通りです。

（HTMLファイル）

　<span class="check">
　<label><input type="checkbox" name="c_name" value="1">チェック１</label>
　<label><input type="checkbox" name="c_name" value="2">チェック２</label>
　<label><input type="checkbox" name="c_name" value="3">チェック３</label>
　</span>

（CSSファイル）

　span.check label:hover {
　　background : #C08B9B;
　　color: #fff;
　　font-weight:bold;
　}

▲目次へ戻る