fieldset 要素 (HTML)

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

[16] 仕様書:

HTML 4 (Web Forms 1.0)
- 17.10 Adding structure to forms: the FIELDSET and LEGEND elements IW:HTML4:"interact/forms.html#edef-FIELDSET"
Microsoft
- fieldSet Object http://msdn2.microsoft.com/en-us/library/ms535247.aspx

[17]

開始タグ

必須

終了タグ

必須

内容模型 (HTML 4)

(空白, legend, (%flow)*)

内容模型 (ISO‐HTML)

(空白, legend, (%block | %inline | address)+) −(fieldset)

出現できる文脈

%block が出現できる場所。 (歴史的変遷: https://suika.suikawiki.org/www/2004/html/content-fieldset)

属性

属性名	属性値	既定値	説明	出典
`align`			非標準
`class`		(なし)	級	[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common
`dir`			書字方向	[HTML 4] %i18n ⊂ %attrs, [XHTML 1] I18N ⊂ Common
`id`	`ID`	(なし)	一意識別子	[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 4 の DTD では、 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.0 の DTD ではフォーム制御子は form 要素内でしか使えないことになっていましたが、 HTML 3.2 や HTML 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] WinIE や Gecko などは、

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

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

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

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

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

のようになっています。

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

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

のようになっています。

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

http://www.tohoho-web.com/html/fieldset.htm

[37] IRC logs: freenode / #whatwg / 20090202 (2/3/2009, 1:13:21 AM 版) 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 3 の credit や表の caption に相当する要素型が無い
fieldset + legend の典型的レンダリング(謎)を CSS で気軽に(謎)実現する方法がない

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

他との関係#✎

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

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

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

歴史#✎

`fieldset` の誕生#✎

[16] Design Issues for HTML Forms, 2/4/1999, 5:41:10 PM, 8/25/2024, 3:32:27 AM https://www.w3.org/TR/WD-forms-960308.html

[216] HTML要素概説

要素名

lgroup

日付

3/8/1995

説明

3/8/1996付の W3C 文書で lgroup が提案されていた。現在の fieldset に当たる。

出典

Design Issues for HTML Forms, W3C, Working Draft, 08-Mar-96, 2/4/1999, 5:41:10 PM, 8/25/2024, 3:33:02 AM https://www.w3.org/TR/WD-forms-960308.html

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

https://suika.suikawiki.org/gate/2007/schema/schema/d5713b08467c2ce6c88318ad9af7bf92/prop.html

[83] >>25 の版ではまだ legend がなく、 caption と併用されていました。

[84] HTML要素概説

要素名: fieldset
日付: 7/10/1996
説明: 7/10/1996版 Cougar DTD に fieldset がある。 HTML4-19960710

[86] legend の初出は HTML 4.0 の最初の WD。 >>85

[85] Forms in HTML documents, 7/8/1997, 12:32:52 PM, 9/28/2024, 9:42:21 AM https://www.w3.org/TR/WD-html40-970708/interact/forms.html#edef-LEGEND

[87] HTML要素概説

要素名

legend

日付

7/8/1997

説明

7/8/1997、 HTML 4.0 に legend が追加された。

出典

HTML4-19970708:text: Paragraphs, Lines, and Phrases, HTML 4.0 Specification, 7/8/1997, 12:32:34 PM, 9/28/2024, 9:07:30 AM https://www.w3.org/TR/WD-html40-970708/struct/text.html

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

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

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

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

[90] >>89 >>88 は fieldset, legend への対応を IE4B2 としています。

[91] IE 4.0 Preview 2 の英語版が公開されたのが7/15/1997、日本語版が公開されたのが7/22/1997です。 IE4 正式版の英語版が公開されたのが9/30/1997です。

[94] Preview 2 で実装されていたとする情報が正しいとして (独立した情報源は未発見、当時の IE4 を発掘してきて確認するしかないのかな?)、 HTML4 の公開から1週間後なので、この期間で実装するのは不可能。 MS は HTML WG に参加しているので内部版を知っていたのは当然として、内部版で legend は数ヶ月前に既に追加されていたものと考えていいでしょう。

[92] MouseMove, Ron Wodaski, 1997/10/14 16:00:00, 9/28/2024, 10:08:52 AM https://groups.google.com/g/microsoft.public.inetexplorer.ie4.scripting/c/2FCohqkTbJA/m/lMo26lKV2wsJ

Applies To
A, ADDRESS, APPLET, AREA, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, document

[93] >>92 当時の MSDN からの引用。 fieldset, legend が実装されていたことが知られる。

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

[97] HTML WG に参加していたはずの Netscape はなぜ fieldset を実装しなかったのでしょう。 NN 4.0 には時系列的に間に合わなかったのだとしても、その後で追加実装することはできたはずなのに。

[98] あるいは実装するつもりがなかったなら反対することもできたはずなのに。

[95] 1998年11月付けの Gecko 画面写真に fieldset 要素の例が示されています。 >>96

[96] NGLayout Project: Screen Shots (9/8/2007, 8:38:45 AM 版) http://www.mozilla.org/newlayout/screenshots/

実装#✎

[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 Medication で Yes と答えた場合のみ 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>

出典: 株にまつわる金融の歴史・出来事・動き (2006年2月付け) http://tyotiku.fc2web.com/stock1.html

>>1 も参照。

HTML5#✎

[82] [] (0) WF2: <fieldset> element summary., Hixie, 9/3/2008, 9:32:32 AM, 9/4/2024, 12:58:17 PM https://github.com/whatwg/html/commit/62a6f3ee9bf8b6b5ecccb97b60fa949d482174e1#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d

[81] HTML要素概説

要素名

fieldset

日付

9/3/2008

説明

9/3/2008、 HTML5 に fieldset が追加された。

出典

HTML5 r2143, Hixie, 9/3/2008, 9:32:32 AM, 9/4/2024, 12:58:17 PM https://github.com/whatwg/html/commit/62a6f3ee9bf8b6b5ecccb97b60fa949d482174e1

[38] IRC logs: freenode / #whatwg / 20090817 (10/11/2009, 6:59:52 AM 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090817#l-406

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

[40] [CSSWG] Minutes Telecon 2014-01-22 ( (Dael Jackson 著, 1/23/2014, 1:33:49 AM 版)) 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. ( (4/14/2014, 11:21:00 PM 版)) 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'. ( (9/5/2014, 11:01:00 PM 版)) http://html5.org/r/8753

[43] Web Applications 1.0 r8842 Make <fieldset> display:block to match implementations ( (10/28/2014, 6:20:00 PM 版)) https://html5.org/r/8842

[44] 女子高生が鉄道模型を作った繊細な表現、国際大会でV:朝日新聞デジタル (12/31/2015, 5:16:49 AM 版) 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年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に (12/31/2015, 5:22:29 AM 版) 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著, 9/20/2016, 11:16:41 AM) https://github.com/whatwg/html/commit/e8c91c05edc8d6cdb33fdd5452e052359d40490b

[47] Fix form inheritance behavior for autocapitalize (rlanday著, 1/24/2018, 11:58:12 PM) 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) (5/2/2018, 4:46:26 AM) https://bugzilla.mozilla.org/show_bug.cgi?id=942341

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

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

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

[52] Specify the position of the rendered legend in fieldset · Issue #3921 · whatwg/html (8/22/2018, 10:04:07 AM) https://github.com/whatwg/html/issues/3921

[53] Change fieldset's default padding to match the majority by zcorpan · Pull Request #3922 · whatwg/html (8/22/2018, 10:04:23 AM) https://github.com/whatwg/html/pull/3922

[54] Fix attribute descriptions in the index for fieldset (zcorpan著, 8/17/2018, 1:48:06 PM) https://github.com/whatwg/html/commit/593486d1407c36c367be3c22d90044db1ef967e6

[55] "Content attributes" descriptions are weird for fieldsets · Issue #3335 · whatwg/html (8/23/2018, 9:50:05 AM) https://github.com/whatwg/html/issues/3335

[56] Fix attribute descriptions in the index for fieldset by zcorpan · Pull Request #3938 · whatwg/html (8/23/2018, 9:50:17 AM) https://github.com/whatwg/html/pull/3938

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