HTML-Eingabeelement <input>

Probieren Sie es aus

<label for="name">Name (4 to 8 characters):</label>

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

<input>-Typen

Wie ein <input> funktioniert, hängt erheblich vom Wert seines Attributs type ab. Daher werden die verschiedenen Typen auf eigenen separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben ist, wird standardmäßig der Typ text verwendet.

Folgende Typen sind verfügbar:

<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"/>

Attribute

Das Element <input> ist aufgrund seiner Attribute so leistungsfähig; das oben mit Beispielen beschriebene Attribut type ist dabei das wichtigste. Da jedes <input>-Element unabhängig vom Typ auf der Schnittstelle HTMLInputElement basiert, teilen sie technisch gesehen exakt denselben Satz von Attributen. In der Praxis wirken sich die meisten Attribute jedoch nur auf eine bestimmte Teilmenge von Eingabetypen aus. Außerdem hängt die Auswirkung einiger Attribute auf eine Eingabe vom Eingabetyp ab, sodass verschiedene Eingabetypen unterschiedlich beeinflusst werden.

Dieser Abschnitt enthält eine Tabelle mit allen Attributen und einer kurzen Beschreibung. Darauf folgt eine Liste, die jedes Attribut detaillierter beschreibt, zusammen mit den Eingabetypen, denen es zugeordnet ist. Attribute, die den meisten oder allen Eingabetypen gemeinsam sind, werden weiter unten ausführlicher definiert. Attribute, die für bestimmte Eingabetypen einzigartig sind – oder Attribute, die allen Eingabetypen gemeinsam sind, aber bei Verwendung mit einem bestimmten Eingabetyp ein besonderes Verhalten aufweisen –, sind stattdessen auf den Seiten dieser Typen dokumentiert.

Zu den Attributen für das Element <input> gehören die globalen HTML-Attribute sowie zusätzlich:

Nach den Beschreibungen der Standardattribute sind einige zusätzliche nicht standardisierte Attribute aufgeführt.

Einzelne Attribute

accept

Nur für den Eingabetyp file gültig. Das Attribut accept definiert, welche Dateitypen in einem file-Upload-Steuerelement auswählbar sind. Siehe den Eingabetyp file.

alpha

Nur für den Eingabetyp color gültig. Das Attribut alpha ermöglicht es dem Endbenutzer, die Deckkraft der ausgewählten Farbe festzulegen.

alt

Nur für die Schaltfläche image gültig. Das Attribut alt stellt Alternativtext für das Bild bereit und zeigt den Wert des Attributs an, wenn das Bild-src fehlt oder aus anderen Gründen nicht geladen werden kann. Siehe den Eingabetyp image.

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und gegebenenfalls auf welche Weise. Weitere Informationen finden Sie auf der Seite zum globalen Attribut autocapitalize.

autocomplete

(Kein Boolean-Attribut!) Das Attribut autocomplete akzeptiert als Wert eine durch Leerzeichen getrennte Zeichenfolge, die beschreibt, welche Art von Autovervollständigungsfunktionalität die Eingabe gegebenenfalls bereitstellen soll. Eine typische Implementierung der Autovervollständigung ruft zuvor in dasselbe Eingabefeld eingegebene Werte ab, es können aber auch komplexere Formen der Autovervollständigung existieren. Beispielsweise könnte ein Browser in die Kontaktliste eines Geräts integriert werden, um email-Adressen in einem E-Mail-Eingabefeld automatisch zu vervollständigen. Zulässige Werte finden Sie unter autocomplete.

Das Attribut autocomplete ist für 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 einem der Schaltflächentypen gültig.

Weitere Informationen, einschließlich Informationen zur Kennwortsicherheit und darüber, wie sich autocomplete für hidden geringfügig von anderen Eingabetypen unterscheidet, finden Sie unter dem Attribut autocomplete.

autofocus

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

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

Nicht mehr als ein Element im Dokument darf das Attribut autofocus besitzen. Wenn es bei mehr als einem Element gesetzt ist, erhält das erste Element mit dem Attribut den Fokus.

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

Warnung: Das automatische Fokussieren eines Formular-Steuerelements kann sehbehinderte Personen, die Screenreader-Technologie verwenden, sowie Personen mit kognitiven Beeinträchtigungen verwirren. Wenn autofocus zugewiesen wird, „teleportieren“ Screenreader ihre Benutzer zum Formular-Steuerelement, ohne sie vorher zu warnen.

Berücksichtigen Sie bei der Verwendung des Attributs autofocus die Barrierefreiheit sorgfältig. Das automatische Fokussieren eines Steuerelements kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann außerdem auf einigen Touch-Geräten dynamische Tastaturen einblenden. Während ein Screenreader die Beschriftung des Formular-Steuerelements mit Fokus ankündigt, kündigt er vor der Beschriftung nichts an. Auch sehende Benutzer kleiner Geräte übersehen gleichermaßen den durch den vorangehenden Inhalt geschaffenen Kontext.

capture

Das in der HTML-Media-Capture-Spezifikation eingeführte und nur für den Eingabetyp file gültige Attribut capture definiert, welches Medium – Mikrofon, Video oder Kamera – verwendet werden soll, um in unterstützten Szenarien eine neue Datei für den Upload über ein file-Upload-Steuerelement aufzunehmen. Siehe den Eingabetyp file.

checked

