Neu(ish) in HTML5

Das Attribut autocomplete wurde als inoffizielle HTML-Funktion im Internet Explorer von Microsoft eingeführt und von einer Reihe von von anderen Browsern. Es gibt also seit langem breite Unterstützung dafür, obwohl sein genaues Verhalten nicht standardisiert war. Mit HTML5 ist das autocomplete Attribut ein offizieller Teil der Spezifikation.,

autocomplete vs. list & <datalist>

Das Attribut autocomplete fordert den Browser auf, basierend auf dem Benutzerverlauf eine automatische Vervollständigung zu versuchen. Dies ist nützlich für persönliche Daten wie Name und E — Mail-Adresse-Dinge, die der Benutzer wahrscheinlich in ähnliche Eingabefelder auf anderen Websites eingegeben hat. Dieautocomplete-Funktion kann dem Browser keine Liste standortspezifischer Autocomplete-Optionen bereitstellen., Verwenden Sie für das automatische Vervollständigungsverhalten mit standortspezifischen Vorschlägen das Attribut list mit dem Element <datalist>.

Absichtlich „kaputt“

Alle gängigen Browser ignorieren den Wert autocomplete="off" für bestimmte Arten von Eingabefeldern. Internet Explorer und Edge ignorieren es für alle password Felder. Firefox ignoriert es für jedes Feld in einem Anmeldeformular. Chrome ignoriert es jedes Mal, wenn der Benutzer gewählt hat, damit sich der Browser Formulardaten merken kann. Safari ignoriert es für die Felder Benutzername, E-Mail und Passwort., Das Ignorieren desautocomplete="off" – Werts wird durchgeführt, um die Benutzerfreundlichkeit zu verbessern und dem Benutzer mehr Kontrolle über das Verhalten der automatischen Vervollständigung zu geben. Als UX-Designer sollten Sie ihrem Beispiel folgen und autocomplete="off" sparsam verwenden. Es gibt nur sehr wenige Anwendungsfälle in normalen Formen, in denen es wirklich sinnvoll ist, autocompletezu verbieten. In einigen komplexen Apps ist es sinnvoll, versehentliche Eingaben zu vermeiden, aber bei den meisten Standardformularen gibt es wirklich keinen Grund dafür.,

Autocomplete und Name

Browser verwenden das Attribut name, um herauszufinden, nach welcher Art von Informationen ein Eingabefeld fragt. Verwenden Sie also standardmäßige, aussagekräftige Werte für name., Wenn Sie nach einer Adresse fragen, verwenden Sie Namen wie:

  • address-1
  • address-2
  • city
  • state oder province
  • zip oder postal-code

Verwenden Sie keine cleveren oder seltsam spezifischen Namen, da dies dem Browser die Bereitstellung von Vorschlägen zur automatischen Vervollständigung erschwert und sogar dazu führen kann, dass der Browser versucht, die falschen Werte in die falschen Eingaben einzufügen., (Haben Sie jemals Ihren Browser Ihre Telefonnummer in das Feld Postleitzahl eingeben lassen? Das war die Schuld der schlechten Benennung.)

Werte des Attributs autocomplete

Value Name Notes
off Schaltet autocomplete aus.
on Schaltet die automatische Vervollständigung ein.,

Alle Attribute des Eingabeelements

Attributname Werte Hinweise
Schritt Gibt das Intervall zwischen gültigen Werten in einer zahlenbasierten Eingabe an.
erforderlich Gibt an, dass das Eingabefeld erforderlich ist; verbietet die Formularübermittlung und benachrichtigt den Benutzer, wenn das erforderliche Feld leer ist.
Platzhalter Gibt Platzhaltertext in einer textbasierten Eingabe an.,
pattern Gibt einen regulären Ausdruck an, mit dem der Wert der Eingabe validiert werden soll.
multiple Ermöglicht es dem Benutzer, mehrere Werte in eine Datei hochladen oder E-Mail-Eingang eingeben.
min Gibt einen Mindestwert für Zahl und Datum Eingabefelder.
max Gibt einen Maximalwert für Zahl und Datum Eingabefelder.,
list Gibt die ID eines <datalist> Elements an, das eine Liste von Autocomplete-Vorschlägen für das Eingabefeld bereitstellt.
height Gibt die Höhe einer Bildeingabe an.
formtarget Gibt den Browserkontext an, in dem die Antwort nach dem Senden des Formulars vom Server geöffnet werden soll. Zur Verwendung nur für Eingabetypen “ submit „oder“image“.,
formmethod Gibt die HTTP-Methode (GET oder POST) an, die verwendet werden soll, wenn die Formulardaten an den Server gesendet werden. Nur zur Verwendung bei Eingabetypen von “ submit „oder“image“.
formenctype Gibt an, wie Formulardaten an den Server gesendet werden sollen. Nur zur Verwendung bei den Eingabetypen “ submit „und“image“.
formaction Gibt die URL des Formulars. Kann nur für type=“submit“ und type=“image“verwendet werden.
form Gibt ein Formular an, zu dem das Eingabefeld gehört.,
Autofokus Gibt an, dass das Eingabefeld unmittelbar nach dem Laden der Seite fokussiert sein sollte.
accesskey Definiert eine Tastenkombination für das Element.
autocomplete off
on		 Gibt an,ob der Browser versuchen soll, die Eingabe basierend auf Benutzereingaben in ähnliche Felder automatisch abzuschließen.
border Wurde verwendet, um einen Rand für eine Eingabe anzugeben. Veraltet. Verwenden Sie stattdessen CSS.,
checked Gibt an, ob eine Checkbox-oder Optionsfeldformulareingabe standardmäßig aktiviert werden soll.
deaktiviert Deaktiviert das Eingabefeld.
maxlength Gibt die maximale Anzahl von Zeichen an, die in eine Texteingabe eingegeben werden können.
Sprache Wurde verwendet, um die scripting-Sprache für die Ereignisse, ausgelöst durch den Eingang.
name Gibt den Namen eines input-Elements., Der Name und der Wert jedes Eingabeelements sind in der HTTP-Anforderung enthalten, wenn das Formular gesendet wird.
size Gibt die Breite der Eingabe in Zeichen an.
src Definiert die Quell-URL für eine Bildeingabe.
Typ button
checkbox
file
hidden
image
password
radio
reset
submit
text		 Bestimmt die Art des Eingangs.
Wert Definiert einen Anfangswert oder eine Standardauswahl für ein Eingabefeld.,
Adam is a technical writer who specializes in developer documentation and tutorials.