The Web Design Group

FIELDSET-書式制御のグループ化

構  文Syntax <FIELDSET>...</FIELDSET>
属性仕様
内  容 LEGEND要素は、 ブロック-レベル要素インライン要素を取ります。取らない場合もあります。
内容になる APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

 FIELDSET要素は書式制御グループ(フォーム制御グループ)を定義します。関連する書式制御をグループ化することによって書式はより小さく取り扱いやすい部分に分け、余りに多い書式制御に向かい合った時起こる使用間違いを改善することができます。また FIELDSETで提供されるグループは音声ブラウザを使う者にフォームへのアクセスを助け、多くの書式を埋める際案内が容易になります。

 FIELDSETはブラウザによって広くサポートされていないのですが、 P要素を</P>ではっきりと閉じたり、 FIELDSETの前に空のPを含まないようにしておくと安全に使うことができます。 非サポート・ブラウザはブロック-レベルFIELDSETを無視するとはいえ、 ブロック-レベル要素の開始と推定するのが原因です。

 FIELDSET要素の内容は制御グループの表題を提供するためにはLEGENDではじまらなければなりません。LEGENDに続いて FIELDSETインライン乃至はブロック-レベル要素、別のFIELDSETを含みます、を含みます。

 例をあげると、以下のようになります:

<FORM METHOD=post ACTION="/cgi-bin/order.cgi">

  <FIELDSET>
    <LEGEND ACCESSKEY=I>Contact Information</LEGEND>
    <TABLE>
      <TR>
        <TD>
          <LABEL FOR=name ACCESSKEY=N>Name:</LABEL>
        </TD>
        <TD>
          <INPUT TYPE=text NAME=name ID=name>
        </TD>
      </TR>
      <TR>
        <TD>
          <LABEL FOR=email ACCESSKEY=E>E-mail Address:</LABEL>
        </TD>
        <TD>
          <INPUT TYPE=text NAME=email ID=email>
        </TD>
      </TR>
      <TR>
        <TD>
          <LABEL FOR=addr ACCESSKEY=A>Mailing Address:</LABEL>
        </TD>
        <TD>
          <TEXTAREA NAME=address ID=addr ROWS=4 COLS=40></TEXTAREA>
        </TD>
      </TR>
    </TABLE>
  </FIELDSET>

  <FIELDSET>
    <LEGEND ACCESSKEY=O>Ordering Information</LEGEND>
    <P>Please select the product(s) that you wish to order:</P>
    <P>
      <LABEL ACCESSKEY=3>
        <INPUT TYPE=checkbox NAME=products VALUE="HTML 3.2 Reference">
        <A HREF="/reference/wilbur/">HTML 3.2 Reference</A>
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=4>
        <INPUT TYPE=checkbox NAME=products VALUE="HTML 4.0 Reference">
        <A HREF="/reference/html40/">HTML 4.0 Reference</A>
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=S>
        <INPUT TYPE=checkbox NAME=products VALUE="CSS Guide">
        <A HREF="/reference/css/">Cascading Style Sheets Guide</A>
      </LABEL>
    </P>
  </FIELDSET>

  <FIELDSET>
    <LEGEND ACCESSKEY=C>Credit Card Information</LEGEND>
    <P>
      <LABEL ACCESSKEY=V>
        <INPUT TYPE=radio NAME=card VALUE=visa> Visa
      </LABEL>
      <LABEL ACCESSKEY=M>
        <INPUT TYPE=radio NAME=card VALUE=mc> MasterCard
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=u>
        Number: <INPUT TYPE=text NAME=number>
      </LABEL>
      <BR>
      <LABEL ACCESSKEY=E>
        Expiry: <INPUT TYPE=text NAME=expiry>
      </LABEL>
    </P>
  </FIELDSET>

  <P>
    <INPUT TYPE=submit VALUE="Submit order">
    <INPUT TYPE=reset VALUE="Clear order form">
  </P>

</FORM>

その他の情報