Webページ公開後、ユーザの声をきく方法の一つに『フォーム』があります。フォームはユーザにアンケートやテキスト入力を促し、ユーザの持つ意見を統計データとして出力できる機能のことです。今回はそんなフォームの作成に欠かせない、<legend>タグについて解説していきます。
今回は、legendタグの
・どんな場面でlegendタグを使用するか
・legendタグを使用したフォームの作成例
について説明します。
目次
legendタグとは
legendタグの読み方
legendタグ：（読み方）レジェンドタグ
legendタグのlegendは、伝説や言い伝えなどの意味の他に、地図や図表などの説明文としての意味があります。
legendタグの説明
legendタグは、グループ化されたフォームの入力部品に対し、説明文やキャプションを付け加えるためのタグです。そのため、legendタグはfieldsetタグ内で使用します。
fieldsetタグはlegendタグの親要素であり、legendタグは親要素のfieldsetの内容に説明文を付け加えることができるタグなのです。
legendタグで利用できる属性
legendタグでは以下の属性を使うことができます。
| 属性 | 説明 |
|---|---|
| accesskey属性 | キーボードのショートカットの生成し、簡易なアクセスを可能にする |
| class属性 | 要素に任意の名称を与える（同じclass名を複数の要素に与えられる） |
| dir属性 | テキストの書字方向を示す ・ltr：「left to right」左から右 ・rtl：「rght to left」右から左 ・auto：自動的に書字方向を決定する |
| hidden属性 | 要素に関連性がないことを示す |
| id属性 | 要素に任意の名称を与える（同じidは使用できない：一意性） |
| lang属性 | 要素の言語を定義する |
| style属性 | 要素にCSSスタイル宣言を適用する |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 6 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 未確認 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
legendタグの基本的な使い方
legendタグの使い方
使い方で説明した通り、legendタグは必ず親要素のfieldsetタグと一緒に使用します。性別選択のフォームを作成し、それをfieldsetタグで囲いました。そのfieldsetタグ内にはlegendタグを設置し、そのフォームの説明として『性別を選択』というテキストを記述しています。
以下のサンプル例を見ていただければわかると思いますが、フォーム内のラジオボタンが四角で囲われ、より明確に性別選択のフォームが区別できるようになりました。
See the Pen
legendタグ 基本 by rabbittyu (@rabbittyu)
on CodePen.
どんな場面でlegendタグを使用するか
legendタグはフォームに説明を付け加えるタグであることは、わかって頂けたと思いますが、実際にはどのように利用されているのでしょうか？legendタグの使い道を模索していきましょう。
実はlegendタグは表示されている枠線を消去するなど、CSSで見た目に変化を与えることができます。
See the Pen
legend 実用例 by rabbittyu (@rabbittyu)
on CodePen.
legendタグを使用した実用的なフォームの作成例
ではlegendタグを使用して、実用的なフォームを作成していきましょう。ここでは架空のイベントへの参加申し込みフォームを仮定しました。ユーザに入力してもらうのは、名前と性別、生年月日と、参加希望日時です。
今回の例ではlegendタグは、『個人情報』と『参加希望日時』で使用しました。それぞれfieldsetタグで囲っているため、枠線が表示され、より明確に違いを認識することができます。
See the Pen
lagend 実用例 by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はフォームでグループ化された内容に説明を与えるlegendタグについて説明しました。legendタグはfieldsetタグと必ずセットで使用し、フォームを内容ごとに区切ることができるタグです。
legendタグを使用せずともフォームを作成することができますが、legendタグを使用してフォームの内容の明確な違いを線引きすることで、より読者に内容を分かりやすく伝えることができるでしょう。
参考文献：
MDN web docks <legend>
HTMLでlegendタグの使い方を現役デザイナーが解説【初心者向け】
HTML5タグリファレンス
