Mit HTML-Elementattributen können Sie Ihre <form>- und Formularsteuerelemente optimieren.
Nutzern beim Ausfüllen von Formularsteuerelementen helfen
Um Nutzern das Ausfüllen von Formularen zu erleichtern, verwenden Sie ein geeignetes type-Attribut für Ihre <input>-Elemente.
Browser zeigen eine für den type geeignete Benutzeroberfläche an, z. B. eine Datumsauswahl für ein <input> vom Typ date.
In Browsern auf Mobilgeräten wird eine angepasste Bildschirmtastatur angezeigt, z. B. ein Ziffernblock für type="tel".
Bei einigen <input>-Typen werden auch die Validierungsregeln für ein Element geändert, wenn sein Formular gesendet wird.
<input type="url"> ist beispielsweise nur gültig, wenn das Feld nicht leer ist und der Wert eine URL ist.
Sicherstellen, dass Nutzer Daten eingeben
Es gibt verschiedene Attribute für die Bereitstellung einer angemessenen Bildschirmtastatur auf Touchscreen-Geräten.
Die erste Möglichkeit besteht darin, wie oben beschrieben das Attribut type zu verwenden.
Eine weitere Option ist das Attribut inputmode, das unter Android und iOS unterstützt wird.
Im Gegensatz zum Attribut type ändert das Attribut inputmode nur die bereitgestellte Bildschirmtastatur, nicht das Verhalten des Elements selbst. Die Verwendung von inputmode ist eine gute Option, wenn Sie die Standardbenutzeroberfläche und die Standardvalidierungsregeln eines <input> beibehalten, aber trotzdem eine optimierte Bildschirmtastatur wünschen.
Du kannst die Enter-Taste auf Bildschirmtastaturen mit dem Attribut enterkeyhint ändern.
Durch enterkeyhint="next" oder enterkeyhint="done" wird beispielsweise das Label der Schaltfläche in ein passendes Symbol geändert.
So sehen Nutzer besser, was passiert, wenn sie das aktuelle Formular senden.
Dafür sorgen, dass Nutzer Formulare senden können
Angenommen, Sie füllen eine <form> aus und klicken auf die Schaltfläche Senden, aber es passiert nichts.
Das Problem könnte sein, dass die Schaltfläche mit dem Attribut disabled deaktiviert wurde.
Üblicherweise wird die Schaltfläche Senden deaktiviert, bis das Formular gültig ist.
Theoretisch klingt das vernünftig, aber Sie sollten die Schaltfläche Senden nicht deaktivieren, während Sie auf eine vollständige und gültige Nutzereingabe warten. Heben Sie stattdessen ungültige Daten bei der Eingabe und problematische Felder für Nutzer hervor, wenn sie das Formular senden.
Sie können die Schaltfläche Senden jedoch deaktivieren, nachdem das Formular erfolgreich gesendet, aber noch nicht verarbeitet wurde. Weitere Informationen zu deaktivierten Schaltflächen
Nutzern helfen, indem sie zuvor eingegebene Daten anzeigen
Angenommen, Sie haben ein Zahlungsformular mit mehreren Schritten.
Wie stellen Sie sicher, dass die zuvor eingegebenen Werte noch vorhanden sind, wenn die Nutzenden zu einem vorherigen Schritt zurückkehren?
Verwenden Sie das Attribut value, um bereits ausgefüllte Werte anzuzeigen.
<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">
Es gibt mehrere Möglichkeiten, den Wert einer Formularsteuerung in JavaScript abzurufen.
Sie können die Property value verwenden oder mit getAttribute('value') auf den Wert zugreifen.
Es gibt einen großen Unterschied: Das Attribut value gibt immer den aktuellen Wert und bei Verwendung von getAttribute() immer den Anfangswert zurück.
Jetzt ausprobieren!
Ändern Sie den Text im Namensfeld und beobachten Sie die Konsole.
Das Attribut value gibt den aktuell sichtbaren Text zurück, während getAttribute('value') immer den Anfangswert zurückgibt.
Weitere Informationen zum Unterschied zwischen DOM-Attributen und DOM-Attributen
Verwenden Sie für <input>-Elemente vom Typ checkbox oder radio das Attribut checked.
Fügen Sie sie hinzu, wenn der Nutzer eine Option ausgewählt hat. Andernfalls entfernen Sie sie.
Sicherstellen, dass Nutzer das erwartete Format verstehen
Der Wert des Attributs placeholder gibt an, welche Art von Informationen erwartet wird.
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">
Das kann für Nutzer verwirrend sein, da es unlogisch erscheint, warum ein Formularsteuerelement bereits vorausgefüllt ist. Außerdem ist durch das Hinzufügen eines Platzhalters möglicherweise schwer erkennbar, welche Formularfelder noch ausgefüllt werden müssen. Außerdem kann der Standardstil von Platzhaltertexten schwer zu lesen sein.
Im Allgemeinen sollten Sie bei der Verwendung des Attributs placeholder vorsichtig sein und niemals das Attribut placeholder verwenden, um eine Formularsteuerung zu erklären.
Verwenden Sie stattdessen das Element <label>.
Weitere Informationen dazu, warum Sie das Attribut placeholder vermeiden sollten
Ein besserer Hinweis darauf, welche Art von Informationen erwartet wird, ist die Verwendung eines zusätzlichen HTML-Elements unter dem Formularsteuerelement, in das eine Erklärung oder ein Beispiel eingefügt wird.
Sicherstellen, dass Formularsteuerelemente für die Validierung bereit sind
Es stehen verschiedene HTML-Attribute zur Verfügung, um die integrierte Validierung zu aktivieren.
Verwenden Sie das Attribut required, um das Senden leerer Felder zu verhindern.
Weitere Validierungen können mit dem Attribut type erzwungen werden.
Der Wert einer erforderlichen <input> von type="url" muss beispielsweise eine URL sein.
Mit dem Attribut minlength sorgen Sie dafür, dass der Nutzer eine Mindestanzahl von Zeichen eingibt.
Wenn Sie alle Werte mit mehr als einer maximalen Anzahl von Zeichen nicht zulassen möchten, verwenden Sie das Attribut maxlength.
Verwenden Sie für numerische Eingabetypen wie <input type="number"> stattdessen die Attribute min und max.
Weitere Informationen zur Validierung finden Sie im Hilfeartikel Nutzern bei der Eingabe der richtigen Daten in Formulare helfen.
Wissen testen
Testen Sie Ihr Wissen über Formularattribute
Mit welchem Attribut können Sie die Beschriftung der Enter-Taste auf einer Bildschirmtastatur ändern?
enterkeyenterkeyhintenterkeytextenterkeylabelWas ist der Unterschied zwischen der Property „value“ und der Property „getAttribute('value')“?
value gibt den aktuellen Wert zurück, getAttribute('value') den Anfangswert.value gibt den Anfangswert zurück, getAttribute('value') den aktuellen Wert.value gibt den Schlüssel und den Wert zurück, getAttribute('value') gibt nur den Wert zurück.