目次に戻る

fieldset要素:HTML Living Standard各要素別メモ

概要

カテゴリー

W3C : HTML5.3Reassociateable elementにも属していた。

W3C : HTML5.3Autocapitalize-inheriting element自体が存在してなかった。

配置できる場所
内容モデル
  1. 1個以下のlegend要素
  2. 上記に続いて、Flow content
属性
  • グローバル属性
  • name→当該要素名前文字列
  • disabledブーリアン属性。指定された場合は、子孫フォームコントロールがすべて無効になる(ただし、legend要素子孫を除く)。この状態は、スクリプトを用いないと解除できない。
  • form→同一HTML文書内にあるform要素id属性値。当該フォームに関連付ける。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、groupデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外では、radiogrouppresentationnoneを指定可。
  • disabled属性が指定されてる場合は、aria-disabled属性は指定すべきではない。
視覚系ブラウザデフォルトとして期待されるCSS

  fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    border: groove 2px ThreeDFace;
    padding-block-start: 0.35em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    padding-inline-start: 0.75em;
    min-inline-size: min-content;
  }
  
視覚系ブラウザにおいて期待されるレンダリング
  • legend要素のボックスは、fieldset要素のボックスの始端側の上辺ボーダーに垂直方向における中央揃えで重ねる形で配置される。その部分においては、fieldset要素の上辺ボーダーは描画されない。
  • legend要素のボックスの幅は、それが指定されていない場合には、その内容を表示できる最短幅とする。
制約検証
  • disabled属性があれば、子孫フォームコントロール(ただし、legend要素子孫を除く)は制約検証の対象から除外。
意味・用法

グループ化されたフォームコントロールのセットを表す。

アクセシビリティ関連

私見・補足

フォームコントロールのグループ化以外の目的で(特に、見た目を目的として)使用するのは、間違いである。

Sectioning rootなので最上位セクションとなるが、キャプション用の独自の子要素legend要素)があるので、子要素に第二段階のセクションが含まれない限り、Heading contentによる見出し入れは想定されてないように思われる。

disabledの状態のときのレンダリングについては、HTML Living Standardには明記がないようなのだが、HTML4.01仕様フォーム関連の規定では、ユーザーエージェントによるものとされていたので、それに基づいて実装しているブラウザが多いと思われる。

表示確認

ソース1

  <fieldset>
    <legend>ここがlegend</legend>
    <div><label>テキストボックス<input type="text" value="サンプル" /></label></div>
    <div><label>チェックボックス<input type="checkbox" value="typeがcheckbox" /></label></div>
  </fieldset>
  
表示結果1
ここがlegend
ソース2:disabled属性を指定

  <form action="javascript:return false;">
    <div>legend要素内の「ここを利用」のチェックボックスには、チェックするとfieldset要素のdisabledが解除されるスクリプトが組み込まれている(チェックを外すと再度disabledになる)。</div>
    <fieldset name="field1" disabled="disabled">
      <legend>
        <label><input type="checkbox" name="kaijo" onchange="form.field1.disabled = !checked" />ここを利用</label>
      </legend>
      <div><label>テキストボックス<input type="text" name="text" value="サンプル" /></label></div>
      <div><label>チェックボックス<input type="checkbox" name="check" value="typeがcheckbox" /></label></div>
    </fieldset>
  </form>
  
表示結果2
legend要素内の「ここを利用」のチェックボックスには、チェックするとfieldset要素のdisabledが解除されるスクリプトが組み込まれている(チェックを外すと再度disabledになる)。