<legend>フィールドのグループにキャプションをつける

<legend>タグはフィールドのグループにキャプションをつける事ができます。 例えばその親の<fieldset>の説明、またはタイトルを表したい場合に使用します。

<legend>を使用する場合は、その親の<fieldset>内の最初にlegend要素を入れる必要があります。 またfieldset要素以外で使う事はできません。

なお一般的なWEBブラウザでは、fieldset要素に枠が表示され、その左上に<legend>~</legend>に入力したキャプションが表示されます。

HTML5での変更点

HTML5のlegend要素では、align属性が廃止されています。 テキストの位置を調整したい場合はCSSを利用します。

書式

  • <legend 属性="値">~</legend> ……… フォームの入力項目のグループにキャプションを付ける

使用した時の例

<form action="sample.cgi" method="post">
 <fieldset>
 <legend>お客様情報</legend>
   <p>名前:<input type="text" name="name" size="40"></p>
   <p>住所:<input type="text" name="call" size="40"></p>
 </fieldset>

 <fieldset>
 <legend>ユーザー情報</legend>
   <p>ID:<input type="text" name="id" size="40"></p>
   <p>パスワード:<input type="password" name="pass" size="40"></p>
 </fieldset>
   <p><input type="submit" value="送信"></p>
</form>

ブラウザ上の表示例

お客様情報

名前:

住所:

ユーザー情報

ID:

パスワード:

対応ブラウザなどのデータ

形式 <legend>~</legend> カテゴリ なし
親要素 fieldset 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~