<fieldset> はHTML の要素で、ウェブフォーム内のラベル (<label>) などのようにいくつかのコントロールをグループ化するために使用します。

試してみましょう

<form>  <fieldset>    <legend>好きなモンスターを選んでください</legend>    <input type="radio" name="monster" value="K" />    <label for="kraken">クラーケン</label><br />    <input type="radio" name="monster" value="S" />    <label for="sasquatch">サスカッチ</label><br />    <input type="radio" name="monster" value="M" />    <label for="mothman">モスマン</label>  </fieldset></form>

legend {  background-color: black;  color: white;  padding: 3px 6px;}input {  margin: 0.4rem;}

上記の例にあるように、<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 として動作します。既定では、コンテンツを囲む2pxgroove の境界線があり、少量の既定のパディングがあります。要素は既定で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>同意しますか？</legend>    <input type="checkbox" name="agree" value="Yes!" />    <label for="chbx">同意する</label>  </fieldset></form>

結果

無効化されたフィールドセット

この例は無効化した<fieldset> で、二つのコントロールが中にあります。なお、両方のコントロールは無効化した<fieldset> の中にあるので、無効になります。

<form action="#">  <fieldset disabled>    <legend>ログインフィールドセットの無効化</legend>    <div>      <label for="name">名前: </label>      <input type="text" value="Chris" />    </div>    <div>      <label for="pwd">パスワード: </label>      <input type="password" value="Wookie" />    </div>  </fieldset></form>

結果

技術的概要

仕様書

ブラウザーの互換性

関連情報

• <legend> 要素
• <input> 要素
• <label> 要素
• <form> 要素