HTML <fieldset> 要素は label 要素 (<label>) のような役割に加え、フォーム内部品のグループ化の働きをします。

コンテンツカテゴリー フローコンテンツセクショニングルートリスト化フォーム関連要素、パルパブルコンテンツ
許可された内容 任意の <legend> 要素と、それに続くフローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フローコンテンツ を受け入れるすべての要素
許可された ARIA ロール grouppresentation
DOM インターフェイス HTMLFieldSetElement

注記: 他のほとんどの要素と異なり、WHATWG HTML Rendering 仕様書では <fieldset> のデフォルトスタイルに min-width: min-content を含めることを勧めており、多くのブラウザがこのスタイル (またはよく似たスタイル) を実装しています。

注記: <fieldset> 要素は、新たなブロック整形文脈を作るものであると想定されています (HTML5 仕様書 を参照)。

属性

他のすべての要素と同様に、この要素は グローバル属性 をサポートしています。

disabled HTML5
この論理型属性が指定されている場合、その子孫要素として配置したフォーム・コントロールは <legend> を除いてすべて無効となり、編集不能となります。これらはマウスクリックやフォーカス等で発生するようなな、ブラウザーのすべてのイベントを受け付けなくなります。多くのデフォルトスタイルは、これをグレー背景など、操作不能であることを伝える意匠で描画します。
form HTML5
関連する <form> 要素の id 属性を指定し、これと自身を結び付けます。(関連する form 要素の子孫要素として配置されている場合、)初期値は祖先要素の内で直近の <form> 要素の id となります。 【訳注: HTML5 で導入されたこの属性により、form 要素のフォーム・コントロールを その form 要素外に配置可能になりました。】
name HTML5
fieldset 要素が示すフォーム・コントロールのグループの名前
fieldset 要素自身のラベルの役割は、その最初の子要素として配置した <legend> 要素が担います。

例 1: fieldset、legend、label を持つ fieldset

<form action="test.php" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" id="radio">
    <label for="radio">Click me</label>
  </fieldset>
</form>

例 2: ラジオボタンテキストボックスfieldset により、編集可能な <select> をシミュレート

以下の例は、HTML と CSS だけで作成しました。JavaScript コードはありません。

注意: スクリーンリーダーや支援技術は以下フォームと正しく対話できません。この例は正しい要素を使用していても妥当ではない HTML です。

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Editable [pseudo]select</title>
<style type="text/css">

/* 一般的なフォームフィールド */

fieldset.elist, input[type="text"], textarea, select,
option, fieldset.elist ul, fieldset.elist > legend,
fieldset.elist input[type="text"],
fieldset.elist > legend:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input[type="text"] {
  padding: 0 20px;
}

textarea {
  width: 500px;
  height: 200px;
  padding: 20px;
}

textarea, input[type="text"], fieldset.elist ul,
select, fieldset.elist > legend {
  border: 2px #cccccc solid;
  border-radius: 10px;
}

input[type="text"], fieldset.elist, select,
fieldset.elist > legend {
  height: 32px;
  font-family: Tahoma;
  font-size: 14px;
}

input[type="text"]:hover, textarea:hover,
select:hover, fieldset.elist:hover > legend {
  background-color: #ddddff;
}

select {
  padding: 4px 20px;
}

option {
  height: 30px;
  padding: 5px 4px;
}

option:not(:checked), textarea:focus {
  background-color: #ffcccc;
}

fieldset.elist > legend:after,
fieldset.elist label {
  height: 28px;
}

input[type="text"], fieldset.elist {
  width: 316px;
}

input[type="text"]:focus {
  background: #ffcccc url("data:image/gif;
  base64,R0lGODlhEAAQANU5APnoxuvr6+uxPdvb2+
  rq6ri4uO7qxunp6dPT06SHV+/rx8vLy+
  nezLO0sbe3t9Ksas+qaaCEV8rKyp2dnf39/
  QAAAK6ursifZHFxcc/
  Qzu3mxYyMjExCJnV1dc6maO7u7o+
  Pj2tXNoaGhtfDpKCDVu3lxM+
  tcaKEV9bW1qOFVWNjY8KrisTExNra2nBbObGxsby8vO/
  mu7Kyso9ZAuzs7MSgAIiKhf///8zMzP///
  wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQ
  ABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53
  NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11Dw
  kzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17O
  AsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYU
  oTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7")
  no-repeat 2px center !important;
}

input[type="text"]:focus, textarea:focus,
select:focus, fieldset.elist > legend {
  border: 2px #ccaaaa solid;
}

fieldset {
  border: 2px #af3333 solid;
  border-radius: 10px;
}

