<input>: Das HTML-Eingabeelement

Wie ein <input> funktioniert, variiert erheblich in Abhängigkeit vom Wert seines type-Attributs, daher werden die verschiedenen Typen auf ihren eigenen separaten Referenzseiten behandelt. Ist dieses Attribut nicht angegeben, so wird als Standardtyp text angenommen.

Die verfügbaren Typen sind wie folgt:

<input type="button" name="button" value="Button" />

<input type="checkbox" name="checkbox"/>

<input type="color" name="color"/>

<input type="date" name="date"/>

<input type="datetime-local" name="datetime-local"/>

<input type="email" name="email"/>

<input type="file" accept="image/*, text/*" name="file"/>

<input id="userId" name="userId" type="hidden" value="abc123">

<input type="image" name="image" src="" alt="image input"/>

<input type="month" name="month"/>

<input type="number" name="number"/>

<input type="password" name="password"/>

<input type="radio" name="radio"/>

<input type="range" name="range" min="0" max="25"/>

<input type="reset" name="reset"/>

<input type="search" name="search"/>

<input type="submit" name="submit"/>

<input type="tel" name="tel"/>

<input type="text" name="text"/>

<input type="time" name="time"/>

<input type="url" name="url"/>

<input type="week" name="week"/>

<input type="datetime" name="datetime"/>

Das <input>-Element ist so leistungsstark aufgrund seiner Attribute; das type-Attribut, das mit Beispielen beschrieben ist, ist das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-Schnittstelle basiert, teilen sie technisch gesehen dasselbe Set an Attributen. In der Realität haben jedoch die meisten Attribute nur Auswirkungen auf eine spezifische Untermenge von Eingabetypen. Darüber hinaus beeinflusst die Art und Weise, in der einige Attribute eine Eingabe beeinflussen, die verschiedenen Eingabetypen auf unterschiedliche Weise.

Dieser Abschnitt bietet eine Tabelle, die alle Attribute mit einer kurzen Beschreibung auflistet. Diese Tabelle wird von einer Liste gefolgt, die jedes Attribut ausführlicher beschreibt, zusammen mit den Eingabetypen, mit denen sie in Verbindung stehen. Diejenigen, die bei den meisten oder allen Eingabetypen gemeinsam sind, werden weiter unten ausführlicher definiert. Attribute, die einzigartig für bestimmte Eingabetypen sind - oder Attribute, die für alle Eingabetypen gemeinsam sind, aber ein besonderes Verhalten aufweisen, wenn sie auf einem bestimmten Eingabetyp verwendet werden -, werden stattdessen auf den Seiten dieser Typen dokumentiert.

Attribute für das <input>-Element umfassen die globalen HTML-Attribute und außerdem:

Einige zusätzliche nicht standardmäßige Attribute sind nach den Beschreibungen der Standardattribute aufgeführt.

accept

Gültig nur für den file-Eingabetyp, das accept-Attribut definiert, welche Dateitypen in einer file-Uplodsteuerung auswählbar sind. Siehe den file-Eingabetyp.

alt

Gültig nur für den image-Button, das alt-Attribut bietet alternativen Text für das Bild und zeigt den Wert des Attributs an, wenn das Bild src fehlt oder anderweitig nicht geladen werden kann. Siehe den image-Eingabetyp.

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und, falls ja, in welcher Weise. Weitere Informationen finden Sie auf der Seite über das autocapitalize-globale Attribut.

autocomplete

(Kein Boolean-Attribut!) Das autocomplete-Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenfolge, die beschreibt, welche, falls überhaupt, Art von Autovervollständigungsfunktion die Eingabe bereitstellen soll. Eine typische Implementierung von Autovervollständigung ruft vorher eingegebene Werte in dasselbe Eingabefeld ab, aber es können komplexere Formen der Autovervollständigung existieren. Beispielsweise könnte ein Browser auf die Kontaktliste eines Geräts zugreifen, um E-Mail-Adressen in einem E-Mail-Eingabefeld automatisch zu vervollständigen. Siehe autocomplete für zulässige Werte.

Das autocomplete-Attribut ist gültig bei hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color und password. Dieses Attribut hat keine Auswirkung auf Eingabetypen, die keine numerischen oder Textdaten zurückgeben, gültig für alle Eingabetypen mit Ausnahme von checkbox, radio, file oder einen der Button-Typen.

Siehe das autocomplete-Attribut für weitere Informationen einschließlich Informationen zur Passwortsicherheit und wie sich autocomplete geringfügig für hidden von anderen Eingabetypen unterscheidet.

autofocus

Ein Boolean-Attribut, das, falls vorhanden, angibt, dass die Eingabe automatisch den Fokus erhalten sollte, wenn die Seite vollständig geladen ist (oder wenn das <dialog>, das das Element enthält, angezeigt wurde).

Hinweis: Ein Element mit dem autofocus-Attribut kann den Fokus erhalten, noch bevor das DOMContentLoaded-Ereignis ausgelöst wird.

Im Dokument darf höchstens ein Element das autofocus-Attribut besitzen. Wenn es auf mehr als einem Element gesetzt wird, erhält das erste Element mit dem Attribut den Fokus.

Das autofocus-Attribut kann nicht bei Eingaben des Typs hidden verwendet werden, da versteckte Eingaben nicht fokussiert werden können.

Warnung: Ein Formularsteuerelement automatisch zu fokussieren, kann für sehbehinderte Personen, die Bildschirmlesetechnologie verwenden, und Personen mit kognitiven Beeinträchtigungen verwirrend sein. Wenn autofocus zugewiesen wird, "teleportieren" Bildschirmleser ihre Benutzer ohne Vorwarnung zum Formularsteuerelement.

Verwenden Sie diese Funktion mit Bedacht auf Barrierefreiheit, wenn Sie das autofocus-Attribut anwenden. Ein automatisches Fokussieren auf eine Steuerung kann bewirken, dass die Seite beim Laden scrollt. Der Fokus kann auch dazu führen, dass auf einigen Touch-Geräten dynamische Tastaturen angezeigt werden. Während ein Bildschirmleser das Etikett des Formularsteuerelements ankündigen wird, das den Fokus erhält, wird der Bildschirmleser nichts vor dem Etikett ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird gleichermaßen den Kontext verpassen, der durch den vorherigen Inhalt erstellt wird.

capture

Eingeführt in der HTML Media Capture-Spezifikation und gültig nur für den file-Eingabetyp, definiert das capture-Attribut, welches Medium—Mikrofon, Video oder Kamera—zum Erfassen einer neuen Datei für das Hochladen mit einer file-Upload-Steuerung in unterstützenden Szenarien verwendet werden soll. Siehe den file-Eingabetyp.

checked

Gültig sowohl für radio als auch checkbox Typen, checked ist ein Boolean-Attribut. Wenn es im Typ radio vorhanden ist, gibt es an, dass das Optionsfeld das aktuell ausgewählte in der Gruppe der gleichnamigen Optionsfelder ist. Wenn es im Typ checkbox vorhanden ist, gibt es an, dass das Kontrollkästchen standardmäßig aktiviert ist (wenn die Seite geladen wird). Es zeigt nicht an, ob dieses Kontrollkästchen aktuell aktiviert ist: wenn der Status des Kontrollkästchens geändert wird, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur dem HTMLInputElement's checked IDL-Attribut wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabesteuerungen wird der Wert eines Kontrollkästchens und eines Optionsfeldes nur dann in den übermittelten Daten enthalten, wenn sie derzeit checked sind. Wenn sie es sind, werden der Name und die Werte der aktivierten Steuerungen gesendet.

Zum Beispiel, wenn ein Kontrollkästchen, dessen name fruit ist, den value cherry hat und das Kontrollkästchen aktiviert ist, werden im übermittelten Formular fruit=cherry enthalten sein. Wenn das Kontrollkästchen nicht aktiv ist, wird es überhaupt nicht in den Formulardaten aufgelistet. Der Standardwert für Kontrollkästchen und Optionsfelder ist on.

dirname

Gültig für hidden, text, search, url, tel und email Eingabetypen, ermöglicht das dirname-Attribut das Übermitteln der Richtung des Elements. Wenn enthalten, wird die Formularsteuerung mit zwei Name/Wert-Paaren übermittelt: das erste ist der name und value, und das zweite ist der Wert des dirname-Attributs als Name, mit einem Wert von ltr oder rtl, wie vom Browser festgelegt.

html

<form action="page.html" method="post">
  <label>
    Fruit:
    <input type="text" name="fruit" dirname="fruit-dir" value="cherry" />
  </label>
  <input type="submit" />
</form>
<!-- page.html?fruit=cherry&fruit-dir=ltr -->

Wenn das obige Formular übermittelt wird, wird die Eingabe sowohl das name / value-Paar fruit=cherry als auch das dirname/Richtung-Paar fruit-dir=ltr senden. Weitere Informationen finden Sie im dirname-Attribut.

disabled

Ein Boolean-Attribut, das, falls vorhanden, angibt, dass der Benutzer nicht mit der Eingabe interagieren können sollte. Deaktivierte Eingaben werden typischerweise mit einer gedimmten Farbe oder durch eine andere Form der Anzeige dargestellt, dass das Feld nicht verfügbar ist.

Insbesondere erhalten deaktivierte Eingaben nicht das click-Ereignis, und deaktivierte Eingaben werden nicht mit dem Formular übermittelt.

Hinweis: Obwohl nicht von der Spezifikation gefordert, wird Firefox standardmäßig den dynamischen deaktivierten Zustand eines <input> über Seitenladezyklen hinweg beibehalten. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

form

Ein String, der das <form>-Element angibt, mit dem die Eingabe verknüpft ist (das heißt, ihr Formularbesitzer). Der Wert dieses Strings, falls vorhanden, muss mit der id eines <form>-Elements im selben Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, ist das <input>-Element mit dem nächstgelegenen enthaltenen Formular verknüpft, falls vorhanden.

Das form-Attribut ermöglicht es Ihnen, eine Eingabe an einer beliebigen Stelle im Dokument zu platzieren, jedoch mit einem Formular woanders im Dokument zu verknüpfen.

Hinweis: Eine Eingabe kann nur mit einem Formular verknüpft sein.

formaction

Gültig nur für die image und submit Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen.

formenctype

Gültig nur für die image und submit Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen.

formmethod

Gültig nur für die image und submit Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen.

formnovalidate

Gültig nur für die image und submit Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen.

formtarget

Gültig nur für die image und submit Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen.

height

Gültig nur für den image Eingabeknopf, height ist die Höhe der Bilddatei, die zur Repräsentation des grafischen Absende-Buttons angezeigt werden soll. Siehe den image Eingabetyp.

id

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, es definiert einen eindeutigen Bezeichner (ID), der im gesamten Dokument einzigartig sein muss. Sein Zweck besteht darin, das Element beim Verlinken zu identifizieren. Der Wert wird als der Wert des for-Attributs des <label> verwendet, um das Etikett mit dem Formularsteuerelement zu verknüpfen. Siehe <label>.

inputmode

Globaler Wert gültig für alle Elemente, er bietet einen Hinweis an die Browser auf die Art der virtuellen Tastaturkonfiguration, die beim Bearbeiten dieses Elements oder dessen Inhalts verwendet werden soll. Werte umfassen none, text, tel, url, email, numeric, decimal und search.

list

Der Wert, der dem list-Attribut gegeben wird, sollte die id eines im selben Dokument befindlichen <datalist>-Elements sein. Das <datalist> bietet eine Liste von vordefinierten Werten, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

Es ist gültig bei text, search, url, tel, email, date, month, week, time, datetime-local, number, range und color.

Nach den Spezifikationen wird das list-Attribut nicht von hidden, password, checkbox, radio, file oder einem der Button-Typen unterstützt.

Abhängig vom Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen bekommen, Markierungen entlang eines Bereichs, oder sogar eine Eingabe, die wie ein <select> öffnet, aber nicht gelistete Werte erlaubt. Prüfen Sie die Browser-Kompatibilitätstabelle für die anderen Eingabetypen.

Siehe das <datalist>-Element.

max

Gültig für date, month, week, time, datetime-local, number und range, es definiert den größten Wert im Bereich der erlaubten Werte. Wenn der in das Element eingegebene value diesen Wert überschreitet, schlägt das Element in der Einschränkungsvalidierung fehl. Wenn der Wert des max-Attributs keine Zahl ist, hat das Element keinen Höchstwert.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was anzeigt, dass der Bereich umschlagen kann; zum Beispiel ermöglicht dies Ihnen, einen Zeitbereich von 22:00 bis 04:00 Uhr zu spezifizieren.

maxlength

Gültig für text, search, url, tel, email und password, es definiert die maximale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das Feld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn keine maxlength angegeben ist oder ein ungültiger Wert angegeben ist, hat das Feld keine maximale Länge. Diese Zahl muss auch größer oder gleich dem von minlength angegebenen Wert sein.

Die Eingabe schlägt in der Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Texts mehr als maxlength UTF-16-Codeeinheiten beträgt. Standardmäßig verhindern Browser das Eingeben von mehr Zeichen, als durch das maxlength-Attribut erlaubt sind. Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen.

min

Gültig für date, month, week, time, datetime-local, number, und range, es definiert den kleinsten Wert im Bereich der zugelassenen Werte. Wenn der in das Element eingegebene value kleiner ist als dieser, schlägt das Element in der Einschränkungsvalidierung fehl. Wenn der Wert des min-Attributs keine Zahl ist, hat das Element keinen Mindestwert.

Dieser Wert muss kleiner oder gleich dem Wert des max-Attributs sein. Wenn das min-Attribut vorhanden ist, aber nicht spezifiziert oder ungültig ist, wird kein min-Wert angewendet. Wenn das min-Attribut gültig ist und ein nicht leerer Wert kleiner ist als das Minimum, das vom min-Attribut erlaubt ist, verhindert die Einschränkungsvalidierung das Absenden des Formulars. Siehe Client-seitige Validierung für weitere Informationen.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was anzeigt, dass der Bereich umschlagen kann; zum Beispiel ermöglicht dies Ihnen, einen Zeitbereich von 22:00 bis 04:00 Uhr zu spezifizieren.

minlength

Gültig für text, search, url, tel, email und password, es definiert die minimale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das Eingabefeld eingeben kann. Dies muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich dem von maxlength angegebenen Wert ist. Wenn keine minlength angegeben ist oder ein ungültiger Wert angegeben ist, hat die Eingabe keine Mindestlänge.

Die Eingabe schlägt in der Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Texts weniger als minlength UTF-16-Codeeinheiten beträgt, was das Absenden des Formulars verhindert. Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen.

multiple

Das Boolean-Attribut multiple, falls gesetzt, bedeutet, dass der Benutzer in der E-Mail-Steuerung durch Kommas getrennte E-Mail-Adressen eingeben kann oder mit dem file-Eingabefeld mehr als eine Datei auswählen kann. Siehe den email und file Eingabetyp.

name

Ein String, der einen Namen für das Eingabefeld angibt. Dieser Name wird zusammen mit dem Wert der Steuerung, wenn die Formulardaten übermittelt werden, gesendet.

Betrachten Sie name-Attribut als erforderlich (auch wenn es nicht ist). Wenn eine Eingabe keinen name angegeben hat oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular gesendet! (Deaktivierte Steuerungen, nicht aktivierte Optionsfelder, nicht aktivierte Kontrollkästchen und Reset-Buttons werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

1. _charset_ : Wenn es als der Name eines <input>-Elements des Typs hidden verwendet wird, wird der value der Eingabe automatisch vom Benutzer-Agent auf die Zeichencodierung gesetzt, die zur Übermittlung des Formulars verwendet wird.
2. isindex: Aus historischen Gründen ist der Name isindex nicht erlaubt.

Das name-Attribut erstellt ein einzigartiges Verhalten für Optionsfelder.

Nur ein Optionsfeld in einer gleichnamigen Gruppe von Optionsfeldern kann gleichzeitig aktiviert sein. Das Auswählen eines beliebigen Optionsfeldes in dieser Gruppe deaktiviert automatisch jedes aktuell ausgewählte Optionsfeld in derselben Gruppe. Der Wert dieses einen aktivierten Optionsfeldes wird zusammen mit dem Namen gesendet, wenn das Formular gesendet wird.

Wenn man in eine Gruppe von gleichnamigen Optionsfeldern eintabbed, erhält, wenn eines davon aktiviert ist, dieser den Fokus. Wenn sie nicht zusammen in der Quellreihenfolge gruppiert sind, beginnt das Eintabben, wenn eines der Gruppe aktiviert ist, bei dem ersten in der Gruppe, wobei alle, die nicht aktiviert sind, übersprungen werden. Mit anderen Worten, wenn eines aktiviert ist, überspringt das Eintabben die nicht aktiven Optionsfelder in der Gruppe. Wenn keines aktiviert ist, erhält das Optionsfeldgruppe den Fokus, wenn der erste Button in der gleichnamigen Gruppe erreicht ist.

Sobald eines der Optionsfelder in einer Gruppe den Fokus hat, navigieren die Pfeiltasten durch alle Optionsfelder mit dem gleichen Namen, selbst wenn die Optionsfelder nicht zusammen in der Quellreihenfolge sind.

Wenn einem Eingabe-Element ein name zugewiesen wurde, wird dieser Name zu einer Eigenschaft des HTMLFormElement.elements-Eigentum des Formularbesitzers. Wenn Sie eine Eingabe haben, dessen name auf guest und ein weiteres dessen name auf hat-size gesetzt wurde, kann der folgende Code verwendet werden:

js

let form = document.querySelector("form");

let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];

Wenn dieser Code ausgeführt wurde, wird guestName das HTMLInputElement für das guest-Feld sein, und hatSize das Objekt für das hat-size-Feld.

Warnung: Vermeiden Sie es Formularelementen einen name zu geben, der einem eingebauten Eigenschaft des Formulars entspricht, da Sie ansonsten die vordefinierte Eigenschaft oder Methode mit dieser Referenz auf das entsprechende Eingabeelement überschreiben würden.

pattern

Gültig für text, search, url, tel, email und password, wird das pattern-Attribut verwendet, um einen regulären Ausdruck zu erstellen, mit dem der value der Eingabe übereinstimmen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er vom RegExp-Typ verwendet wird und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist. Keine Schrägstriche sollten um den Musterntext angegeben werden. Beim Erstellen des regulären Ausdrucks:

