<input>: Das HTML Input-Element

Wie ein <input> funktioniert, variiert erheblich abhängig vom Wert des type Attributs, daher werden die verschiedenen Typen in eigenen separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben ist, wird der Standardtyp text übernommen.

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 mächtig aufgrund seiner Attribute; das type Attribut, das oben mit Beispielen beschrieben wurde, ist das wichtigste. Da jedes <input> Element, unabhängig vom Typ, auf der HTMLInputElement Schnittstelle basiert, teilen sie technisch das exakt gleiche Set an Attributen. In der Realität haben jedoch die meisten Attribute nur eine Wirkung auf ein bestimmtes Unterset von Eingabetypen. Darüber hinaus hängt die Weise, wie einige Attribute eine Eingabe beeinflussen, vom Eingabetyp ab, und beeinflusst unterschiedliche 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 im Detail beschreibt und mit welchen Eingabetypen sie verbunden sind. Diejenigen, die für die meisten oder alle Eingabetypen üblich sind, werden detaillierter unten definiert. Attribute, die einzigartig für bestimmte Eingabetypen sind—oder Attribute, die zwar für alle Eingabetypen üblich sind, aber besondere Verhaltensweisen haben, wenn sie auf einem bestimmten Eingabetyp verwendet werden—werden stattdessen auf den Seiten dieser Typen dokumentiert.

Zu den Attributen des <input> Elements gehören die globalen HTML-Attribute und zusätzlich:

Einige zusätzliche nicht standardisierte Attribute sind nach den Beschreibungen der Standardattribute aufgelistet.

accept

Gültig nur für den file Eingabetyp, das accept Attribut definiert, welche Dateitypen in einem file Upload-Steuerelement ausgewählt werden können. Siehe den file Eingabetyp.

alt

Gültig nur für den image Knopf, das alt Attribut liefert alternativen Text für das Bild, der den Wert des Attributs anzeigt, wenn das Bild src fehlt oder sonst fehlschlägt. Siehe den image Eingabetyp.

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und wenn ja, auf welche Weise. Siehe die autocapitalize globale Attributseite für weitere Informationen.

autocomplete

(Kein Boolesches Attribut!) Das autocomplete Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenfolge an, die beschreibt, welche (falls vorhanden) Art der Autovervollständigungsfunktion die Eingabe bereitstellen soll. Eine typische Implementierung der Autovervollständigung ruft zuvor in demselben Eingabefeld eingegebene Werte ab, aber es können auch komplexere Formen der Autovervollständigung existieren. Zum Beispiel könnte ein Browser in der Lage sein, mit der Kontaktliste eines Geräts zu interagieren, um email Adressen in einem E-Mail-Eingabefeld automatisch zu vervollständigen. Siehe autocomplete für erlaubte Werte.

Das autocomplete Attribut ist gültig für 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, es ist für alle Eingabetypen gültig außer checkbox, radio, file, oder eines der Schaltflächentypen.

Siehe das autocomplete Attribut für zusätzliche Informationen, einschließlich Informationen zur Passwortsicherheit und wie autocomplete für hidden etwas anders funktioniert als für andere Eingabetypen.

autofocus

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

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

Nicht mehr als ein Element im Dokument darf das autofocus Attribut haben. Wenn es auf mehr als ein Element gesetzt wird, erhält das erste Element mit diesem Attribut den Fokus.

Das autofocus Attribut kann nicht auf Eingaben des Typs hidden verwendet werden, da versteckte Eingaben nicht fokussierbar sind.

Warnung: Automatisches Fokussieren eines Formularsteuerelements kann sehbehinderte Nutzer, die Bildschirmlesetechnologie verwenden, und Menschen mit kognitiven Beeinträchtigungen verwirren. Wenn autofocus zugewiesen ist, "teleportieren" Bildschirmleser ihre Benutzer ohne vorherige Warnung zum Formularsteuerelement.

Verwenden Sie das autofocus Attribut mit Bedacht auf Barrierefreiheit. Das automatische Fokussieren auf ein Steuerelement 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 Label des fokussierten Formularsteuerelements ankündigt, wird der Bildschirmleser nichts vor dem Label ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird den durch den vorhergehenden Inhalt geschaffenen Kontext ebenso verpassen.

capture

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

checked

Gültig für beide radio und checkbox Typen, checked ist ein boolesches Attribut. Wenn es auf einem radio Typ vorhanden ist, zeigt es an, dass das Optionsfeld das aktuell ausgewählte in der Gruppe der gleichnamigen Optionsfelder ist. Wenn es auf einem checkbox Typ vorhanden ist, zeigt es an, dass das Kontrollkästchen standardmäßig markiert ist (wenn die Seite geladen wird). Es zeigt nicht an, ob dieses Kontrollkästchen derzeit markiert ist: wenn sich der Zustand des Kontrollkästchens ändert, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das HTMLInputElement's checked IDL Attribut wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabesteuerelementen wird der Wert eines Kontrollkästchens und eines Optionsfeldes nur in die übermittelten Daten aufgenommen, wenn sie derzeit checked sind. Wenn dies der Fall ist, werden der Name und die Wert(e) der markierten Steuerelemente übermittelt.

