HTML 【フォーム】11 ~ ラベル(label)

colmun_main2685

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)

目次

1.label要素
2.ラベルの作成

1.label要素

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

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要素を入れ子にすることはできません。
また、1つのlabel要素で複数のフォーム部品を関連付けることもできません。
1つのlabel要素で関連付けられるラベルと部品は1:1の関係です。

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

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

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

<label for=”id_no1″>ID:</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>ID:<input name=”sample”></label>

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

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

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

<label>ID:<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″>チェック1</label>
 <label><input type=”checkbox” name=”c_name” value=”2″>チェック2</label>
 <label><input type=”checkbox” name=”c_name” value=”3″>チェック3</label>
 </span>

(CSSファイル)
 span.check label:hover {
  background : #C08B9B;
  color: #fff;
  font-weight:bold;
 }

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です