<input>: Das HTML Input-Element

Wie ein <input> funktioniert, variiert erheblich, je nach Wert seines type-Attributs. Daher werden die verschiedenen Typen auf ihren eigenen separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben ist, wird standardmäßig der Typ 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 leistungsfähig wegen seiner Attribute; das type-Attribut, oben mit Beispielen beschrieben, ist das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-Schnittstelle basiert, teilen sie sich technisch denselben Satz von Attributen. In der Realität wirken sich jedoch die meisten Attribute nur auf eine bestimmte Untermenge von Eingabetypen aus. Darüber hinaus hängt die Art und Weise, wie einige Attribute eine Eingabe beeinflussen, vom Eingabetyp ab und beeinflusst unterschiedliche Eingabetypen auf unterschiedliche Weise.

Dieser Abschnitt bietet eine Tabelle mit einer Liste von Attributen und einer kurzen Beschreibung. Auf diese Tabelle folgt eine Liste, die jedes Attribut im Detail beschreibt, zusammen mit den Eingabetypen, mit denen es verbunden ist. Diejenigen, die für die meisten oder alle Eingabetypen gemeinsam sind, werden im Folgenden ausführlicher definiert. Attribute, die für bestimmte Eingabetypen einzigartig sind – oder Attribute, die für alle Eingabetypen gemeinsam sind, aber ein spezielles Verhalten haben, wenn sie bei einem bestimmten Eingabetyp verwendet werden – sind stattdessen auf den Seiten dieser Typen dokumentiert.

Attribute für das <input>-Element umfassen die globalen HTML-Attribute und zusätzlich:

Einige zusätzliche nicht-standardmäßige Attribute werden nach den Beschreibungen der standardmäßigen Attribute aufgelistet.

accept

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

alt

Gültig nur für den image-Button, bietet das alt-Attribut alternativen Text für das Bild und zeigt den Wert des Attributs an, wenn das Bildsrc 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 des globalen Attributs autocapitalize.

autocomplete

(Kein Boolean-Attribut!) Das autocomplete-Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenkette, die beschreibt, welcher Art von Autovervollständigungsfunktionalität die Eingabe bereitstellen soll, wenn überhaupt. Eine typische Implementierung der Autovervollständigung erinnert sich an zuvor eingegebene Werte im selben Eingabefeld, aber komplexere Formen der Autovervollständigung können existieren. Zum Beispiel könnte ein Browser mit der Kontaktliste eines Geräts integriert werden, um email-Adressen in einem E-Mail-Eingabefeld zu vervollständigen. Siehe autocomplete für erlaubte Werte.

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

Weitere Informationen, einschließlich Informationen zu Passwortsicherheit und wie autocomplete bei hidden leicht anders als bei anderen Eingabetypen ist, finden Sie unter autocomplete attribute.

autofocus

Ein Boolean-Attribut, welches, falls vorhanden, angibt, dass das Eingabefeld automatisch den Fokus erhalten soll, nachdem die Seite geladen wurde (oder wenn das <dialog>-Element angezeigt wurde).

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

Nicht mehr als ein Element im Dokument darf das autofocus-Attribut haben. Wenn es auf mehr als einem Element platziert ist, erhält das erste mit dem Attribut den Fokus.

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

Warnung: Das automatische Fokussieren eines Formularsteuerelements kann visuell eingeschränkte Menschen, die Bildschirmlesetechnologie verwenden, und Menschen mit kognitiven Beeinträchtigungen verwirren. Wenn autofocus zugewiesen ist, "teleportieren" Bildschirmleser ihren Benutzer ohne vorherige Warnung zu dem Formularsteuerelement.

Verwenden Sie das autofocus-Attribut unter Berücksichtigung der Barrierefreiheit. Automatisches Fokussieren auf ein Steuerelement kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann auch dynamische Tastaturen auf einigen Touch-Geräten anzeigen. Während ein Bildschirmlesegerät das Label des Formularsteuerelements mit Fokus ankündigen wird, wird es vor dem Label nichts ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird genauso den Kontext durch den vorhergehenden Inhalt verpassen.

capture

Eingeführt in der HTML Media Capture-Spezifikation und nur für den file-Eingabetyp gültig, definiert das capture-Attribut, welches Medium—Mikrofon, Video oder Kamera—verwendet werden soll, um eine neue Datei für den Upload mit file-Upload-Steuerelement in unterstützenden Szenarien zu erfassen. Siehe den file-Eingabetyp.

checked

Gültig für sowohl radio- als auch checkbox-Typen, ist checked ein Boolean-Attribut. Falls bei einem radio-Typ vorhanden, gibt es an, dass der Optionsknopf der aktuell ausgewählte in der Gruppe von gleichnamigen Radio-Buttons ist. Falls bei einem checkbox-Typ vorhanden, gibt es an, dass das Kontrollkästchen standardmäßig aktiviert ist (wenn die Seite lädt). Es gibt nicht an, ob dieses Kontrollkästchen aktuell aktiviert ist: wenn der Zustand des Kontrollkästchens geändert wird, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das HTMLInputElement's checked IDL-Attribut wird aktualisiert.)