Für die Typen radio und checkbox gültig. checked ist ein Boolean-Attribut. Bei einem Typ radio gibt es an, dass die Optionsschaltfläche die aktuell ausgewählte in der Gruppe gleichnamiger Optionsschaltflächen ist. Bei einem Typ checkbox gibt es an, dass das Kontrollkästchen standardmäßig aktiviert ist, wenn die Seite geladen wird. Es gibt nicht an, ob dieses Kontrollkästchen aktuell aktiviert ist: Wenn sich der Zustand des Kontrollkästchens ändert, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das checked-IDL-Attribut von HTMLInputElement wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabe-Steuerelementen werden die Werte von Kontrollkästchen und Optionsschaltflächen nur dann in die übermittelten Daten aufgenommen, wenn sie aktuell checked sind. Wenn dies der Fall ist, werden der Name und die Werte der aktivierten Steuerelemente übermittelt.

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

colorspace

Nur für den Eingabetyp color gültig. Das Attribut colorspace gibt den Farbraum an, der von der Eingabe type="color" verwendet wird. Mögliche aufgezählte Werte sind:

• "limited-srgb": Die Farbe befindet sich im sRGB-Farbraum. Dies umfasst Werte von rgb(), hsl(), hwb() und <hex-color>. Der Farbwert ist auf 8 Bit pro Komponente r, g und b begrenzt. Dies ist der Standard.
• "display-p3": Der Display-P3-Farbraum, z. B. color(display-p3 1.84 -0.19 0.72 / 0.6)

dirname

Für die Eingabetypen hidden, text, search, url, tel und email gültig. Das Attribut dirname ermöglicht die Übermittlung der Schreibrichtung des Elements. Wenn es enthalten ist, wird das Formular-Steuerelement mit zwei Name-Wert-Paaren übermittelt: dem ersten aus name und value sowie dem zweiten mit dem Wert des Attributs dirname als Namen und einem vom Browser festgelegten Wert von ltr oder rtl.

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, führt die Eingabe dazu, dass sowohl das Paar name/value fruit=cherry als auch das Paar dirname/Richtung fruit-dir=ltr gesendet werden. Weitere Informationen finden Sie unter dem Attribut dirname.

disabled

Ein Boolean-Attribut, das bei Vorhandensein angibt, dass Benutzer nicht mit der Eingabe interagieren können sollen. Deaktivierte Eingaben werden üblicherweise in einer blasseren Farbe oder mit einer anderen Kennzeichnung dargestellt, die zeigt, dass das Feld nicht verfügbar ist.

Insbesondere empfangen deaktivierte Eingaben kein Ereignis click und werden nicht mit dem Formular übermittelt.

Hinweis: Obwohl dies nicht von der Spezifikation verlangt wird, behält Firefox standardmäßig den dynamischen deaktivierten Zustand eines <input> über Seitenladevorgänge hinweg bei. Verwenden Sie das Attribut autocomplete, um diese Funktion zu steuern.

form

Eine Zeichenfolge, die das <form>-Element angibt, dem die Eingabe zugeordnet ist, also seinen Formularbesitzer. Der Wert dieser Zeichenfolge muss, sofern vorhanden, mit der id eines <form>-Elements im selben Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, wird das Element <input> dem nächstgelegenen umschließenden Formular zugeordnet, sofern eines vorhanden ist.

Mit dem Attribut form können Sie eine Eingabe an einer beliebigen Stelle im Dokument platzieren und sie dennoch in ein Formular an einer anderen Stelle im Dokument einschließen.

Hinweis: Eine Eingabe kann nur einem Formular zugeordnet sein.

formaction

Nur für die Eingabetypen image und submit gültig. Weitere Informationen finden Sie beim Eingabetyp submit.

formenctype

Nur für die Eingabetypen image und submit gültig. Weitere Informationen finden Sie beim Eingabetyp submit.

formmethod

Nur für die Eingabetypen image und submit gültig. Weitere Informationen finden Sie beim Eingabetyp submit.

formnovalidate

Nur für die Eingabetypen image und submit gültig. Weitere Informationen finden Sie beim Eingabetyp submit.

formtarget

Nur für die Eingabetypen image und submit gültig. Weitere Informationen finden Sie beim Eingabetyp submit.

height

Nur für die Eingabeschaltfläche image gültig. height ist die Höhe der Bilddatei, die als grafische Senden-Schaltfläche angezeigt wird. Siehe den Eingabetyp image.

id

Ein globales Attribut, das für alle Elemente einschließlich aller Eingabetypen gültig ist. Es definiert einen eindeutigen Identifikator (ID), der im gesamten Dokument eindeutig sein muss. Sein Zweck besteht darin, das Element beim Verknüpfen zu identifizieren. Der Wert wird als Wert des Attributs for von <label> verwendet, um die Beschriftung mit dem Formular-Steuerelement zu verknüpfen. Siehe <label>.

inputmode

Ein globaler Wert, der für alle Elemente gültig ist. Er gibt Browsern einen Hinweis auf die Art der virtuellen Tastaturkonfiguration, die beim Bearbeiten dieses Elements oder seines Inhalts verwendet werden soll. Zu den Werten gehören none, text, tel, url, email, numeric, decimal und search.

list

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

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

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

Abhängig vom Browser sehen Benutzer möglicherweise eine vorgeschlagene benutzerdefinierte Farbpalette, Teilstriche entlang eines Bereichs oder sogar eine Eingabe, die sich wie ein <select> öffnet, aber nicht aufgelistete Werte zulässt. Prüfen Sie die Tabelle zur Browser-Kompatibilität für die anderen Eingabetypen.

Siehe das Element <datalist>.

max

