Information Technology Reference
In-Depth Information
Erreicht wird das mithilfe des
tabindex
-Attributs, wodurch ein Drücken der Ta-
bulatortaste in einem Feld den Cursor auf das Feld mit dem nächsthöheren
tabindex
-Wert stellt.
<div style="float:left">
<p><label>Ihr Name:
<input
tabindex=1
type=text required autofocus
placeholder="Max Mustermann" name=name></label>
<p><label >E-Mail
<input
tabindex=3
type=email name=email required></label>
</div>
<div style="float:left;margin-left:10px;">
<p><label>Telefonnummer
<input
tabindex=2
type=tel name=tel required></label>
<p><label>Faxnummer
<input
tabindex=4
type=tel name=fax></label>
</div>
Etwas spannender wird es bei den
textarea
-Feldern. Viel Neues brachte
HTML5 für diesen Typ nicht, aber wie Sie in Abbildung 3.16 sehen können, ent-
hält jedes Textfeld eine kleine grafische Anzeige oberhalb, die darstellt, wie
viele Zeichen in dem Feld noch getippt werden können. Sicherlich haben Sie es
gleich erkannt: Wir verwenden dazu das neue
meter
-Element, das uns bereits
aus Abschnitt 3.3.1, Anzeigen von Messgrößen mit »meter«, vertraut ist.
<p><label>Fehlermeldung
<textarea placeholder="Lens . Camera restart."
name=errmsg required rows=5 cols=50
title="maximal 200 Zeichen">
</textarea></label><meter value=0 max=200
tabindex=-1></meter>
Das
meter
-Element wird mit einem Maximalwert von
200
initialisiert, exakt dem
Wert, der im
title
-Attribut der
textarea
als Maximum angegeben ist. Gibt ein
Anwender mehr als die vorgeschriebenen Zeichen ein, wird das
meter
-Element
rot und warnt vor dem zu langen Text. Der Browser wird den zu langen Text aber
trotzdem abschicken, da wir die
textarea
nicht limitiert haben. Es handelt sich
hier also mehr um einen Hinweis, als um eine strikte Vorgabe. Die JavaScript-
Funktion zum Aktualisieren der
meter
-Elemente lautet
updateTAMeters()
und
wird für alle
textarea
s ausgeführt:
function updateTAMeters() {
var textfs = document.getElementsByTagName("textarea");
for(var i=0; i<textfs.length; i++) {
