内容模型

[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 による利用

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

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

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

不思議解釈

[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 を使おうと提案して叩かれた例。

[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 に書いてあります。

歴史

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

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

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

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

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

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

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

• [31] Bug 944 – FIELDSET and LEGEND don't work https://bugzilla.mozilla.org/show_bug.cgi?id=944
• [36] Bug 1860 &#8211; HTML4: <FIELDSET><LEGEND>Title</LEGEND></FIELDSET> https://bugzilla.mozilla.org/show_bug.cgi?id=1860
• [34] Bug 2358 &#8211; parser: frameset terminates early https://bugzilla.mozilla.org/show_bug.cgi?id=2358
• [35] Bug 3854 &#8211; Pages not displayed correctly https://bugzilla.mozilla.org/show_bug.cgi?id=3854
• [32] Bug 6452 &#8211; HTML 4 FIELDSET (and LEGEND) display broken https://bugzilla.mozilla.org/show_bug.cgi?id=6452
• [33] Bug 8869 &#8211; legend has incorrect vertical positioning https://bugzilla.mozilla.org/show_bug.cgi?id=8869

実装

[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>

メモ