1. wird das Muster implizit mit ^(?: und )$ umschlossen, so dass der Abgleich gegen den gesamten Eingabewert erforderlich ist, d.h. ^(?:<pattern>)$.
2. wird das 'v'-Flag angegeben, so dass das Muster als Sequenz von Unicode-Codepunkten und nicht as ASCII behandelt wird.

Wenn das pattern-Attribut vorhanden ist, aber nicht spezifiziert oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut wird vollständig ignoriert. Wenn das Musterattribut gültig ist und ein nicht leerer Wert das Muster nicht erfüllt, verhindert die Einschränkungsvalidierung das Absenden des Formulars. Wenn das multiple vorhanden ist, wird der kompilierte reguläre Ausdruck mit jedem durch Kommas getrennten Wert abgeglichen.

Hinweis: Wenn Sie das pattern-Attribut verwenden, informieren Sie den Benutzer über das erwartete Format, indem Sie erklärenden Text in der Nähe einschließen. Sie können auch ein title-Attribut hinzufügen, um zu erklären, welche Anforderungen an die Übereinstimmung mit dem Muster gestellt werden; die meisten Browser zeigen diesen Titel als Tooltip an. Die sichtbare Erklärung ist erforderlich für die Barrierefreiheit. Der Tooltip ist eine Verbesserung.

Siehe Client-seitige Validierung für weitere Informationen.

placeholder

Gültig für text, search, url, tel, email, password und number, bietet das placeholder-Attribut einen kurzen Hinweis für den Benutzer darauf, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf die erwartete Art von Daten gibt, eher als eine Erklärung oder Aufforderung. Der Text darf keine Zeilenumbrüche oder Zeilenwechsel umfassen. Wenn beispielsweise erwartet wird, dass ein Feld den Vornamen eines Benutzers erfasst und sein Etikett "Vorname" lautet, könnte ein geeigneter Platzhalter "z. B. Mustafa" lauten.

Hinweis: Das placeholder-Attribut ist nicht so semantisch nützlich wie andere Möglichkeiten, Ihr Formular zu erklären, und kann unerwartete technische Probleme mit Ihrem Inhalt hervorrufen. Siehe Labels für weitere Informationen.

popovertarget

Wandelt ein <input type="button">-Element in einen Popover-Steuerungsbutton um; nimmt die ID des zu steuernden Popover-Elements als seinen Wert an. Siehe die Popover-API-Landing-Page für weitere Details.

popovertargetaction

Gibt die Aktion an, die auf ein von einer Steuerung <input type="button"> gesteuertes Popover-Element angewendet werden soll. Mögliche Werte sind:

"hide"

Der Button wird ein bereits gezeigtes Popover ausblenden. Wenn Sie versuchen, ein bereits verstecktes Popover auszublenden, wird keine Aktion unternommen.

"show"

Der Button wird ein verstecktes Popover zeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover zu zeigen, wird keine Aktion unternommen.

"toggle"

Der Button wird zwischen angezeigtem und verstecktem Popover wechseln. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die von der Steuerungstaste ausgeführt wird.

readonly

Ein Boolean-Attribut, das, falls vorhanden, angibt, dass der Benutzer den Wert der Eingabe nicht bearbeiten kann. Das readonly-Attribut wird von den Eingabetypen text, search, url, tel, email, date, month, week, time, datetime-local, number und password unterstützt.

Siehe das HTML-Attribut: readonly für weitere Informationen.

required

required ist ein Boolean-Attribut, das, falls vorhanden, angibt, dass der Benutzer einen Wert für die Eingabe angeben muss, bevor das Formular abgesendet werden kann. Das required-Attribut wird von den Eingabetypen text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio und file unterstützt.

Siehe Client-seitige Validierung und das HTML-Attribut: required für weitere Informationen.

size

Gültig für email, password, tel, url und text, gibt das size-Attribut an, wie viel von der Eingabe angezeigt wird. Es erzeugt im Grunde das gleiche Ergebnis wie die Einstellung der CSS-width-Eigenschaft mit einigen Besonderheiten. Die tatsächliche Einheit des Wertes hängt vom Eingabetyp ab. Für password und text ist es eine Anzahl von Zeichen (oder em-Einheiten) mit einem Standardwert von 20, und für andere sind es Pixel (oder px-Einheiten). CSS-width hat Vorrang vor dem size-Attribut.

src

Gültig nur für den image Eingabeknopf, das src ist ein String, der die URL der Bilddatei angibt, die zur Darstellung des grafischen Absende-Buttons angezeigt werden soll. Siehe den image Eingabetyp.

step

Gültig für date, month, week, time, datetime-local, number, und range, das step-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss.

Wenn nicht explizit enthalten:

• step standardmäßig auf 1 für number und range.
• Jeder Datums/Zeit-Eingabetyp hat einen Standardwert für step, der dem Typ entspricht; siehe die individuellen Eingabeseiten: date, datetime-local, month, time, und week.

Der Wert muss eine positive Zahl sein - ganzzahlig oder dezimal - oder der spezielle Wert any, was bedeutet, dass keine Stufe impliziert wird und jeder Wert erlaubt ist (unter Ausschluss anderer Einschränkungen, wie min und max).

Wenn any nicht explizit gesetzt ist, sind gültige Werte für die number, Datums/Zeit-Eingabetypen und range Eingabetypen gleich der Basis für die Schritthöhe - dem min-Wert und den Inkrementen des Schrittwerts bis zum max-Wert, wenn vorhanden.

Zum Beispiel, wenn Sie <input type="number" min="10" step="2"> haben, dann ist jede gerade Zahl, 10 oder größer, gültig. Wenn weggelassen, <input type="number">, ist jede ganze Zahl gültig, aber Kommazahlen (wie 4.2) sind nicht gültig, weil step standardmäßig auf 1 gesetzt ist. Für 4.2, um gültig zu sein, hätte step auf any, 0.1, 0.2, oder auf eine Zahl gesetzt werden müssen, die auf .2 endet, wie <input type="number" min="-5.2">.

Hinweis: Wenn die eingegebenen Daten des Benutzers sich nicht an die Schritt-Konfiguration halten, wird der Wert in der Einschränkungsvalidierung als ungültig betrachtet und wird die :invalid-Pseudo-Klasse entsprechen.

Siehe Client-seitige Validierung für weitere Informationen.

