SELFHTML/Quickbar  HTML  Formulare


Elemente gruppieren und Label für Elemente

Diese Seite ist ein Dokument mit Informationstext

 Elemente gruppieren
 Label für Elemente

 

HTML4.0 Elemente gruppieren

Beispiel Anzeigebeispiel: So sieht's aus

Größere Formulare bestehen häufig aus Gruppen von Elementen. Ein typisches Bestellformular besteht beispielsweise aus Elementgruppen wie "Absender", "bestellte Produkte" und "Formular absenden/abbrechen". Solche Elementgruppen können Sie ab HTML 4.0 eigens auszeichnen. Ein WWW-Browser sollte Elementgruppen durch Linien oder ähnliche Effekte optisch sichtbar machen.

Der MS Internet Explorer interpretiert diese Befehle ab Version 4.x. Netscape kennt die Befehle in der Version 4.x noch nicht.

Beispiel:

<form>

<fieldset>
<legend><b>Absender</b></legend>
<table>
  <tr>
    <td align=right>Ihr Vorname:</td>
    <td><input type=text size=40 maxlength=40></td>
  </tr><tr>
    <td align=right>Ihr Zuname:</td>
    <td><input type=text size=40 maxlength=40"></td>
  </tr>
</table>
</fieldset>

<fieldset>
<legend><b>Wunsch</b></legend>
<table>
  <tr>
    <td align=right>Ihr Wunsch:</td>
    <td><input type=text size=40 maxlength=40></td>
  </tr><tr>
    <td align=right>Ihr Zusatzwunsch:</td>
    <td><input type=text size=40 maxlength=40"></td>
  </tr>
</table>
</fieldset>

<fieldset>
<legend><b>Formular</b></legend>
<input type=submit value="Absenden">
<input type=reset value="Abbrechen">
</fieldset>

</form>

Erläuterung:

Eine zusammengehörige Gruppe von Formularelementen schließen Sie in die Tags <fieldset>...</fieldset> ein (fieldset = Feldgruppe). Innerhalb dieser Tags können Sie beliebige Teile Ihres Formulars definieren.

Unterhalb des einleitenden <fieldset>-Tags und vor den ersten Formularinhalten der Gruppe sollten Sie ferner eine Gruppenüberschrift (Legende) für die Elementgruppe vergeben. Schließen Sie den Gruppenüberschriftentext in die Tags <legend>...</legend> ein. Den Text innerhalb davon können Sie mit Hilfe von HTML/CSS nach Wunsch formatieren.

 

HTML4.0 Label für Elemente

Beispiel Anzeigebeispiel: So sieht's aus

Für Formularelemente wie Eingabefelder oder Auswahllisten gab es bislang keine logische Beschriftungsmöglichkeit. Sie können zwar Text vor ein solches Element setzen wie "E-Mail-Adresse:", aber ein solcher Text ist normaler HTML-Text, der keinen definierten Bezug zu dem Element hat, für das er als Beschriftung dient. Ab HTML 4.0 können Sie Labels definieren, die solch einen logischen Bezug zu einem Formularelement herstellen.

Beispiel:

<form>
<table>
  <tr>
    <td><label for="vorname">Ihr Vorname:</label></td>
    <td><input type=text id="vorname"></td>
  </tr><tr>
    <td><label for="nachname">Ihr Zuname:</label></td>
    <td><input type=text id="nachname"></td>
  </tr>
</table>
</form>

Erläuterung:

Das Beispiel zeigt, wie Sie mit Hilfe einer  blinden Tabelle Beschriftung und Eingabefelder eines Formulars ordentlich formatieren können. Das Besondere dabei ist, daß ein logischer Bezug zwischen Beschriftung und Eingabefeld hergestellt wird.

Dazu muß das Formularelement selbst, im obigen Beispiel zwei Eingabefelder, mit Hilfe des  Universalattributs id= einen eindeutigen Namen erhalten. Der id-Name muß in Anführungszeichen stehen. Er darf nur aus Buchstaben, Ziffern und Unterstrich bestehen, wobei das erste Zeichen ein Buchstabe sein sollte, und darf keine deutschen Umlaute und andere Sonderzeichen enthalten.

Den Beschriftungstext, den Sie einem solchen Formularelement zuordnen, setzen Sie in das Tag-Paar <label>...</label>. Der Beschriftungstext kann auch jede Art von HTML/CSS-Formatierung enthalten. Das <label>-Tag selbst hat keine sichtbare Wirkung am Bildschirm, es dient lediglich dem Zweck, den logischen Bezug zum Formularelement herzustellen. Diesen Bezug definieren Sie innerhalb des einleitenden <label>-Tags mit dem Attribut for= (for = für). Dahinter geben Sie, in Anführungszeichen, exakt den id-Namen des Formularelements an, auf das sich das Label beziehen soll.

Beachten Sie:

Das <label>-Tag ist auch auf andere Formularelemente, zum Beispiel auf <textarea> oder <select>, anwendbar.


 
weiter: Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
zurück: Versteckte Elemente in Formularen
 

SELFHTML/Quickbar  HTML  Formulare

© 1998  Stefan Münz, muenz@csi.com