フォーム部品のグループを表す

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

部品のグループにキャプションを付けたい場合は、fieldset要素内の先頭に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要素のページでご覧になれます）