The Web Design Group

FIELDSET - Formular-Kontroll-Gruppe

Syntax <FIELDSET>...</FIELDSET>
Attribut-Spezifikationen
Inhalte Ein LEGEND-Element gefolgt von keinem oder mehreren Block-Level Elementen und Inline Elemente
Beinhaltet in APPLET, BLOCKQUOTE, BODY, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Das FIELDSET-Element definiert eine Formular-Kontroll-Gruppe. Durch das Gruppieren von in Beziehung stehenden Formular-Kontrollen, können Autoren ein Formular in kleinere, besser verwaltbare Teile aufspalten, um dem Anwendungsdisaster vorzubeugen, das auftreten kann, wenn man den User mit zu vielen Formular-Kontrollen konfrontiert. Das Gruppieren, das durch FIELDSET angeboten wird, unterstützt die Erreichbarkeit von Formularen für diejenigen, die akustische Browser verwenden, indem man diesen Usern hilft sich einfacher zu orientieren, wenn sie ein großes Formular ausfüllen.

Während FIELDSET nicht von älteren Browsern untersützt wird, kann es trotzdem vorsichtig benutzt werden, indem man jedes vorangehende P-Element mit </P> schließt oder indem man dem FIELDSET ein leeres P voranstellt. Das bewirkt, dass nicht-unterstützende Browser ein Block-Level Element beginnen, auch wenn sie das Block-Level Element FIELDSET ignorieren.

Der Inhalt von einem FIELDSET-Element muss mit einem LEGEND-Element beginnen um einen Titel für die Kontroll-Gruppe anbieten zu können. Nach LEGEND, kann FIELDSET jedes beliebige Inline oder Block-Level Element beinhalten, sogar ein weiteres FIELDSET.

Ein Beispiel:

<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 Reference">
        <A HREF="/reference/html40/">HTML 4 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">
  </P>

</FORM>

Weitere Informationen