<fieldset>: フィールドセット要素
HTML の <fieldset>
要素は、ウェブフォーム内のラベル (<label>
) などのようにいくつかのコントロールをグループ化するために使用します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
上記の例にあるように、 <fieldset>
要素は HTML フォームの一部をグループ化し、内側の <legend>
要素で <fieldset>
のキャプションを提供しています。いくつかの属性を取りますが、特に重要なものとして form
は、同じページの <form>
の id
を含むことができ、 <fieldset>
が <form>
の中になくてもその一部として扱うことができたり、 disabled
は、 <fieldset>
およびその中身を一度に無効にすることができたりします。
属性
この要素にはグローバル属性があります。
disabled
- この論理型属性が設定されている場合、 <fieldset> の子孫要素として配置したフォームコントロールはすべて無効になり、つまり編集したり
<form>
と一緒に送信したりすることができなくなります。マウスクリックやフォーカス関連のイベントのような閲覧イベントを受け取らなくなります。既定では、ブラウザーはそのようなコントロールを灰色で表示します。なお、子孫の<legend>
要素の中のフォーム要素は無効になりません。 form
<form>
要素のid
属性を指定し、<fieldset>
要素はたとえその中になくても、その一部とすることができます。なお、<fieldset>
内の<input>
要素をフォームに関連付けたい場合は、それらの要素に直接form
属性を使用する必要があります。どの要素がフォームに関連付けられているかは、 JavaScript でHTMLFormElement.elements
を使用して確認することができます。name
- グループに関連付けられた名前です。
注: fieldset 要素自身のラベルの役割は、その最初の子要素として配置した
<legend>
要素が担います。
CSS でのスタイル付け
<fieldset>
には、スタイル付けの特殊な考慮事項がいくつかあります。
display
の値は既定で block
であり、ブロック整形コンテキストを確立します。 <fieldset>
がインラインレベルの display
の値でスタイル付けされた場合は inline-block
として動作し、そうでなければ block
として動作します。既定では、コンテンツを囲む 2px
groove
の境界線があり、少量の既定のパディングがあります。要素は既定で min-inline-size: min-content
を持ちます。
<legend>
が存在する場合は、 block-start
境界線の上に配置されます。 <legend>
は縮小折り返しであり、整形コンテキストを確立します。 display
の値はブロック的です。 (例えば、 display: inline
は block
として動作します。)
<fieldset>
の内容を保持する無名のボックスが生成され、 <fieldset>
から特定のプロパティを継承します。 <fieldset>
が display: grid
または display: inline-grid
でスタイル付けされていた場合、無名ボックスはグリッド整形コンテキストになり、 <fieldset>
が display: flex
または display: inline-flex
でスタイル付けされていた場合、無名ボックスはフレックス整形コンテキストになります。それ以外の場合はブロック整形コンテキストになります。
<fieldset>
および <legend>
に対しては、ページデザインに合うあらゆる方法で気軽にスタイル付けしてください。
例
単純なフィールドセット
この例は、本当に単純な <fieldset>
の例で、 <legend>
および1つのコントールが中にあります。
<form action="#">
<fieldset>
<legend>Simple fieldset</legend>
<input type="radio" id="radio">
<label for="radio">Spirit of radio</label>
</fieldset>
</form>
無効化したフィールドセット
この例は無効化した <fieldset>
で、二つのコントロールが中にあります。なお、両方のコントロールは無効化した <fieldset>
の中にあるので、無効になります。
<form action="#">
<fieldset disabled>
<legend>Disabled fieldset</legend>
<div>
<label for="name">Name: </label>
<input type="text" id="name" value="Chris">
</div>
<div>
<label for="pwd">Archetype: </label>
<input type="password" id="pwd" value="Wookie">
</div>
</fieldset>
</form>
技術的概要
コンテンツカテゴリー | フローコンテンツ, 区分化ルート, リスト化, フォーム関連要素, 知覚可能コンテンツ |
---|---|
許可されている内容 | 任意の <legend> 要素と、それに続くフローコンテンツ |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
暗黙の ARIA ロール | group |
許可されている ARIA ロール | radiogroup , presentation , none |
DOM インターフェイス | HTMLFieldSetElement |
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <fieldset> の定義 |
現行の標準 | fieldset 要素を定義 |
HTML5 <fieldset> の定義 |
勧告 | |
HTML 4.01 Specification <fieldset> の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser