HTMLを学ぶ。ラベルを表す要素(label要素)

HTMLを学ぶ。ラベルを表す要素(label要素)

今回のポイント

今回は、以前解説したフォームにラベルを表す要素を記述していきます。
フォームについての記事については、以下のリンクを参照下さい。

HTMLを学ぶ。フォーム関連の要素を学ぶ。(form要素)

ラベルを使うメリット

コントロール部品にラベル要素を記述することで、以下のメリットを得ることが出来るようになります。

  • ラベルをクリックしても、コントロール部品を選択できるようになる。
  • 目の見えないユーザーが訪れても、音声でコントロール部品を読み上げることが可能になる。

ラベルについては、以下のイメージを参照して下さい。

フォームを作っていく(おさらい)

完成形をイメージする

まずは完成形のフォームをイメージしましょう。

私のイメージしたフォームは、以下のようなフォームです。

フォームについては、以前のおさらいですね。
過去の記事については以下の記事を参考にして下さい。

HTMLを学ぶ。フォーム関連の要素を学ぶ。(form要素)

文字を起こす

それでは、イメージを元に必要な文字を反映しましょう。
反映すると以下の通りです。

お名前
性別
男性
女性
ぱくぱくミーティング
参加する

定義リストを表す

先程文字に起こした記事に、定義リストを表していきます。

定義リストを反映すると、以下のようになります。

<dl>
<dt>お名前</dt>
<dt>性別</dt>
<dd>
男性
女性
</dd>
<dt>ぱくぱくミーティング</dt>
<dd>参加する</dd>
</dl>

こちらも以前に解説したおさらいの応用になります。

そして実はこの定義リストですが、フォームに使用することが出来ます。

定義リストについての過去記事については、以下を参照下さい。

HTMLを学ぶ。定義リストを表す要素を学ぶ。(dl要素)

フォーム関連の要素を記述する

それでは、フォーム関連の要素を記述していきます。

っとその前にそれぞれの項目が、どのコントロール部品になるか事前に解説しておきますね。

  • お名前・・・text
  • 性別・・・・radio
  • ぱくぱくミーティング・・・checkbox
  • 送信ボタン・・・submit

そしてそれぞれのコントロール部品を記述していくと、以下の通りになります。

<form method=”post” action=”example.cgi”>
<dl>
<dt>お名前</dt>
<dd><input type=”text” name=”name” size=”20″></dd>
<dt>性別</dt>
<dd>
<input type=”radio” name=”answer” value=”男”>男性
<input type=”radio” name=”answer” value=”女”>女性
</dd>
<dt>ぱくぱくミーテイング</dt>
<dd>
<input type=”checkbox” name=”rank” value=”1″>参加する
</dd>
</dl>
<p><input type=”submit” value=”送信する”></p>
</form>

これらフォームについてのおさらいについては、以下の記事を参考下さい。

HTMLを学ぶ。フォーム関連の要素を学ぶ。(form要素)

ラベルを表す要素(label要素)

label(ラベル)要素はコントロール部品のラベルを表す要素です。
それではやっと、ラベルを記述していきましょう。

まずは「お名前」の部分です。

<dl>
<dt>お名前</dt>
<dd><input type=”text” name=”name” size=”20″></dd>

この「お名前」の部分にlabel要素を記述します。

<dl>
<dt><label>お名前</label></dt>
<dd><input type=”text” name=”name” size=”20″></dd>

id(アイ・ディー)属性

しかしこれだけでは、このラベルがどのコントロール部品を指しているのか分かりません
そこで「このラベルは●●を指します。」と指定する必要があります。

まずは、このtype属性に名前をつけてあげましょう。
この名前をつける方法として、id属性を使用する方法があります。

記述すると以下のようになります。

<dl>
<dt><label>お名前</label></dt>
<dd><input type=”text” name=”name” id=”name” size=”20″></dd>

これでこのコントロール部品は、「name」であると指定出来ました。

for(フォー)属性

そして「”お名前”はnameと関連する」と指定します。
これにはfor属性を使用します。

記述すると以下の通りとなります。

<dl>
<dt><label for=”name”>お名前</label></dt>
<dd><input type=”text” name=”name” id=”name” size=”20″></dd>

これで、お名前部分の記述は完了です。

このようにid属性とfor属性を使ってコントロール部品を指定する方法が必要な場合もありますが、必要のない場合もあります。

例えばこの後、label要素を記述しようとしている「rdaio」や「checkbox」がそれにあたります。
この場合、label要素のみの記述で良いのです。

それらを意識して後のコントロール部品にも、label要素を記述していきましょう。
そして記述したものが、以下の内容となります。

<form method=”post” action=”example.cgi”>
 <dl>
  <dt>
   <label for=”name”>お名前</label></dt>
  <dd>
   <input type=”text” name=”name” id=”name” size=”20″> 
  </dd>
  <dt>性別</dt>
  <dd>
   <label>
   <input type=”rdaio” name=”answer” value=”男”>男性
   </label>
   <label>
   <input type=”radio” name=”answer” value=”女”>女性
   </label>
  </dd>
  <dt>ぱくぱくミーテイング</dt>
  <dd>
   <label>
    <input type=”checkbox” name=”rank” value=”1″>参加する
   </label>
  </dd>
 </dl>
 <p><input type=”submit” value=”送信する”></p>
</form>

いかがでしょうか。ソースコードだけ見ると沢山書いてて無難しそうに見えますが、一つ一つを分解して見てみると理解いただけると思います。
これもいつも解説していますが、慣れれば大丈夫です。
どんどんフォームを描いて慣れていって下さい。

次の記事

前回の記事

HTMLを学ぶ。シリーズはこちら

HTMLカテゴリの最新記事