Wenn beispielsweise ein Kontrollkästchen, dessen name fruit ist, einen value von cherry hat und das Kontrollkästchen markiert ist, enthalten die übermittelten Formulardaten fruit=cherry. Wenn das Kontrollkästchen nicht aktiv ist, wird es überhaupt nicht in den Formulardaten aufgeführt. Der Standard value für Kontrollkästchen und Optionsfelder ist on.

dirname

Gültig für hidden, text, search, url, tel und email Eingabetypen, das dirname Attribut ermöglicht die Übermittlung der Richtung des Elements. Wenn es enthalten ist, wird das Formularsteuerelement 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 gesetzt.

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, bewirkt die Eingabe sowohl das name / value Paar von fruit=cherry als auch das dirname / Richtungs-Paar von fruit-dir=ltr. Für weitere Informationen siehe das dirname Attribut.

disabled

Ein boolesches Attribut, das, wenn vorhanden, angibt, dass der Benutzer nicht mit der Eingabe interagieren können sollte. Deaktivierte Eingaben werden typischerweise mit einer gedimmteren Farbe oder durch eine andere Form der Anzeige, dass das Feld nicht verfügbar ist, gerendert.

Insbesondere erhalten deaktivierte Eingaben nicht das click Event und deaktivierte Eingaben werden nicht mit dem Formular übermittelt.

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

form

Eine Zeichenfolge, die das <form> Element angibt, mit dem die Eingabe verknüpft ist (d.h. ihr Formulareigentümer). Der Wert dieser Zeichenfolge, falls vorhanden, muss mit dem id eines <form> Elements im gleichen Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, wird das <input> Element dem nächstgelegenen enthaltenen Formular zugeordnet, falls vorhanden.

Das form Attribut ermöglicht es Ihnen, eine Eingabe irgendwo im Dokument zu platzieren, diese aber mit einem Formular an anderer Stelle im Dokument einzubeziehen.

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

formaction

Nur gültig für die image und submit Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen.

formenctype

Nur gültig für die image und submit Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen.

formmethod

Nur gültig für die image und submit Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen.

formnovalidate

Nur gültig für die image und submit Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen.

formtarget

Nur gültig für die image und submit Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen.

height

Nur gültig für den image Eingabetyp, height ist die Höhe der Bilddatei, die für die Darstellung des grafischen Übermittlungs-Knopfes angezeigt wird. Siehe den image Eingabetyp.

id

Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, definiert eine eindeutige Kennung (ID), die im gesamten Dokument eindeutig sein muss. Sein Zweck besteht darin, das Element beim Verlinken zu identifizieren. Der Wert wird als Wert des for Attributs des <label> genutzt, um das Label mit der Formularsteuerung zu verlinken. Siehe <label>.

inputmode

Globaler Wert, der für alle Elemente gültig ist, bietet einen Hinweis an Browser, welche Art von virtueller Tastaturkonfiguration verwendet werden soll, wenn dieses Element oder dessen Inhalte bearbeitet werden. Werte sind none, text, tel, url, email, numeric, decimal und search.

list

Der für das list Attribut gegebene Wert sollte die id eines <datalist> Elements im gleichen Dokument sein. Das <datalist> bietet eine Liste von vordefinierten Werten zum Vorschlagen für den Benutzer für diese Eingabe. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, sind nicht in den vorgeschlagenen Optionen enthalten. 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 für text, search, url, tel, email, date, month, week, time, datetime-local, number, range, und color.

Laut den Spezifikationen wird das list Attribut nicht von hidden, password, checkbox, radio, file, oder einem der Schaltflächentypen unterstützt.

Abhängig vom Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen, Markierungen entlang eines Bereichs oder sogar eine Eingabe sehen, die sich wie ein <select> öffnet, aber nicht aufgeführte Werte ermöglicht. Schauen Sie sich die Browser-Kompatibilitätstabelle für die anderen Eingabetypen an.

Siehe das <datalist> Element.

max

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

Es gibt einen speziellen Fall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der max Wert niedriger sein als der min Wert, was darauf hinweist, dass dieser Bereich sich umschlagen kann; dies ermöglicht es zum Beispiel, einen Zeitraum von 22:00 bis 04:00 Uhr zu spezifizieren.

maxlength

Gültig für text, search, url, tel, email, und password, definieren 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 kein maxlength angegeben ist oder ein ungültiger Wert angegeben ist, hat das Feld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe schlägt Constraint Validierung fehl, wenn die Länge des in das Feld eingegebenen Textes länger ist als maxlength UTF-16 Codeeinheiten. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als das maxlength Attribut erlaubt. Constraint Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Clientseitige Validierung für weitere Informationen.

min

Gültig für date, month, week, time, datetime-local, number, und range, definiert den niedrigsten Wert im Bereich der erlaubten Werte. Wenn der in das Element eingegebene value kleiner ist als dieser, schlägt das Element Constraint Validierung fehl. Wenn der Wert des min Attributs keine Zahl ist, dann hat das Element keinen Minimalwert.

