HTML <fieldset>

フォームの中の部品をグループ化します。グループ化した部品は枠線で囲まれます。 <FORM> と </FORM> の間に記述します。

<LEGEND> タグでフィールドセットに見出しを付けることができます。

書式

<fieldset> 要素の開始タグと終了タグは、どちらも省略できない。

<fieldset>
  <!-- flow content -->
</fieldset>

属性

disabled

<fieldset> 要素に disabled 属性を指定すると、子孫のフォーム・コントロールが無効化される。属性に値を指定する必要はないが、もし指定するなら "disabled" を指定する。

<form>
  <fieldset disabled>
    <input type="radio" name="account" value="sa" id="sa" checked>
    <label for="sa">普通預金</label>
    <input type="radio" name="account" value="ca" id="ca">
    <label for="ca">当座預金</label>
  </fieldset>
</form>

普通預金 当座預金

name

JavaScript から参照するための名前を指定する。

たとえば、以下のHTMLの場合

<form id="myForm">
  <fieldset name="userData">
  </fieldset>
</form>

JavaScriptからは次のようにして参照できる。

const element1 = document.getElementById("myForm").elements.userData;
// または
const element2 = document.forms["myForm"].userData;
      

内容

fieldsed 要素の開始タグと終了タグの間には、<legend> 要素及びフロー・コンテンツを含めることができる。

例

HTMLタグ <fieldset> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<form>
  <fieldset>
    <input type="radio" name="account" value="sa" id="sa" checked>
    <label for="sa">普通預金</label>
    <input type="radio" name="account" value="ca" id="ca">
    <label for="ca">当座預金</label>
  </fieldset>
</form>

fieldset要素に見出しを付けるには、<legend> タグを使う。

枠線の太さを変える

枠線の太さを変えるには、CSS の border または border-width プロパティに線の太さを指定する。

<form>
  <fieldset style="border:2px solid black">
    <input type="radio" name="account" value="sa" id="sa" checked>
    <label for="sa">指値注文</label>
    <input type="radio" name="account" value="ca" id="ca">
    <label for="ca">成行注文</label>
  </fieldset>
</form>

枠線の色を変える

枠線の色を変えるには、CSS の border または border-color プロパティに線の色を指定する。

<form>
  <fieldset style="border:1px solid blue">
    <input type="radio" name="sex" value="m" id="male" checked>
    <label for="male">男性</label>
    <input type="radio" name="sex" value="f" id="female">
    <label for="female">女性</label>
  </fieldset>
</form>

枠線を消す

枠線を消すには、CSS の border または border-style プロパティに線のスタイルを指定する。

<form>
  <fieldset style="border:none">
    <input type="radio" name="book" value="hc" id="hard" checked>
    <label for="hard">ハードカバー</label>
    <input type="radio" name="book" value="pb" id="paper">
    <label for="paper">ペーパーバック</label>
  </fieldset>
</form>

JavaScript

JavaScriptからは HTMLFieldSetElement インタフェースを通じてform要素へアクセスできる。HTMLFieldSetElement インタフェースは HTMLElement インタフェースを継承しているため、HTMLElement インタフェースのプロパティやメソッドも利用できる。

HTMLFieldSetElement インタフェース固有のプロパティを以下に示す。

関連記事

• <form>
• <label>
• <legend>
• <optgroup>
• <option>

参考文献

1. Web Hypertext Application Technology Working Group, "The fieldset element," HTML Living Standard, Nov. 2025