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

最終更新日:2018年03月28日  (初回投稿日:2013年10月08日)

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

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

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

使用する要素 <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>の使い方は 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: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
項目名のテキストをクリックしても、ラジオボタンやチェックボックスが反応します。

ご利用について:

ご購読中の新聞:

サンプルでは、ラジオボタンには「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>でごっそり囲む方法が適しています。
下のサンプルにマウスオーバーしてみてください。

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

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 からの新要素です。

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

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

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

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
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.