Dieser Wert muss kleiner oder gleich dem Wert des max Attributs sein. Wenn das min Attribut vorhanden ist, aber nicht angegeben 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 durch das min Attribut erlaubte Minimum, wird die Constraint Validierung die Formularübermittlung verhindern. Siehe Clientseitige Validierung für weitere Informationen.

Es gibt einen speziellen Fall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der max Wert niedriger sein als der min Wert, was darauf hinweist, dass dieser Bereich sich umschlagen kann; dies ermöglicht es zum Beispiel, einen Zeitraum von 22:00 bis 04:00 Uhr zu spezifizieren.

minlength

Gültig für text, search, url, tel, email und password 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, kleiner oder gleich dem durch maxlength angegebenen Wert. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben ist, hat die Eingabe keine Mindestlänge.

Die Eingabe schlägt Constraint Validierung fehl, wenn die Länge des in das Feld eingegebenen Textes kürzer ist als minlength UTF-16 Codeeinheiten und verhindert die Formularübermittlung. Constraint Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Clientseitige Validierung für weitere Informationen.

multiple

Das boolesche multiple Attribut, wenn gesetzt, bedeutet, dass der Benutzer in der E-Mail-Widget komma-getrennte E-Mail-Adressen eingeben kann oder mehr als eine Datei mit der file Eingabe wählen kann. Siehe den email und file Eingabetyp.

name

Eine Zeichenfolge, die einen Namen für die Eingabesteuerung angibt. Dieser Name wird zusammen mit dem Wert der Steuerung übermittelt, wenn die Formulardaten übermittelt werden.