Hinweis: Anders als andere Eingabesteuerungen, werden ein Kontrollkästchen und Radio-Buttons-Werte nur in die übermittelten Daten einbezogen, wenn sie derzeit checked sind. Wenn sie es sind, werden der Name und die Wert(e) der aktivierten Steuerelemente übermittelt.

Zum Beispiel, wenn ein Kontrollkästchen, dessen name fruit ist, einen value von cherry hat und das Kontrollkästchen aktiviert ist, werden die übermittelten Formulardaten fruit=cherry beinhalten. Wenn das Kontrollkästchen nicht aktiv ist, wird es überhaupt nicht in den Formulardaten aufgeführt. Der Standardwert value für Kontrollkästchen und Radio-Buttons ist on.

dirname

Gültig für hidden, text, search, url, tel und email-Eingabetypen, ermöglicht das dirname-Attribut die Übermittlung der Richtungsangabe 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 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 obenstehende Formular übermittelt wird, wird die Eingabe sowohl das name / value-Paar fruit=cherry als auch das dirname / Richtungs-Paar fruit-dir=ltr senden. Für weitere Informationen siehe das dirname attribute.

disabled

Ein Boolean-Attribut, das, falls vorhanden, anzeigt, dass der Benutzer nicht mit der Eingabe interagieren können soll. Deaktivierte Eingaben werden typischerweise mit einer dunkleren Farbe oder in irgendeiner anderen Form angezeigt, die anzeigt, dass das Feld nicht zur Benutzung verfügbar ist.

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

Hinweis: Auch wenn es nicht von der Spezifikation gefordert wird, wird Firefox standardmäßig den dynamischen deaktivierten Status speichern eines <input> über Seitenladungen. 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 (d.h. sein Formularinhaber). Der Wert dieses Strings, falls vorhanden, muss mit der id eines <form>-Elements im selben Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben wird, ist das <input>-Element mit dem am nächsten gelegenen beinhaltenden Formular verknüpft, falls vorhanden.

Das form-Attribut ermöglicht es, eine Eingabe irgendwo im Dokument zu platzieren, aber sie mit einem Formular an einer anderen Stelle im Dokument einzuschließen.

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

formaction

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

formenctype

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

formmethod

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

formnovalidate

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

formtarget

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

height

Gültig nur für den image-Eingabe-Button, ist die height die Höhe der Bilddatei, die angezeigt werden soll, um den grafischen Senden-Button darzustellen. Siehe den image-Eingabetyp.

id

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, definiert eine eindeutige Kennung (ID), die im gesamten Dokument einzigartig sein muss. Sein Zweck ist die Identifizierung des Elements bei Verlinkungen. Der Wert wird als Wert der for-Eigenschaft des <label>-Elements verwendet, um das Label mit dem Formularsteuerelement zu verknüpfen. Siehe <label>.

inputmode

Globaler Wert, gültig für alle Elemente, gibt Hinweis an Browser, welche Art von virtueller Keyboard-Konfiguration bei der Bearbeitung dieses Elements oder seines Inhalts zu verwenden ist. Werte umfassen none, text, tel, url, email, numeric, decimal und search.

list

Der dem list-Attribut gegebene Wert sollte die id eines <datalist>-Elements im selben Dokument sein. Die <datalist> bietet eine Liste von vordefinierten Werten an, die dem Benutzer als Vorschläge für diese Eingabe angeboten werden. Alle in der Liste enthaltenen Werte, 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 bereitstellen.

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

Gemäß den Spezifikationen wird das list-Attribut nicht von den Typen hidden, password, checkbox, radio, file oder irgendeinem der Button-Typen unterstützt.

Abhängig vom Browser sieht der Benutzer möglicherweise eine benutzerdefinierte Farbpalette als Vorschlag, Taktmarken entlang eines Bereichs oder sogar eine Eingabe, die wie eine <select> öffnet, aber nicht gelistete Werte zulässt. 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, es definiert den größten Wert im Bereich der zulässigen Werte. Wenn der value, der in das Element eingegeben wird, diesen überschreitet, schlägt das Element bei der Beschränkungsprüfung 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 (zum Beispiel für Daten oder Zeiten), kann der Wert von max niedriger als der Wert von min sein, was anzeigt, dass der Bereich umlaufen darf; zum Beispiel ermöglicht dies, einen Zeitbereich von 22 Uhr bis 4 Uhr morgens festzulegen.

maxlength

Gültig für text, search, url, tel, email, und password, 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 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 wird bei der Beschränkungsprüfung fehlschlagen, wenn die Länge des Textes, der in das Feld eingegeben wird, länger als die maxlength UTF-16-Codeeinheiten ist. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als das maxlength-Attribut erlaubt. Die Beschränkungsprüfung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Weitere Informationen finden Sie unter Client-side validation.

min

