リファレンスインデックスへ

フォームや入力部品を表す9つの正しいXHTMLタグ

有限会社タグパンダ
喜安 亮介
2009/8/7

HTMLマークアップの仕方でユーザビリティ面で大きく差が出てしまうWebサイトのフォーム。そこで使うタグを9つ紹介します

今回紹介するタグ form label input textarea select optgroup option fieldset legend

Webページ上でユーザーと対話するのに重要な要素

　今回は、フォーム関連のタグをまとめて解説していきたいと思います。HTMLのフォームは、Webページ上でユーザーと対話するのに重要な要素です。ユーザーはWebサイト上のフォームにデータを入力し、送信ボタンを押すことで簡単にデータを送ることができ、Webサイト運営者は手軽にユーザー情報を収集可能です。

　Webサイトで当たり前のように使われるフォームですが、HTMLマークアップのテクニック1つで、ユーザビリティ、アクセシビリティ面で大きく差が出てしまう個所でもあります。できるだけ、fieldset要素、legend要素、label要素、optgroup要素といった要素を効果的に使い、アクセシブルなHTMLフォームを作成していきましょう。

　本リファレンスでは、テキストフィールド、チェックボックス、ボタンなどのフォーム内の要素のことを「コントロール」と呼んでいます。

form要素

　form要素はフォームを定義するブロック要素です。form要素を除くブロック要素やscript要素を内包できますが、インライン要素を直接form要素内に置くことはできません。必ずdiv要素などのブロック要素で内包するようにしましょう。

　form フォームを定義するform要素

label要素

　label要素は、form要素の入力項目が何であるかを示すラベルを定義します。インライン要素として機能し、インライン要素を内包できますが、label要素の入れ子はできません。ラベルを定義しておくと、ラベルをクリックするだけでコントロールにフォーカスするようになります。

　アクセシビリティに配慮したWebページ作りのためにも、定義しておくようにしましょう。

　label ラベルを定義するlabel要素

input要素

　input要素はフォーム内に入力部品となるコントロールを定義する際に使います。どのコントロールを指定するかは、type属性を用います。インライン要素として機能し、終了タグを持たない空要素として存在します。

　input 入力部品を定義するinput要素

textarea要素

　textarea要素は、複数行のテキスト入力欄を定義します。input属性のtype="text"は単一行のみの入力欄なので、複数行にわたる入力欄を設けたい場合に使用します。要素の領域を超えるテキストが入力されるとスクロールバーを設け、ほぼ無制限にテキストを入力できます。インライン要素として機能し、テキストのみを内包できます。

　textarea 複数行のテキスト入力欄を定義するtextarea要素

select要素

　select要素は、フォームの選択メニューを定義します。通常は、都道府県など決まった項目を入力する際に、ユーザーの手間を省くためにテキスト入力欄ではなく選択式のメニューを使用します。インライン要素として機能し1つ以上のoption要素を内包しなければなりません。また、optgroup要素も内包可能です。

　select 選択メニューを定義するselect要素

optgroup要素

　optgroup要素は、選択メニューの項目のグループを定義します。複数のoption要素をグループに分けられます。すると、選択メニューは階層化して表示されるため、内容が整理され見やすくなります。インライン要素として機能し1つ以上のoption要素を内包しなければなりません。

　optgroup 選択メニューの項目のグループを定義するoptgroup要素

option要素

　option要素は選択可能な項目を定義します。この要素を増やすことで、都道府県など数の多いものでも、その全部を選択メニューに含めることができます。インライン要素として機能し、テキストのみを内包できます。

　option 選択可能な項目を定義するoption要素

fieldset要素

　fieldset要素は、テーマとして関連のあるラベルとコントロールをグループ化できます。このように、グループとしてまとめられたコントロールは、タブキーでの移動によるキーボードアクセスや音声ブラウザといった環境では音声入力との連動で利用者からの理解が深まりることで、アクセシビリティの確保につながります。

　また、ブロック要素として機能し、legend要素、ブロック要素、インライン要素、テキストを内包でき、最初の子要素にlegend要素を使ってFIELDSETに説明を付けることができます。

　fieldset テーマとして関連があるラベルとコントロールをグループ化するfieldset要素

legend要素

　legend要素は、fieldset要素に対する説明文や表題を定義します。特に非視覚環境において、グループ化されたfieldset要素の説明があることによって、ユーザーの理解の手助けとなります。ブロック要素として機能し、インライン要素、テキストを内包できます。

　legend fieldset要素に対する説明文や表題を定義するlegend要素

---

喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。

1/10

INDEX
Web標準HTMLタグリファレンス（最終回） フォームや入力部品を表す9つの正しいXHTMLタグ フォーム
	form フォームを定義するform要素
	label ラベルを定義するlabel要素
	input 入力部品を定義するinput要素
	textarea 複数行のテキスト入力欄を定義するtextarea要素
	select 選択メニューを定義するselect要素
	optgroup 選択メニューの項目のグループを定義するoptgroup要素
	option 選択可能な項目を定義するoption要素
	fieldset テーマとして関連があるラベルとコントロールをグループ化するfieldset要素
	legend fieldset要素に対する説明文や表題を定義するlegend要素

【関連記事】

デザイナーのためのWeb学習帳 Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」から攻略していこう！ 「デザインハック」コーナー

いまさら聞けないCSS／スタイルシート入門 Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？ 「デザインハック」コーナー

WebデザイナのためのHTMLチューニング入門 Webサイトを見た人の印象を良くするのか悪くするのかには“速度”が大きくかかわってきます。FirefoxのプラグインYSlowで測る7つの計測ポイントから“速い” HTMLの書き方を学びましょう 「デザインハック」コーナー

[an error occurred while processing this directive]

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）