 |
HTML 4 und XHTML bringen praktische Neuerungen für alle, die große Formulare gestalten müssen. Wir geben einen Überblick darüber, was im Moment möglich ist. Wenn Sie sich die Beispiele ansehen wollen, haben Sie meist mit dem Mozilla die besten Karten.
Elemente gruppieren
 In großen Formularen macht es Sinn, zusammengehörige Elemente optisch zu gruppieren. Dadurch wird es für die Benutzer einfacher, das Formular zu überblicken und auszufüllen. Das können Sie tun, indem Sie solche Elemente mit einem <fieldset>-Tag umschließen. Innerhalb eines solchen Abschnitts kann mit dem <legend>-Tag eine Beschriftung angegeben werden.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
<h1>Bestellformular</h1>
<form action="tuwas.pl">
<fieldset>
<legend><b>Pers. Angaben</b></legend>
<table>
<tr>
<td>Vorname:</td>
<td><input type="text" size="40" maxlength="40" name="Vorname"></td>
</tr>
<tr>
<td>Nachname:</td>
<td><input type="text" size="40" maxlength="40" name="Nachname"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend><b>Zu liefernde Produkte</b></legend>
<table>
<tr>
<td>Produkt I:</td>
<td><input type="text" size="40" maxlength="40" name="P1"></td>
</tr>
<tr>
<td>Produkt II:</td>
<td><input type="text" size="40" maxlength="40" name="P2"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Elemente benennen
Wie machen Sie klar, welcher Inhalt in welches Feld gehört? Sie stellen einfach einen Text davor, so wie im obigen Beispiel. Meist wird dafür eine zweispaltige Tabelle verwendet.
Das Problem daran: im Code selbst wird kein logischer Bezug zwischen dem Beschreibungs-Text (Label) und dem Eingabeelement hergestellt. Ein Computerprogramm wie ein Suchmaschinen-Roboter könnte nur raten, welche Bedeutung der Text hat.
Um diesen Missstand zu beseitigen, wurde das <label>-Element eingeführt. Es hat ein Attribut for, mit dem auf das id-Attribut des beschriebenen Elements verwiesen wird.
Folgendes Beispiel zeigt den Code von eben, mit der kleinen Änderung, dass Labels hier als solche zu erkennen sind:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
<h1>Bestellformular</h1>
<form action="tuwas.pl">
<fieldset>
<legend><b>Pers. Angaben</b></legend>
<table>
<tr>
<td><label for="vname">Vorname:</label></td>
<td><input type="text" size="40" maxlength="40" name="Vorname" id="vname"></td>
</tr>
<tr>
<td><label for="nname">Nachname:</label></td>
<td><input type="text" size="40" maxlength="40" name="Nachname" id="nname"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend><b>Zu liefernde Produkte</b></legend>
<table>
<tr>
<td><label for="p1">Produkt I:</label></td>
<td><input type="text" size="40" maxlength="40" name="P1" id="p1"></td>
</tr>
<tr>
<td><label for="p2">Produkt II:</label></td>
<td><input type="text" size="40" maxlength="40" name="P2" id="p2"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<label>-Elemente haben keinen optischen Effekt.
Tabulator-Reihenfolge und Tastenkürzel
Viele User verwenden die Tastatur, um den Computer zu bedienen - nicht nur fürs Schreiben. Schließlich sind Shortcuts oft schneller als der entsprechende Mausklick. Deshalb lassen sich Formulare auch mit der Tastatur bedienen. Wenn Sie z.B. die Tabulator-Taste drücken, wenn Sie sich in einem Eingabefeld befinden, springt der Cursor ins nächste Feld.
Tabulatoren
Die Reihenfolge, in der die Formular-Elemente angesprungen werden, wenn auf die Tabulator-Taste gedrückt wird, lässt sich beeinflussen. Verwenden Sie dazu das tabindex-Attribut - je kleiner die Zahl, desto weiter vorne in der Reihenfolge liegt das Element.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
<form action="tuwas.pl">
<label for="f1">Feld1: </label>
<input type="text" size="40" maxlength="40" name="Feld1" id="f1" tabindex="1"><br>
<label for="f2">Feld2: </label>
<input type="text" size="40" maxlength="40" name="Feld2" id="f2" tabindex="3"><br>
<label for="f3">Feld3: </label>
<input type="text" size="40" maxlength="40" name="Feld3" id="f3" tabindex="2"><br>
</form>
</body>
</html>
Shortcuts
Sie können auch eigene Shortcuts definieren. Dann springt ein User, der beispielsweise die Alt- und die T-Taste gleichzeitig drückt, direkt ins zugehörige Feld.
Die Alt-Taste als Teil der Tastenkombination ist bei Browsern festgelegt. Der zweite Teil der Tastenkombination kann ein beliebiger Buchstabe oder auch eine Zahl sein und wird mit dem accesskey-Attribut angegeben.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
<form action="tuwas.pl">
<label for="f1">Feld1: [ALT+A]</label>
<input type="text" size="40" maxlength="40" name="Feld1" id="f1" accesskey="a"><br>
<label for="f2">Feld2: [ALT+B]</label>
<input type="text" size="40" maxlength="40" name="Feld2" id="f2" accesskey="b"><br>
<label for="f3">Feld3: [ALT+1]</label>
<input type="text" size="40" maxlength="40" name="Feld3" id="f3" accesskey="1"><br>
</form>
</body>
</html>
Shortcuts bieten sich besonders in Web-Applikationen an, die häufiger benutzt werden. Ein Eingabeformular eines Redaktionssystems wäre ein gutes Einsatzfeld. Übrigens: vergessen Sie nicht, die Tastenkombinationen irgendwo anzugeben, sonst weiß der User ja nicht, was er drücken muss.
Verschachtelte Auswahllisten
 Manche Auswahlmenüs sind so komplex, dass man sich eine Form der logischen Gliederung wünscht. Das ist möglich: umschließen Sie zusammengehörige Elemente mit dem <optgroup>-Tag. Dieses Tag hat ein Attribut label, das den Namen der Element-Gruppe angibt.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
Bitte Essen auswählen:
<form action="tuwas.pl">
<select name="essen">
<optgroup label="Grünzeug">
<option SELECTED>Salat</option>
<option>Tomaten</option>
<option>Sellerie</option>
</optgroup>
<optgroup label="Milchprodukte">
<option>Quark</option>
<option>Käse</option>
<option>Joghurt</option>
</optgroup>
<option>Fleisch</option>
</select>
</form>
</body>
</html>
Fazit
HTML4/XHTML bieten viele neue Möglichkeiten. Nutzen Sie sie, im Sinne von besserem Markup und mehr Übersicht!
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
