fieldset

fieldset

fieldset 要素型 (HTML, XHTML 1)

[5] fieldset 要素は、 フォーム制御子名札 (ラベル) をまとめるために使います。

[16] 仕様書:

[17]

開始タグ
必須
終了タグ
必須
内容模型 (HTML 4)
(空白, legend, (%flow)*)
内容模型 (ISO‐HTML)
(空白, legend, (%block | %inline | address)+) −(fieldset)
出現できる文脈
%block が出現できる場所。 (歴史的変遷: http://suika.fam.cx/www/2004/html/content-fieldset)
属性
属性名属性値既定値説明出典
align非標準
class(なし)[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] CoreCommon
dir書字方向[HTML 4] %i18n ⊂ %attrs, [XHTML 1] I18N ⊂ Common
idID(なし)一意識別子[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common
lang自然言語[HTML 4] %i18n ⊂ %attrs
xml:lang自然言語[XHTML 1] I18N ⊂ Common
onclick%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
ondblclick%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onkeydown%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onkeypress%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onkeyup%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onmousedown%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onmousemove%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onmouseout%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onmouseover%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
onmouseup%Script(なし)[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common
styleスタイル情報[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Style ⊂ Common
title注釈的題[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common

内容模型

[6] HTML 4DTD では、 fieldset 要素型の内容模型は (#PCDATA, LEGEND, (%flow)*) とされていますが、注釈で、 #PCDATA混合内容問題を解決するためで、 空白のみが許される、とされています。

もし内容模型が (legend, (%flow)*) であったとすると、

<fieldset>
  <legend/>
  %flow;
</fieldset>

のように legend の開始タグの前に空白がある時に、 (この内容模型は %flow 内に #PCDATA が含まれているため、混合内容であり、) その空白が #PCDATA に該当するデータとされてしまいます。 しかし、 fieldset 要素内にはデータより先に legend 要素が必要ですから、非妥当にされてしまいます。

この問題には、

  • legend 要素の開始タグは必ず fieldset 要素の開始タグの直後に書く (字下げは諦める)
  • textflow 要素型や bodytext 要素型のようなダミーを用意する
  • #PCDATA を許してしまう (厳密性を諦める)

の三つの解法があります。 HTML 4 は最終的には三番目の解法を 選択しました。

[7] ところで、 HTML 4 DTD 注釈には per specification only whitespace is allowed there と書いてありますけど、仕様書のどこに書いてあるのでしょうか? (HTML 4 DTD 内の注釈は参考 (informative) だし、 心許ないなあ。でも ISO‐HTML の注釈は規定 (normative) だ。)

[10] XHTML 1 では、 XML の制約から、 更に自由な内容模型 (#PCDATA | %legend.qname; | %Flow.mix;)* になってしまっています。

だけど混合内容問題を解決するために〜という注釈は残ったままなので意味不明になっています。 (fieldset 内は全く要素か空白しか入れられないように読めてしまう。) たとえば: http://www.w3.org/TR/2001/REC-xhtml-modularization-20010410/xhtml-modularization.html#dtdelement_fieldset.qname

[11] HTML 4 でも XHTML 1 でも、 form 要素の子孫に form 要素を入れることはできませんから、 form 要素の子孫である fieldset 要素の子孫として form 要素を入れることはできません。しかし、 form 要素の子孫ではない fieldset 要素の子孫に form 要素を入れることは可能のようです。

[15] ISO‐HTML では fieldset 要素の入れ子は禁止されています。

[20] HTML 4 DTD の注釈 (参考) の説明:

#PCDATA is to solve the mixed content problem, per specification only whitespace is allowed there!

文脈

[29] Cougar (>>25) 以来、 fieldsetブロック水準要素 (%block;) に分類されています。

[30] ちなみに、 HTML 2.0DTD ではフォーム制御子form 要素内でしか使えないことになっていましたが、 HTML 3.2HTML 4 (Cougar) では行内要素 (%text;) とされていて、 form の外でも使えます。 fieldset 要素も特に form 要素内に限定されてはいません。

UA による利用

レンダリング

[8] fieldset による集団化情報を使って、 視覚UAタブを使ったレンダリングができますし、 音声UA もより分かりやすいレンダリングができます。 従って利用者はよりフォームの制御子等の目的を理解しやすくなり、 文書のアクセス可能性が高まります。 HTML 4 17.10

[18] HTML 4 (というか HTML 3 Form) の最初期の草案ではもろにタブをマークする方法も検討されていたこともあったようですが、 最終的にレンダリングに中立な集団化に留まったのでしょう。

しかし、同じ form 内の近隣の fieldset をまとめてタブ集合として表示する UA なんて見たことがありません。

実際にタブとしてレンダリングするには li に対する ul のような包含子要素が要るのではないでしょうか。

[9] WinIEGecko などは、

+- LEGEND ------------------------+
| Label: Control........          |
| Label: Control........          |
+---------------------------------+

のような既定スタイルを持っています。枠線は窪みです。 (Windoze の設定 dialog box などでよくでてくる、 集団化のためのあれと同じ style です。)

[21] Opnewave SDKでは要素の上下にhrのような線が引かれるのが既定スタイルです。

[22] >>9Microsoft Windowsの (Windows 95以来の) GUIにおけるfieldset相当の表現ですが、Microsoft Office(確か97以来)

 LEGEND -------------------------
  Label: Control........           
  Label: Control........           

のようになっています。

[23] >>9Microsoft Windowsの (Windows 95以来の) GUIにおけるfieldset相当の表現ですが、Microsoft Office(確か97以来)

 LEGEND -------------------------
  Label: Control........           
  Label: Control........           

のようになっています。

[28] WinIE の古い版では、 align 属性img 要素の場合のように実装されていたそうです。

[37] IRC logs: freenode / #whatwg / 20090202 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090202#l-68

不思議解釈

[1] 地獄変00:blockquoteはもう古い〜fieldsetの伝説(legend)!! http://blog.livedoor.jp/jigokuhen00/archives/169129.html#content (名無しさん 2004-03-23 02:15:27 +00:00)

[2] >>1引用のために (特定 UA の見た目の理由から) fieldset + legend を使おうと提案して叩かれた例。

著者が一日でこんなに叩かれましたと出してる URI がほとんど某方面なのが藁える。

[3] だけど、 >>1 みたいなことを考える人が出てくるのって、

  • HTML 3credit や表の caption に相当する要素型が無い
  • fieldset + legend の典型的レンダリング(謎)を CSS で気軽に(謎)実現する方法がない

のが原因でしょ。それが解決されない限りまた繰り返されるだろうなあ。 (Form control 以外の集団化・見出し付けのために fieldset + legend を使うというネタはたしか外出だし。)

他との関係

[12] legend 要素型は、必ず fieldset 要素型とセットで使用します。

[13] input 要素や button 要素 (typereset) を fieldset 要素内で使用すると、適用範囲 (初期化される範囲) は fieldset 要素内に限定されます。

[14] input 要素 (typefile) は典型的に fieldset により (ブラウザ内部的に) 構造化されると ISO-HTML 利用者の指針 http://purl.org/NET/ISO+IEC.15445/Users-Guide.html#CL.I.FILE に書いてあります。

歴史

[25] fieldset 要素は1996年7月10日の Cougar (HTML 4) DTD 案で初めて登場しました。

[27] WinIE は 4.0 から実装しています。

WinIE 4 の最初の公開版 (Platform Preview 英語版) は1997年4月に配布開始されています。このとき既に fieldset 要素が実装されていたかは定かではありませんが、 いずれにしても >>25 より後ということになります。

一般公開されていないα版は1996年6月にできているらしいです。 その時点で実装されていたとすれば、 >>25 より前になります。

もっとも、当時 MicrosoftHTML WG に参加していたので、 MicrosoftHTML WG に提案し、かつほぼ同時に WinIE に実装した、という可能性もあります。

[26] Classic Mozilla では実装されず、 GeckoMozilla で初めて実装されたようです。

1998年11月付けの画面写真fieldset 要素の例が示されています。

実装

[4] iCabのぺ〜じ - A氏からの手紙(FIELDSETの扱いについて) http://www.gld.mmtr.or.jp/~tanico/Ah/001Al.html

[19] 薬暦フォームの例 HTML 4 17.10

<FORM action="..." method="post">
 <P>
 <FIELDSET>
  <LEGEND>Personal Information</LEGEND>
  Last Name: <INPUT name="personal_lastname" type="text" tabindex="1">
  First Name: <INPUT name="personal_firstname" type="text" tabindex="2">
  Address: <INPUT name="personal_address" type="text" tabindex="3">
  ...more personal information...
 </FIELDSET>
 <FIELDSET>
  <LEGEND>Medical History</LEGEND>
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Smallpox" tabindex="20"> Smallpox
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Mumps" tabindex="21"> Mumps
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Dizziness" tabindex="22"> Dizziness
  <INPUT name="history_illness" 
         type="checkbox" 
         value="Sneezing" tabindex="23"> Sneezing
  ...more medical history...
 </FIELDSET>
 <FIELDSET>
  <LEGEND>Current Medication</LEGEND>
  Are you currently taking any medication? 
  <INPUT name="medication_now" 
         type="radio" 
         value="Yes" tabindex="35">Yes
  <INPUT name="medication_now" 
         type="radio" 
         value="No" tabindex="35">No
  If you are currently taking medication, please indicate
  it in the space below:
  <TEXTAREA name="current_medication" 
            rows="20" cols="50"
            tabindex="40">
  </TEXTAREA>
 </FIELDSET>
</FORM>

HTML 4 仕様書は、更にスタイル・シートやスクリプトで制御子の位置を揃えたり、 色を変えたり、 Current MedicationYes と答えた場合のみ textarea を有効にしたりすると更に利用者にとって分かりやすくなるであろうと指摘しています。 (label も使った方が良いでしょう。)

[24] 一般の見出し・本文のマーク付けに濫用した例

    <TR>
      <TD>
      <FORM>
      <FIELDSET><LEGEND><A name="600"><B>紀元前600年頃世界初のデリバティブ</B></A></LEGEND><BR>
      デリバティブとは、主に(金融などから)派生した商品のことで、有名なものに先物取引、オプション取引、スワップ取引がある。その中のオプション取引(オプションとは、権利料のことで、例えば一定期間の後に決まった金額で株式などを買うことのできる権利の値段をいう)で大もうけをした人物が紀元前の600年ごろにいたという記録がある。<BR>
      <BR>
      アリストテレスの「政治学」の中に出てくる話で、哲学者のターレスという人物が、星の観測からオリーブの大豊作を予想し、オリーブ絞り機の権利料(収穫期のオリーブ絞り機を使うことのできる権利)を買い占めて大もうけした話がある。<BR>
      <BR>
      </FIELDSET>
      </FORM>
      </TD>
    </TR>

>>1 も参照。

メモ

メモ

[38] IRC logs: freenode / #whatwg / 20090817 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090817#l-406

[39] HTML <fieldset> rendering ( (Robert O'Callahan 著, 版)) http://lists.w3.org/Archives/Public/www-style/2014Jan/0185.html

[40] [CSSWG] Minutes Telecon 2014-01-22 ( (Dael Jackson 著, 版)) http://lists.w3.org/Archives/Public/www-style/2014Jan/0334.html

[41] Web Applications 1.0 r8576 Try to be more compatible in <fieldset> rendering rules. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8575&to=8576

[42] Web Applications 1.0 r8753 Make sure :disabled matches fieldsets inside disabled fieldsets, since apparently that's a thing. Also, editorial cleanup around 'disabled'. ( ( 版)) http://html5.org/r/8753

[43] Web Applications 1.0 r8842 Make <fieldset> display:block to match implementations ( ( 版)) https://html5.org/r/8842

[44] 女子高生が鉄道模型を作った 繊細な表現、国際大会でV:朝日新聞デジタル ( 版) http://www.asahi.com/articles/ASHDS40XQHDSUTIL015.html

<li class="Search"><form action="http://sitesearch.asahi.com/.cgi/sitesearch/sitesearch.pl?iref=com_utnavi" method="GET">

<fieldset>

<input type="text" name="Keywords" value="" class="SearchKeywords">

<input type="submit" name="Searchsubmit2" value="検索" class="SearchSubmit">

<input type="hidden" name="Searchsubmit" value="検索" >

</fieldset>

</form></li>

[45] 年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に ( 版) http://www.huffingtonpost.jp/2015/12/30/new-years-card-monkey-2004-and-2016_n_8893298.html

<form action="#">

<fieldset>

<legend>Get Japanメールマガジンを講読</legend>

<label for="newsletter-email">メールアドレス</label>

<input class="input-email" placeholder="メールアドレス" id="newsletter-email" type="text" />

<input type="checkbox" value="1" name="email_subscribe_check" class="email_subscribe_check" style="display:none;" />

<label for="newsletter-submit">メールアドレス</label>

<input data-vertical="japan" class="submit" id="newsletter-submit" type="submit" value="登録" />

</fieldset>

</form>

[46] Editorial: Cross-reference DOM "child" where appropriate in rendering (zcorpan著, ) https://github.com/whatwg/html/commit/e8c91c05edc8d6cdb33fdd5452e052359d40490b

[47] Fix form inheritance behavior for autocapitalize (rlanday著, ) https://github.com/whatwg/html/commit/b7c21b1b56d77215d3d85ae14a072c090dbe6266

[48] 942341 - "top:0" for abspos content in a fieldset is no longer at the top of the <legend> (breaking e.g. the Mozillians "edit" page) () https://bugzilla.mozilla.org/show_bug.cgi?id=942341

[49] update fiedlset mapping to better reflect implementations (stevefaulkner著, ) https://github.com/w3c/html-aam/commit/e0104f78197b6a0216d4651bfc24cc41dfec1907

[50] [whatwg] Fieldset interoperability work (Simon Pieters著, ) https://lists.w3.org/Archives/Public/public-whatwg-archive/2018Aug/0001.html

[51] Change fieldset's default padding to match the majority (zcorpan著, ) https://github.com/whatwg/html/commit/34cc15a176a952d999a74b79a7d395185f4377ea

[52] Specify the position of the rendered legend in fieldset · Issue #3921 · whatwg/html () https://github.com/whatwg/html/issues/3921

[53] Change fieldset's default padding to match the majority by zcorpan · Pull Request #3922 · whatwg/html () https://github.com/whatwg/html/pull/3922

[54] Fix attribute descriptions in the index for fieldset (zcorpan著, ) https://github.com/whatwg/html/commit/593486d1407c36c367be3c22d90044db1ef967e6

[55] "Content attributes" descriptions are weird for fieldsets · Issue #3335 · whatwg/html () https://github.com/whatwg/html/issues/3335

[56] Fix attribute descriptions in the index for fieldset by zcorpan · Pull Request #3938 · whatwg/html () https://github.com/whatwg/html/pull/3938

[57] Refer to a fieldset's legend as a caption to reduce confusion (zcorpan著, ) https://github.com/whatwg/html/commit/169413911523380c64d5ec66a60bed1992bdc7ca

[58] Name of <fieldset> group given by <legend> and <fieldset name=""> confusable · Issue #3702 · whatwg/html () https://github.com/whatwg/html/issues/3702

[59] Refer to a fieldset's legend as a caption to reduce confusion by zcorpan · Pull Request #3951 · whatwg/html () https://github.com/whatwg/html/pull/3951

[60] Change fieldset's min-width to min-inline-size (zcorpan著, ) https://github.com/whatwg/html/commit/825ede5a87320cd10c2e49b421ed028b0c9c339b

[61] Should the min-content style on fieldset really be min-width, or min-inline-size? · Issue #2078 · whatwg/html () https://github.com/whatwg/html/issues/2078

[62] Change fieldset's min-width to min-inline-size by zcorpan · Pull Request #3914 · whatwg/html () https://github.com/whatwg/html/pull/3914

[63] Tweak how accesskey on legend works (zcorpan著, ) https://github.com/whatwg/html/commit/aa374be03beebf25ed33022846c2d03d3ea03484

[64] Tweak how accesskey on legend works by zcorpan · Pull Request #3987 · whatwg/html () https://github.com/whatwg/html/pull/3987

[65] Unclear which legend element to be used as accessible name for fieldset · Issue #145 · w3c/html-aam () https://github.com/w3c/html-aam/issues/145

[66] Clarify which legend/figcaption/caption element to use by zcorpan · Pull Request #146 · w3c/html-aam () https://github.com/w3c/html-aam/pull/146

[67] Revamp how fieldset and legend rendering is defined (zcorpan著, ) https://github.com/whatwg/html/commit/6fbb7ff8fbe1c76506145ba8ffce690224be66e0

[68] Decide if <fieldset style="display:list-item"> should be supported or not · Issue #3955 · whatwg/html () https://github.com/whatwg/html/issues/3955

[69] Define whether fieldset's legend should mask border-image · Issue #3930 · whatwg/html () https://github.com/whatwg/html/issues/3930

[70] Specify where fieldset's containing block is when styled with position: relative · Issue #3928 · whatwg/html () https://github.com/whatwg/html/issues/3928

[71] fieldset should force used value of 'display' for some values · Issue #3915 · whatwg/html () https://github.com/whatwg/html/issues/3915

[72] Need to spec fieldset layout · Issue #3660 · whatwg/html () https://github.com/whatwg/html/issues/3660

[73] Revamp how fieldset and legend rendering is defined by zcorpan · Pull Request #3934 · whatwg/html () https://github.com/whatwg/html/pull/3934