Gültig für date, month, week, time, datetime-local, number und range, es definiert den geringsten Wert im Bereich der zulässigen Werte. Wenn der value, der in das Element eingegeben wird, weniger als das ist, schlägt das Element bei der Beschränkungsprüfung fehl. Wenn der min-Attributwert keine Zahl ist, hat das Element keinen Mindestwert.

Dieser Wert muss kleiner oder gleich dem des max-Attributs sein. Wenn das min-Attribut vorhanden ist, aber nicht angegeben oder ungültig ist, wird kein Mindeswert angewendet. Wenn das min-Attribut gültig ist und ein nicht leerer Wert niedriger ist als das Minimum, das durch min erlaubt ist, wird die Beschränkungsprüfung die Formularübermittlung verhindern. Weitere Informationen finden Sie unter Client-side validation.

Es gibt einen Sonderfall: wenn der Datentyp periodisch ist (zum Beispiel für Daten oder Zeiten), kann der Wert von max niedriger als der Wert von min sein, was anzeigt, dass der Bereich umlaufen darf; zum Beispiel ermöglicht dies, einen Zeitbereich von 22 Uhr bis 4 Uhr morgens festzulegen.

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, der kleiner oder gleich dem Wert von maxlength ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben ist, hat die Eingabe keine Mindestlänge.

Die Eingabe wird bei der Beschränkungsprüfung fehlschlagen, wenn die Länge des Textes, der in das Feld eingegeben wird, kürzer als minlength UTF-16 Codeeinheiten ist, wodurch die Formularübermittlung verhindert wird. Die Beschränkungsprüfung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Weitere Informationen finden Sie unter Client-side validation.

multiple

Das Boolean-Attribut multiple, falls gesetzt, bedeutet, dass der Benutzer Komma getrennte E-Mail-Adressen im E-Mail-Widget eingeben oder mehr als eine Datei mit der file-Eingabe auswählen kann. Sehen Sie den email und file Eingabetyp.

name

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