Betrachten Sie das name Attribut als obligatorisch (obwohl es nicht ist). Wenn eine Eingabe kein name angegeben hat oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular übermittelt! (Deaktivierte Steuerungen, nicht markierte Optionsfelder, nicht markierte Kontrollkästchen und Rücksetzknöpfe werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

1. _charset_ : Wenn als Name eines <input> Elements vom Typ hidden verwendet, wird der value der Eingabe automatisch vom User-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 erzeugt ein einzigartiges Verhalten für Optionsfelder.

Nur ein Optionsfeld in einer gleichnamigen Gruppe von Optionsfeldern kann auf einmal markiert werden. Wenn eines der Optionsfelder in dieser Gruppe ausgewählt wird, wird automatisch das derzeit ausgewählte Optionsfeld in derselben Gruppe abgewählt. Der Wert dieses “einen markierten Optionsfeldes” wird zusammen mit dem Namen übermittelt, wenn das Formular abgesendet wird.

Wenn Sie in eine Serie gleichnamiger Optionsfelder einsteigen, wenn eines davon markiert ist, wird das markierte den Fokus erhalten. Wenn sie nicht zusammen in der Quellreihenfolge sind, wenn eines der Gruppe markiert ist, beginnt das Einsteigen in die Gruppe, wenn das erste in der Gruppe erreicht wird und alle übersprungen werden, die nicht markiert sind. Anders ausgedrückt: Wenn eines markiert ist, überspringt die Neigung die nicht markierten Optionsfelder in der Gruppe. Wenn keine markiert sind, erhält die Optionsfeldgruppe den Fokus, wenn das erste Optionsfeld in der gleichnamigen Gruppe erreicht wird.

Sobald eines der Optionsfelder in der Gruppe den Fokus hat, wird durch Verwendung der Pfeiltasten durch alle Optionsfelder des gleichen Namens navigiert, selbst wenn die Optionsfelder in der Quellreihenfolge nicht zusammen angeordnet sind.

Wenn ein Eingabeelement einen name erhält, wird dieser Name eine Eigenschaft des übergeordneten Formularelements HTMLFormElement.elements. Wenn Sie eine Eingabe haben, deren name auf guest und eine andere auf hat-size gesetzt ist, 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 und hatSize das Objekt für das hat-size Feld sein.

Warnung: Vermeiden Sie es, Formularelementen einen name zu geben, der einer integrierten Methode oder Eigenschaft des Formulars entspricht, da Sie dann die vordefinierte Eigenschaft oder Methode mit diesem Verweis auf das entsprechende Eingabefeld überschreiben würden.

pattern

Gültig für text, search, url, tel, email, und password, das pattern Attribut wird verwendet, um einen regulären Ausdruck zu erstellen, den der value der Eingabe entsprechen muss, damit der Wert die Constraint Validierung 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. Keine Schrägstriche sollten um den Mustertest herum angegeben werden. Beim Erstellen des regulären Ausdrucks:

1. wird das Muster implizit mit ^(?: und )$ umschlossen, sodass das Match gegen den gesamten Eingabewert erforderlich ist, d.h. ^(?:<pattern>)$.
2. wird das 'v' Flag angegeben, damit das Muster als eine Sequenz von Unicode-Codepunkten interpretiert wird, anstatt als ASCII.

Wenn das pattern Attribut vorhanden ist, aber nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut wird vollständig ignoriert. Wenn das Pattern-Attribut gültig ist und ein nicht leerer Wert das Muster nicht trifft, verhindert die Constraint Validierung die Formularübermittlung. Wenn das multiple vorhanden ist, wird der erstellte reguläre Ausdruck mit jedem durch Kommas getrennten Wert verglichen.

Hinweis: Wenn das pattern Attribut verwendet wird, informieren Sie den Benutzer über das erwartete Format, indem Sie erläuternden Text in der Nähe hinzufügen. Sie können auch ein title Attribut hinzufügen, um zu erläutern, welche Anforderungen erfüllt sein müssen, um das Muster zu treffen; die meisten Browser zeigen diesen Titel als Tooltip an. Die sichtbare Erklärung ist erforderlich für Barrierefreiheit. Der Tooltip ist eine Verbesserung.

Siehe Clientseitige Validierung für weitere Informationen.

placeholder

Gültig für text, search, url, tel, email, password und number, das placeholder Attribut liefert einen kurzen Hinweis für den Benutzer, welche Art von Informationen in dem Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf die erwartete Art der Daten gibt, anstatt einer Erklärung oder Aufforderung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten. Beispielsweise könnte bei einem Feld, das den Vornamen eines Benutzers erfassen soll, und dessen Label „Vorname“ lautet, eine geeignete Platzhalterangabe „z.B., Mustafa“ sein.

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

popovertarget

Wandelt ein <input type="button"> Element in einen Popover-Steuerelement-Knopf um; nimmt die ID des Popover-Elements, das es steuern soll, als Wert. Siehe die Popover API Landing-Seite für weitere Einzelheiten. Die Etablierung einer Beziehung zwischen einem Popover und seinem Aufrufer-Knopf unter Verwendung des popovertarget Attributs hat zwei weitere nützliche Effekte:

• Der Browser erstellt eine implizite aria-details und aria-expanded Beziehung zwischen Popover und Aufrufer und platziert das Popover in einer logischen Position in der Tastatur-Fokusnavigationsreihenfolge, wenn es gezeigt wird. Dies macht das Popover für Tastatur- und Hilfstoolbenutzer (AT) besser zugänglich (siehe auch Popover Barrierefreiheitsmerkmale).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, die es sehr bequem macht, Popover relativ zu ihren Steuerungen mit CSS Ankerpositioning zu positionieren. Siehe Popover Ankerpositionierung für weitere Einzelheiten.

popovertargetaction

Gibt die auszuführende Aktion auf einem Popover-Element an, das von einem Steuerungselement <input type="button"> gesteuert wird. Mögliche Werte sind:

"hide"

Der Knopf wird ein gezeigtes Popover verbergen. Wenn Sie versuchen, ein bereits verborgenes Popover zu verbergen, wird keine Aktion vorgenommen.

"show"

Der Knopf wird ein verborgenes Popover zeigen. Wenn Sie versuchen, ein bereits gezeigtes Popover zu zeigen, wird keine Aktion vorgenommen.

"toggle"

Der Knopf wird ein Popover zwischen dem Status „anzeigen“ und „verbergen“ umschalten. Wenn das Popover verborgen ist, wird es gezeigt; wenn das Popover angezeigt wird, wird es verborgen. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die vom Steuerungsknopf ausgeführt wird.

readonly

Ein boolesches Attribut, das, wenn vorhanden, angibt, dass der Benutzer den Wert der Eingabe nicht ändern können sollte. 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 boolesches Attribut, das, wenn vorhanden, anzeigt, dass der Benutzer einen Wert für die Eingabe angeben muss, bevor das Besitzformular abgesendet werden kann. Das required Attribut wird von den text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, und file Eingabetypen unterstützt.

Siehe Clientseitige Validierung und das HTML Attribut: required für weitere Informationen.

size

Gültig für email, password, tel, url, und text, das size Attribut gibt an, wie viel der Eingabe angezeigt wird. Grundsätzlich ergibt es dasselbe Ergebnis wie das Setzen der CSS width Eigenschaft mit ein paar 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 ist es Pixel (oder px Einheiten). CSS width hat Vorrang vor dem size Attribut.

src

Nur gültig für den image Eingabeknopf, src ist eine Zeichenfolge, die die URL der Bilddatei angibt, die angezeigt werden soll, um den grafischen Übermittlungs-Knopf darzustellen. 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, der der Wert entsprechen muss.

Wenn nicht explizit enthalten:

• step hat standardmäßig den Wert 1 für number und range.
• Jeder Date- oder Zeiteingabetyp hat einen Standardwert für den step Wert, der für den Typ geeignet ist; siehe die einzelnen Eingabeseiten: date, datetime-local, month, time, und week.

Der Wert muss eine positive Zahl—ganzzahlig oder Gleitkomme—oder der spezielle Wert any sein, was bedeutet, dass kein Schritt impliziert ist und jeder Wert erlaubt ist (abgesehen von anderen Beschränkungen, wie min und max).

Wenn any nicht explizit gesetzt ist, sind gültige Werte für die number, date-/Zeiteingabetypen und range Eingabetypen gleich dem Basiswert für die Schrittweite—dem min Wert und Inkrementen des step Werts, bis zum max Wert, wenn angegeben.

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

Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht der Schrittweitekonfiguration entsprechen, wird der Wert bei der Constraint Validierung als ungültig betrachtet und wird die :invalid Pseudoklasse treffen.

Siehe Clientseitige Validierung für weitere Informationen.

tabindex

Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, ein ganzzahliges Attribut, das angibt, ob das Element den Eingabefokus erhalten kann (fokussierbar ist), ob es an sequentieller Tastaturnavigation teilnehmen sollte. Da alle Eingabetypen außer Eingaben des Typs hidden fokussierbar sind, sollte dieses Attribut nicht auf Formular-Steuerelementen verwendet werden, da dies eine Verwaltung der Fokusreihenfolge für alle Elemente im Dokument erfordern würde, mit dem Risiko, die Benutzerfreundlichkeit und Barrierefreiheit zu beeinträchtigen, wenn es falsch gemacht wird.

title

Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, enthält einen Text, der beratende Informationen darstellt, die sich auf das Element beziehen, zu dem es gehört. Solche Informationen können typischerweise, aber nicht notwendig, dem Benutzer als Tooltip präsentiert werden. Der Titel sollte NICHT als die primäre Erklärung des Zwecks der Formularsteuerung verwendet werden. Verwenden Sie stattdessen das <label> Element mit einem for Attribut, das auf das id der Formularsteuerung gesetzt ist. Siehe Labels unten.

type

Eine Zeichenfolge, die den Typ der Steuerung, die darzustellen ist, angibt. Beispielsweise wird für ein Kontrollkästchen ein Wert von checkbox verwendet. Wenn weggelassen (oder ein unbekannter Wert angegeben wird), wird der Eingabetyp text verwendet, wodurch ein Klartext-Eingabefeld erstellt wird.

Die erlaubten Werte sind in Eingabetypen oben aufgeführt.

value

Der Wert der Eingabesteuerung. Wenn im HTML angegeben, ist dies der Initialwert, und danach kann er jederzeit mittels JavaScript geändert oder abgerufen werden, indem auf die entsprechende HTMLInputElement Objekt value Eigenschaft zugegriffen wird. Das value Attribut ist immer optional, sollte aber als zwingend für checkbox, radio, und hidden betrachtet werden.

width

Nur gültig für den image Eingabeknopf, width ist die Breite der Bilddatei, die angezeigt werden soll, um den grafischen Übermittlungs-Knopf darzustellen. Siehe den image Eingabetyp.

Die folgenden nicht-standardisierten Attribute sind auch in einigen Browsern verfügbar. Als allgemeine Regel sollten Sie sie vermeiden, es sei denn, es lässt sich nicht vermeiden.

incremental Nicht standardisiert

Das Boolesche Attribut incremental ist eine WebKit und Blink Erweiterung (daher unterstützt von Safari, Opera, Chrome, etc.), die, wenn vorhanden, den User-Agent anweist, die Eingabe als Live-Suche zu verarbeiten. Während der Benutzer den Wert des Feldes bearbeitet, sendet der User-Agent search Events an das HTMLInputElement Objekt, das das Suchfeld repräsentiert. Dies erlaubt Ihrem Code, die Suchergebnisse in Echtzeit zu aktualisieren, während der Benutzer die Suche bearbeitet.

Wenn incremental nicht spezifiziert ist, wird das search Event nur gesendet, wenn der Benutzer explizit eine Suche initiiert (z.B. durch Drücken der Eingabetaste oder Rückstelltaste, während das Feld bearbeitet wird).

Das search Event ist ratengesteuert, so dass es nicht häufiger als in einem von der Implementierung definierten Intervall gesendet wird.

orient Nicht standardisiert

Ähnlich dem -moz-orient nicht-standard CSS Attribut, das die <progress> und <meter> Elemente betrifft, definiert das orient Attribut die Orientierung des Bereichsreglers. Werte sind horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, bei dem der Bereich vertikal gerendert wird. Siehe Erstellen von vertikalen Steuerelementen für einen modernen Ansatz zur Erstellung von vertikalen Steuerelementen.

results Nicht standardisiert

Das results Attribut—nur von Safari unterstützt—ist ein numerischer Wert, der Ihnen erlaubt, die maximale Anzahl von Einträgen, die im [Eingabe]-Element nativ bereitgestellten Dropdown-Menü von vorherigen Suchanfragen angezeigt werden, zu überschreiben.

Der Wert muss eine nicht-negative Dezimalzahl sein. Wenn nicht gegeben, oder ein ungültiger Wert gegeben wird, wird die Standardmaximalzahl der Einträge des Browsers verwendet.

webkitdirectory Nicht standardisiert

Das Boolean webkitdirectory Attribut, wenn vorhanden, gibt an, dass nur Verzeichnisse im Dateiauswahlinteface zur Auswahl für den Benutzer verfügbar sein sollen. Siehe HTMLInputElement.webkitdirectory für weitere Details und Beispiele.

Obwohl ursprünglich nur für WebKit-basierte Browser implementiert, ist webkitdirectory auch verwendbar in Microsoft Edge sowie in Firefox-Versionen 50 und später. Allerdings, obwohl es relativ breite Unterstützung hat, ist es immer noch nicht standardisiert und sollte nicht verwendet werden, es sei denn, es gibt keine alternative Möglichkeit.

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

checkValidity()

Gibt true zurück, wenn der Wert des Elements alle Gültigkeitsprüfungen besteht; andernfalls wird false zurückgegeben und ein invalid Event am Element ausgelöst.

reportValidity()

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

select()

Wählt den gesamten Inhalt des <input> Elements aus, wenn der Inhalt des Elements auswählbar ist. Für Elemente mit nicht auswählbarem Textinhalt (wie ein visueller Farbwähler oder ein Kalenderdatei-Eingabefeld) macht diese Methode nichts.

setCustomValidity()

Legt eine benutzerdefinierte Meldung fest, die angezeigt wird, wenn der Wert des Eingabeelements ungültig ist.

setRangeText()

Legt den Inhalt 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()

Wählt den angegebenen Bereich von Zeichen in einem Texteingabeelement aus. Macht nichts für Eingaben, die nicht als Texteingabefelder dargestellt werden.

showPicker()

Zeigt den Browser-Auswahldialog für das Eingabeelement, der normalerweise angezeigt werden würde, wenn das Element ausgewählt ist, jedoch durch einen Knopfdruck oder eine andere Benutzerinteraktion ausgelöst.

stepDown()

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

stepUp()

Inkrementiert den Wert einer numerischen Eingabe um eins oder um die angegebene Anzahl von Einheiten.

Inputs, die ersetzte Elemente sind, haben einige Merkmale, die nicht für Nicht-Formularelemente anwendbar sind. Es gibt CSS-Selektoren, die gezielt auf Formularelemente basieren auf ihren UI-Merkmalen abzielen können, auch bekannt als UI-Pseudoklassen. Das Eingabeelement kann auch nach Typ mit Attributselektoren gezielt angesprochen werden. Es gibt einige Eigenschaften, die ebenfalls besonders nützlich sind.

Pseudoklassen-Beispiel

Wir können ein Checkbox-Label 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 einer aktivierten Eingabe kommt. Wir haben keine Stile angewendet, wenn die 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 Formsteuerungen basierend auf ihrem type mit Attributselektoren anzusprechen. CSS-Attributselektoren passen zu Elementen basierend entweder nur auf das Vorhandensein eines Attributs oder den 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 Platzhaltertext als durchscheinend oder hellgrau. Das ::placeholder Pseudo-Element ist der placeholder Text der Eingabe. Es kann mit einem begrenzten Satz von CSS-Eigenschaften gestylt werden.

::placeholder {
  color: blue;
}

Nur der Teil der CSS-Eigenschaften, der auf das ::first-line Pseudo-Element angewendet werden kann, kann in einer Regel verwendet werden, die ::placeholder in ihrem Selektor verwendet.

Die appearance-Eigenschaft ermöglicht das Darstellen von (fast) jedem Element im plattform-nativen Stil basierend auf dem Thema des Betriebssystems sowie die Entfernung jeder plattform-nativen Gestaltung mit dem Wert none.

Sie könnten 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 plattform-native Rahmen, aber nicht die Funktionalität.

Eine speziell für Text-Eingabebezogene Elemente spezifische Eigenschaft ist die CSS caret-color-Eigenschaft, mit der Sie die Farbe festlegen können, die zum Zeichnen des Texteingabe-Cursors verwendet wird:

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 es Ihnen, das Größenverhalten von Formulareingaben zu kontrollieren (d.h. sie erhalten standardmäßig eine vorgesehene Größe). Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben, damit sich Formsteuerungen in ihrer Größe anpassen, um ihren Inhalt anzupassen.

Diese Eigenschaft wird typischerweise verwendet, um Eingabefelder zu erstellen, die ihren Inhalt umschließen 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 Schnittstellen) ist das <input>-Element ein ersetztes Element. Wenn dies der Fall ist, können die Position und Größe des Elements und seine Positionierung innerhalb seines Rahmens mit den CSS-Eigenschaften object-position und object-fit angepasst werden.

Für weitere Informationen über das Hinzufügen von Farben zu Elementen in HTML, siehe:

• Farbe auf HTML-Elemente mit CSS anwenden.

Siehe auch:

• Styling von HTML-Formularen
• Fortgeschrittenes Styling für HTML-Formulare

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

Zugehörige Labels

Die semantische Paarung von <input>- und <label>-Elementen ist nützlich für unterstützende Technologien wie Bildschirmleseprogramme. Indem sie mit dem for-Attribut des <label> gepaart werden, verknüpfen Sie das Label mit der Eingabe in einer Art und Weise, die es Bildschirmleseprogrammen ermöglicht, Eingaben genauer zu beschreiben.

Es reicht nicht aus, einfachen Text neben dem <input>-Element zu haben. Vielmehr erfordern Benutzerfreundlichkeit und Barrierefreiheit die Einbeziehung entweder eines 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 barrierefrei: Es gibt keine Beziehung zwischen der Eingabeaufforderung und dem <input>-Element.

Zusätzlich zu einem zugänglichen Namen bietet das Label eine größere „Trefferfläche“ für Maus- und Touchscreen-Nutzer, auf die sie klicken oder tippen können. Indem ein <label> mit einem <input> verbunden wird, fokussiert das Klicken auf eines der beiden die Eingabe. Wenn Sie einfachen Text verwenden, um Ihre Eingabe zu beschriften, wird dies nicht geschehen. Das Teil der Aktivierungsfläche für die Eingabe beeinträchtigt Menschen mit motorischen Störungen positiv.

