SELFHTML/Quickbar
HTML
Formulare SELFHTML/Quickbar
HTML
Formulare
 |
Elemente gruppieren und Label für Elemente |
|
|
 | |
Elemente gruppieren
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.
<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>
|
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.
|
Label für Elemente 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.
<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>
|
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 herszustellen. 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.
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
|
