<input>: Das HTML Input-Element

Wie ein <input> funktioniert, variiert erheblich in Abhängigkeit vom Wert des type-Attributs. Daher werden die verschiedenen Typen auf eigenen Referenzseiten behandelt. Wird dieses Attribut nicht spezifiziert, ist der standardmäßig angenommene Typ text.

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, wie oben mit Beispielen beschrieben, ist das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-Schnittstelle basiert, teilen sie technisch das genau gleiche Attributset. Allerdings haben die meisten Attribute in Wirklichkeit nur Einfluss auf eine spezifische Teilmenge von Eingabetypen. Zudem hängt die Auswirkung einiger Attribute auf ein <input> vom Eingabetyp ab, und beeinflusst verschiedene Eingabetypen auf unterschiedliche Weise.

Dieser Abschnitt bietet eine Tabelle, die alle Attribute mit einer kurzen Beschreibung auflistet. Diese Tabelle wird durch eine Liste ergänzt, die jedes Attribut im Detail beschreibt und mit welchen Eingabetypen sie verbunden sind. Attribute, die für die meisten oder alle Eingabetypen üblich sind, werden weiter unten ausführlicher definiert. Attribute, die spezifisch für bestimmte Eingabetypen sind – oder Attribute, die zwar für alle Eingabetypen allgemein sind, aber besondere Verhaltensweisen aufweisen, wenn sie auf 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 standardisierte Attribute sind nach den Beschreibungen der Standardattribute aufgelistet.

accept

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

alt

Gültig nur für den image-Button, bietet das alt-Attribut alternativen Text für das Bild, das den Wert des Attributs anzeigt, wenn die Bildquelle src fehlt oder anderweitig nicht geladen wird. Siehe den image-Eingabetyp.

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und, falls ja, auf welche Weise. Weitere Informationen finden Sie auf der globalen Attributseite für autocapitalize.

autocomplete

(Nicht ein Boolesches Attribut!) Das autocomplete-Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenkette an, die beschreibt, welche Art von Autovervollständigungsfunktionalität die Eingabe bieten soll, falls vorhanden. Eine typische Implementierung von Autovervollständigung ruft zuvor eingegebene Werte im gleichen Eingabefeld ab, aber komplexere Formen der Autovervollständigung können existieren. Zum Beispiel könnte ein Browser mit der Kontaktliste eines Geräts integrieren, um E-Mail-Adressen in einem E-Mail-Eingabefeld zu vervollständigen. Siehe autocomplete für zulässige Werte.

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

Besuchen Sie die autocomplete-Attribut-Seite für zusätzliche Informationen, inklusive Informationen zur Passwortsicherheit und wie autocomplete leicht anders für hidden ist als für andere Eingabetypen.

autofocus

Ein Boolesches Attribut, welches, wenn es vorhanden ist, angibt, dass das Eingabeformular automatisch den Fokus haben sollte, wenn die Seite fertig geladen ist (oder wenn das <dialog>-Element, das dieses Element enthält, angezeigt wurde).

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

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

Das autofocus-Attribut kann nicht bei Eingaben vom Typ hidden verwendet werden, da verborgene Eingaben nicht fokussiert werden können.

Warnung: Ein Eingabeelement automatisch zu fokussieren, kann Menschen mit Seheinschränkungen, die Bildschirmlesetechnologie verwenden, oder Menschen mit kognitiven Beeinträchtigungen verwirren. Wenn autofocus zugewiesen ist, "teleportieren" sich Bildschirmlesegeräte direkt zum Kontrollpunkt ohne vorherige Warnung.

Seien Sie bei der Barrierefreiheit vorsichtig bei der Verwendung des autofocus-Attributs. Automatisches Fokussieren auf ein Steuerelement kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann auch dazu führen, dass auf einigen Touch-Geräten dynamische Tastaturen angezeigt werden. Obwohl ein Bildschirmleser das Label des fokussierten Formularelements ankündigt, wird der Bildschirmleser nichts vor dem Label ankündigen und der sehende Benutzer auf einem kleinen Gerät wird gleichermaßen das durch den vorhergehenden Inhalt geschaffene Kontext vermissen.

capture

Eingeführt in der HTML Media Capture-Spezifikation und nur gültig für den file-Eingabetyp, definiert das capture-Attribut, welche Medien—Mikrofon, Video oder Kamera—zur Aufnahme einer neuen Datei für den Upload mit einem file-Upload-Steuerelement in unterstützten Szenarien verwendet werden soll. Siehe den file-Eingabetyp.