Gültig für date, month, week, time, datetime-local, number und range. Es definiert den größten Wert im Bereich zulässiger Werte. Wenn der in das Element eingegebene value diesen überschreitet, besteht das Element die Constraint-Validierung nicht. Wenn der Wert des Attributs max keine Zahl ist, besitzt das Element keinen Höchstwert.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist, beispielsweise bei Daten oder Uhrzeiten, kann der Wert von max kleiner als der Wert von min sein. Dies gibt an, dass der Bereich umgebrochen werden kann; so können Sie beispielsweise einen Zeitbereich von 22 Uhr bis 4 Uhr festlegen.

maxlength

Gültig für text, search, url, tel, email und password. Es definiert die maximale Zeichenfolgenlänge, gemessen in UTF-16-Codeeinheiten, die Benutzer in das Feld eingeben können. Dies muss ein ganzzahliger Wert größer oder gleich 0 sein. Wenn kein maxlength oder ein ungültiger Wert angegeben ist, hat das Feld keine Maximallänge. Dieser Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Eingabe besteht die Constraint-Validierung nicht, wenn die Länge des in das Feld eingegebenen Textes größer als maxlength UTF-16-Codeeinheiten ist. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als durch das Attribut maxlength erlaubt sind. Die Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Weitere Informationen finden Sie unter clientseitige Validierung.

min

Gültig für date, month, week, time, datetime-local, number und range. Es definiert den niedrigsten Wert im Bereich zulässiger Werte. Wenn der in das Element eingegebene value kleiner ist, besteht das Element die Constraint-Validierung nicht. Wenn der Wert des Attributs min keine Zahl ist, besitzt das Element keinen Mindestwert.

Dieser Wert muss kleiner oder gleich dem Wert des Attributs max sein. Wenn das Attribut min vorhanden, aber nicht angegeben oder ungültig ist, wird kein min-Wert angewendet. Wenn das Attribut min gültig ist und ein nicht leerer Wert kleiner als das durch min erlaubte Minimum ist, verhindert die Constraint-Validierung das Übermitteln des Formulars. Weitere Informationen finden Sie unter clientseitige Validierung.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist, beispielsweise bei Daten oder Uhrzeiten, kann der Wert von max kleiner als der Wert von min sein. Dies gibt an, dass der Bereich umgebrochen werden kann; so können Sie beispielsweise einen Zeitbereich von 22 Uhr bis 4 Uhr festlegen.

minlength

Gültig für text, search, url, tel, email und password. Es definiert die minimale Zeichenfolgenlänge, gemessen in UTF-16-Codeeinheiten, die Benutzer in das Eingabefeld eingeben können. Dies muss ein nicht negativer ganzzahliger Wert sein, der kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn kein minlength oder ein ungültiger Wert angegeben ist, besitzt die Eingabe keine Mindestlänge.

Die Eingabe besteht die Constraint-Validierung nicht, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength UTF-16-Codeeinheiten beträgt, wodurch das Übermitteln des Formulars verhindert wird. Die Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Weitere Informationen finden Sie unter clientseitige Validierung.

multiple

Das Boolean-Attribut multiple bedeutet, wenn es gesetzt ist, dass Benutzer in dem E-Mail-Widget durch Kommas getrennte E-Mail-Adressen eingeben oder mit der Eingabe file mehr als eine Datei auswählen können. Siehe die Eingabetypen email und file.

name

Eine Zeichenfolge, die einen Namen für das Eingabe-Steuerelement angibt. Dieser Name wird zusammen mit dem Wert des Steuerelements übermittelt, wenn die Formulardaten übermittelt werden.

