Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

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>