Das Beispiel im Browser
HTML5 bietet folgende Arten der Unterstützung beim Eingeben von Daten in Formularfelder an:
Ferner können Sie die Auto-Vervollständigungsfunktion, die moderne Browser standardmäßig als Ausfüllhilfe anbieten, abschalten, z.B. aus Sicherheitsgründen bei Daten, für die Sie jede Kopiermöglichkeit ausschließen möchten, etwa bei der Eingabe einer Kreditkartennummer.
<form method="post" action="/cgi-bin/kunde.pl"> <p><kbd>S</kbd>traße Hausnr.:<br> <input type="text" name="street" style="width:300px" tabindex="2" accesskey="s"></p> <p><kbd>L</kbd>and <kbd>P</kbd>LZ <kbd>O</kbd>rt:<br> <input type="text" name="country" style="width:20px;" tabindex="3" accesskey="l" value="D"> <input type="text" name="plz" style="width:40px;" tabindex="4" accesskey="p" placeholder="12345"> <input type="text" name="city" style="width:224px;" tabindex="5" accesskey="o"></p> <p><kbd>E</kbd>-Mail:<br> <input type="text" name="mail" style="width:300px" tabindex="1" accesskey="e" autofocus></p> <p><kbd>T</kbd>elefon:<br> <input type="text" name="phone" style="width:300px" tabindex="6" accesskey="t"></p> <p><kbd>M</kbd>obiltelefon:<br> <input type="text" name="mobile" style="width:300px" tabindex="7" accesskey="m"></p> <p><kbd>B</kbd>LZ / <kbd>K</kbd>ontonummer:<br> <input type="text" name="blz" style="width:60px;" tabindex="8" accesskey="b" placeholder="1001001010"> <input type="text" name="kto" style="width:232px;" tabindex="9" accesskey="k" autocomplete="off"></p> </form>
Die meisten 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 im HTML-Dokument definiert sind. Sie können jedoch eine andere Reihenfolge festlegen. Mit dem Attribut tabindex in den Formular-Tags <input>, <textarea>, <select> oder <button> können Sie die Tabulator-Reihenfolge beeinflussen. Notieren Sie die Angabe in allen entsprechenden Tags des Formulars. Vergeben Sie 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, und als letztes dasjenige mit der höchsten.
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). Geben Sie bei accesskey nur einen Buchstaben an. Die eigentliche Tastenkombination muss ein Anwender je nach Browser kennen. In einigen Browsern muss die [Alt] und die Taste mit dem Buchstaben gedrückt werden, in Opera die Tastenkombination [Shift][Esc], in Safari die Taste [Ctrl] und in Firefox die Tastenkombination [Alt]-[Shift]. Bei Formularen ist das Attribut accesskey in den Tags <input>, <textarea>, <label>, <legend> oder <button> erlaubt.
Durch das Standalone-Attribut autofocus können Sie dasjenige Formularelement bestimmen, dass auf jedem Fall zuerst den Fokus erhalten soll, wenn die Webseite geladen ist. Wenn es ein Texteingabefeld ist, wird der Eingabecursor in das so ausgezeichnete Feld gesetzt. Da nur ein Feld das erste sein kann, dürfen Sie das autofocus-Attribut nur einmal im HTML-Dokument notieren.
Mit dem placeholder-Attribut können Sie ein Feld mit einem demonstrativen Wert vorbelegen, der jedoch nicht übertragen wird, falls der Anwender nichts in das Feld eingibt und das Formular absendet (placeholder = Platzhalter). Gedacht ist das Attribut dazu, um das Format erwünschter Eingaben in einem Feld an einem Muster vorzugeben, oder um dem Anwender die Bedeutung eines Felds, das sonst keine Feldbeschriftung hat, zu vermitteln. Der Platzhalterwert wird meist sichtbar anders dargestellt als ein vom Anwender selbst eingegebener Wert. Der Platzhalterwert verschwindet, sobald der Eingabecursor in das Feld gesetzt wird. Gibt ein Anwender in einem solchen Feld nichts ein und verlässt das Feld wieder, erscheint der Platzhaltertext automatisch wieder.
Mit autocomplete="off" können Sie die Auto-Vervollständigungsfunktion moderner Browser unterdrücken. Mit autocomplete="on" können Sie die Funktion explizit wieder einschalten. Sinnvoll ist das, da das Attribut sowohl im einleitenden <form>-Tag als auch in <input>-Feldern für Texteingabe erlaubt ist. Wenn Sie autocomplete="off" im <form>-Tag notieren, gilt die Unterdrückung im gesamten Formular. Mit <input autocomplete="on"> können Sie die Funktion für einzelne Elemente doch wieder zulassen.
Die beiden Attribute tabindex und accesskey sind eigentlich keine formularspezifischen Attribute, sondern auf jedes Element anwendbar, das in irgendeiner Form den Fokus erhalten kann. Dazu zählen auch Hyperlinks oder Image-Maps.
Die Attribute autofocus, placeholder und autocomplete wurden erst mit HTML5 eingeführt . Sie werden von älteren Browsern überhaupt nicht interpretiert. Zum Redaktionszeitpunkt waren nur die Webkit-basierten Browser (Google Chrome und Apple Safari) in der Lage, die Funktionalität dieser Attribute umzusetzen.
Wen Sie die Attribute autofocus und placeholder kombiniert verwenden, wird der Platzhaltertext zunächst nicht angezeigt, weil das Element sofort den Fokus hat.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.