Betrachten Sie name als erforderliches Attribut, auch wenn es das nicht ist. Wenn für eine Eingabe kein name angegeben ist oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular übermittelt! (Deaktivierte Steuerelemente, nicht aktivierte Optionsschaltflächen, nicht aktivierte Kontrollkästchen und Zurücksetzen-Schaltflächen werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

1. _charset_ : Wenn dies als Name eines <input>-Elements vom Typ hidden verwendet wird, wird der value der Eingabe vom User Agent automatisch auf die für die Übermittlung des Formulars verwendete Zeichenkodierung gesetzt.
2. isindex: Aus historischen Gründen ist der Name isindex nicht erlaubt.

Das Attribut name erzeugt ein eindeutiges Verhalten für Optionsschaltflächen.

In einer Gruppe gleichnamiger Optionsschaltflächen kann jeweils nur eine aktiviert sein. Durch das Auswählen einer Optionsschaltfläche in dieser Gruppe wird jede aktuell ausgewählte Optionsschaltfläche derselben Gruppe automatisch deaktiviert. Der Wert dieser einen aktivierten Optionsschaltfläche wird zusammen mit dem Namen gesendet, wenn das Formular übermittelt wird.

Wenn Sie mit der Tabulatortaste in eine Reihe gleichnamiger Optionsschaltflächen wechseln und eine davon aktiviert ist, erhält diese den Fokus. Wenn sie in der Quellreihenfolge nicht zusammen gruppiert sind und eine der Gruppe aktiviert ist, beginnt das Navigieren mit der Tabulatortaste in die Gruppe beim ersten angetroffenen Gruppenmitglied und überspringt alle nicht aktivierten. Mit anderen Worten: Wenn eine aktiviert ist, überspringt die Tabulatornavigation die nicht aktivierten Optionsschaltflächen in der Gruppe. Wenn keine aktiviert ist, erhält die Optionsschaltflächengruppe den Fokus, wenn die erste Schaltfläche in der gleichnamigen Gruppe erreicht wird.

Sobald eine der Optionsschaltflächen in einer Gruppe den Fokus hat, navigieren die Pfeiltasten durch alle Optionsschaltflächen mit demselben Namen, selbst wenn diese in der Quellreihenfolge nicht zusammen gruppiert sind.

Wenn einem Eingabeelement ein name gegeben wird, wird dieser Name zu einer Eigenschaft der Eigenschaft HTMLFormElement.elements des besitzenden Formularelements. Wenn Sie eine Eingabe mit name guest und eine weitere mit name hat-size haben, 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, ist guestName das HTMLInputElement für das Feld guest und hatSize das Objekt für das Feld hat-size.

Warnung: Vermeiden Sie es, Formularelementen einen name zu geben, der einer integrierten Eigenschaft des Formulars entspricht, da Sie andernfalls die vordefinierte Eigenschaft oder Methode mit dieser Referenz auf die entsprechende Eingabe überschreiben.

pattern

Gültig für text, search, url, tel, email und password. Das Attribut pattern wird verwendet, um einen regulären Ausdruck zu kompilieren, dem der value der Eingabe entsprechen muss, damit der Wert die Constraint-Validierung besteht. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er vom Typ RegExp verwendet und in unserem Leitfaden zu regulären Ausdrücken dokumentiert wird. Um den Mustertext herum sollten keine Schrägstriche angegeben werden. Beim Kompilieren des regulären Ausdrucks:

1. wird das Muster implizit mit ^(?: und )$ umschlossen, sodass eine Übereinstimmung mit dem gesamten Eingabewert erforderlich ist, also ^(?:<pattern>)$.
2. wird das Flag 'v' angegeben, sodass das Muster als Folge von Unicode-Codepunkten statt als ASCII behandelt wird.

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

Hinweis: Wenn Sie das Attribut pattern verwenden, informieren Sie Benutzer durch erklärenden Text in der Nähe über das erwartete Format. Sie können auch ein Attribut title einfügen, um die Anforderungen für die Übereinstimmung mit dem Muster zu erläutern; die meisten Browser zeigen diesen Titel als Tooltip an. Die sichtbare Erklärung ist für die Barrierefreiheit erforderlich. Der Tooltip ist eine Ergänzung.

Weitere Informationen finden Sie unter clientseitige Validierung.

placeholder

Gültig für text, search, url, tel, email, password und number. Das Attribut placeholder gibt dem Benutzer einen kurzen Hinweis darauf, welche Art von Informationen im Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf den erwarteten Datentyp gibt, und keine Erklärung oder Aufforderung. Der Text darf keine Wagenrückläufe oder Zeilenvorschübe enthalten. Wenn ein Feld beispielsweise den Vornamen eines Benutzers erfassen soll und seine Beschriftung „Vorname“ lautet, könnte ein geeigneter Platzhalter „z. B. Mustafa“ sein.

Hinweis: Das Attribut placeholder ist semantisch nicht so 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 Beschriftungen.

popovertarget

Wandelt ein Element <input type="button"> in eine Popover-Steuerschaltfläche um; als Wert wird die ID des zu steuernden Popover-Elements verwendet. Weitere Einzelheiten finden Sie auf der Übersichtsseite zur Popover API. Das Herstellen einer Beziehung zwischen einem Popover und seiner aufrufenden Schaltfläche mit dem Attribut popovertarget hat zwei weitere nützliche Auswirkungen:

• Der Browser erstellt eine implizite Beziehung über aria-details und aria-expanded zwischen Popover und Auslöser und platziert das Popover beim Anzeigen an einer logischen Position in der Reihenfolge der Tastaturfokusnavigation. Dadurch ist das Popover für Benutzer von Tastaturen und unterstützenden Technologien (AT) besser zugänglich (siehe auch Barrierefreiheitsfunktionen von Popovern).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, wodurch es sehr bequem ist, Popover mithilfe von CSS-Ankerpositionierung relativ zu ihren Steuerelementen zu positionieren. Weitere Informationen finden Sie unter Popover-Ankerpositionierung.

popovertargetaction

Gibt die Aktion an, die auf einem Popover-Element ausgeführt werden soll, das durch ein <input type="button">-Steuerelement gesteuert wird. Mögliche Werte sind:

"hide"

Die Schaltfläche blendet ein angezeigtes Popover aus. Wenn Sie versuchen, ein bereits ausgeblendetes Popover auszublenden, wird keine Aktion ausgeführt.

"show"

Die Schaltfläche zeigt ein ausgeblendetes Popover an. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion ausgeführt.

"toggle"

Die Schaltfläche schaltet ein Popover zwischen angezeigt und ausgeblendet um. Wenn das Popover ausgeblendet ist, wird es angezeigt; wenn es angezeigt wird, wird es ausgeblendet. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die von der Steuerschaltfläche ausgeführt wird.

readonly

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

Weitere Informationen finden Sie unter HTML-Attribut: readonly.

required

required ist ein Boolean-Attribut, das bei Vorhandensein angibt, dass Benutzer einen Wert für die Eingabe angeben müssen, bevor das besitzende Formular übermittelt werden kann. Das Attribut required wird von den Eingaben text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio und file unterstützt.

Weitere Informationen finden Sie unter clientseitige Validierung und HTML-Attribut: required.

size

Gültig für email, password, tel, url und text. Das Attribut size gibt an, wie viel der Eingabe angezeigt wird. Es erzeugt grundsätzlich dasselbe Ergebnis wie das Setzen der CSS-Eigenschaft width, weist jedoch einige Besonderheiten auf. Die tatsächliche Einheit des Werts hängt vom Eingabetyp ab. Bei password und text ist es eine Anzahl von Zeichen bzw. em-Einheiten mit dem Standardwert 20; bei den anderen handelt es sich um Pixel bzw. px-Einheiten. CSS width hat Vorrang vor dem Attribut size.

src

Nur für die Eingabeschaltfläche image gültig. src ist eine Zeichenfolge, die die URL der Bilddatei angibt, die als grafische Senden-Schaltfläche angezeigt wird. Siehe den Eingabetyp image.

step

Gültig für date, month, week, time, datetime-local, number und range. Das Attribut step ist eine Zahl, die die Granularität angibt, der der Wert entsprechen muss. Nur Werte, die eine ganze Anzahl von Schritten von der Schrittbasis entfernt sind, sind gültig. Die Schrittbasis ist min, wenn angegeben, andernfalls value, oder 0, wenn keines davon bereitgestellt wird (außer für week, das eine Standardschrittbasis von −259.200.000 besitzt, die den Beginn der Woche 1970-W01 darstellt).

Wenn nicht explizit enthalten:

• ist step für number und range standardmäßig 1.
• besitzt jeder Datums-/Uhrzeit-Eingabetyp einen für den Typ geeigneten Standardwert für step; siehe die einzelnen Eingabeseiten: date, datetime-local, month, time und week.

Der Wert muss eine positive Zahl – ganzzahlig oder Gleitkommazahl – oder der spezielle Wert any sein. Dieser bedeutet, dass keine Schrittweite impliziert wird und jeder Wert erlaubt ist, sofern keine anderen Einschränkungen wie min und max entgegenstehen.

Wenn Sie beispielsweise <input type="number" min="10" step="2"> haben, ist jede gerade Ganzzahl 10 oder größer gültig. Wenn bei <input type="number"> nichts angegeben wird, ist jede Ganzzahl gültig, Gleitkommazahlen wie 4.2 jedoch nicht, weil step standardmäßig 1 ist. Damit 4.2 gültig wäre, müsste step auf any, 0.1 oder 0.2 gesetzt sein oder der Wert von min müsste eine auf .2 endende Zahl sein, beispielsweise <input type="number" min="-5.2">.

Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht der Schrittweitenkonfiguration entsprechen, wird der Wert bei der Constraint-Validierung als ungültig angesehen und entspricht der Pseudoklasse :invalid.

Weitere Informationen finden Sie unter clientseitige Validierung.

switch

Nur für die Eingabe checkbox gültig. switch ist ein Boolean-Attribut, das angibt, ob die Kontrollkästchen-Eingabe als Schalter gerendert werden soll.

Hinweis: Dieses Attribut ist weiterhin experimentell und wird nur von wenigen Browsern unterstützt. In nicht unterstützten Browsern wird das Attribut ignoriert.

tabindex

Ein globales Attribut, das für alle Elemente einschließlich aller Eingabetypen gültig ist. Es ist ein ganzzahliges Attribut, das angibt, ob das Element Eingabefokus erhalten kann, also fokussierbar ist, und ob es an der sequenziellen Tastaturnavigation teilnehmen soll. Da alle Eingabetypen außer Eingaben vom Typ hidden fokussierbar sind, sollte dieses Attribut nicht für Formular-Steuerelemente verwendet werden. Andernfalls müssten Sie die Fokusreihenfolge für alle Elemente im Dokument verwalten, was bei falscher Umsetzung die Benutzerfreundlichkeit und Barrierefreiheit beeinträchtigen kann.

title

Ein globales Attribut, das für alle Elemente einschließlich aller Eingabetypen gültig ist und Text mit Hinweisinformationen zum zugehörigen Element enthält. Solche Informationen können dem Benutzer typischerweise, aber nicht zwingend, als Tooltip präsentiert werden. title sollte NICHT als primäre Erklärung des Zwecks eines Formular-Steuerelements verwendet werden. Verwenden Sie stattdessen das Element <label> mit einem Attribut for, das auf das Attribut id des Formular-Steuerelements gesetzt ist. Siehe Beschriftungen weiter unten.

type

Eine Zeichenfolge, die den zu rendernden Steuerelementtyp angibt. Um beispielsweise ein Kontrollkästchen zu erstellen, wird der Wert checkbox verwendet. Wenn das Attribut weggelassen oder ein unbekannter Wert angegeben wird, wird der Eingabetyp text verwendet und ein Klartext-Eingabefeld erstellt.

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

value

Der Wert des Eingabe-Steuerelements. Wenn er in HTML angegeben ist, ist dies der Anfangswert. Anschließend kann er jederzeit mithilfe von JavaScript geändert oder abgerufen werden, indem auf die Eigenschaft value des jeweiligen HTMLInputElement-Objekts zugegriffen wird. Das Attribut value ist immer optional, sollte jedoch für checkbox, radio und hidden als obligatorisch betrachtet werden.

webkitdirectory

Das Boolean-Attribut webkitdirectory gibt bei Vorhandensein an, dass Benutzer in der Dateiauswahloberfläche nur Verzeichnisse auswählen können sollen. Weitere Details und Beispiele finden Sie unter HTMLInputElement.webkitdirectory.

Hinweis: webkitdirectory ist in der File and Directory Entries API definiert. Es heißt aufgrund seines Ursprungs als Chrome-spezifische API webkitdirectory. Es ist jetzt in allen Browsern verfügbar.

width

Nur für die Eingabeschaltfläche image gültig. width ist die Breite der Bilddatei, die als grafische Senden-Schaltfläche angezeigt wird. Siehe den Eingabetyp image.

Nicht standardisierte Attribute

Die folgenden nicht standardisierten Attribute sind ebenfalls in einigen Browsern verfügbar. Als allgemeine Regel sollten Sie deren Verwendung vermeiden, sofern sie nicht unvermeidbar ist.

incremental

Das Boolean-Attribut incremental ist eine WebKit- und Blink-Erweiterung, wird also von Safari, Opera, Chrome usw. unterstützt. Bei Vorhandensein weist es den User Agent an, die Eingabe als Live-Suche zu verarbeiten. Während der Benutzer den Feldwert bearbeitet, sendet der User Agent search-Ereignisse an das HTMLInputElement-Objekt, das das Suchfeld repräsentiert. Dadurch kann Ihr Code die Suchergebnisse in Echtzeit aktualisieren, während der Benutzer die Suche bearbeitet.

Wenn incremental nicht angegeben ist, wird das Ereignis search nur gesendet, wenn Benutzer eine Suche ausdrücklich initiieren, etwa durch Drücken der Taste Enter oder Return beim Bearbeiten des Felds.

Das Ereignis search wird ratenbegrenzt, sodass es nicht häufiger als in einem implementationsdefinierten Intervall gesendet wird.

orient

Ähnlich wie die nicht standardisierte CSS-Eigenschaft -moz-orient, die die Elemente <progress> und <meter> beeinflusst, definiert das Attribut orient die Ausrichtung des Bereichsreglers. Zu den Werten gehören horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, bei dem der Bereich vertikal gerendert wird. Einen modernen Ansatz zum Erstellen vertikaler Formular-Steuerelemente finden Sie unter Erstellen vertikaler Formular-Steuerelemente.

results

Das nur von Safari unterstützte Attribut results ist ein numerischer Wert, mit dem Sie die maximale Anzahl von Einträgen überschreiben können, die im nativ bereitgestellten Dropdownmenü des Elements <input> für vorherige Suchanfragen angezeigt werden.

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

Methoden

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

checkValidity()

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

reportValidity()

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

select()

Wählt den gesamten Inhalt des Elements <input> aus, wenn der Inhalt des Elements auswählbar ist. Bei Elementen ohne auswählbaren Textinhalt, etwa einem visuellen Farbwähler oder einer Kalendereingabe für Daten, bewirkt diese Methode nichts.

setCustomValidity()

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

setRangeText()

Setzt den Inhalt des angegebenen Zeichenbereichs im Eingabeelement auf eine bestimmte Zeichenfolge. Ein Parameter selectMode ist verfügbar, um zu steuern, wie der vorhandene Inhalt beeinflusst wird.

setSelectionRange()

Wählt den angegebenen Zeichenbereich innerhalb eines Texteingabeelements aus. Bei Eingaben, die nicht als Texteingabefelder dargestellt werden, geschieht nichts.

showPicker()

Zeigt den Browser-Auswähler für das Eingabeelement an, der normalerweise beim Auswählen des Elements angezeigt würde, jedoch ausgelöst durch einen Tastendruck oder eine andere Benutzerinteraktion.

stepDown()

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

stepUp()

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

CSS

Eingaben weisen als ersetzte Elemente einige Merkmale auf, die auf Nicht-Formularelemente nicht anwendbar sind. Es gibt CSS-Selektoren, die Formular-Steuerelemente anhand ihrer UI-Merkmale gezielt ansprechen können; diese werden auch UI-Pseudoklassen genannt. Das Eingabeelement kann außerdem anhand seines Typs mit Attributselektoren angesprochen werden. Auch einige Eigenschaften sind besonders nützlich.

UI-Pseudoklassen

Beispiel für Pseudoklassen

Wir können eine Kontrollkästchen-Beschriftung danach gestalten, ob das Kontrollkästchen aktiviert ist oder nicht. In diesem Beispiel gestalten wir color und font-weight des <label>, das unmittelbar auf eine aktivierte Eingabe folgt. Wenn die input nicht aktiviert ist, haben wir keine Stile angewendet.

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

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

Attributselektoren

Es ist möglich, verschiedene Typen von Formular-Steuerelementen anhand ihres type mithilfe von Attributselektoren anzusprechen. CSS-Attributselektoren entsprechen Elementen entweder allein anhand des Vorhandenseins eines Attributs oder anhand des Werts 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] {
}

