SELFHTML

Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen

Informationsseite

nach unten Tabulator-Reihenfolge
nach unten Tastaturkürzel
nach unten Elemente ausgrauen

 nach unten 

HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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:

Beispiel-Seite 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 Seite Verweise, Seite Verweisbereiche in verweis-sensitiven Grafiken und Seite 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 Seite Tabulator-Reihenfolge bei Verweisen.

nach obennach unten

HTML 4.0XHTML 1.0MS IE 5.0Netscape 6.0Opera 7Mozilla Firefox 1Safari 1.2 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:

Beispiel-Seite 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] und Firefox 2.x die Tastenkombination [Alt]-[Shift].

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.

nach obennach unten

HTML 4.0XHTML 1.0MS IE 5.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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:

Beispiel-Seite 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 Kapitel XHTML und HTML.

Im Konqueror 3.1 und Safari 2.0 sind ausgegraute Seite Klick-Buttons optisch nicht von funktionsfähigen zu unterscheiden. Das Attribut disabled wirkt jedoch, sodass z.B. bei einem Klick auf <button type="submit" disabled>Absenden</button> das zugehörige Formular nicht abgesendet wird.

 nach oben
weiter Seite Klick-Buttons
zurück Seite Gruppierung von Elementen und Label für Elemente
 

© 2007 Seite Impressum