フォームのラベルと部品を関連付ける 0:14
前回(Chapter16)、フォーム関連の要素を学習しました。
一般的なフォームは、ユーザーが何を入力(または、選択)すればいいのかを表すラベルと、実際に入力(または、選択)するコントール部品があります。これらを関連付けることで、視覚的にWEBサイトを閲覧することが困難なユーザーに対しても、どのラベルに対してのコントール部品かを伝えるサポートができます。また、ラベルをクリックすることで、コントール部品を選択状態にすることも可能になります。
要素名 | 意味・役割 |
---|---|
<label> |
コントロール部品のラベルを表す |
RERUN
フォームのラベルは、<label>
タグで囲む
label
要素は、
このlabel
要素は、ラベルとなるテキストと、コントロール部品のどちらもを囲む方法と、
label
要素に、for
属性に、コントロール部品のid
名を指定して関連付ける方法の2つの方法があります。
- カテゴリ
- コンテンツ・モデル
-
フレージング・コンテンツ
ただし、label
要素内に、別のlabel
要素は配置できない。また、そのラベルが示すコントロール部品(<input>
、<textarea>
、<select>
など)以外の要素も配置できない。 - 主な属性
-
for
属性: 関連付けるコントロール部品のid
名を指定する
label
要素の使い方
label
要素は、コントロール部品とそのラベルを一緒に囲むパターンと、コントロール部品とは、離れた場所にあるラベルと関連づける方法の2種類の使い方があります。
label
要素にラベルと、コントロール部品のどちらもを囲んだサンプル
下記は、label
要素にラベルとなるテキストと、コントロール部品のどちらもを囲む方法のサンプルです。
label
要素の例1<form action="" method="post">
<p>
<label>
お名前:<input type="text" name="your_name">
</label>
</p>
<p><input type="submit" value="送信"></p>
</form>
RERUN
ラベルをクリックするとテキストフィールドにカーソルが入ります。
label
要素にfor
属性を使ってコントロール部品と関連付けるサンプル
下記は、label
要素にfor
属性を使ってコントロール部品と関連付けるサンプルです。
この場合、for
属性には、関連付けるコントロール部品のid
名を指定します。従って予めコントロール部品には、id
属性を指定しておきましょう。
label
要素の例2<form action="" method="post">
<p>
<label for="your_name">お名前:</label>
<input type="text" id="your_name" name="your_name">
</p>
<p><input type="submit" value="送信"></p>
</form>
RERUN
こちらの方法でも、ラベルをクリックするとテキストフィールドにカーソルが入ります。 上記2つの方法に動作の違いはありませんので、
label
要素はどちらの方法でマークアップしても問題ありません。ただし、Internet Explorer 6 はfor
属性を使った方法にしか対応していないので、Internet Explorer 6に対応する場合は、for
属性を使って、ラベルとコントロール部品を関連付けましょう。
label
要素を使ってみよう
4:18
それでは、label
要素を使ってラベルとコントロール部品を関連付けましょう。
- 「Chapter17」フォルダ内の「index.html」をテキストエディタで開く
-
下記を参考に、
label
要素をマークアップ
<h1>僕の仲間募集フォーム</h1>
<form action="" method="post">
<dl>
<dt><label for="your_name">お名前</label></dt>
<dd>
<input type="text" id="your_name" name="your_name">
</dd>
<dt><label for="your_mail">メールアドレス</label></dt>
<dd>
<input type="text" id="your_mail" name="your_mail">
</dd>
<dt>性別</dt>
<dd>
<ul>
<li>
<label><input type="radio" name="gender" value="男">男性</label>
</li>
<li>
<label><input type="radio" name="gender" value="女">女性</label>
</li>
</ul>
</dd>
<dt>出来ること(複数選択可)</dt>
<dd>
<ul>
<li>
<label><input type="checkbox" name="skill" value="HTML">HTML</label>
</li>
<li>
<label><input type="checkbox" name="skill" value="CSS">CSS</label>
</li>
<li>
<label><input type="checkbox" name="skill" value="JavaScript">JavaScript</label>
</li>
<li>
<label><input type="checkbox" name="skill" value="PHP">PHP</label>
</li>
<li>
<label><input type="checkbox" name="skill" value="SQL">SQL</label>
</li>
<li>
<label><input type="checkbox" name="skill" value="Photoshop">Photoshop</label>
</li>
<li>
<label><input type="checkbox" name="skill" value="Illustrator">Illustrator</label>
</li>
</ul>
</dd>
</dl>
<p><input type="submit" value="送信する"></p>
</form>
- 上書き保存し、ブラウザでラベルをクリックするとコントロール部品が選択状態になるかを確認
RERUN
練習問題 10:45
「Chapter17」 -> 「quest」フォルダ内の「index.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。
-
- 文字列「お名前」
- 関連付けるテキストフィールドのid名: "your_name"
- 文字列「メールアドレス」
- 関連付けるテキストフィールドのid名: "your_mail"
- 文字列「お名前」
-
- 文字列「東京本店」とそのラジオボタン
- 文字列「大阪店」とそのラジオボタン
- 文字列「福岡店」とそのラジオボタン
-
- 文字列「お問い合わせ種別」
- 関連付けるセレクトボックスのid名: "type"
- 文字列「お問い合わせ種別」
-
- 文字列「お問い合わせ内容」
- 関連付けるテキストエリアのid名: "inquiry"
- 文字列「お問い合わせ内容」
RERUN
まとめ 17:04
ラベル要素の使い方はわかりましたか?
- コントロール部品のラベルは、
label
要素で表す - ラベルと部品を一緒に挟む方法がある
- label要素に、for属性でコントロール部品のid名を指定する方法がある