::placeholder

Standardmäßig ist das Erscheinungsbild von Platzhaltertext durchscheinend oder hellgrau. Das Pseudoelement ::placeholder ist der placeholder-Text der Eingabe. Es kann mit einer begrenzten Teilmenge von CSS-Eigenschaften gestaltet werden.

::placeholder {
  color: blue;
}

In einer Regel, die ::placeholder in ihrem Selektor verwendet, kann nur die Teilmenge der CSS-Eigenschaften verwendet werden, die auf das Pseudoelement ::first-line anwendbar ist.

caret-color

Eine für Texteingabe-bezogene Elemente spezifische Eigenschaft ist die CSS-Eigenschaft caret-color, mit der Sie die Farbe festlegen können, die zum Zeichnen der Texteingabemarkierung 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

field-sizing

Die Eigenschaft field-sizing ermöglicht es Ihnen, das Größenverhalten von Formulareingaben zu steuern, denen standardmäßig eine bevorzugte Größe zugewiesen wird. Mit dieser Eigenschaft können Sie das Standardverhalten überschreiben, sodass Formular-Steuerelemente ihre Größe an ihren Inhalt anpassen können.

Diese Eigenschaft wird typischerweise verwendet, um Formularfelder zu erstellen, die sich an ihren Inhalt anpassen und mit zunehmender Texteingabe wachsen. Dies funktioniert mit Eingabetypen, die direkte Texteingabe akzeptieren, beispielsweise text und url, dem Eingabetyp file und <textarea>-Elementen.