Als Webentwickler ist es wichtig, dass wir niemals davon ausgehen, dass Menschen alle Dinge wissen, die wir wissen. Die Vielfalt der Menschen, die das Web nutzen – und daher auch Ihre Website – garantiert praktisch, dass einige Besucher Ihrer Website einige Variationen in Denkprozessen und/oder Umständen haben, die sie dazu führen, Ihre Formulare anders zu interpretieren als Sie, ohne klare und korrekt präsentierte Labels.

Platzhalter sind nicht barrierefrei

Das placeholder-Attribut ermöglicht es Ihnen, Text anzugeben, der innerhalb des Inhaltsbereichs des <input>-Elements erscheint, wenn dieser leer ist. Der Platzhalter sollte niemals erforderlich sein, um Ihre Formulare zu verstehen. Es ist kein Label und sollte nicht als Ersatz verwendet werden, weil es keins ist. Der Platzhalter wird dazu verwendet, einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht als Erklärung oder Aufforderung.

Der Platzhalter ist nicht nur für Bildschirmleseprogramme unzugänglich, sondern verschwindet auch, sobald der Benutzer Text in die Formularsteuerung eingibt oder die Formularsteuerung bereits einen Wert hat. Browser mit automatischen Seitenübersetzungsfunktionen können Attribute beim Übersetzen ignorieren, was bedeutet, dass der placeholder möglicherweise nicht übersetzt wird.

Neben der Verwendung von CSS, um Eingaben basierend auf dem aktuellen Zustand der :valid- oder :invalid-UI-Zustände zu gestalten, wie im Abschnitt UI-Pseudoklassen oben erwähnt, bietet der Browser eine Client-seitige Validierung bei (beabsichtigter) Formularübermittlung. Bei der Formularübermittlung, falls eine Formularsteuerung die Validierungseinschränkungen nicht besteht, zeigt der unterstützende Browser eine Fehlermeldung auf der ersten ungültigen Formularsteuerung an; entweder wird eine Standardfehlermeldung basierend auf dem Fehlertyp angezeigt oder eine durch Sie festgelegte Nachricht.

Einige Eingabetypen und andere Attribute legen Einschränkungen fest, welche Werte für eine bestimmte Eingabe gültig sind. Zum Beispiel bedeutet <input type="number" min="2" max="10" step="2"> nur die Zahlen 2, 4, 6, 8 oder 10 sind gültig. Mehrere Fehler können auftreten, wie z.B. ein rangeUnderflow-Fehler, wenn der Wert kleiner als 2 ist, rangeOverflow, wenn er größer als 10 ist, stepMismatch, falls der Wert eine Zahl zwischen 2 und 10 ist, jedoch keine gerade ganze Zahl (entspricht nicht den Anforderungen des step-Attributs), oder typeMismatch, wenn der Wert keine Zahl ist.

Für die Eingabetypen, deren Wertebereich periodisch ist (d.h. bei einem maximalen möglichen Wert die Werte wieder am Anfang beginnen, anstatt zu enden), ist es möglich, dass die Werte der max- und min-Eigenschaften umgekehrt werden, was darauf hinweist, dass der Bereich der erlaubten Werte bei min beginnt, auf den niedrigsten möglichen Wert zurückgeht und dann weiter fortsetzt, bis max erreicht ist. Dies ist besonders nützlich für Datumsangaben und Zeiten, z.B. wenn man den Bereich von 20:00 bis 8:00 Uhr zulassen möchte:

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

Spezifische Attribute und deren Werte können zu einem bestimmten ValidityState-Fehler führen:

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

Wir können Grenzen festlegen, was wir akzeptieren, und unterstützende Browser validieren diese Formularwerte nativ und benachrichtigen den Benutzer über einen Fehler, wenn das Formular abgesendet wird.

Zusätzlich zu den in der Tabelle oben beschriebenen Fehlern enthält das validityState-Interface die booleschen schreibgeschützten Eigenschaften badInput, valid und customError. Das Gültigkeitsobjekt umfasst:

• 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 gibt ein Wert von true an, dass der angegebene Grund für das Scheitern der Validierung wahr ist, mit Ausnahme der valid-Eigenschaft, die true ist, wenn der Wert des Elements allen Einschränkungen gehorcht.

Wenn ein Fehler vorliegt, warnen unterstützende Browser den Benutzer und verhindern die Übermittlung des Formulars. Ein Wort der Vorsicht: Wenn ein benutzerdefinierter Fehler auf einen wahrheitsgemäßen Wert gesetzt ist (etwas anderes als der leere String oder null), wird das Absenden des Formulars verhindert. Wenn es keine benutzerdefinierte Fehlermeldung gibt und keine der anderen Eigenschaften true zurückgeben, wird valid true sein und das Formular kann abgesendet 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 Gültigkeitsmeldung auf den leeren String setzt, ist von entscheidender Bedeutung. Wenn der Benutzer einen Fehler macht und die Gültigkeit festgelegt ist, wird es sich nicht senden lassen, 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 Eingabe oder einem Wert abzusenden, der nicht dem pattern entspricht.

Wenn Sie stattdessen benutzerdefinierte Fehlermeldungen anzeigen möchten, könnten Sie JavaScript wie folgt 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 so gerendert:

Kurz gesagt:

• Wir überprüfen den gültigen Zustand des Eingabeelements, jedes Mal, wenn sich sein Wert ä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-Ereignishandlerfunktion wird ausgeführt. In dieser Funktion ermitteln wir, ob der Wert ungültig ist, weil er leer ist, oder weil er das Muster nicht erfüllt, indem wir einen if ()-Block verwenden und eine benutzerdefinierte Gültigkeitsfehlermeldung setzen.
• Dadurch wird, wenn der Eingabewert ungültig ist, wenn die Sende-Taste gedrückt wird, eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Wenn er gültig ist, wird er so gesendet, wie Sie es erwarten. Dazu muss die benutzerdefinierte Gültigkeit abgebrochen werden, indem setCustomValidity() mit einem leeren String-Wert aufgerufen wird. Wir machen das daher jedes Mal, wenn das input-Ereignis ausgelöst wird. Wenn Sie das nicht tun und vorher eine benutzerdefinierte Gültigkeit festgelegt wurde, wird die Eingabe als ungültig registriert, auch wenn sie bei der Übermittlung derzeit einen gültigen Wert enthält.

Die zulässigen Eingaben für bestimmte <input>-Typen hängen von der Spracheinstellung ab. In einigen Regionen ist 1.000,00 eine gültige Zahl, während in anderen Regionen die gültige Möglichkeit, diese Zahl einzugeben, 1.000,00 ist.

Firefox verwendet die folgenden Heuristiken, um die Sprache zur Validierung der Benutzereingabe zu bestimmen (zumindest für type="number"):

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

Beim Einfügen von Eingaben ist es erforderlich, Labels hinzuzufügen. Dies ist notwendig, damit Nutzer, die unterstützende Technologien verwenden, wissen, wofür die Eingabe ist. Außerdem gibt das Klicken oder Berühren eines Labels dem Label zugeordneten Formularelement den Fokus. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für sehende Benutzer, erhöht den Bereich, den ein Benutzer klicken oder berühren kann, um das Formularelement zu aktivieren. Dies ist besonders nützlich (und sogar notwendig) für Radiobuttons und Checkboxen, die winzig sind. Weitere Informationen zu Labels im Allgemeinen finden Sie unter Labels.

Das Folgende ist ein Beispiel dafür, wie Sie das <label> mit einem <input>-Element in dem oben genannten Stil verknüpfen. Sie müssen dem <input> ein id-Attribut geben. Das <label> benötigt dann ein for-Attribut, dessen Wert der gleiche ist wie der id des Eingabefeldes.

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

Interaktive Elemente wie Formulareingaben sollten einen ausreichend großen Bereich bieten, damit sie leicht aktiviert werden können. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Kontrollproblemen und Menschen, die ungenaue Formen der Eingabe verwenden, wie einen Stift oder Finger. Eine Mindestinteraktivgröße von 44×44 [CSS-Pixel]((https://w3c.github.io/wcag/guidelines/22/#dfn-css-pixels) wird empfohlen.

• Verstehen des Erfolgskriteriums 2.5.5: Zielgröße | W3C Verstehen der WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Berührungsziele - Das A11Y-Projekt

• Formularbeschränkungsvalidierung
• Ihr erstes HTML-Formular
• Anleitung zur Strukturierung eines HTML-Formulars
• Die nativen Formular-Widgets
• Formulardaten senden
• Formulardatenvalidierung
• Anleitung zum Erstellen benutzerdefinierter Formular-Widgets
• HTML-Formulare in älteren Browsern
• Styling von HTML-Formularen
• Fortgeschrittenes Styling für HTML-Formulare
• Erstellen Vertikaler Formsteuerungen