Betrachten Sie den name als ein erforderliches Attribut (auch wenn es nicht so ist). Wenn eine Eingabe kein angegebenes name hat oder das name leer ist, wird der Eingabewert nicht mit dem Formular übermittelt! (Deaktivierte Steuerelemente, nicht aktivierte Radio-Buttons, nicht aktivierte Kontrollkästchen und Reset-Buttons werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

1. _charset_ : Wenn es als Name eines <input>-Elements vom Typ hidden verwendet wird, wird der Eingabewert 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 Radio-Buttons.

Nur einer der Radio-Buttons in einer gleichnamigen Gruppe von Radio-Buttons kann gleichzeitig aktiviert werden. Das Auswählen eines der Radio-Buttons in dieser Gruppe deaktiviert automatisch alle aktuell ausgewählten Radio-Buttons in derselben Gruppe. Der Wert dieses einen aktivierten Radio-Buttons wird zusammen mit dem Namen übermittelt, wenn das Formular übermittelt wird.

Beim Wechseln in eine Serie von gleichnamigen Radio-Button-Gruppen, wenn einer aktiviert ist, erhält dieser den Fokus. Wenn sie in der Quellreihenfolge nicht zusammen gruppiert sind, wenn einer der Gruppe aktiviert ist, beginnt das Wechseln in die Gruppe, wenn der erste in der Gruppe erreicht wird und überspringt alle, die nicht aktiviert sind. Mit anderen Worten, wenn einer aktiviert ist, wird das Wechseln die nicht aktivierten Radio-Buttons in der Gruppe überspringen. Wenn keiner aktiviert ist, erhält die Radio-Button-Gruppe den Fokus, wenn der erste Button in der gleichnamigen Gruppe erreicht ist.

Sobald einer der Radio-Buttons in einer Gruppe den Fokus hat, navigieren die Pfeiltasten durch alle Radio-Buttons desselben Namens, selbst wenn die Radio-Buttons nicht in der Quellreihenfolge gruppiert sind.

Wenn ein Eingabefeld ein name zugewiesen bekommt, wird dieser zu einer Eigenschaft der HTMLFormElement.elements-Eigenschaft des Formular-Elements, dem es gehört. Wenn Sie eine Eingabe haben, deren name auf guest gesetzt ist und eine andere, deren name 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"];

Nachdem 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 Attribut des Formulars entspricht, da Sie dann das vordefinierte Attribut oder die Methode mit diesem Bezug auf das entsprechende Eingabefeld überschreiben würden.

pattern

Gültig für text, search, url, tel, email und password, wird das pattern-Attribut verwendet, um eine reguläre Ausdrücke zu erstellen, die value der Eingabe erfüllen muss, um die Beschränkungsprüfung zu bestehen. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er von der RegExp-Typ verwendet wird und wie in unserem Leitfaden für reguläre Ausdrücke dokumentiert. Es sollten keine Schrägstriche um den Mustertext angegeben werden. Beim Kompilieren des regulären Ausdrucks:

1. wird das Muster automatisch mit ^(?: und )$ umschlossen, sodass das Muster einen Match gegen den ganzen Eingabewert erfordert, d.h. ^(?:<pattern>)$.
2. wird das 'v'-Flag spezifiziert, sodass das Muster als Sequenz von Unicode-Kodepunkten behandelt 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 völlig ignoriert. Wenn das Muster-Attribut gültig ist und ein nicht leerer Wert nicht dem Muster entspricht, wird die Beschränkungsprüfung die Formularübermittlung verhindern. Wenn das multiple vorhanden ist, wird der kompilierte reguläre Ausdruck gegen jeden durch Komma getrennten Wert gematcht.

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

Weitere Informationen finden Sie unter Client-side validation.

placeholder

Gültig für text, search, url, tel, email, password und number, bietet das placeholder-Attribut einen kurzen Hinweis für den Benutzer, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf die erwartete Art der Daten bietet, anstatt eine Erklärung oder Eingabeaufforderung. Der Text darf nicht Wagenrückläufe oder Zeilenvorschübe enthalten. Wenn zum Beispiel ein Feld erwartet, den Vornamen eines Benutzers zu erfassen, und sein Label "Vorname" ist, könnte ein geeignetes Platzhalter "z.B. Mustafa" sein.

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 verursachen. Weitere Informationen finden Sie unter Labels.

popovertarget

Schaltet ein <input type="button">-Element in eine Popover-Steuerung um; nimmt die ID des Popover-Elements, das gesteuert werden soll, als Wert. Weitere Informationen finden Sie auf der Popover API-Startseite. Das Erstellen einer Beziehung zwischen einem Popover und ihrem Aufrufer-Button mit dem popovertarget-Attribut hat zwei zusätzliche 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 Tastaturnavigationsfolge, wenn es angezeigt wird. Das macht das Popover zugänglicher für Tastatur- und unterstützende Technologie-Benutzer (AT-Benutzer) (siehe auch Popover-Zugänglichkeitsfunktionen).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr komfortabel macht, Popovers relativ zu ihren Steuerungen mit CSS-Ankers-Positionierung zu positionieren. Weitere Informationen finden Sie unter Popover-Anker-Positionierung.

popovertargetaction

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

"hide"

Der Button wird ein angezeigtes Popover verstecken. Wenn Sie versuchen, ein bereits verstecktes Popover zu verstecken, wird keine Aktion durchgeführt.

"show"

Der Button wird ein verstecktes Popover anzeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion durchgeführt.

"toggle"

Der Button wird ein Popover zwischen Anzeigemodus und Verborgenheitsmodus umschalten. 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 Steuerung ausgeführt wird.

readonly

Ein Boolean-Attribut, das, falls vorhanden, anzeigt, 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.

Weitere Informationen finden Sie im HTML-Attribut readonly.

required

required ist ein Boolean-Attribut, das, falls vorhanden, anzeigt, dass der Benutzer einen Wert für die Eingabe angeben muss, bevor das Formular, zu dem es gehört, übermittelt 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.

Weitere Informationen finden Sie unter Client-side validation und im HTML-Attribut required.

size

Gültig für email, password, tel, url und text, spezifiziert das size-Attribut, wie viel der Eingabe angezeigt wird. Grundsätzlich erzielt es das gleiche Ergebnis, wie das Setzen der CSS width Eigenschaft mit ein paar Besonderheiten. Der 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 über das size-Attribut.

src

Gültig nur für den image-Eingabe-Button, ist das src ein String, der die URL der Bilddatei angibt, die angezeigt werden soll, um den grafischen Senden-Button darzustellen. Siehe den image-Eingabetyp.

step

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

Wenn nicht explizit eingeschlossen:

• step ist standardmäßig 1 für number und range.
• Jeder Datum-/Uhrzeit-Eingabetyp hat einen Standardwert für step, der für den Typ geeignet ist; siehe die individuellen Eingabeseiten: date, datetime-local, month, time und week.

Der Wert muss eine positive Zahl—ganz oder mit Komma—sein oder der spezielle Wert any, was bedeutet, dass kein Schrittverhalten angenommen wird und jeder Wert erlaubt ist (ausgenommen andere Einschränkungen, wie min und max).

Wenn any nicht explizit gesetzt ist, sind gültige Werte für die number, Datum/Uhrzeit-Eingabefelder und range Eingabefelder gleichbedeutend zur Basis für den Schritt—dem min-Wert und Inkrementen des Schrittwerts, bis zum max-Wert, falls angegeben.

Zum Beispiel, wenn Sie <input type="number" min="10" step="2"> haben, dann ist jede gerade Ganzzahl, 10 oder größer, gültig. Wenn weggelassen, <input type="number">, ist jede Ganzzahl gültig, aber Fließkommazahlen (wie 4.2) sind nicht gültig, weil step standardmäßig 1 ist. Damit 4.2 gültig ist, hätte step auf any, 0.1, 0.2, 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 Schritt-Konfiguration entsprechen, wird der Wert in der Beschränkungsprüfung als ungültig angesehen und entspricht dem :invalid Pseudoklasse.

Weitere Informationen finden Sie unter Client-side validation.

tabindex

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, ein ganzzahliges Attribut, das angibt, ob das Element den Eingabefokus erlangen kann (fokusierbar ist) und ob es an der sequentiellen Tastaturnavigation teilnehmen soll. Da alle Eingabetypen mit Ausnahme von hidden fokusierbar sind, sollte dieses Attribut nicht auf Formularelementen verwendet werden, weil dies ein Management der Fokusreihenfolge für alle Elemente innerhalb des Dokuments erfordern würde, mit dem Risiko, die Benutzerfreundlichkeit und Barrierefreiheit zu beeinträchtigen, wenn es falsch gemacht wird.

title

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, das Text enthält, der Beratung zu dem Element bietet, zu dem es gehört. Solche Informationen können typischerweise, aber nicht notwendigerweise, dem Benutzer als Tooltip präsentiert werden. Der Titel sollte NICHT als primäre Erklärung des Zwecks des Formularsteuerelements verwendet werden. Stattdessen verwenden Sie das <label>-Element mit einer for-Eigenschaft, die auf die id-Eigenschaft des Formularsteuerelements gesetzt ist. Siehe Labels unten.

type

Ein String, der den zu rendernden Steuerungstyp angibt. Zum Beispiel, um eine Checkbox zu erstellen, wird ein Wert von checkbox verwendet. Wenn weggelassen (oder ein unbekannter Wert angegeben wird), wird der Eingabetyp text verwendet, was ein Klartext-Eingabefeld erstellt.

Erlaubte Werte sind in Eingabetypen oben aufgeführt.

value

Der Wert des Eingabefeld-Steuerelements. Bei Angabe im HTML, ist dies der Anfangswert, und danach kann dieser jederzeit geändert oder abgerufen werden, indem JavaScript verwendet wird, um auf die entsprechende HTMLInputElement-Objekteigenschaft value zuzugreifen. Das value-Attribut ist immer optional, sollte jedoch als obligatorisch für checkbox, radio und hidden betrachtet werden.

width

Gültig nur für den image-Eingabe-Button, ist die width die Breite der Bilddatei, die angezeigt werden soll, um den grafischen Senden-Button darzustellen. Siehe den image-Eingabetyp.

Die folgenden nicht-standardmäßigen Attribute sind auf einigen Browsern ebenfalls verfügbar. Als allgemeine Regel sollten Sie vermeiden, diese zu verwenden, es sei denn, es ist nicht zu vermeiden.

incremental Nicht standardisiert

Das Boolean-Attribut incremental ist eine WebKit- und Blink-Erweiterung (also unterstützt durch Safari, Opera, Chrome, usw.), die, falls vorhanden, dem User-Agent angibt, die Eingabe als Live-Suche zu verarbeiten. Während der Benutzer den Wert des Feldes bearbeitet, sendet der Nutzer-Agent search-Ereignisse an das HTMLInputElement-Objekt, das die Suchbox darstellt. Dadurch kann Ihr Code die Suchergebnisse in Echtzeit aktualisieren, während der Benutzer die Suche bearbeitet.

Wenn incremental nicht angegeben ist, wird das search-Ereignis nur gesendet, wenn der Benutzer die Suche ausdrücklich initiiert (z.B. indem er die Enter oder Return-Taste während der Bearbeitung des Feldes drückt).

Das search-Ereignis ist ratifiziert, sodass es nicht häufiger als in einem implementierungsdefinierten Intervall gesendet wird.

orient Nicht standardisiert

Ähnlich wie die nicht-standardmäßige CSS-Eigenschaft -moz-orient, die die <progress>- und <meter>-Elemente beeinflusst, definiert das orient-Attribut die Ausrichtung des Bereichsschiebers. Werte umfassen horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wo der Bereich vertikal gerendert wird. Siehe Vertical form controls erstellen für einen modernen Ansatz zum Erstellen von vertikalen Formularelementen.

results Nicht standardisiert

Das results-Attribut – nur von Safari unterstützt – ist ein Zählwert, der Ihnen ermöglicht, die maximale Anzahl von Einträgen zu überschreiben, die im nativ bereitgestellten Dropdown-Menü des <input>-Elements von vorherigen Suchanfragen angezeigt werden.

Der Wert muss eine nicht negative Dezimalzahl sein. Wenn nicht bereitgestellt oder ein ungültiger Wert gegeben wird, wird die standardmäßige maximale Eintragsmenge des Browsers verwendet.

webkitdirectory Nicht standardisiert

Das Boolean-Attribut webkitdirectory, falls vorhanden, gibt an, dass nur Verzeichnisse durch den Benutzer in der Dateiauswahl-Schnittstelle ausgewählt werden können. Weitere Einzelheiten und Beispiele finden Sie unter HTMLInputElement.webkitdirectory.

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

Die folgenden Methoden werden von der HTMLInputElement-Schnittstelle bereitgestellt, die <input>-Elemente im DOM darstellt. Auch verfügbar sind die Methoden, die von den sich übergeordneten Schnittstellen, HTMLElement, Element, Node und EventTarget spezifiziert werden.

checkValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls gibt es false zurück und löst ein invalid-Ereignis am Element aus.

reportValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls gibt es false zurück, löst ein invalid-Ereignis am Element aus und meldet (falls das Ereignis nicht abgebrochen wird) das Problem dem Benutzer.

select()

Wählt den gesamten Inhalt des <input>-Elements aus, wenn der Inhalt des Elements auswählbar ist. Für Elemente ohne auswählbaren Textinhalt (wie ein visuelles Farbwähler oder Kalenderdatum-Eingabe) tut diese Methode nichts.

setCustomValidity()

Setzt eine benutzerdefinierte Nachricht, die angezeigt wird, wenn der Wert des Eingabefelds nicht gültig ist.

setRangeText()

Legt den Inhalt des angegebenen Bereichs von Zeichen im Eingabefeld auf eine gegebene Zeichenfolge fest. Ein Parameter selectMode ist verfügbar, um zu steuern, wie der vorhandene Inhalt beeinflusst wird.

setSelectionRange()

Wählt den angegebenen Bereich von Zeichen innerhalb eines textuellen Eingabe-Elements aus. Macht nichts für Eingaben, die nicht als Text-Eingabefelder angezeigt werden.

showPicker()

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

stepDown()

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

stepUp()

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

Eingaben, die ersetzbare Elemente sind, haben einige Merkmale, die nicht auf Nicht-Formularelemente anwendbar sind. Es gibt CSS-Selektoren, die spezifisch Formularsteuerungen basierend auf ihren UI-Funktionen anvisieren können, auch bekannt als UI-Pseudoklassen. Das Eingabeelement kann auch nach Typ mit Attributselektoren gezielt werden. Es gibt einige Eigenschaften, die besonders nützlich sind.

Pseudoklassen Beispiel

Wir können einem Beschriftungselement eines Kontrollkästchens einen Stil geben, basierend darauf, ob das Kontrollkästchen aktiviert ist oder nicht. In diesem Beispiel gestalten wir die color und font-weight der <label>, die direkt nach einem aktivierten Eingabefeld kommt. 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 zu adressieren. CSS-Attributselektoren passen zu Elementen basierend auf entweder nur 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 ist das Erscheinungsbild des Platzhaltertextes durchsichtig oder hellgrau. Das ::placeholder Pseudoelement ist der placeholder-Text der Eingabe. Er kann mit einem begrenzten Satz von CSS-Eigenschaften gestaltet werden.

::placeholder {
  color: blue;
}

Nur der Satz von CSS-Eigenschaften, die auf das ::first-line Pseudoelement angewendet werden können, kann auch in einer Regel mit ::placeholder im Selektor verwendet werden.

Die appearance Eigenschaft ermöglicht das Anzeigen von (fast) jedem Element im plattform-native Stil basierend auf dem Betriebssystemthema sowie das Entfernen von irgendeinem plattform-nativen Styling mit dem Wert none.

Sie könnten ein <div> wie einen Radiobutton aussehen lassen mit div {appearance: radio;} oder einen Radiobutton wie ein Kontrollkästchen mit [type="radio"] {appearance: checkbox;}, aber tun Sie es nicht.

Das Setzen von appearance: none entfernt plattformnativen Rahmen, aber nicht die Funktionalität.

Eine spezifische Eigenschaft für Texteingabeelemente ist die CSS caret-color Eigenschaft, mit der Sie die Farbe festlegen können, die zum Zeichnen des Texteingabecursors 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 Ihnen die Kontrolle über das Größenverhalten von Formular-Eingaben (d.h. sie erhalten standardmäßig eine bevorzugte Größe). Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben und den Formularsteuerungen zu erlauben, sich in der Größe an ihren Inhalt anzupassen.

Diese Eigenschaft wird normalerweise verwendet, um Formularfelder zu erstellen, die ihren Inhalt einpacken und wachsen, während mehr Text eingegeben wird. Dies funktioniert mit Eingabetypen, die direkte Texteingaben akzeptieren (zum Beispiel text und url), Eingabetyp file und <textarea> Elemente.

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

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

• Anwenden von Farbe auf HTML-Elemente mit CSS.

Siehe auch:

• Styling von HTML-Formularen
• Erweitertes Styling für HTML-Formulare und

Labels werden benötigt, um unterstützenden Text mit einem <input> zu verknüpfen. Das <label>-Element bietet erklärende Informationen zu einem Formularfeld, die immer angebracht sind (abgesehen von allen Layout-Bedenken, 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 sollte.

Zugehörige Labels

Die semantische Zusammenführung von <input> und <label>-Elementen ist nützlich für unterstützende Technologien wie Screenreader. Durch die Verknüpfung mit dem for Attribut des <label>, binden Sie das Label an die Eingabe in einer Weise, die es Screenreadern ermöglicht, Eingaben den Nutzern präziser zu beschreiben.

Es genügt nicht, einfachen Text neben dem <input>-Element zu haben. Vielmehr erfordern Benutzerfreundlichkeit und Zugänglichkeit die Einbeziehung eines ausdrücklichen oder impliziten <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 unzugänglich: Es gibt keine Beziehung zwischen der Eingabeaufforderung 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. Durch die Verknüpfung eines <label> mit einem <input> wird durch Klicken auf eines von beiden das <input> fokussiert. Wird einfacher Text verwendet, um die Eingabe zu "beschriften", passiert das nicht. Das Teilen der Aktivierungsfläche für die Eingabeaufforderung ist für Menschen mit motorischen Problemen hilfreich.

Als Webentwickler sollten wir niemals davon ausgehen, dass Menschen all das wissen, was wir wissen. Die Vielfalt der Menschen, die das Web nutzen – und dadurch Ihre Website – garantiert praktisch, dass einige Ihrer Besucher einige Variationen in Denkprozessen und/oder Umständen haben, die sie dazu bringen, Ihre Formulare sehr unterschiedlich von Ihnen zu interpretieren, ohne klare und richtig präsentierte Labels.

Platzhalter sind nicht zugänglich

Das placeholder-Attribut ermöglicht Ihnen die Angabe von Text, der im Inhaltsbereich des <input>-Elements angezeigt wird, wenn es leer ist. Der Platzhalter sollte niemals erforderlich sein, um Ihre Formulare zu verstehen. Es ist kein Label und sollte nicht als Ersatz verwendet werden, da es kein Ersatz ist. Der Platzhalter dient dazu, einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht als Erklärung oder Aufforderung.

Nicht nur ist der Platzhalter für Screenreader nicht zugänglich, sondern sobald der Nutzer irgendeinen Text in das Formularelement eingibt oder wenn das Formularelement bereits einen Wert hat, verschwindet der Platzhalter. Browser mit automatischen Seitenübersetzungsfunktionen überspringen möglicherweise Attribute beim Übersetzen, 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 zu stilisieren, basierend auf dem aktuellen Zustand jeder Eingabe, wie im Abschnitt UI-Pseudoklassen oben erwähnt, bietet der Browser die clientseitige Validierung bei einem (versuchten) Formular-Submit. Beim Absenden des Formulars, wenn es ein Formularelement gibt, das die Bedingungsvalidierung nicht besteht, werden unterstützende Browser eine Fehlermeldung auf dem ersten ungültigen Formularelement anzeigen; entweder eine Standardmeldung basierend auf dem Fehlertyp oder eine von Ihnen festgelegte Meldung.

Einige Eingabetypen und andere Attribute legen Limits fest, welche Werte für eine bestimmte Eingabe gültig sind. Zum Beispiel <input type="number" min="2" max="10" step="2"> bedeutet, dass nur die Nummer 2, 4, 6, 8 oder 10 gültig sind. Verschiedene Fehler können auftreten, einschließlich eines rangeUnderflow-Fehlers, wenn der Wert weniger als 2 beträgt, rangeOverflow, wenn er größer als 10 ist, stepMismatch, wenn der Wert zwischen 2 und 10 liegt, jedoch keine gerade Ganzzahl ist (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. beim höchsten möglichen Wert die Werte wieder von vorne beginnen, anstatt zu enden), ist es möglich, dass die Werte der max und min Eigenschaften vertauscht sind, was darauf hinweist, dass die Spanne der erlaubten Werte bei min beginnt, zum niedrigsten möglichen Wert zurückkehrt und dann fortfährt, bis max erreicht ist. Dies ist besonders nützlich für Daten und Zeiten, wie zur Erlaubnis eines Bereichs von 20 Uhr bis 8 Uhr:

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

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

Wenn ein Formularelement nicht das required-Attribut hat, wird kein Wert, oder eine leere Zeichenfolge nicht als ungültig betrachtet. Selbst wenn die oben genannten Attribute vorhanden sind, mit Ausnahme von required, führt eine leere Zeichenfolge nicht zu einem Fehler.

Wir können festlegen, welche Werte wir akzeptieren, und unterstützende Browser werden diese Formularwerte nativ validieren und den Nutzer bei einem Fehler beim Absenden warnen.

Zusätzlich zu den im obigen Abschnitt beschriebenen Fehlern enthält die validityState-Schnittstelle die booleschen schreibgeschützten Eigenschaften badInput, valid und customError. Das Gültigkeitsobjekt 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, warum die Validierung möglicherweise fehlgeschlagen ist, zutrifft, mit Ausnahme der Eigenschaft valid, die true ist, wenn der Wert des Elements alle Einschränkungen einhält.

Tritt ein Fehler auf, werden unterstützende Browser den Nutzer sowohl warnen als auch das Absenden des Formulars verhindern. Ein Wort der Vorsicht: Wenn ein benutzerdefinierter Fehler auf einen "wahr" Wert gesetzt ist (etwas anderes als die leere Zeichenfolge oder null), wird das Formular nicht abgesendet. Gibt es keine benutzerdefinierte Fehlermeldung und keines der anderen Eigenschaften true ist, 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 eine leere Zeichenfolge setzt, ist entscheidend. Macht der Nutzer einen Fehler und ist die Gültigkeit gesetzt, wird das Absenden ausgeschlossen, selbst wenn alle Werte gültig sind, bis die Nachricht null ist.

Beispiel für benutzerdefinierte Validierungsfehler

Möchten Sie eine benutzerdefinierte Fehlermeldung anzeigen, wenn ein Feld die Validierung nicht besteht, müssen Sie dieConstraint Validation API verwenden, die auf <input> (und verwandten) Elementen verfügbar ist. Nehmen wir folgendes 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-Formularprüfungsfunktionen werden dazu führen, dass dies eine Standardfehlermeldung erzeugen wird, wenn Sie versuchen, das Formular mit entweder keinem gültigen eingefüllten Wert oder einem Wert, der nicht dem pattern entspricht, abzusenden.

Wenn Sie stattdessen benutzerdefinierte Fehlermeldungen anzeigen möchten, könnten Sie JavaScript wie folgend 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 folgendermaßen wiedergegeben:

Kurz gesagt:

• Wir überprüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sich sein Wert ändert, indem wir über die input Ereignis-Handler die Methode checkValidity() ausführen.
• Ist der Wert ungültig, wird ein invalid Ereignis ausgelöst und die invalid-Ereignis-Handler-Funktion ausgeführt. Innerhalb dieser Funktion bestimmen wir, ob der Wert ungültig ist, weil er leer ist oder weil er nicht dem Muster entspricht, mit einem if ()-Block und setzen eine benutzerdefinierte Fehlermeldung.
• Als Ergebnis wird eine der benutzerdefinierten Fehlermeldungen angezeigt, wenn der Eingabewert ungültig ist, wenn die Schaltfläche "Absenden" gedrückt wird.
• Ist es gültig, wird es wie erwartet abgesendet. Dafür muss die benutzerdefinierte Validität aufgehoben werden, indem setCustomValidity() mit einem leeren Zeichenfolgenwert aufgerufen wird. Deshalb tun wir dies jedes Mal, wenn das Ereignis input aufgerufen wird. Tun Sie das nicht und eine benutzerdefinierte Gültigkeit wurde zuvor gesetzt, wird die Eingabe als ungültig registriert, selbst wenn sie derzeit einen validen Wert bei der Einreichung enthält.

Die erlaubten Eingaben für bestimmte <input> Typen hängen von der lokalen Region ab. In einigen Regionen ist 1.000,00 eine gültige Zahl, während in anderen Regionen die gültige Eingabemöglichkeit für diese Zahl 1.000,00 ist.

Firefox verwendet folgende Heuristiken, um die Region zu bestimmen, um die Eingabe des Nutzers (zumindest für type="number") zu validieren:

• Versuchen Sie die Sprache, die durch ein lang/xml:lang-Attribut am Element oder an einem seiner Elternteile angegeben ist.
• Versuchen Sie die Sprache, die durch jeglichen Content-Language HTTP-Header angegeben ist. Oder,
• Verwenden Sie, falls keine angegeben ist, die Browser-Region.

Wenn Eingaben enthalten sind, ist es eine Anforderung zur Barrierefreiheit, Labels hinzuzufügen. Dies ist notwendig, damit Menschen, die unterstützende Technologien verwenden, erkennen können, wofür die Eingabe ist. Auch durch Klicken oder Berühren eines Labels erhält das damit verbundene Formularelement den Fokus. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für Sehbehinderte, erhöht die Fläche, die ein Benutzer klicken oder berühren kann, um das Formularelement zu aktivieren. Dies ist besonders nützlich (und sogar notwendig) für Radiobuttons und Kontrollkästchen, die klein sind. Für weitere Informationen über Labels im Allgemeinen siehe Labels.

Das folgende ist ein Beispiel dafür, wie das <label> mit einem <input>-Element in obigem 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 die id der Eingabe ist.

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

Interaktive Elemente wie Formulareingaben sollten eine Fläche bereitstellen, die groß genug ist, um sie einfach zu aktivieren. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Problemen und Menschen, die ungenaue Eingabeformen verwenden, wie einen Stift oder Finger. Eine minimale interaktive Größe von 44×44 CSS-Pixeln wird empfohlen.

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

• Bedingungsvalidierung von Formularen
• Ihr erstes HTML-Formular
• Anleitung zur Struktur eines HTML-Formulars
• Die nativen Formular-Widgets
• Formulardaten senden
• Validierung von Formulardaten
• Anleitung zum Erstellen von benutzerdefinierten Formular-Widgets
• HTML-Formulare in veralteten Browsern
• Styling von HTML-Formularen
• Erweitertes Styling für HTML-Formulare
• Erstellen von vertikalen Formularsteuerungen