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.
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
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 :).
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:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details