<fieldset>: フィールドセット要素

試してみましょう

<form>
  <fieldset>
    <legend>好きなモンスターを選んでください</legend>

    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">クラーケン</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">サスカッチ</label><br />

    <input type="radio" id="mothman" 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 として動作します。既定では、コンテンツを囲む 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>同意しますか？</legend>
    <input type="checkbox" id="chbx" 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" id="name" value="Chris" />
    </div>
    <div>
      <label for="pwd">パスワード: </label>
      <input type="password" id="pwd" value="Wookie" />
    </div>
  </fieldset>
</form>

結果

技術的概要

仕様書

ブラウザーの互換性

関連情報

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