SELFHTML: HTML/XHTML / Formulare / Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen

SELFHTML/Navigationshilfen HTML/XHTML Formulare
	Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
	Tabulator-Reihenfolge Tastaturkürzel Elemente ausgrauen

Tabulator-Reihenfolge

Modernere Browser erlauben es, mit Hilfe der Tabulator-Taste an der Tastatur nacheinander die Elemente eines Formulars anzuspringen.

Normalerweise werden die Formularelemente dabei in der Reihenfolge angesprungen, in der sie in der Datei definiert sind. Sie können jedoch eine andere Reihenfolge festlegen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabulator-Reihenfolge</title>
</head>
<body>

<h1>Steppen Sie mit <kbd>[Tab]</kbd> durch!</h1>

<form action="tabindex.htm">
  <p>
    Feld 1: <input type="text" size="40" maxlength="40" tabindex="4"><br>
    Feld 2: <input type="text" size="40" maxlength="40" tabindex="1"><br>
    Feld 3: <input type="text" size="40" maxlength="40" tabindex="3"><br>
    <input type="button" tabindex="2" value="Klick mich">
  </p>
</form>

</body>
</html>

Erläuterung:

Mit dem Attribut tabindex in einem der Formular-Tags <input>, <textarea>, <select> oder <button> können Sie Angaben zur Tabulator-Reihenfolge machen. Notieren Sie die Angabe in allen entsprechenden Tags des Formulars und vergeben bei jeder Angabe eine Zahl. Beim Anspringen der Formularelemente mit der Tabulator-Taste wird zuerst das Formularelement mit der niedrigsten Tabindex-Nummer angesprungen, danach dasjenige mit der zweitniedrigsten usw. und als letztes dasjenige mit der höchsten Tabindex-Nummer. Im obigen Beispiel wird also zuerst Feld 2 angesprungen, dann der Button am Ende, dann Feld 3 und zuletzt Feld 1.

Es sind Zahlen zwischen 0 und 32767 erlaubt.

Beachten Sie:

Die Tabindizes beziehen sich stets auf die gesamte angezeigte Datei. Dabei werden auch Verweise, Verweisbereiche in verweis-sensitiven Grafiken und Objekte mit einbezogen. Wenn Sie solche Elemente neben dem Formular auch noch in Ihrer Datei haben, sollten Sie die Tabulator-Reihenfolge für alle Elemente gemeinsam festlegen. Siehe auch Tabulator-Reihenfolge bei Verweisen.

Tastaturkürzel

Sie können dem Anwender anbieten, mit einem Tastendruck zu einem bestimmten Formularelement zu springen. Das Element wird damit angesprungen - "ausgeführt", also zum Beispiel angeklickt oder angekreuzt - wird es dadurch nicht. Ankreuzen von Radio-Buttons und Checkboxen funktioniert meist mit der Leertaste, und Anklicken/Ausführen von Buttons mit der Return-Taste.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tastaturkürzel</title>
</head>
<body>

<h1>Greifen Sie in die Tasten!</h1>

<form action="accesskey.htm">
  <p>Ein Feld mit [Alt]+f:<br>
    <input type="text" size="40" value="Feld" accesskey="f"></p>
    
  <p>Ein Button mit [Alt]+b:<br>
    <input type="button" value="Button" accesskey="b"></p>
    
  <p>Ein Texteingabebereich mit [Alt]+t:<br>
    <textarea cols="50" rows="5" accesskey="t">Text</textarea></p>
</form>

</body>
</html>

Erläuterung:

Mit dem Attribut accesskey können Sie ein Zeichen auf der Tastatur bestimmen, das der Anwender drücken kann, um ein Formularelement direkt anzuspringen (accesskey = Zugriffstaste). Bei den meisten Browsern ist es so geregelt, dass Sie bei accesskey einen Buchstaben angeben können, der dann mit [Alt] und der Taste für den Buchstaben direkt anwählbar ist. In Opera erreichen Sie die Ziele, indem sie zuvor die Tastenkombination [Shift][Esc] betätigen. Safari benutzt statt der [Alt]-Taste die Taste [Ctrl].

Erlaubt ist das Attribut accesskey in den Formular-Tags <input>, <textarea>, <label>, <legend> oder <button>.

Beachten Sie:

Benutzen Sie Tasten, die auf jeder Tastatur zu finden sind. Funktionstasten etwa, wie es sie auf MF-II-Tastaturen für MS Windows gibt, können Sie mit dieser Angabe auch gar nicht ansprechen.

Weisen Sie den Anwender im Text auf die Möglichkeit des Tastaturzugriffs hin.

Elemente ausgrauen

Sie können Elemente ausgrauen, um zu signalisieren, dass das Element im aktuellen Zusammenhang ohne Bedeutung ist. Ausgegraute Elemente werden auch bei Tabulator-Sprüngen übergangen.

Sinnvoll ist diese Angabe allerdings vor allem als HTML-Grundlage für Script-Sprachen, 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, dass er gar kein Auto besitzt. Als statische Angabe hat das Ausgrauen von Elementen dagegen wohl selten Sinn, denn Formularelemente, die man definiert, definiert man schließlich aus gutem Grund.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Elemente ausgrauen</title>
</head>
<body>

<h1>Ein Formular f&uuml;r sp&auml;ter mal!</h1>

<form action="disabled.htm">
  <p>Ihr Name:<br><input type="text" size="40" disabled></p>
  <p>Ihr Kommentar:<br><textarea cols="50" rows="5" disabled></textarea></p>
</form>

</body>
</html>

Erläuterung:

Mit dem Attribut disabled grauen Sie ein Element aus. Erlaubt ist das Attribut in den Formular-Tags <input>, <textarea>, <select>, <option>, <optgroup> oder <button>. Beim Internet Explorer und bei Netscape ist der Effekt, dass das Element einfach nicht editierbar bzw. anklickbar ist.

Beachten Sie:

Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie dieses Attribut in der Form disabled="disabled" notieren. Weitere Hinweise im Kapitel über XHTML und HTML.

In Konqueror 3.1 werden zwar die Elemente nicht ausgegraut, jedoch wird das Attribut disabled berücksichtigt


	Klick-Buttons
	Gruppierung von Elementen und Label für Elemente

SELFHTML/Navigationshilfen HTML/XHTML Formulare