tabindex

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, ein integer-Attribut, das angibt, ob das Element den Eingabefokus erhalten kann (fokussierbar ist), ob es an der sequentiellen Tastaturnavigation teilnehmen soll. Da alle Eingabetypen mit Ausnahme von Eingaben des Typs hidden fokussierbar sind, sollte dieses Attribut nicht auf Formularsteuerungen verwendet werden, da dies die Verwaltung der Fokusreihenfolge für alle im Dokument enthaltenen Elemente erfordern würde mit dem Risiko schlechter Benutzerfreundlichkeit und Barrierefreiheit bei inkorrekter Umsetzung.

title

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, das einen Text enthält, der als Zusatzinformation zu dem Element gehört, dem es angehört. Solche Informationen können typischerweise, aber nicht zwingend, dem Benutzer als Tooltip präsentiert werden. Der Titel sollte NICHT als primäre Erklärung des Zwecks der Formulareingabe verwendet werden. Stattdessen verwenden sie das <label>-Element mit einem for-Attribut, das auf das id-Attribut der Formulareingabe festgelegt ist. Siehe Labels unten.

type

Ein String, der den zu rendernden Steuerungstyp angibt. Um beispielsweise ein Kontrollkästchen zu erstellen, wird ein Wert von checkbox verwendet. Wenn weggelassen (oder ein unbekannter Wert angegeben ist) wird der text-Eingabetyp verwendet, wodurch ein Klartext-Eingabefeld erstellt wird.

Zulässige Werte sind in Eingabetypen oben aufgeführt.

value

Der Wert der Eingabesteuerung. Bei Angabe im HTML entspricht dies dem Anfangswert, und von da an kann es jederzeit mit JavaScript geändert oder abgerufen werden, um auf die value-Eigenschaft des jeweiligen HTMLInputElement-Objekts zuzugreifen. Das value-Attribut ist immer optional, sollte jedoch für checkbox, radio und hidden als verpflichtend angesehen werden.

width

Gültig nur für den image Eingabeknopf, das width ist die Breite der Bilddatei, die zur Darstellung des grafischen Absende-Buttons angezeigt werden soll. Siehe den image Eingabetyp.

Die folgenden nicht-standardmäßigen Attribute sind ebenfalls auf einigen Browsern verfügbar. Als allgemeine Regel sollten Sie deren Verwendung vermeiden, es sei denn, es lässt sich nicht anders machen.

incremental Nicht standardisiert

Das Boolean-Attribut incremental ist eine WebKit- und Blink-Erweiterung (daher unterstützt von Safari, Opera, Chrome, etc.), das, falls vorhanden, den Benutzer-Agent anweist, die Eingabe als Live-Suche zu verarbeiten. Während der Benutzer den Wert des Feldes bearbeitet, sendet der Benutzer-Agent search-Ereignisse an das HTMLInputElement-Objekt, das das Suchfeld darstellt. Dies ermöglicht es Ihrem Code, die Suchergebnisse in Echtzeit zu aktualisieren, während der Benutzer die Suche bearbeitet.

Wenn incremental nicht angegeben ist, wird das search-Ereignis nur gesendet, wenn der Benutzer explizit eine Suche startet (z. B. indem er die Enter oder Return-Taste drückt, während er das Feld bearbeitet).

Das search-Ereignis ist so rate-limitiert, dass es nicht öfter gesendet wird als ein implementierungsdefiniertes Intervall.

orient Nicht standardisiert

Ähnlich wie die nicht-standard CSS-Eigenschaft -moz-orient, die die <progress>- und <meter>-Elemente betrifft, definiert das orient-Attribut die Orientierung des Bereichsschiebers. Werte umfassen horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wo der Bereich vertikal gerendert wird. Siehe Erstellen von vertikalen Formularsteuerungen für einen modernen Ansatz, um vertikale Formularsteuerungen zu erstellen.

results Nicht standardisiert

Das results-Attribut—nur von Safari unterstützt—ist ein numerischer Wert, der es Ihnen ermöglicht, die maximale Anzahl von Einträgen zu überschreiben, die in der nativ bereitgestellten Dropdown-Liste des <input>-Elements früherer Suchanfragen angezeigt werden soll.

Der Wert muss eine nicht-negative Dezimalzahl sein. Wenn nicht bereitgestellt oder ein ungültiger Wert angegeben wird, wird die maximale Standardanzahl an Einträgen des Browsers verwendet.

webkitdirectory Nicht standardisiert

Das Boolean-Attribut webkitdirectory, falls vorhanden, gibt an, dass nur Verzeichnisse vom Benutzer im Datei-Auswahl-Interface auswählbar sein sollen. Siehe HTMLInputElement.webkitdirectory für zusätzliche Details und Beispiele.

Obwohl ursprünglich nur für WebKit-basierte Browser implementiert, ist webkitdirectory auch in Microsoft Edge sowie Firefox 50 und höher verwendbar. Obwohl es relativ breite Unterstützung hat, ist es immer noch nicht standardisiert und sollte nicht verwendet werden, es sei denn, Sie haben keine Alternative.

Die folgenden Methoden werden von der HTMLInputElement-Schnittstelle bereitgestellt, welche <input>-Elemente im DOM repräsentiert. Ebenfalls verfügbar sind die durch die übergeordneten Schnittstellen spezifizierten Methoden, HTMLElement, Element, Node, und EventTarget.

checkValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls wird false zurückgegeben und ein invalid-Ereignis auf dem Element ausgelöst.

reportValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls wird false zurückgegeben, ein invalid-Ereignis auf dem Element ausgelöst und (wenn das Ereignis nicht abgebrochen wird) das Problem dem Benutzer gemeldet.

select()

Markiert den gesamten Inhalt des <input>-Elements, wenn der Inhalt des Elements ausgewählt werden kann. Bei Elementen ohne auswählbaren Textinhalt (wie ein visueller Farbwähler oder Kalendereingabedatum) hat diese Methode keine Wirkung.

setCustomValidity()

Setzt eine benutzerdefinierte Nachricht, die angezeigt wird, wenn der Wert des Eingabeelements ungültig ist.

setRangeText()

Legt die Inhalte des angegebenen Zeichenbereichs im Eingabeelement auf eine gegebene Zeichenfolge fest. Ein selectMode-Parameter ist verfügbar, um zu steuern, wie der vorhandene Inhalt betroffen ist.

