今回のポイント
今回は、以前解説したフォームにラベルを表す要素を記述していきます。
フォームについての記事については、以下のリンクを参照下さい。
ラベルを使うメリット
コントロール部品にラベル要素を記述することで、以下のメリットを得ることが出来るようになります。
- ラベルをクリックしても、コントロール部品を選択できるようになる。
- 目の見えないユーザーが訪れても、音声でコントロール部品を読み上げることが可能になる。
ラベルについては、以下のイメージを参照して下さい。
フォームを作っていく（おさらい）
完成形をイメージする
まずは完成形のフォームをイメージしましょう。
私のイメージしたフォームは、以下のようなフォームです。
フォームについては、以前のおさらいですね。
過去の記事については以下の記事を参考にして下さい。
文字を起こす
それでは、イメージを元に必要な文字を反映しましょう。
反映すると以下の通りです。
お名前
性別
男性
女性
ぱくぱくミーティング
参加する
定義リストを表す
先程文字に起こした記事に、定義リストを表していきます。
定義リストを反映すると、以下のようになります。
<dl>
<dt>お名前</dt>
<dt>性別</dt>
<dd>
男性
女性
</dd>
<dt>ぱくぱくミーティング</dt>
<dd>参加する</dd>
</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>
これらフォームについてのおさらいについては、以下の記事を参考下さい。
ラベルを表す要素（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を学ぶ。シリーズはこちら
