<fieldset></fieldset>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フォーム関連要素リスト化自動大文字化と自動修正継承) / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 任意で1つのlegend要素と、その後にフロー・コンテンツ

fieldset要素は、フォーム部品をグループ化します。

部品のグループにキャプションを付けたい場合は、fieldset要素内の先頭にlegend要素を配置します。


<fieldset></fieldset>

属性
任意属性
form="" フォームとの関連付け ID名 関連付けるform要素に指定したID名
name="" 部品グループの名前 文字列 スクリプトから参照する際に使用
disabled グループ内の部品を無効にする disabled 値は省略可能
  • disabled属性の指定は、fieldset要素内のlegend要素には適用されません。(legend要素内のフォーム部品は無効化されません)

fieldset要素を使用すると、複数のフォーム部品を1つのグループにまとめることができます。

次の例では、申込者お届け先の2つのグループを作成しています。(1つのフォーム内には、複数のグループを配置することができます)

<fieldset>
<legend>申込者</legend>

<p>お名前:<input type="text" name="name1"></p>
<p>ご住所:<input type="text" name="address1"></p>

</fieldset>

<fieldset>
<legend>お届け先</legend>

<p>お名前:<input type="text" name="name2"></p>
<p>ご住所:<input type="text" name="address2"></p>

</fieldset>

fieldset要素は入れ子にすることもできます。次の例では、親グループの中に2つの子グループを配置しています。

<fieldset>
<legend>親グループ</legend>
<p>親の部品:<input type="text" name="example1"></p>

<fieldset>
<legend>子グループ1</legend>
<p>子の部品:<input type="text" name="example1_1"></p>
</fieldset>

<fieldset>
<legend>子グループ2</legend>
<p>子の部品:<input type="text" name="example1_2"></p>
</fieldset>

</fieldset>

form属性について

form属性は、そのfieldset要素をどのform要素に関連付けるかを指定します。この属性の値には、対応するform要素に指定したID名を記述します。

  • この属性は、部品グループをform要素の外に配置する場合に使用します。(form要素の中に配置する場合は不要です)
<fieldset form="example">
<p>お名前:<input type="text" name="name" form="example"></p>
<p>ご住所:<input type="text" name="address" form="example"></p>
</fieldset>

<form method="post" action="example.cgi" id="example">
<p><input type="submit" value="送信する"></p>
</form>
  • 古いブラウザでは、この機能に対応していない場合があります。
  • form属性の使用例は、form要素のページでご覧になれます。

name属性について

name属性は、部品グループの名前を指定します。この名前は、スクリプトから参照する際に使用することになります。

<fieldset name="user">
<p>お名前:<input type="text" name="name"></p>
<p>ご住所:<input type="text" name="address"></p>
</fieldset>

disabled属性について

disabled属性を使用すると、グループ単位でフォーム部品を無効にすることができます。

<fieldset disabled>
<p>お名前:<input type="text" name="name"></p>
<p>ご住所:<input type="text" name="address"></p>
</fieldset>

ただし、legend要素内に配置された部品は無効化されません。次の例では、legend要素内のチェックボックスは操作可能な状態となります。

<fieldset disabled>

<legend>
<label><input type="checkbox" name="delivery" value="1">メール配信を希望する</label>
</legend>

<p>メールアドレス:<input type="email" name="email"></p>

</fieldset>
  • 上記のHTMLにJavaScriptを組み合わせると、メール配信を希望する場合にのみ入力欄を有効にすることができます。(使用例はlegend要素のページでご覧になれます)

要素のデフォルトスタイル

一般的なブラウザでは、グループ化された範囲に境界線が表示されます。

申込者

お名前:

  • 上記の表示例では、fieldset要素内にlegend要素を配置しています。
旧HTMLからの変更点
  • HTML5:form属性、name属性、disabled属性が追加されました。
  • HTML5:legend要素の配置が必須ではなくなりました。
  • HTML LS:要素カテゴリーがセクショニング・ルートではなくなりました。[2022/07/05]

使用例

フォーム内に2つの部品グループを配置した例

<form method="post" action="example.cgi">

<fieldset>
<legend>申込者</legend>
<p>お名前:<input type="text" name="name1" size="30"></p>
<p>ご住所:<input type="text" name="address1" size="30"></p>
</fieldset>

<fieldset>
<legend>お届け先</legend>
<p>お名前:<input type="text" name="name2" size="30"></p>
<p>ご住所:<input type="text" name="address2" size="30"></p>
</fieldset>

<p><input type="submit" value="送信する"></p>

</form>

表示例
申込者

お名前:

ご住所:

お届け先

お名前:

ご住所:

  • サンプルのため送信できません。
disabled属性を指定した例

<form method="post" action="example.cgi">

<fieldset>
<legend>申込者</legend>
<p>お名前:<input type="text" name="name1" size="30"></p>
<p>ご住所:<input type="text" name="address1" size="30"></p>
</fieldset>

<fieldset disabled>
<legend>お届け先</legend>
<p>お名前:<input type="text" name="name2" size="30"></p>
<p>ご住所:<input type="text" name="address2" size="30"></p>
</fieldset>

<p><input type="submit" value="送信する"></p>

</form>

表示例
申込者

お名前:

ご住所:

お届け先

お名前:

ご住所:

  • サンプルのため送信できません。