Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

Schritt 3: Den Cursor in das erste Feld setzen

Zum Abschluss der Formulargestaltung noch ein kleines i-Tüpfelchen: Mit einem einzeiligen JavaScript vereinfachen Sie die Benutzung des Formulars für Ihre Besucher, indem Sie den Cursor beim Laden der Seite gleich ins erste Formularfeld setzen.

ToDo: Den Cursor im ersten Formularfeld positionieren
  1. Ändern Sie den <body>-Tag auf kontakt.html wie folgt (der gesamte Anfangs-Tag sollte in einer Zeile stehen).

    <body id="kontaktseite" onload="document.kontaktformular.absender.focus();">

  2. Speichern Sie die Webseite und betrachten Sie sie im Browser.

Nach dem Laden der Webseite sollte der Cursor direkt im ersten Formularfeld blinken. Und hier die Erklärung:

  • onload sagt dem Browser, dass er die folgende Anweisung beim Laden der Webseite ausführen soll.
  • Die Anweisung document.kontaktformular.absender.focus(); heißt im Klartext:
    • Suche auf der angezeigten Webseite (document) ein Element mit dem Namen kontaktformular.
    • In diesem Element gibt es ein Feld mit dem Namen absender
    • Setze den Cursor in dieses Feld und lass ihn blinken (focus).

Falls JavaScript im Browser ausgestellt sein sollte, passiert einfach gar nichts.

In HTML5 gibt es das Attribut autofocus

In HTML5 gibt es das Attribut autofocus, das den hier gezeigten JavaScript-Schnippsel in modernen Browsern ersetzt. Funktioniert im IE ab Version 10. Aber auf mobilen Geräten ist das automatische Positionieren des Cursors manchmal eher nervig. Einfach ausprobieren.