検索結果

fieldset 要素

この記事内

概要
属性
例
1. 例 1: fieldset、legend、label を持つ fieldset
2. 例 2: ラジオボタンとテキストボックスの fieldset により、編集可能な <select> をシミュレート
仕様
ブラウザ実装状況
関連バグ
関連情報

概要

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

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

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

属性

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

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 http-equiv="Content-Type" content="text/html; 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///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11DwkzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17OAsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYUoTQBBAQHxgE0wZcfMtDRMi/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;
}

/* 編集可能な [擬似]select (すなわち [class=elist] である fieldsets) */

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>

動作例を見る

仕様

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

機能	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
基本サポート	(有)	1.0 (1.7 or earlier)	(有)	(有)	(有)
`disabled` 属性	(有)	(有)	(有)^[1]	12	6

機能	Android	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, 2015/10/26 6:01:12

button 要素
datalist 要素
fieldset 要素
form 要素
input 要素
keygen 要素
label 要素
legend 要素
meter 要素
optgroup 要素
option 要素
output 要素
progress 要素
select 要素
textarea 要素
HTML Elements
1. A
  1. <a>
  2. <abbr>
  3. ~~<acronym>~~
  4. <address>
  5. ~~<applet>~~
  6. <area>
  7. <article>
  8. <aside>
  9. <audio>
2. B
  1. <b>
  2. <base>
  3. ~~<basefont>~~
  4. <bdi>
  5. <bdo>
  6. ~~<bgsound>~~
  7. ~~<big>~~
  8. ~~<blink>~~
  9. <blockquote>
  10. <body>
  11. <br>
  12. <button>
3. C
  1. <canvas>
  2. <caption>
  3. ~~<center>~~
  4. <cite>
  5. <code>
  6. <col>
  7. <colgroup>
  8. <content>
4. D
  1. <data>
  2. <datalist>
  3. <dd>
  4. <del>
  5. <details>
  6. <dfn>
  7. ~~<dir>~~
  8. <div>
  9. <dl>
  10. <dt>
5. E
  1. <em>
  2. <embed>
6. F
  1. <fieldset>
  2. <figcaption>
  3. <figure>
  4. ~~<font>~~
  5. <footer>
  6. <form>
  7. ~~<frame>~~
  8. ~~<frameset>~~
7. G H
  1. <h1>
  2. <h2>
  3. <h3>
  4. <h4>
  5. <h5>
  6. <h6>
  7. <head>
  8. <header>
  9. ~~<hgroup>~~
  10. <hr>
  11. <html>
8. I
  1. <i>
  2. <iframe>
  3. <img>
  4. <input>
  5. <ins>
  6. ~~<isindex>~~
9. J K
  1. <kbd>
  2. <keygen>
10. L
  1. <label>
  2. <legend>
  3. <li>
  4. <link>
  5. ~~<listing>~~
11. M
  1. <main>
  2. <map>
  3. <mark>
  4. ~~<marquee>~~
  5. <menu>
  6. <menuitem>
  7. <meta>
  8. <meter>
12. N
  1. <nav>
  2. ~~<nobr>~~
  3. ~~<noframes>~~
  4. <noscript>
13. O
  1. <object>
  2. <ol>
  3. <optgroup>
  4. <option>
  5. <output>
14. P
  1. <p>
  2. <param>
  3. ~~<plaintext>~~
  4. <pre>
  5. <progress>
15. Q
  1. <q>
16. R
  1. <rp>
  2. <rt>
  3. <ruby>
17. S
  1. <s>
  2. <samp>
  3. <script>
  4. <section>
  5. <select>
  6. <shadow>
  7. <small>
  8. <source>
  9. ~~<spacer>~~
  10. <span>
  11. ~~<strike>~~
  12. <strong>
  13. <style>
  14. <sub>
  15. <summary>
  16. <sup>
18. T
  1. <table>
  2. <tbody>
  3. <td>
  4. <template>
  5. <textarea>
  6. <tfoot>
  7. <th>
  8. <thead>
  9. <time>
  10. <title>
  11. <tr>
  12. <track>
  13. ~~<tt>~~
19. U
  1. <u>
  2. <ul>
20. V
  1. <var>
  2. <video>
21. W
  1. <wbr>
22. X Y Z
  1. <xmp>

fieldset 要素

概要

属性

例

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

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

仕様

ブラウザ実装状況

関連バグ

関連情報

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

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