setSelectionRange()

Markiert den angegebenen Bereich von Zeichen innerhalb eines textuellen Eingabeelements. Tut nichts bei Eingaben, die nicht als Texteingabefelder dargestellt sind.

showPicker()

Zeigt den Browser-Picker für das Eingabeelement an, der normalerweise angezeigt wird, wenn das Element ausgewählt wird, jedoch von einem Button-Druck oder einer anderen Benutzerinteraktion ausgelöst wird.

stepDown()

Verringert den Wert einer numerischen Eingabe standardmäßig um eins, oder um die angegebene Anzahl von Einheiten.

stepUp()

Erhöht den Wert einer numerischen Eingabe um eins oder um die angegebene Anzahl von Einheiten.

Eingabefelder, als ersetzte Elemente, haben einige Funktionen, die für Nicht-Formularelemente nicht zutreffen. Es gibt CSS-Selektoren, die speziell Formularsteuerungen basierend auf ihren UI-Funktionen, auch bekannt als UI-Pseudoklassen, ansprechen können. Das Input-Element kann auch nach Typ mit Attributselektoren gezielt angesprochen werden. Es gibt einige Eigenschaften, die ebenfalls besonders nützlich sind.

Beispiel für Pseudoklassen

Wir können das Label einer Checkbox basierend darauf stylen, ob die Checkbox aktiviert ist oder nicht. In diesem Beispiel stylen wir die color und font-weight des <label>, das direkt nach einem aktivierten Input folgt. Wir haben keine Stile angewendet, wenn das input nicht aktiviert ist.

<input id="checkboxInput" type="checkbox" />
<label for="checkboxInput">Toggle the checkbox on and off</label>

input:checked + label {
  color: red;
  font-weight: bold;
}

Es ist möglich, verschiedene Arten von Formularsteuerungen basierend auf ihrem type mit Attributselektoren anzusteuern. CSS-Attributselektoren entsprechen Elementen basierend entweder nur auf der Anwesenheit eines Attributs oder dem Wert eines bestimmten Attributs.

/* matches a password input */
input[type="password"] {
}

/* matches a form control whose valid values are limited to a range of values*/
input[min][max] {
}

/* matches a form control with a pattern attribute */
input[pattern] {
}

Standardmäßig erscheint der Text des Platzhalters in einem durchsichtigen oder hellgrauen Ton. Das ::placeholder Pseudoelement ist der placeholder Text des Inputs. Es kann mit einem begrenzten Satz von CSS-Eigenschaften gestylt werden.

::placeholder {
  color: blue;
}

Nur der Teil der CSS-Eigenschaften, die auf das ::first-line Pseudoelement anwendbar sind, kann in einer Regel verwendet werden, die ::placeholder als Selektor hat.

Die appearance Eigenschaft ermöglicht es, (fast) jedes Element als plattformspezifischen Stil basierend auf dem Theme des Betriebssystems anzuzeigen sowie das Entfernen jeglicher plattformspezifischer Stile mit dem Wert none.

Man könnte ein <div> wie einen Radiobutton aussehen lassen mit div {appearance: radio;} oder ein Radio wie eine Checkbox mit [type="radio"] {appearance: checkbox;}, aber tun Sie das nicht.

Das Setzen von appearance: none entfernt plattformspezifische Ränder, aber nicht die Funktionalität.

Eine Eigenschaft, die speziell für textbezogene Elemente ist, ist die CSS caret-color Eigenschaft, die es Ihnen ermöglicht, die Farbe des Texteingabe-Cursors zu setzen:

HTML

<label for="textInput">Note the red caret:</label>
<input id="textInput" class="custom" size="32" />

CSS

input.custom {
  caret-color: red;
  font:
    16px "Helvetica",
    "Arial",
    "sans-serif";
}

Ergebnis

Die field-sizing-Eigenschaft ermöglicht Ihnen die Kontrolle über das Größenverhalten von Formulareingaben (d.h. sie erhalten standardmäßig eine bevorzugte Größe). Diese Eigenschaft ermöglicht Ihnen das Überschreiben des Standardverhaltens und erlaubt es Formularsteuerungen, ihre Größe anzupassen, um ihrem Inhalt zu entsprechen.

Diese Eigenschaft wird typischerweise verwendet, um Formularfelder zu erstellen, die sich an ihren Inhalt anpassen und wachsen, wenn mehr Text eingegeben wird. Dies funktioniert mit Eingabetypen, die direkte Texteingabe akzeptieren (zum Beispiel text und url), Eingabetyp file, und <textarea>-Elemente.

In bestimmten Fällen (typischerweise bei nicht-textuellen Eingaben und spezialisierten Oberflächen) ist das <input> Element ein ersetztes Element. Wenn es so ist, können die Position und die Größe des Elements innerhalb seines Rahmens mithilfe der CSS-Eigenschaften object-position und object-fit angepasst werden.

Für weitere Informationen zum Hinzufügen von Farbe zu Elementen in HTML siehe:

• Anwenden von Farbe auf HTML-Elemente mit CSS.

Siehe auch:

• Stil von HTML-Formularen
• Erweiterte Stile für HTML-Formulare und

Labels sind erforderlich, um Assistenztexte mit einem <input> zu verknüpfen. Das <label>-Element liefert erläuternde Informationen über ein Formularfeld, das immer angemessen ist (abgesehen von den Layoutüberlegungen, die Sie haben). Es ist nie eine schlechte Idee, ein <label> zu verwenden, um zu erklären, was in ein <input> oder <textarea> eingegeben werden soll.

Zugeordnete Labels

Das semantische Paaren von <input> und <label>-Elementen ist nützlich für unterstützende Technologien wie Bildschirmlesegeräte. Durch das Paaren mit dem for-Attribut des <label>, verbinden Sie das Label mit dem Input, sodass Bildschirmleser Eingaben den Benutzern genauer beschreiben können.

Es genügt nicht, nur einfachen Text neben dem <input>-Element zu haben. Vielmehr erfordert die Benutzerfreundlichkeit und Zugänglichkeit die Aufnahme von entweder impliziten oder expliziten <label>:

<!-- inaccessible -->
<p>Enter your name: <input id="name" type="text" size="30" /></p>

<!-- implicit label -->
<p>
  <label>Enter your name: <input id="name" type="text" size="30" /></label>
