<fieldset></fieldset>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / セクショニング・ルート / フォーム関連要素リスト化再関連付け可能) / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 任意で1つのlegend要素と、その後にフロー・コンテンツ

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

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


<fieldset></fieldset>

属性
任意属性
form="" [+]フォームとの関連付け ID名 関連付けるform要素に指定したID名
name="" [+]部品グループの名前 文字列 スクリプトから参照する際に使用
disabled [+]グループ内の部品を無効にする disabled 値は省略可能

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

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

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

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

</fieldset>

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

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

</fieldset>

form属性について

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

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

disabled属性について

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

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

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

<fieldset disabled>

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

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

</fieldset>
  • 上記のHTMLにJavaScriptを組み合わせると、そのグループの有効・無効を切り替えられるようになります。

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

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

申込者

お名前:

  • 上記の表示例では、fieldset要素内にlegend要素を配置しています。
  • IE(9)では、境界線の右端が変な表示になってしまうようです。

境界線のスタイルは、ブラウザにより多少異なります。

HTML5における変更点
  • form属性、name属性、disabled属性が追加されました。
  • legend要素の配置が必須ではなくなりました。

使用例

フォーム内に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>

表示例
申込者

お名前:

ご住所:

お届け先

お名前:

ご住所:

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