checked

Gültig sowohl für radio als auch checkbox-Typen, checked ist ein Boolesches Attribut. Wenn es bei einem radio-Typ vorhanden ist, zeigt es an, dass der Radio-Button der aktuell ausgewählte in der Gruppe von gleich benannten Radio-Buttons ist. Wenn es bei einem checkbox-Typ vorhanden ist, zeigt es an, dass das Kontrollkästchen standardmäßig aktiviert ist (wenn die Seite geladen wird). Es gibt nicht an, ob dieses Kontrollkästchen aktuell ausgewählt ist: wenn sich der Zustand des Kontrollkästchens ändert, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das checked IDL-Attribut des HTMLInputElement` wird aktualisiert.)

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

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

dirname

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

htmlCopy to Clipboard

<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 gesendet wird, sendet die Eingabe sowohl das name / value Paar von fruit=cherry als auch das dirname / Richtungs-Paar von fruit-dir=ltr. Weitere Informationen finden Sie im dirname-Attribut.

disabled

Ein Boolesches Attribut, das angibt, dass der Benutzer nicht mit dem Eingabesteuerelement interagieren darf, wenn es vorhanden ist. Deaktivierte Eingaben werden typischerweise in einer gedimmten Farbe oder unter Verwendung einer anderen Form von Anzeige rendern, dass das Feld nicht zur Verfügung steht.

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

Hinweis: Obwohl nicht von der Spezifikation gefordert, behält Firefox standardmäßig den dynamischen deaktivierten Zustand eines <input> über Seitenladungen hinweg bei. Verwenden Sie das autocomplete-Attribut, um dieses Feature zu steuern.

form

Eine Zeichenkette, die das <form>-Element angibt, mit dem die Eingabe verknüpft ist (das heißt, ihr Formulareigentümer). Der Wert dieser Zeichenkette, wenn vorhanden, muss mit der id eines <form>-Elements im selben Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, ist das <input>-Element mit dem nächstgelegenen enthaltenen Formular verknüpft, sofern vorhanden.

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

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

formaction

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

formenctype

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

formmethod

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

formnovalidate

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

formtarget

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

height

Nur gültig für den image-Eingabeknopf, die height ist die Höhe der Bilddatei, die zur Darstellung des grafischen Submit-Knopfs angezeigt werden soll. Siehe den image-Eingabetyp.

id

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, definiert es eine eindeutige Kennung (ID), die im gesamten Dokument eindeutig sein muss. Sein Zweck ist die Identifizierung des Elements beim Verlinken. Der Wert wird als Wert des for-Attributs des <label> verwendet, um das Label mit dem Formularelement zu verbinden. Siehe <label>.

inputmode

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

list

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

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

Entsprechend den Spezifikationen wird das list-Attribut nicht von den Typen hidden, password, checkbox, radio, file oder irgendeinem der Knopftypen unterstützt.

Abhängig vom Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen bekommen, Markierungen entlang eines Bereichs oder sogar eine Eingabe, die sich wie ein <select> öffnet, aber nicht aufgelistete 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 die Typen date, month, week, time, datetime-local, number, und range, definiert es den größten Wert im Bereich zugelassener Werte. Wenn der im Element eingegebene value diesen überschreitet, schlägt das Element bei der Einschränkungsvalidierung fehl. Wenn der Wert des max-Attributs keine Zahl ist, dann hat das Element keinen maximalen Wert.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was anzeigt, dass der Bereich "umschlagen" kann; zum Beispiel erlaubt dies die Angabe eines Zeitraums von 22 Uhr bis 4 Uhr.

maxlength

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

Die Eingabe schlägt bei der Einschränkungsvalidierung fehl, 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 maxlength-Attribut erlaubt. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen.

min

Gültig für date, month, week, time, datetime-local, number, und range, definiert es den kleinsten Wert im Bereich zugelassener Werte. Wenn der im Element eingegebene value diesen unterschreitet, schlägt das Element bei der Einschränkungsvalidierung fehl. Wenn der Wert des min-Attributs keine Zahl ist, dann hat das Element keinen minimalen Wert.

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

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was anzeigt, dass der Bereich "umschlagen" kann; zum Beispiel erlaubt dies die Angabe eines Zeitraums von 22 Uhr bis 4 Uhr.

minlength

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

Die Eingabe schlägt bei der Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Textes kleiner ist als minlength UTF-16-Codeeinheiten, was verhindert, dass das Formular gesendet wird. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen.

multiple

Das Boolesche multiple-Attribut, wenn gesetzt, bedeutet, dass der Benutzer in der E-Mail-Steuerung kommagetrennte E-Mail-Adressen eingeben oder mehr als eine Datei mit dem file-Eingabesteuerung auswählen kann. Siehe den email- und file-Eingabetyp.

name

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

Betrachten Sie den name als obligatorisches Attribut (obwohl es nicht ist). Wenn eine Eingabe keine name-Angabe hat oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular übermittelt! (Deaktivierte Steuerungen, nicht markierte Radio-Buttons, nicht markierte Kontrollkästchen und Zurücksetztaste werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

1. _charset_ : Wird verwendet als der Name eines <input>-Elements vom Typ hidden, wird der value der Eingabe automatisch vom Benutzeragenten auf die Zeichenkodierung gesetzt, mit der das Formular gesendet wird.
2. isindex: Aus historischen Gründen ist der Name isindex nicht erlaubt.

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

Nur ein Radio-Button in einer gleichnamigen Gruppe von Radio-Buttons kann gleichzeitig ausgewählt sein. Die Auswahl eines beliebigen Radio-Buttons in dieser Gruppe hebt automatisch die Auswahl des aktuell ausgewählten Radio-Buttons in derselben Gruppe auf. Der Wert des einen ausgewählten Radio-Buttons wird zusammen mit dem Namen gesendet, wenn das Formular übermittelt wird.

Beim Tab-Durchlaufen in eine Gruppe von gleichnamigen Radio-Buttons, wenn einer ausgewählt ist, erhält dieser den Fokus. Wenn sie nicht in der Quellreihenfolge gruppiert sind, wenn einer der Gruppe ausgewählt ist, beginnt das Tab-Durchlaufen in die Gruppe, sobald der erste in der Quellreihenfolge erreicht wird, und überspringt alle, die nicht ausgewählt sind. Wenn keiner ausgewählt ist, erhält die Radio-Button-Gruppe den Fokus, wenn der erste Button in der gleichnamigen Gruppe erreicht wird.

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

Wenn einem Eingabeelement ein name gegeben wird, wird dieser Name zu einer Eigenschaft des HTMLFormElement.elements-Eigentums des Formular-Besitzers. Wenn Sie eine Eingabe haben, deren name auf guest gesetzt ist, und eine andere, deren name hat-size ist, kann der folgende Code verwendet werden:

jsCopy to Clipboard

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

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

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

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

pattern

Gültig für die Eingabetypen text, search, url, tel, email und password, wird das pattern-Attribut verwendet, um einen regulären Ausdruck zu kompilieren, den das value der Eingabe erfüllen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger JavaScript-Regulärausdruck sein, wie ihn der RegExp-Typ verwendet und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert. Keine Schrägstriche sollten um den Text des Musters angegeben werden. Beim Kompilieren des regulären Ausdrucks:

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

Wenn das Musterattribut vorhanden, aber nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut vollständig ignoriert. Wenn das Musterattribut gültig ist und ein nicht-leerer Wert nicht mit dem Muster übereinstimmt, verhindert die Einschränkungsvalidierung das Absenden des Formulars. Wenn das multiple-Attribut vorhanden ist, wird der kompilierte reguläre Ausdruck gegen jeden durch Kommas getrennten Wert gematcht.

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

Siehe Client-seitige Validierung für weitere Informationen.

placeholder

Gültig für die Eingabetypen text, search, url, tel, email, password, und number, gibt das placeholder-Attribut dem Benutzer einen kurzen Hinweis darauf, welche Art von Information im Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf den erwarteten Datentyp gibt, statt einer Erklärung oder Aufforderung. Der Text darf nicht Wagenrückläufe oder Zeilenvorschübe enthalten. Beispielsweise, wenn erwartet wird, dass ein Feld den Vornamen eines Benutzers aufnimmt, und das Label lautet "Vorname", könnte ein geeigneter Platzhalter "z.B., Mustafa" lauten.

Hinweis: Das placeholder-Attribut ist nicht so semantisch nützlich wie andere Möglichkeiten, Ihr Formular zu erklären, und kann unerwartete technische Probleme mit Ihrem Inhalt verursachen. Weitere Informationen finden Sie unter Labels.

popovertarget

Macht ein <input type="button">-Element zu einem Popover-Steuerknopf; nimmt die ID des Popover-Elements, das gesteuert werden soll, als seinen Wert an. Weitere Details finden Sie auf der Popover API Startseite. Das Etablieren einer Beziehung zwischen einem Popover und seinem Auslöseknopf unter Verwendung des popovertarget-Attributs hat zwei zusätzliche nützliche Effekte:

• Der Browser erstellt eine implizite aria-details und aria-expanded-Beziehung zwischen Popover und Auslöser und platziert das Popover in einer logischen Position in der Navigationsreihenfolge der Tastatur, wenn es angezeigt wird. Dies macht das Popover für Benutzer von Tastaturen und unterstützenden Technologien (AT) zugänglicher (siehe auch Popover-Zugänglichkeitsmerkmale).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, wodurch es sehr bequem wird, Popover relativ zu ihren Steuerungen mit CSS-Ankerpositionierung zu positionieren. Weitere Details finden Sie unter Popover-Ankerpositionierung.

popovertargetaction

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

"hide"

Der Knopf wird ein angezeigtes Popover verbergen. Wenn versucht wird, ein bereits verstecktes Popover zu verbergen, wird keine Aktion unternommen.

"show"

Der Knopf wird ein verstecktes Popover anzeigen. Wenn versucht wird, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion unternommen.

"toggle"

Der Knopf wird ein Popover zwischen "zeigen" und "verbergen" 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 vom Steuerelement ausgeführt wird.

readonly

Ein Boolesches Attribut, das angibt, dass der Benutzer den Wert der Eingabe nicht bearbeiten darf, wenn es vorhanden ist. 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 unter HTML-Attribut: readonly.

required

required ist ein Boolesches Attribut, das angibt, dass der Benutzer einen Wert für die Eingabe angeben muss, bevor das oberste Formular gesendet 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-seitige Validierung und im HTML-Attribut: required.

size

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

src

Nur gültig für den image-Eingabeknopf, das src ist ein String, der die URL der Bilddatei angibt, die zur Darstellung des grafischen Submit-Knopfs angezeigt werden soll. Siehe den image-Eingabetyp.

step

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

Wenn nicht explizit einbezogen:

• step hat einen Standardwert von 1 für number und range.
• Jeder Date/Time Eingabetyp hat einen Standardwert für step, der für den Typ geeignet ist; siehe die individuellen Eingangspages: date, datetime-local, month, time, und week.

Der Wert muss eine positive Zahl sein—ganz oder gleitend—oder der spezielle Wert any, der bedeutet, dass kein Schritt impliziert wird und ein beliebiger Wert erlaubt ist (vorbehaltlich anderer Einschränkungen, wie min und max).

Wenn any nicht explizit gesetzt ist, müssen die gültigen Werte für die number, date/time Eingabetypen und range Eingabetypen gleich dem Basismuster für das Angeben des Wertsents sein—dem min Wert und Inkrementen des step-Werts, bis zum max Wert, wenn angegeben.

Wenn Sie beispielsweise <input type="number" min="10" step="2"> haben, dann ist jede gerade ganze Zahl, 10 oder größer, gültig. Wenn weggelassen, <input type="number">, ist jede ganze Zahl gültig, aber Fließkommazahlen (wie 4.2) sind nicht gültig, da step standardmäßig 1 ist. Damit 4.2 gültig ist, hätte step auf any, 0.1, 0.2 oder einen der min-Wert gesetzt werden müssen, der eine Zahl sein muss, die mit .2 endet, wie <input type="number" min="-5.2">.

Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht der Konfiguration folgen, wird der Wert in der Einschränkungsvalidierung als ungültig betrachtet und entspricht der :invalid-Pseudoklasse.

Siehe Client-seitige Validierung für mehr Informationen.

tabindex

Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, ein ganzzahliges Attribut, das angibt, ob das Element den Eingabefokus erlangen kann (fokussierbar ist), wenn es an der sequentiellen Navigation mit der Tastatur teilnehmen soll. Da alle Eingabetypen außer dem Typ hidden fokussierbar sind, sollte dieses Attribut nicht auf Formularen verwendet werden, da dies die Verwaltung der Fokusreihenfolge für alle Elemente im Dokument erfordern würde, was die Benutzerfreundlichkeit und Barrierefreiheit beeinträchtigen könnte, wenn es inkorrekt durchgeführt wird.

title

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, das einen Text enthält, der die Beratung zur Information bezüglich des Elements darstellt, 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 die Hauptklärung der Funktion des Formularelements verwendet werden. Stattdessen verwenden Sie das <label>-Element mit einem for-Attribut, das auf das id-Attribut des Formularelements gesetzt ist. Siehe Labels unten.

type

Ein String, der den Typ des darzustellenden Steuerelements angibt. Zum Beispiel, um ein Kontrollkästchen zu erstellen, wird ein Wert von checkbox verwendet. Wenn weggelassen (oder ein unbekannter Wert angegeben ist), wird der Eingabetyp text verwendet, um ein Klartext-Eingabefeld zu erstellen.

Zugelassene Werte sind auf der Seite Input types oben gelistet.

value

Der Wert der Eingabesteuerung. Wenn er im HTML angegeben ist, ist dies der Anfangswert, und kann von da an jederzeit geändert oder abgerufen werden, indem Sie JavaScript verwenden, um das entsprechende HTMLInputElement-Objekt zu überprüfen. Das value-Attribut ist immer optional, sollte jedoch als obligatorisch für checkbox, radio und hidden betrachtet werden.

width

Nur gültig für den image-Eingabeknopf, ist die width die Breite der Bilddatei, die zur Darstellung des grafischen Submit-Knopfs angezeigt werden soll. Siehe den image-Eingabetyp.

Die folgenden nicht standardisierten Attribute sind ebenfalls in einigen Browsern verfügbar. Im Allgemeinen sollten Sie deren Verwendung vermeiden, es sei denn, es lässt sich nicht vermeiden.

incremental Nicht standardisiert

Das Boolean-Attribut incremental ist eine WebKit- und Blink-Erweiterung (so von Safari, Opera, Chrome, etc. unterstützt), welches angibt, ob der Benutzeragent die Eingabe als Live-Suche behandeln soll. Während der Benutzer den Wert im Feld bearbeitet, sendet der Benutzeragent search-Ereignisse an das HTMLInputElement-Objekt, das die Suchbox darstellt. Dies erlaubt Ihrem Code, die Suchergebnisse in Echtzeit zu aktualisieren, während der Benutzer an der Suche arbeitet.

Wenn incremental nicht angegeben ist, wird das search-Ereignis nur gesendet, wenn der Benutzer explizit eine Suche initiiert (zum Beispiel durch Drücken der Enter- oder Return-Taste, während das Feld bearbeitet wird).

Das search-Ereignis ist rate-limitiert, sodass es nicht häufiger als in einem durch die Implementierung festgelegten Intervall gesendet wird.

orient Nicht standardisiert

Ähnlich wie die -moz-orient nicht-standardmäßige CSS-Eigenschaft, die die <progress> und <meter>-Elemente betrifft, definiert das orient-Attribut die Orientierung des Bereichs-Schiebereglers. Werte umfassen horizontal, was bedeutet, dass der Bereich horizontal angezeigt wird, und vertical, wo der Bereich vertikal angezeigt wird. Siehe Erstellen vertikaler Formularelemente für einen modernen Ansatz zur Erstellung vertikaler Formularelemente.

results Nicht standardisiert

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

Der Wert muss eine nicht-negative Dezimalzahl sein. Wenn nicht bereitgestellt oder ein ungültiger Wert angegeben ist, wird die vom Browser festgelegte Standardanzahl von maximalen Einträgen verwendet.

webkitdirectory Nicht standardisiert

Das Boolean-Attribut webkitdirectory, wenn es vorhanden ist, gibt an, dass nur Verzeichnisse vom Benutzer im Dateiauswahl-Interface ausgewählt werden dürfen. Siehe HTMLInputElement.webkitdirectory für zusätzliche Details und Beispiele.

Obwohl es ursprünglich nur für WebKit-basierte Browser implementiert wurde, ist webkitdirectory auch in Microsoft Edge sowie in Firefox Version 50 und spätere Versionen benutzbar. Dennoch ist es, obwohl es relativ breite Unterstützung hat, immer noch nicht standardisiert und sollte nicht verwendet werden, es sei denn, Sie haben keine Alternative.

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

checkValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls gibt 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 false zurück, löst ein invalid-Ereignis am Element aus und (wenn das Ereignis nicht abgebrochen wird) wird dem Benutzer das Problem gemeldet.

select()

Wählt den gesamten Inhalt des <input>-Elements aus, wenn der Inhalt des Elements selektierbar ist. Für Elemente ohne auswählbaren Textinhalt (wie ein visueller Farbwahl- oder Kalenderdatumseingabe) tut diese Methode nichts.

setCustomValidity()

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

setRangeText()

Setzt den Inhalt des angegebenen Bereichs von Zeichen im Eingabeelement auf eine gegebene Zeichenkette. Ein selectMode-Parameter ist verfügbar, um zu steuern, wie der vorhandene Inhalt beeinflusst wird.

setSelectionRange()

Wählt den angegebenen Bereich von Zeichen innerhalb eines Text-Eingabeelements aus. Tut nichts für Eingaben, die nicht als Text-Eingabefelder präsentiert werden.

showPicker()

Zeigt den Browser-Auswahlfeld für das Eingabeelement, das normalerweise angezeigt wird, wenn das Element ausgewählt wird, aber von einem Knopfdrücken oder anderen Benutzerinteraktionen ausgelöst.

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 um die angegebene Anzahl von Einheiten.

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

Pseudoklassen-Beispiel

Wir können ein label für ein Kontrollkästchen basierend darauf stylen, ob das Kontrollkästchen ausgewählt ist oder nicht. In diesem Beispiel stylen wir die color und font-weight des <label>, das unmittelbar nach einem ausgewählten input kommt. Wir haben keine Stile angewendet, wenn das input nicht ausgewählt 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 Formularsteuerelementen basierend auf ihrem type mit Attributselektoren anzusprechen. CSS-Attributselektoren stimmen mit Elementen basierend entweder nur auf das Vorhandensein eines Attributs oder den Wert eines gegebenen Attributs überein.

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

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

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

Standardmäßig erscheint der Text des Platzhalters als halbtransparent oder hellgrau. Das ::placeholder Pseudoelement ist der placeholder Text der Eingabe. Es kann mit einem eingeschränkten Satz von CSS-Eigenschaften gestylt werden.

::placeholder {
  color: blue;
}

Nur der eingeschränkte Satz von CSS-Eigenschaften, die auf das ::first-line Pseudoelement angewendet werden können, können in einer Regel verwendet werden, die ::placeholder in ihrem Selektor enthält.

Die appearance Eigenschaft ermöglicht die Darstellung (fast) jedes Elements als plattformnative Gestaltung basierend auf dem Thema des Betriebssystems sowie die Entfernung jeglicher plattformnativer Gestaltung mit dem Wert none.

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

Das Setzen von appearance: none entfernt plattformnative Umrandungen, aber nicht die Funktionalität.

Eine spezielle Eigenschaft für textbezogene Eingabeelemente ist die CSS caret-color Eigenschaft, die es Ihnen ermöglicht, die Farbe festzulegen, die verwendet wird, um den Texteingabe-Caret zu zeichnen:

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, das Größenverhalten von Formulareingaben zu steuern (d.h. sie haben standardmäßig eine bevorzugte Größe.) Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben, sodass Formularelemente sich in ihrer Größe anpassen können, um ihre Inhalte zu fassen.

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

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

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

• Anwendung von Farbe auf HTML-Elemente mit CSS.

Siehe auch:

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

Labels sind notwendig, um unterstützenden Text mit einem <input> zu assoziieren. Das <label> Element stellt erläuternde Informationen über ein Formularfeld bereit, die immer angemessen sind (abgesehen von jeglichen Layout-Bedenken, die Sie haben mögen). Es ist nie eine schlechte Idee, ein <label> zu verwenden, um zu erklären, was in ein <input> oder <textarea> eingegeben werden soll.

Assoziierte Labels

Die semantische Paarung von <input> und <label> Elementen ist nützlich für unterstützende Technologien wie Bildschirmlesegeräte. Indem sie mit dem for Attribut auf dem <label>, das mit dem <input> verbunden wird, paarweise verbunden werden, setzen Sie den Bezugspunkt, der es Bildschirmlesern ermöglicht, Eingaben für Benutzer genauer zu beschreiben.

Es reicht nicht aus, einfachen Text neben dem <input> Element zu haben. Vielmehr erfordert Nutzerfreundlichkeit und Zugänglichkeit die Einbeziehung eines impliziten oder expliziten <label>:

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

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

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

Das erste Beispiel ist unzugänglich: es gibt keine Beziehung zwischen der Eingabeaufforderung und dem <input> Element.

Zusätzlich zu einem zugänglichen Namen bietet das Label einen größeren "Treffer"-Bereich für Maus- und Touchscreen-Benutzer, um darauf zu klicken oder zu berühren. Durch das Paaren eines <label> mit einem <input>, wird durch Klicken auf eines von beiden der Fokus auf das <input> gesetzt. Wenn Sie normalen Text verwenden, um Ihr Eingangsfeld zu "labeln", wird dies nicht passieren. Die Aufforderung, Teil des Aktivierungsbereichs für die Eingabe zu sein, ist hilfreich für Personen mit motorischen Kontrollproblemen.

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

Platzhalter sind nicht zugänglich

Das placeholder Attribut ermöglicht Ihnen, Text anzugeben, der innerhalb des Inhaltsbereichs des <input> Elements selbst erscheint, 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, weil es keines ist. Der Platzhalter wird verwendet, um einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht als Erklärung oder Aufforderung.

Der Platzhalter ist nicht nur für Bildschirmleser nicht zugänglich, sondern verschwindet auch, sobald der Benutzer irgendeinen Text in das Formularsteuerelement eingibt oder wenn das Formularsteuerelement bereits einen Wert hat. Browser mit automatischen Seitentranslationsfunktionen können Attribute beim Übersetzen überspringen, was bedeutet, dass der placeholder möglicherweise nicht übersetzt wird.

Zusätzlich zur Verwendung von CSS, um Eingaben basierend auf den :valid oder :invalid UI-Zuständen basierend auf dem aktuellen Zustand jeder Eingabe zu stylen, wie im Abschnitt UI-Pseudoklassen oben erwähnt, bietet der Browser eine client-seitige Validierung beim (versuchten) Absenden des Formulars. Beim Absenden des Formulars zeigt der Browser eine Fehlermeldung auf dem ersten ungültigen Formularsteuerelement an, wenn ein Formularsteuerelement die Einschränkungsvalidierung nicht besteht, unterstützt standardmäßig die Anzeige einer Nachricht basierend auf dem Fehlertyp oder einer von Ihnen gesetzten Nachricht.

Einige Eingabetypen und andere Attribute setzen Grenzen dafür, welche Werte für eine gegebene 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. Verschiedene Fehler könnten auftreten, einschließlich eines rangeUnderflow Fehlers, wenn der Wert weniger als 2 ist, rangeOverflow, wenn er größer als 10 ist, stepMismatch, wenn der Wert eine Zahl zwischen 2 und 10 ist, aber keine gerade Ganzzahl (entspricht nicht den Anforderungen des step Attributs), oder typeMismatch, wenn der Wert keine Zahl ist.

Für die Eingabetypen, deren Domäne der möglichen Werte periodisch ist (also bei Erreichen des höchstmöglichen Wertes die Werte wieder von vorne beginnen, anstatt zu enden), ist es möglich, dass die Werte der max und min Eigenschaften umgekehrt sind, was angibt, dass der Bereich der erlaubten Werte bei min beginnt, um den niedrigstmöglichen Wert geht und dann weiterläuft, bis max erreicht ist. Dies ist besonders nützlich für Daten und Zeiten, wie zum Beispiel, wenn Sie den Bereich von 20 Uhr bis 8 Uhr erlauben möchten:

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

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

Wenn ein Formularsteuerelement nicht das required Attribut hat, ist kein Wert, oder ein leerer String ist nicht ungültig. Selbst wenn die oben genannten Attribute vorhanden sind, wird ein leerer String nicht zu einem Fehler führen.

Wir können Grenzen für die akzeptierten Werte setzen, und unterstützende Browser validieren diese Formularwerte nativ und benachrichtigen den Benutzer, wenn beim Absenden des Formulars ein Fehler vorliegt.

Zusätzlich zu den in der Tabelle oben beschriebenen Fehlern enthält die validityState Schnittstelle die badInput, valid und customError booleschen schreibgeschützten Eigenschaften. 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 booleschen Eigenschaften zeigt ein Wert von true an, dass der angegebene Grund, warum die Validierung möglicherweise fehlgeschlagen ist, zutrifft, mit Ausnahme der valid Eigenschaft, die true ist, wenn der Wert des Elements allen Einschränkungen entspricht.

Wenn es einen Fehler gibt, benachrichtigen die unterstützenden Browser sowohl den Benutzer als auch verhindern, dass das Formular abgesendet wird. Ein Wort der Vorsicht: wenn ein benutzerdefinierter Fehler auf einen wahrheitsgetreuen Wert gesetzt ist (etwas anderes als der leere String oder null), wird das Formular daran gehindert, abgesendet zu werden. Wenn es keine benutzerdefinierte Fehlermeldung gibt und none der anderen Eigenschaften true zurückgeben, wird valid true sein und das Formular kann abgesendet werden.

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

Die letzte Zeile, die die benutzerdefinierte Gültigkeitsnachricht auf den leeren String setzt, ist entscheidend. Wenn der Benutzer einen Fehler macht und die Gültigkeit gesetzt wird, wird das Absenden verhindert, selbst wenn alle Werte gültig sind, bis die Nachricht null ist.

Benutzerdefiniertes Validierungsfehler-Beispiel

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

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

Die grundlegenden HTML-Formularvalidierungsfunktionen lassen dies eine Standardfehlermeldung erzeugen, wenn Sie versuchen, das Formular einzusenden, ohne eine gültige Angabe gemacht zu haben, oder einen Wert, der dem pattern nicht entspricht.

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

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

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

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

Das Beispiel wird wie folgt gerendert:

Kurz gesagt:

• Wir überprüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sich dessen Wert durch den checkValidity()-Methode ändert, über den input-Ereignishandler.
• Wenn der Wert ungültig ist, wird ein invalid-Ereignis ausgelöst und die invalid-Ereignishandlerfunktion wird ausgeführt. Innerhalb dieser Funktion erarbeiten wir, ob der Wert ungültig ist, weil er leer ist oder weil er nicht dem Muster entspricht, indem wir einen if () Block verwenden und eine benutzerdefinierte Gültigkeitsfehlermeldung setzen.
• Folglich wird, wenn der Eingabewert ungültig ist, wenn die Schaltfläche Absenden gedrückt wird, eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Wenn er gültig ist, wird er wie erwartet eingereicht. Dafür muss die benutzerdefinierte Gültigkeit durch Aufrufen von setCustomValidity() mit einem leeren String-Wert abgebrochen werden. Wir machen das daher jedes Mal, wenn das input-Ereignis ausgelöst wird. Wenn Sie dies nicht tun und eine benutzerdefinierte Gültigkeit zuvor gesetzt wurde, wird die Eingabe als ungültig registriert, selbst wenn sie derzeit bei der Einreichung einen gültigen Wert enthält.

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

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

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

Beim Einbeziehen von Eingaben ist es ein Barrierefreiheitsanforderung, Labels hinzuzufügen. Dies ist notwendig, damit diejenigen, die unterstützende Technologien verwenden, erkennen können, wofür die Eingabe gedacht ist. Auch durch Klicken oder Berühren eines Labels wird das zugehörige Formularsteuerelement fokussiert. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für sehende Benutzer, erhöht den zu klickenden oder berührenden Bereich, um das Formularsteuerelement zu aktivieren. Das ist besonders nützlich (und sogar notwenig) für Radiobuttons und Checkboxes, die winzig sind. Weitere Informationen zu Labels allgemein finden Sie unter Labels.

Das Folgende ist ein Beispiel dafür, wie das <label> mit einem <input> Element im obigen Stil verbunden wird. Sie müssen dem <input> ein id Attribut geben. Das <label> benötigt dann ein for Attribut mit demselben Wert wie das id der Eingabe.

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

Interaktive Elemente wie Formulareingaben sollten einen Bereich bereitstellen, der groß genug ist, um ihn leicht zu aktivieren. Dies hilft einer Vielzahl von Personen, einschließlich Personen mit motorischen Kontrollproblemen und Personen, die nicht präzise Eingabemethoden wie einen Stift oder Finger verwenden. Eine Mindestinteraktivgröße von 44×44 CSS-Pixel wird empfohlen.

• Verständnis von Erfolgskriterium 2.5.5: Zielgröße | W3C Understanding WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Touch-Ziele - Das A11Y Projekt

• Formularbeschränkungs-Validierung
• Ihr erstes HTML-Formular
• Wie man ein HTML-Formular strukturiert
• Die nativen Formular-Widgets
• Formulardaten senden
• Validierung von Formulardaten
• Wie man benutzerdefinierte Formular-Widgets erstellt
• HTML-Formulare in älteren Browsern
• Styling von HTML-Formularen
• Erweitertes Styling für HTML-Formulare
• Erstellen von vertikalen Formularelementen