object-position und object-fit

In bestimmten Fällen, üblicherweise bei nicht textuellen Eingaben und spezialisierten Schnittstellen, ist das Element <input> ein ersetztes Element. In diesem Fall können Position und Größe des Elements innerhalb seines Rahmens mithilfe der CSS-Eigenschaften object-position und object-fit angepasst werden.

Gestaltung

Weitere Informationen zum Hinzufügen von Farbe zu Elementen in HTML finden Sie unter:

• Anwenden von Farbe auf HTML-Elemente mit CSS.

Siehe außerdem:

• Gestaltung von HTML-Formularen
• Erweiterte Gestaltung für HTML-Formulare und

Zusätzliche Funktionen

Beschriftungen

Beschriftungen sind erforderlich, um Hilfstext mit einem <input> zu verknüpfen. Das Element <label> stellt erläuternde Informationen über ein Formularfeld bereit, die immer angemessen sind, abgesehen von möglichen Layoutaspekten. Es ist nie eine schlechte Idee, ein <label> zu verwenden, um zu erklären, was in ein <input> oder <textarea> eingegeben werden soll.

Zugeordnete Beschriftungen

Die semantische Verknüpfung der Elemente <input> und <label> ist für unterstützende Technologien wie Screenreader nützlich. Indem Sie sie mit dem Attribut for von <label> verknüpfen, binden Sie die Beschriftung auf eine Weise an die Eingabe, die es Screenreadern ermöglicht, Eingaben Benutzern präziser zu beschreiben.