</p>

<!-- explicit label -->
<p>
  <label for="name">Enter your name: </label>
  <input id="name" type="text" size="30" />
</p>

Das erste Beispiel ist nicht zugänglich: Es gibt keine Beziehung zwischen dem Prompt und dem <input>-Element.

Zusätzlich zu einem zugänglichen Namen bietet das Label eine größere 'Treffer'-Fläche für Maus- und Touchscreen-Nutzer, um darauf zu klicken oder zu tippen. Durch das Paaren eines <label> mit einem <input>, fokussiert ein Klick auf eines von beiden das <input>. Wenn Sie einfachen Text verwenden, um Ihr Input zu "labeln", wird dies nicht passieren. Dass der Prompt Teil des Aktivierungsbereichs für die Eingabe ist, hilft Menschen mit motorischen Kontrollproblemen.

Als Webentwickler ist es wichtig, dass wir nie annehmen, dass Menschen all das wissen, was wir wissen. Die Vielfalt der Menschen, die das Internet nutzen—und damit Ihre Webseite—garantiert praktisch, dass einige Besucher Ihrer Website einige Unterschiede in Denkprozessen und/oder Umständen haben werden, die sie dazu führen, Ihre Formulare sehr unterschiedlich zu interpretieren, wenn sie keine klaren und ordnungsgemäß präsentierten Labels haben.

Platzhalter sind nicht zugänglich

Das placeholder-Attribut erlaubt es Ihnen, Text zu spezifizieren, der innerhalb des <input>-Elements Inhalt angezeigt wird, wenn es leer ist. Der Platzhalter sollte niemals erforderlich sein, um Ihre Formulare zu verstehen. Er ist kein Label und sollte nicht als Ersatz verwendet werden, weil er es nicht ist. Der Platzhalter wird verwendet, um einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht als Erklärung oder Aufforderung.

Nicht nur ist der Platzhalter für Bildschirmleser nicht zugänglich, sondern er verschwindet auch, sobald der Benutzer irgendeinen Text in das Steuerungselement eingegeben hat, oder wenn das Steuerungselement bereits einen Wert hat. Browser mit automatischen Seitenübersetzungsfunktionen könnten Attribute beim Übersetzen überspringen, was bedeutet, dass der placeholder möglicherweise nicht übersetzt wird.

Zusätzlich zur Verwendung von CSS, um Eingaben basierend auf den :valid oder :invalid UI-Zuständen basierend auf dem aktuellen Zustand jeder Eingabe zu stylen, wie im Abschnitt über UI-Pseudoklassen oben erwähnt, bietet der Browser eine Client-seitige Validierung bei (versuchter) Formularübermittlung. Bei der Übermittlung des Formulars, wenn es ein Formularsteuerungselement gibt, das die Einschränkungsvalidierung nicht besteht, zeigt der unterstützende Browser eine Fehlermeldung bei dem ersten ungültigen Formularsteuerelement an; entweder eine Standardmeldung basierend auf dem Fehlerart oder eine von Ihnen gesetzte Nachricht.

Einige Eingabetypen und andere Attribute legen fest, welche Werte für eine bestimmte Eingabe gültig sind. Zum Beispiel bedeutet <input type="number" min="2" max="10" step="2">, dass nur die Zahlen 2, 4, 6, 8 oder 10 gültig sind. Es könnten mehrere Fehler auftreten, einschließlich eines rangeUnderflow-Fehlers, wenn der Wert kleiner als 2 ist, rangeOverflow wenn er größer als 10 ist, stepMismatch wenn der Wert eine Zahl zwischen 2 und 10 ist, aber keine gerade ganze Zahl ist (entspricht nicht den Anforderungen des step-Attributs), oder typeMismatch wenn der Wert keine Zahl ist.

Für die Eingabetypen, deren Bereich an möglichen Werten periodisch ist (d.h. dass die Werte bei dem größten möglichen Wert zurück zum Anfang und nicht enden), ist es möglich, dass die Werte der max und min Eigenschaften umgekehrt werden, was darauf hinweist, dass der Bereich der zulässigen Werte bei min beginnt, sich um den kleinsten möglichen Wert erweitert und dann weitergeht bis max erreicht ist. Dies ist besonders nützlich für Datum- und Uhrzeiten, wie zum Beispiel, wenn Sie möchten, dass der Bereich von 20:00 Uhr bis 8:00 Uhr reicht:

<input type="time" min="20:00" max="08:00" name="overnight" />

Bestimmte Attribute und ihre Werte können zu einem speziellen ValidityState-Fehler führen:

Wenn eine Formularsteuerung nicht das required-Attribut hat, kein Wert oder ein leerer String, ist dies nicht ungültig. Selbst wenn die oben genannten Attribute vorhanden sind, mit Ausnahme von required, führt ein leerer String nicht zu einem Fehler.

Wir können Grenzen für akzeptierte Werte festlegen, und unterstützende Browser werden diese Formularwerte nativ validieren und den Benutzer alarmieren, wenn beim Übermitteln des Formulars ein Fehler vorliegt.

Zusätzlich zu den in der Tabelle oben beschriebenen Fehlern enthält das validityState-Interface die booleschen, nur lesbaren Eigenschaften badInput, valid, und customError. Das Validitätsobjekt enthält:

• validityState.valueMissing
• validityState.typeMismatch
• validityState.patternMismatch
• validityState.tooLong
• validityState.tooShort
• validityState.rangeUnderflow
• validityState.rangeOverflow
• validityState.stepMismatch
• validityState.badInput
• validityState.valid
• validityState.customError

Für jede dieser booleschen Eigenschaften zeigt ein Wert von true an, dass der angegebene Grund für das mögliches Validierungsversagen zutrifft, mit Ausnahme der valid-Eigenschaft, die true ist, wenn der Wert des Elements alle Einschränkungen einhält.

Wenn es einen Fehler gibt, alarmieren unterstützende Browser sowohl den Benutzer als auch verhindern, dass das Formular übermittelt wird. Ein Wort der Vorsicht: Wenn ein benutzerdefinierter Fehler auf einen truthy-Wert gesetzt wird (alles andere als der leere String oder null), wird das Formular nicht abgeschickt. Wenn es keine benutzerdefinierte Fehlermeldung gibt, und keine der anderen Eigenschaften true zurückgibt, wird valid true sein, und das Formular kann übermittelt werden.

