<fieldset>: フィールドセット要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
試してみましょう
属性
この要素にはグローバル属性があります。
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>Do you agree?</legend>
<input type="checkbox" id="chbx" name="agree" value="Yes!" />
<label for="chbx">I agree</label>
</fieldset>
</form>
結果
無効化されたフィールドセット
この例は無効化した <fieldset>
で、二つのコントロールが中にあります。なお、両方のコントロールは無効化した <fieldset>
の中にあるので、無効になります。
<form action="#">
<fieldset disabled>
<legend>Disabled login 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 |
仕様書
Specification |
---|
HTML Standard # the-fieldset-element |
ブラウザーの互換性
BCD tables only load in the browser