/* Editable [pseudo]select
(i.e. fieldsets with [class=elist]) */

fieldset.elist {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  overflow: visible;
  padding: 0;
  margin: 0;
  border: none;
}

fieldset.elist ul {
  position: absolute;
  width: 100%;
  max-height: 320px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: transparent;
}

fieldset.elist:hover ul {
  background-color: #ffffff;
  border: 2px #af3333 solid;
  left: 2px;
  overflow: auto;
}

fieldset.elist ul > li {
  list-style-type: none;
  background-color: transparent;
}

fieldset.elist label {
  display: none;
  width: 100%;
}

fieldset.elist input[type="text"] {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border: none;
  background-color: transparent;
  border-radius: 0;
}

fieldset.elist > legend {
  display: block;
  margin: 0;
  padding: 0 0 0 5px;
  position: absolute;
  width: 100%;
  cursor: default;
  background-color: #ccffcc;
  line-height: 30px;
  font-style: italic;
}

fieldset.elist:hover > legend {
  position: relative;
  overflow: hidden;
}

fieldset.elist > legend:after {
  width: 20px;
  content: "\2335";
  float: right;
  text-align: center;
  border-left: 2px #cccccc solid;
  font-style: normal;
  cursor: default;
}

fieldset.elist:hover > legend:after {
  background-color: #99ff99;
}

fieldset.elist ul input[type="radio"] {
  display: none;
}

fieldset.elist input[type="radio"]:checked ~ label {
  display: block;
  width: 292px;
  background-color: #ffffff;
}

fieldset.elist:hover
input[type="radio"]:checked ~ label {
  width: 100%;
}

fieldset.elist:hover label {
  display: block;
  height: 100%;
}

fieldset.elist label:hover {
  background-color: #3333ff !important;
}

fieldset.elist:hover
input[type="radio"]:checked ~ label {
  background-color: #aaaaaa;
}

</style>

</head>
<body>

<form method="get" action="test.php">

<fieldset>
    <legend>Order a T-Shirt</legend>
    <p>Write your name (simple textbox):
    <input type="text" /></p>
    <p>Choose your size (simple select):
    <select>
        <option value="s">Small</option>
        <option value="m">Medium</option>
        <option value="l">Large</option>
        <option value="xl">Extra Large</option>
    </select></p>
    <div>What address do you want to use?
    (editable pseudoselect)
    <fieldset class="elist">
        <legend>Address&hellip;</legend>
        <ul>
            <li><input type="radio" value="1"
            id="address-switch_1" checked
            /><label for="address-switch_1"
            ><input type="text"
            value="19 Quaker Ridge Rd. Bethel CT 06801"
            /></label></li>
            <li><input type="radio" value="2"
            id="address-switch_2"
            /><label for="address-switch_2"
            ><input type="text"
            value="1000 Coney Island Ave.
            Brooklyn NY 11230"
            /></label></li>
            <li><input type="radio" value="3"
            id="address-switch_3"
            /><label for="address-switch_3"
            ><input type="text"
            value="2962 Dunedin Cv. Germantown TN 38138"
            /></label></li>
            <li><input type="radio" value="4"
            id="address-switch_4"
            /><label for="address-switch_4"
            ><input type="text"
            value="915 E 7th St. Apt 6L. Brooklyn NY 11230"
            /></label></li>
        </ul>
    </fieldset>
    </div>
    <p>Write a comment:<br />
    <textarea></textarea></p>
    <p><input type="reset" value="Reset" />
    <input type="submit" value="Send!" /></p>
</fieldset>

</form>

</body>
</html>

動作例を見る

仕様

仕様書 策定状況 コメント
HTML Living Standard
<fieldset> の定義
現行の標準 fieldset 要素を定義
HTML Living Standard 現行の標準 fieldset および legend 要素のデフォルトレンダリング方法を提案
HTML5
<fieldset> の定義
勧告  
HTML 4.01 Specification
<fieldset> の定義
勧告 最初の定義

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) (有) 1.0 (1.7 or earlier) (有) (有) (有)
disabled 属性 (有) (有) (有) (有)[1] 12 6
新しいブロック整形を作る (有) (有) (有) (有) (有) (有)
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) 1.0 (1.0) (有) (有) (有)
disabled 属性 4.4 (有) ? ? ? 6.0
新しいブロック整形を作る (有) (有) (有) (有) (有) (有)

[1] IE11 は disabled 状態の fieldset で、適切に無効化されないフォームコントロール子孫要素があります。IE bug 817488: input[type="file"] not disabled inside disabled fieldset および IE bug 962368: Can still edit input[type="text"] within fieldset[disabled] をご覧ください。

関連バグ

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, ethertank
 最終更新者: yyss,