Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Komfort bei HTML Formularen – autofocus

Formulare sollten so einfach und komfortabel wie möglich ausfüllbar sein. Dazu hat man beim Erstellen natürlich ein paar schnelle Möglichkeiten

Erstes Formularfeld direkt zum lostippen ausgewählt – autofocus

Auf vielen Websites muss der Nutzer erst einmal in das erste Feld mit der Maus klicken, um mit dem Tippen anfangen zu können. Das ist eigentlich seit HTML5 und dem Attribut autofocus unnötig. Jedes beliebige Formularfeld kann mit diesem Attribut versehen werden. Aber bitte nur eines damit versehen! Wird die Seite nun aufgerufen, wird automatisch vom Browser der Fokus in dem Feld gesetzt, das mit autofocus im Quellcode ausgezeichnet ist und der Cursor blink im Feld freundlich – man kann sofort mit der Tastatureingabe starten.

Vorname:
Nachname:

Da autofocus ein Attribut ist, wird es einfach an den HTML-Befehl für Formularfelder dazu gepackt:

<input autofocus>

komplettes Beispiel:

<form action="formular.php">
  Vorname: <input type="text" name="vorname" autofocus><br>
  Nachname: <input type="text" name="nachname"><br>
  <input type="submit">
</form>

Browser unterstützten das Attribut ab folgenden Versionen: Chrome 5.0, IE 10.0, Firefox 4.0, Safari 5.0, Opera 9.6

Wird ein älterer Browser verwendet, gibt es absolut kein Problem, da dann das Attribut einfach ignoriert wird.

Tipp zu Formularen: um von Feld zu Feld zu kommen ist die TAB-Taste nützlich. Somit ist ein Wechsel zur Maus unnötig!

Empfehlung: Verwenden! So kann auch Beispielweise ein Suchfeld für Nutzer attraktiver gemacht werden.

Wichtig zum Beachten

Bei einem Formular ist es nur sinnvoll, wenn ein Feld automatisch ausgewählt ist - daher kann das autofocus-Attribut auch nur einmal auf der Einzelseite gesetzt werden. Hat man also eine Suchfunktion auf der Seite und zusätzlich ein Kontaktformular, dann muss man sich für ein Feld entscheiden, dass über das autofocus-Attribut aktiviert wird.

Das autofocus-Attribut darf nur in folgenden Elementen verwendet werden:
<button>, <fieldset>, <form>, <input>, <optgroup>, <option>, <select> und <textarea>

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe