FEN Startseite > ~xx502 > Forms > Lektion25
Web Formulare
Kapitel 25 - Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
Diese Möpglichkeiten sind ab HTML-Version 4 definiert.
Es wird nur vom Internet Explorer ab Version 4.x auch nur die Änderung der Tabulator-Reihenfolge berücksichtigt. Netscape kennt diese Tags noch nicht.
Tabulator-Reihenfolge
Mit Hilfe der Tabulator-Taste kann man die aktiven Inhalte einer Webseite nacheinander anspringen und so zum als nächstes definierten Formularfeld wechseln. Diese Reihenfolge kann man auch ändern.
<form> <table border="0"> <tr> <td><Vorname:</td> <td><input type="text" tabindex="1" /></td> </tr><tr> <td><Nachname:</td> <td><input type="text" tabindex="3" /></td> </tr><tr> <td colspan="2"><input type="submit" value="Abschicken" tabindex="2" /> </td> </tr> </table> </form> |
Mit der Eigenschaft tabindex= eines Formularelements kann man die Reihenfolge definieren. Die Formularelemente werden in aufsteigender Reihenfolge der angegebenen Zahlenwerte angesprungen.
In obigem Beispiel wird also der Abschicken-Button vor dem Eingabefeld für den Nachnamen angesprungen.
Hinweis:
Die Tabulatorwerte müssen im Bereich zwischen 0 und 32767 liegen.
Die Eigenschaft tabindex= gilt für die gesamte HTML-Datei und kann außerhalb von Formularen z.B. auch bei Links verwendet werden. Du solltest dann die Reihenfolge für alle Elemente festlegen.
Tastaturkürzel
Wie oben schon erwähnt berücksichtigen die bekannten Browser diese Eigenschaft nicht. Bei Bedarf muss man sie mit JavaScript aufwändig nachbilden.
Man kann mit einem Tastendruck zu einem bestimmten Formularelement springen. Dadurch wird das Formularelement nur angesprungen, jedoch nicht verändert, z.B. eine Checkbox angekreuzt.
<form> <input type="button" value="Klick mich!" accesskey="k" /> </form> |
Mit der Eigenschaft accesskey kannst Du ein Zeichen auf der Tastatur bestimmen, das der Benutzer drücken kann, um ein Formularelement direkt anzuspringen (accesskey = Zugriffstaste). Im Beispiel wird auf diese Weise für einen Button ein kleines k definiert. Der Benutzer kann durch Drücken dieser Taste auf der Tastatur diesen Button direkt anspringen.
Hinweis:
Informiere den Benutzer über diese Möglichkeit, z.B. in einem Hinweistext und durch Unterstreichen des Buchstabens in der Elementbeschriftung, wie das in vielen Programmen üblich ist.
Verwende gleiche Zugriffsbuchstaben auf allen Seiten für gleiche Elemente.
Elemente ausgrauen
Elemente können ausgegraut werden, um anzuzeigen, daß das Element im aktuellen Zusammenhang ohne Bedeutung ist. Ausgegraute Elemente werden auch bei Tabulator-Sprüngen übergangen.
<form> <input type="text" disabled /> </form> |
Sinnvoll ist diese Angabe allerdings vor allem als HTML-Grundlage für JavaScript, die Elemente je nach Eingaben oder Auswahl in anderen Elementen dynamisch ausgrauen. So wäre es beispielsweise sinnvoll, Angaben zum Typ des gefahrenen Autos dynamisch auszugrauen, wenn der Anwender ankreuzt, daß er gar kein Auto besitzt. Als statische Angabe hat das Ausgrauen von Elementen dagegen wohl selten Sinn, denn Formularelemente, die man definiert, definiert man ja normalerweise sinnvoll.
Mit der Eigenschaft disabled graut man ein Element aus. Erlaubt ist die Eigenschaft in den Formular-Tags <input>, <textarea>, <select>, <option>, <optgroup> und <button>.
Im nächsten Kapitel möchte ich einige Hinweise geben, worauf du achten kannst um Menschen mit Behinderungen zu helfen.
Elemente beschriften
Inhalt
Hilfe für Menschen mit Behinderungen