HTML <fieldset>

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

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

書式

<fieldset> ... </fieldset>

開始タグと終了タグは省略できません。

例

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要素へアクセスできる。

関連記事

<form>

<label>

<legend>

<optgroup>

<option>

参考文献

Web Hypertext Application Technology Working Group. 2024. "The fieldset element" HTML Living Standard