Es reicht nicht aus, einfachen Text neben dem Element <input> zu platzieren. Stattdessen erfordern Benutzerfreundlichkeit und Barrierefreiheit entweder ein implizites oder explizites <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: Zwischen der Aufforderung und dem Element <input> besteht keine Beziehung.

Zusätzlich zu einem barrierefreien Namen bietet die Beschriftung einen größeren Trefferbereich, auf den Benutzer mit Maus oder Touchscreen klicken bzw. tippen können. Wenn Sie ein <label> mit einem <input> verknüpfen, wird durch Klicken auf eines der beiden das <input> fokussiert. Wenn Sie einfachen Text verwenden, um Ihre Eingabe zu „beschriften“, geschieht dies nicht. Dass die Aufforderung Teil des Aktivierungsbereichs für die Eingabe ist, hilft Menschen mit motorischen Einschränkungen.

Als Webentwickler ist es wichtig, dass wir niemals annehmen, Menschen wüssten all die Dinge, die wir wissen. Die Vielfalt der Menschen, die das Web – und damit auch Ihre Website – nutzen, garantiert praktisch, dass einige Besucher Ihrer Website aufgrund unterschiedlicher Denkprozesse und/oder Umstände Ihre Formulare ohne klare und korrekt präsentierte Beschriftungen ganz anders interpretieren als Sie.

Platzhalter sind nicht barrierefrei

Mit dem Attribut placeholder können Sie Text angeben, der innerhalb des Inhaltsbereichs des Elements <input> selbst angezeigt wird, wenn es leer ist. Der Platzhalter sollte niemals erforderlich sein, um Ihre Formulare zu verstehen. Er ist keine Beschriftung und sollte nicht als Ersatz verwendet werden, weil er keiner ist. Der Platzhalter dient dazu, einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, und nicht als Erklärung oder Aufforderung.

Der Platzhalter ist nicht nur für Screenreader nicht zugänglich, sondern verschwindet auch, sobald der Benutzer Text in das Formular-Steuerelement eingibt oder wenn das Formular-Steuerelement bereits einen Wert hat. Browser mit Funktionen zur automatischen Seitenübersetzung können Attribute beim Übersetzen überspringen, sodass placeholder möglicherweise nicht übersetzt wird.

Clientseitige Validierung

Zusätzlich zur Verwendung von CSS, um Eingaben basierend auf den UI-Zuständen :valid oder :invalid entsprechend dem aktuellen Zustand jeder Eingabe zu gestalten, wie im obigen Abschnitt UI-Pseudoklassen beschrieben, stellt der Browser bei der versuchten Formularübermittlung clientseitige Validierung bereit. Wenn bei der Formularübermittlung ein Formular-Steuerelement die Constraint-Validierung nicht besteht, zeigen unterstützende Browser eine Fehlermeldung beim ersten ungültigen Formular-Steuerelement an. Dabei wird eine Standardmeldung basierend auf dem Fehlertyp oder eine von Ihnen gesetzte Meldung angezeigt.

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

Bei den Eingabetypen, deren Wertebereich periodisch ist, das heißt, bei denen die Werte beim höchstmöglichen Wert zum Anfang zurückkehren statt zu enden, können die Werte der Eigenschaften max und min umgekehrt sein. Dies gibt an, dass der Bereich zulässiger Werte bei min beginnt, beim niedrigstmöglichen Wert umbricht und dann fortgesetzt wird, bis max erreicht wird. Dies ist insbesondere für Daten und Uhrzeiten nützlich, etwa wenn Sie den Bereich von 20 Uhr bis 8 Uhr zulassen möchten:

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

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

Wenn ein Formular-Steuerelement das Attribut required nicht besitzt, keinen Wert oder eine leere Zeichenfolge hat, ist es nicht ungültig. Selbst wenn die obigen Attribute vorhanden sind, führt eine leere Zeichenfolge mit Ausnahme von required nicht zu einem Fehler.

Wir können Einschränkungen für die akzeptierten Werte festlegen; unterstützende Browser validieren diese Formularwerte nativ und warnen Benutzer, wenn beim Absenden des Formulars ein Fehler vorliegt.

Zusätzlich zu den in der obigen Tabelle beschriebenen Fehlern enthält die Schnittstelle validityState die schreibgeschützten Boolean-Eigenschaften badInput, valid und customError. Das Validitätsobjekt 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 Boolean-Eigenschaften gibt ein Wert von true an, dass der angegebene Grund, warum die Validierung fehlgeschlagen sein könnte, zutrifft. Die Ausnahme ist die Eigenschaft valid, die true ist, wenn der Wert des Elements alle Einschränkungen erfüllt.

Wenn ein Fehler vorliegt, warnen unterstützende Browser sowohl den Benutzer als auch verhindern sie die Übermittlung des Formulars. Ein Hinweis zur Vorsicht: Wenn ein benutzerdefinierter Fehler auf einen truthy-Wert gesetzt wird, also alles außer der leeren Zeichenfolge oder null, wird die Übermittlung des Formulars verhindert. Wenn keine benutzerdefinierte Fehlermeldung vorhanden ist und keine der anderen Eigenschaften true zurückgibt, ist valid true und das Formular kann übermittelt werden.

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

Die letzte Zeile, die die benutzerdefinierte Gültigkeitsmeldung auf die leere Zeichenfolge setzt, ist entscheidend. Wenn der Benutzer einen Fehler macht und die Gültigkeit gesetzt wird, schlägt die Übermittlung fehl, selbst wenn alle Werte gültig sind, bis die Meldung null ist.

Beispiel für einen benutzerdefinierten Validierungsfehler

Wenn Sie eine benutzerdefinierte Fehlermeldung anzeigen möchten, wenn ein Feld die Validierung nicht besteht, müssen Sie die für <input>- und verwandte Elemente verfügbare Constraint Validation API verwenden. Betrachten 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 eine Standardfehlermeldung angezeigt wird, wenn Sie versuchen, das Formular ohne gültige Eingabe oder mit einem Wert abzusenden, der nicht dem pattern entspricht.

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

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

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

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

Das Beispiel wird wie folgt gerendert:

Kurz zusammengefasst:

• Wir prüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sich sein Wert ändert, indem wir die Methode checkValidity() über den Ereignishandler input ausführen.
• Wenn der Wert ungültig ist, wird ein Ereignis invalid ausgelöst und die Ereignishandlerfunktion für invalid ausgeführt. Innerhalb dieser Funktion ermitteln wir mithilfe eines if ()-Blocks, ob der Wert ungültig ist, weil er leer ist oder weil er nicht dem Muster entspricht, und setzen eine benutzerdefinierte Gültigkeitsfehlermeldung.
• Wenn der Eingabewert beim Drücken der Senden-Schaltfläche ungültig ist, wird folglich eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Wenn er gültig ist, wird er wie erwartet übermittelt. Damit dies geschieht, muss die benutzerdefinierte Gültigkeit aufgehoben werden, indem setCustomValidity() mit einer leeren Zeichenfolge aufgerufen wird. Deshalb tun wir dies jedes Mal, wenn das Ereignis input ausgelöst wird. Wenn Sie dies nicht tun und zuvor eine benutzerdefinierte Gültigkeit gesetzt wurde, wird die Eingabe als ungültig registriert, selbst wenn sie beim Absenden aktuell einen gültigen Wert enthält.

Lokalisierung

Die erlaubten Eingaben für bestimmte <input>-Typen hängen vom Gebietsschema ab. In einigen Gebietsschemata ist 1,000.00 eine gültige Zahl, während in anderen Gebietsschemata 1.000,00 die gültige Eingabeform dieser Zahl ist.

Firefox verwendet die folgenden Heuristiken, um das Gebietsschema für die Validierung der Benutzereingabe zu bestimmen, zumindest für type="number":

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

Barrierefreiheit

Beschriftungen

Beim Einfügen von Eingaben ist es eine Anforderung der Barrierefreiheit, Beschriftungen hinzuzufügen. Dies ist erforderlich, damit Personen, die unterstützende Technologien verwenden, erkennen können, wofür die Eingabe bestimmt ist. Durch Klicken oder Tippen auf eine Beschriftung erhält außerdem das zugehörige Formular-Steuerelement den Fokus. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für sehende Benutzer und vergrößert den Bereich, auf den Benutzer klicken oder tippen können, um das Formular-Steuerelement zu aktivieren. Dies ist insbesondere für Optionsschaltflächen und Kontrollkästchen nützlich und sogar erforderlich, da diese sehr klein sind. Weitere Informationen zu Beschriftungen im Allgemeinen finden Sie unter Beschriftungen.

Im Folgenden sehen Sie ein Beispiel dafür, wie <label> auf die oben beschriebene Weise mit einem <input>-Element verknüpft wird. Sie müssen dem <input> ein Attribut id geben. Das <label> benötigt dann ein Attribut for, dessen Wert mit der id der Eingabe übereinstimmt.

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

Größe

Interaktive Elemente wie Formulareingaben sollten einen ausreichend großen Bereich bereitstellen, damit sie einfach aktiviert werden können. Dies hilft vielen Menschen, einschließlich Personen mit Problemen bei der motorischen Steuerung und Personen, die ungenaue Eingabeformen wie einen Stift oder Finger verwenden. Eine minimale interaktive Größe von 44×44 CSS-Pixeln wird empfohlen.

• Erfolgskriterium 2.5.5 verstehen: Zielgröße | W3C Understanding WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Touch-Ziele – The A11Y Project

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Eigenschaft appearance
• Ihr erstes HTML-Formular
• Anleitung: Struktur eines HTML-Formulars
• Die nativen Formular-Widgets
• Senden von Formulardaten
• Constraint-Validierung von Formularen
• Gestaltung von HTML-Formularen