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

最終更新日:-0001年11月30日  (初回投稿日:2013年10月08日)

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

下の「お名前:」の部分をクリックしてください。入力欄がアクティブになります。

<label>はこのように、項目名と部品を関連づけ、 項目名をクリックするだけで、部品をアクティブにできます。
入力フィールドだとあまり恩恵を感じないのですが、
や、 だと、クリックできる面積が増えてとっても便利。
さらに、CSSを使って選択項目を目立たせる事もできます。

使用する要素 <label> 〜 </label>
<label>の属性 for:フォーム部品の id名を呼び出す
form:親の<form>のID名を呼び出して関連づける
グローバル属性
<label>が使える
フォーム部品
<input> (type="hidden"を除く)
<button> <textarea> <select>
<progress> <meter> <output> <keygen>

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

<label>の使い方は「for属性を使うか」「全部囲むか」の2とおり

ではさっそく使っていきましょう。<label>の使い方は2とおりあります。

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

 

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

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

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

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

 

HTMLソースはこちらです ↓

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

こっちのほうが、id属性や for属性を使わないのでシンプルで使いやすいですね。
ただしこちらの方法は、古いIE(6まで)では対応していないので注意が必要です。

項目名テキスト・フォーム部品 以外も「注釈」などを含める事ができます

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

●サンプル3
このサンプルには、入力フィールドの左に「Format:」として「注釈」をつけています。
<small>要素を使っています)
1行目の「Format:」はクリックすると入力部品が反応しますね。

Format:123-4567

でも、2行目の「Format:」は反応しません。これは、2行目の<small>が<label>で関連づけられていないから。
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
項目名のテキストをクリックしても、ラジオボタンやチェックボックスが反応します。

ご利用について:

ご購読中の新聞:

サンプルでは、ラジオボタンには「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>
<!--〜略〜-->
<input type="submit" value="送信する" />
</form>

●サンプル5
<label>要素にCSSを指定する事によって、このようにロールオーバーで文字色や背景色を変化させて、ユーザビリティを上げることができます。
コレ ↓ は画像です。クリックで別ウィンドウで開きます。

これは、部品と項目名を<label>でごっそり囲む方法が適しています。
疑似クラス「:hover」を<label>に指定し「label:hover」というセレクタにします。

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

ソースの詳細は、サンプルファイルをご覧ください。
(後半で、for属性を使う方法でも試していますが、やはり向いていません。ソースは長いし…)

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

上の「サンプル3」「サンプル4」「サンプル5」では、<p>や<span>が使われていますね。
これは、フォームの見た目を整えるために使っています。
項目名のテキストは、文字数もいろいろなので、それに続くフォーム部品がガタガタで、見にくくなりますよね。コレをCSSで整えます。
<span>は、項目名の幅を決めて、フォーム部品を左揃えに整列させるために使っています。
<p>は各セット(項目名、部品、注釈)をワンブロックに整えるために使用。

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

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

次回予告

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.