<fieldset>フィールドのグループ化

<fieldset>タグは、入力フォームの内容(コントロール)をグループ化する事ができます。 一般的なブラウザでは、<fieldset>を利用する事で、その中に含まれるグループ化された項目が線(ボーダー)で囲まれて表示されます。

またグループの名前は、<fieldset>~</fieldset>内の最初のlegend要素で指定します。 これをする事で、タイトルや説明などのキャプションを付ける事が可能です。

fieldset要素にdisabled属性を指定すると、そのfieldset要素内のすべてのフォーム入力を無効にすることができます。 ただしlegend要素の子要素は無効にはなりません。 ですがdisabled属性をサポートしているブラウザはまだ少ないようです。 例えばInternet Explorer8の場合であれば、コントロールが無効化されているかのような表示になり、サーバーに値が送信されなくなりますが、入力自体は受付けます。 それ以外のブラウザの場合であれば、この属性を指定しても変化しない事もあるようです。

またfieldset要素にform属性とid属性を指定する事で、form要素以外の場所にも配置できるようになります。 通常であれば<fieldset>は<form>~</form>内に子要素として配置しますが、<form>のid属性の値と<fieldset>のform属性の値を一致させる事で、form要素内以外の場所に配置しても特定のフォームと結びつける事が可能です。

HTML5での変更点

HTML5のfieldset要素では、form属性、name属性、disabled属性が新たに追加されました。 またlegend要素の配置が必須ではなくなっています。

書式

  • <fieldset 属性="値">~</fieldset> ……… フォームの入力項目をグループ化する

属性

disabled グループ内の項目を無効化する
form="" 他のフォームとの関連づけ。id名を指定
name="" フィールド名

使用した時の例

<fieldset form="sample1">
    <p>申込み者名:<input type="text" name="name11" size="40"></p>
</fieldset>

<form action="/cgi-bin/sample.cgi" method="post" id="sample1">
 <fieldset disabled>
 <legend>性別</legend>
    <p><input type="radio" name="sex" value="man">男</p>
    <p><input type="radio" name="sex" value="woman">女</p>
 </fieldset>

 <fieldset>
 <legend>配達先</legend>
    <p>名前:<input type="text" name="name" size="40"></p>
    <p>住所:<input type="text" name="addres" size="40"></p>
 </fieldset>
 <p><input type="submit" value="送信"></p>
</form>

ブラウザ上の表示例

申込み者名:

性別

配達先

名前:

住所:

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

形式 <fieldset>~</fieldset> カテゴリ フローコンテンツ, セクショニングルート, フォーム関連(リスト化), パルパブルコンテンツ
親要素 フローコンテンツが期待される場所 子要素 legendとフローコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~