function validate(input) {
  let validityState_object = input.validity;
  if (validityState_object.valueMissing) {
    input.setCustomValidity("A value is required");
  } else if (validityState_object.rangeUnderflow) {
    input.setCustomValidity("Your value is too low");
  } else if (validityState_object.rangeOverflow) {
    input.setCustomValidity("Your value is too high");
  } else {
    input.setCustomValidity("");
  }
}

Die letzte Zeile, die die benutzerdefinierte Validitätsmeldung auf den leeren String setzt, ist wichtig. Wenn der Benutzer einen Fehler macht und die Validität gesetzt ist, wird es nicht übermittelt, selbst wenn alle Werte gültig sind, bis die Nachricht null ist.

Beispiel für benutzerdefinierte Validierungsfehler

Wenn Sie eine benutzerdefinierte Fehlermeldung anzeigen möchten, wenn ein Feld die Validierung nicht besteht, müssen Sie die Constraint Validation API verwenden, die auf <input> (und verwandten) Elementen verfügbar ist. Nehmen Sie das folgende Formular:

<form>
  <label for="name">Enter username (upper and lowercase letters): </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
  <button>Submit</button>
</form>

Die grundlegenden HTML-Formularvalidierungsfunktionen führen dazu, dass dies eine Standardfehlermeldung erzeugt, wenn Sie versuchen, das Formular mit entweder keinem gültigen ausgefüllten Feld oder einem Wert, der nicht dem pattern entspricht, abzusenden.

Wenn Sie stattdessen benutzerdefinierte Fehlermeldungen anzeigen möchten, könnten Sie JavaScript wie das folgende verwenden:

const nameInput = document.querySelector("input");

nameInput.addEventListener("input", () => {
  nameInput.setCustomValidity("");
  nameInput.checkValidity();
});

nameInput.addEventListener("invalid", () => {
  if (nameInput.value === "") {
    nameInput.setCustomValidity("Enter your username!");
  } else {
    nameInput.setCustomValidity(
      "Usernames can only contain upper and lowercase letters. Try again!",
    );
  }
});

Das Beispiel wird wie folgt dargestellt:

Kurz gesagt:

• Wir überprüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sein Wert sich ändert, indem wir die checkValidity()-Methode über den input-Ereignishandler ausführen.
• Wenn der Wert ungültig ist, wird ein invalid-Ereignis ausgelöst und die invalid-Ereignishandlungsfunktion wird ausgeführt. Innerhalb dieser Funktion bestimmen wir mittels einer if ()-Anweisung, ob der Wert ungültig ist, weil er leer ist oder weil er dem pattern nicht entspricht, und setzen eine benutzerdefinierte Validitätsfehlermeldung.
• Infolgedessen wird beim Drücken des Absende-Buttons, falls der Eingabewert ungültig ist, eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Wenn er gültig ist, wird er wie erwartet übermittelt. Damit dies geschehen kann, muss die benutzerdefinierte Validierung aufgehoben werden, indem setCustomValidity() mit einem leeren Zeichenkettenwert aufgerufen wird. Deshalb tun wir dies jedes Mal, wenn das input-Ereignis ausgelöst wird. Wenn Sie dies nicht tun und eine benutzerdefinierte Validität vorher gesetzt wurde, wird die Eingabe als ungültig registriert, auch wenn sie bei der Übermittlung einen gültigen Wert enthält.

Die erlaubten Eingaben für bestimmte <input>-Typen hängen von der Lokale ab. In einigen Lokalen ist 1,000.00 eine gültige Zahl, während in anderen Lokalen die gültige Art, diese Zahl einzugeben, 1.000,00 ist.

Firefox verwendet die folgenden Heuristiken, um die Lokale zu bestimmen, um die Eingabe des Benutzers zu validieren (zumindest für type="number"):

• Versuchen Sie die Sprache, die durch ein lang/xml:lang-Attribut auf dem Element oder einem seiner Elternteile angegeben ist.
• Versuchen Sie die Sprache, die durch einen Content-Language-HTTP-Header angegeben ist. Oder,
• Wenn keine angegeben ist, verwenden Sie die Lokale des Browsers.

Beim Hinzufügen von Eingaben ist es eine Zugänglichkeitsanforderung, Labels hinzuzufügen. Dies ist erforderlich, damit diejenigen, die unterstützende Technologien verwenden, wissen, wofür die Eingabe bestimmt ist. Auch das Klicken oder Antippen eines Labels fokussiert das damit verbundene Formulareingabeelement. Dies verbessert die Zugänglichkeit und Benutzerfreundlichkeit für sehende Benutzer, da es den Bereich vergrößert, den ein Benutzer anklicken oder antippen kann, um das Formulareingabeelement zu aktivieren. Dies ist besonders nützlich (und sogar erforderlich) für Radiobuttons und Kontrollkästchen, die sehr klein sind. Für weitere Informationen zu Labels im Allgemeinen, siehe Labels.

Das folgende ist ein Beispiel dafür, wie das <label> mit einem <input>-Element im obigen Stil verknüpft wird. Sie müssen dem <input> ein id-Attribut geben. Das <label> benötigt dann ein for-Attribut, dessen Wert derselbe wie der des id des Inputs ist.

<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas" />

Interaktive Elemente wie Formulareingaben sollten einen Bereich bieten, der groß genug ist, um leicht aktiviert zu werden. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Kontrollproblemen und Menschen, die unpräzise Eingabemethoden wie einen Stift oder Finger verwenden. Eine Mindestinteraktionsgröße von 44×44 CSS-Pixeln wird empfohlen.

• Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
• Target Size and 2.5.5 | Adrian Roselli
• Quick test: Large touch targets - The A11Y Project

• Formulareinschränkung Validierung
• Ihr erstes HTML-Formular
• Wie man ein HTML-Formular strukturiert
• Die nativen Formular-Widgets
• Senden von Formulardaten
• Formulardatenvalidierung
• Wie man benutzerdefinierte Formular-Widgets baut
• HTML-Formulare in älteren Browsern
• Stil von HTML-Formularen
• Erweiterte Stile für HTML-Formulare
• Erstellung von vertikalen Formularsteuerungen