<input>: Das HTML-Eingabeelement

Wie ein <input> funktioniert, variiert beträchtlich je nach dem Wert seines type-Attributs, daher werden die verschiedenen Typen auf ihren eigenen separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben ist, ist der Standardtyp 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 mächtig wegen seiner Attribute; das type Attribut, das mit Beispielen oben beschrieben wurde, ist das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement Schnittstelle basiert, teilen sie technisch gesehen genau dieselbe Menge von Attributen. Allerdings haben die meisten Attribute in der Realität nur auf eine spezifische Teilmenge von Eingabetypen eine Wirkung. Zusätzlich beeinflusst die Art und Weise, wie einige Attribute eine Eingabe beeinflussen, den Eingabetyp auf unterschiedliche Weise.

Dieser Abschnitt bietet eine Tabelle, die alle Attribute mit einer kurzen Beschreibung auflistet. Diese Tabelle wird gefolgt von einer Liste, die jedes Attribut im Detail beschreibt, zusammen mit den Eingabetypen, mit denen sie verbunden sind. Diejenigen, die für die meisten oder alle Eingabetypen gemeinsam sind, werden unten ausführlicher definiert. Attribute, die einzigartig für bestimmte Eingabetypen sind – oder Attribute, die für alle Eingabetypen gemeinsam sind, aber spezielle Verhaltensweisen auf einem bestimmten Eingabetyp haben – werden stattdessen auf den Seiten dieser Typen dokumentiert.

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

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

accept

Nur für den file-Eingabetyp gültig, definiert das accept-Attribut, welche Dateitypen in einem file-Upload-Steuerelement ausgewählt werden dürfen. Siehe den file Eingabetyp.

alt

Nur für den image-Button gültig, bietet das alt-Attribut alternativen Text für das Bild, der den Wert des Attributs anzeigt, falls das Bild src fehlt oder sonst nicht geladen werden kann. Siehe den image Eingabetyp.

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und, wenn ja, in welcher Weise. Weitere Informationen finden Sie auf der Seite des globalen Attributs autocapitalize.

autocomplete

(Kein Boolean-Attribut!) Das autocomplete Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenfolge, die beschreibt, welche Art von Autovervollständigungs-Funktionalität das Eingabeelement bereitstellen soll. Eine typische Implementierung von Autovervollständigung ruft vorherige Werte auf, die im gleichen Eingabefeld eingegeben wurden, jedoch können komplexere Formen der Autovervollständigung existieren. Beispielsweise könnte ein Browser mit der Kontaktliste eines Geräts integriert werden, um E-Mail-Adressen in einem E-Mail-Eingabefeld automatisch zu vervollständigen. Siehe autocomplete für zulässige Werte.

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

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

autofocus

Ein Boolean-Attribut, das, wenn vorhanden, angibt, dass die Eingabe automatisch den Fokus erhalten sollte, wenn die Seite fertig geladen ist (oder wenn das <dialog> mit dem Element angezeigt wurde).

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

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

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

Warnung: Die automatische Fokussierung eines Formular-Steuerelements kann sehbehinderte Personen, die Bildschirmlesetechnologie verwenden, und Personen mit kognitiven Beeinträchtigungen verwirren. Wenn autofocus zugewiesen wird, "teleportieren" Screen-Reader ihre Benutzer ohne Vorwarnung zum Formular-Steuerelement.

Wenden Sie bei der Anwendung des autofocus-Attributs sorgfältige Überlegungen zur Barrierefreiheit an. Die automatische Fokussierung eines Steuerelements kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann auch dazu führen, dass dynamische Tastaturen auf einigen Touch-Geräten angezeigt werden. Während ein Screen-Reader das Etikett des Formular-Steuerelements ansagt, das den Fokus erhält, wird der Screen-Reader nichts vor dem Etikett ansagen, und der sehende Benutzer auf einem kleinen Gerät wird gleichermaßen den durch den vorhergehenden Inhalt geschaffenen Kontext verpassen.

capture

Eingeführt in der HTML-Spezifikation für die Medienaufnahme und nur für den file Eingabetyp gültig, definiert das capture Attribut, welches Medium — Mikrofon, Video oder Kamera — verwendet werden sollte, um eine neue Datei zur Upload-Steuerung mit file-Upload-Steuerung in unterstützten Szenarien zu erfassen. Siehe den file Eingabetyp.

checked

Für sowohl den radio als auch checkbox Typ gültig, ist checked ein Boolean-Attribut. Wenn es auf einem radio-Typ vorhanden ist, gibt es an, dass die Optionsschaltfläche die derzeit ausgewählte in der Gruppe der gleichbenannten Optionsschaltflächen ist. Wenn es auf einem checkbox-Typ vorhanden ist, gibt es an, dass das Auswahlkästchen standardmäßig ausgewählt ist (wenn die Seite geladen wird). Es zeigt nicht an, ob dieses Kontrollkästchen aktuell markiert ist: Wenn der Status des Kontrollkästchens geändert wird, spiegelt dieses Inhaltsattribut nicht die Änderung wider. (Nur das HTMLInputElement's checked IDL Attribut wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabesteuerungen werden die Werte von Checkboxen und Optionsfeldern nur dann in den übermittelten Daten erfasst, wenn sie derzeit checked sind. Wenn sie es sind, werden der Name und der Wert(e) der markierten Steuerelemente übermittelt.

Zum Beispiel, wenn eine Checkbox mit dem name fruit einen value von cherry hat und die Checkbox ausgewählt ist, werden die gesendeten Formulardaten fruit=cherry beinhalten. Wenn das Auswahlkästchen nicht aktiv ist, taucht es überhaupt nicht in den Formulardaten auf. Der Standard value für Checkboxen und Optionsfelder ist on.

dirname

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

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

disabled

Ein Boolean-Attribut, das, wenn vorhanden, angibt, dass der Benutzer nicht mit der Eingabe interagieren darf. Deaktivierte Eingaben werden typischerweise mit einer gedämpfteren Farbe oder einer anderen Form der Anzeige dargestellt, dass das Feld nicht verfügbar ist.

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

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

form

Ein String, der das <form> Element angibt, mit dem die Eingabe verknüpft ist (d.h. ihr Formularbesitzer). Der Wert dieser Zeichenkette, wenn vorhanden, muss mit dem id eines <form> Elements im gleichen Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben wird, ist das <input> Element mit dem nächstgelegenen enthaltenen Formular, wenn vorhanden, verknüpft.

Das form-Attribut ermöglicht es Ihnen, eine Eingabe irgendwo im Dokument zu platzieren, sie jedoch einem Formular an anderer Stelle im Dokument zuzuordnen.

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

formaction

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

formenctype

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

formmethod

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

formnovalidate

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

formtarget

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

height

Nur für den image Eingangstyp gültig, ist die height die Höhe der zu darstellenden Bilddatei, um die grafische Sendeschaltfläche darzustellen. Siehe den image Eingangstyp.

id

Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, und das eine eindeutige Kennung (ID) definiert, die im gesamten Dokument einzigartig sein muss. Sein Zweck ist es, das Element beim Verlinken zu identifizieren. Der Wert wird als der Wert des <label>'s for-Attributs verwendet, um das Label mit dem Formular-Steuerelement zu verknüpfen. Siehe <label>.

inputmode

Allgemeiner Wert, der für alle Elemente gültig ist. Er bietet Browsern einen Hinweis auf die Art der virtuellen Tastaturkonfiguration, die beim Bearbeiten dieses Elements oder seines Inhalts verwendet werden soll. Werte sind none, text, tel, url, email, numeric, decimal und search.

list

Der dem list-Attribut gegebene Wert sollte die id eines <datalist>-Elements im selben Dokument sein. Die <datalist>-Element bietet eine Liste vordefinierter Werte an, die dem Benutzer zur Auswahl vorgeschlagen werden. Alle Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

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

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

Abhängig vom Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen sehen, Markierungen entlang eines Bereichs oder sogar eine Eingabe, die sich wie ein <select> öffnet, jedoch die Eingabe nicht gelisteter Werte zulässt. Überprüfen Sie die Browser-Kompatibilitätstabelle für die anderen Eingabetypen.

Siehe das <datalist>-Element.

max

Gültig für date, month, week, time, datetime-local, number, und range, definiert es den größten Wert im Bereich der erlaubten Werte. Wenn der eingegebene value in das Element diesen überschreitet, schlägt das Element in der Existenzprüfung fehl. Wenn der Wert des max-Attributs keine Zahl ist, 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 kleiner als der von min sein, was darauf hindeutet, dass der Bereich umlaufen kann; dies ermöglicht Ihnen beispielsweise, einen Zeitbereich von 22 Uhr bis 4 Uhr anzugeben.

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 wird, oder ein ungültiger Wert angegeben wird, hat das Feld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe wird die Existenzüberprüfung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes länger als maxlength UTF-16 Codeeinheiten ist. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben können, als durch das maxlength Attribut erlaubt sind. Die Existenzüberprüfung 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 der erlaubten Werte. Wenn der eingegebene value in das Element kleiner als dieser ist, schlägt das Element in der Existenzüberprüfung fehl. Wenn der Wert des min-Attributs keine Zahl ist, hat das Element keinen minimalen Wert.

Dieser Wert muss kleiner oder gleich dem Wert des max-Attributs sein. Wenn das min-Attribut vorhanden ist, aber nicht angegeben oder ungültig ist, wird kein min-Wert angewendet. Wenn das min-Attribut gültig ist und ein nicht-leerer Wert kleiner als das durch das min-Attribut erlaubte Minimum ist, verhindert die Existenzüberprüfung die Formularübermittlung. 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 kleiner als der von min sein, was darauf hinweist, dass der Bereich umlaufen kann; dies ermöglicht Ihnen beispielsweise, einen Zeitbereich von 22 Uhr bis 4 Uhr anzugeben.

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 durch maxlength spezifizierten Wert ist. Wenn kein minlength angegeben wird, oder ein ungültiger Wert angegeben wird, hat die Eingabe keine Mindestlänge.

Die Eingabe wird die Existenzüberprüfung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes kürzer als minlength UTF-16 Codeeinheiten ist, wodurch die Formularübermittlung verhindert wird. Die Existenzüberprüfung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen.

multiple

Wenn das Boolean-Attribut multiple gesetzt ist, bedeutet dies, dass der Benutzer durch Kommas getrennte E-Mail-Adressen im Email-Widget eingeben oder mehr als eine Datei mit der file-Eingabe auswählen kann. Siehe die email und file Eingabetypen.

name

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

Betrachten Sie den name als ein erforderliches Attribut (obwohl es das nicht ist). Wenn eine Eingabe keinen name-Wert hat oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular übermittelt! (Deaktivierte Steuerelemente, nicht markierte Optionsfelder, nicht markierte Checkboxen und Zurücksetzen-Tasten werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

1. _charset_ : Wenn der Name einer <input> Element vom Typ hidden verwendet wird, wird der value der Eingabe automatisch vom user agent auf die Zeichencodierung gesetzt, die zur Übermittlung des Formulars verwendet wird.
2. isindex: Aus historischen Gründen ist der Name isindex nicht erlaubt.

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

Nur ein Optionsfeld in einer gleichbenannten Gruppe von Optionsfeldern kann gleichzeitig markiert sein. Das Auswählen eines beliebigen Optionsfelds in dieser Gruppe deaktiviert automatisch jedes aktuell markierte Optionsfeld in derselben Gruppe. Der Wert dieses einen markierten Optionsfelds wird zusammen mit dem Namen gesendet, wenn das Formular übermittelt wird.

Wenn Sie in eine Serie von gleichbenannten Gruppen von Optionsfeldern tabulieren, wenn eines markiert ist, erhält dieses den Fokus. Wenn sie nicht zusammen in der Quellreihenfolge gruppiert sind, wenn eines der Gruppe markiert ist, beginnt das Tabben in die Gruppe, sobald das erste in der Gruppe erreicht wird, und überspringt alle, die nicht markiert sind. Mit anderen Worten, wenn eines markiert ist, überspringt das Tabben die nicht markierten Optionsfelder der Gruppe. Wenn keines markiert ist, erhält die Optionsfeldgruppe den Fokus, wenn das erste Feld in der gleich genannten Gruppe erreicht wird.

Sobald eines der Optionsfelder in einer Gruppe den Fokus hat, wird durch die Verwendung der Pfeiltasten durch alle_OPTIONS_ felder derselben Namen navigiert, selbst wenn die Optionen nicht in der Quellreihenfolge zusammengefasst.

Wenn einem Eingabeelement ein name zugewiesen wird, wird dieser Name zu einer Eigenschaft des Eigentümer-Formularelements HTMLFormElement.elements Eigenschaft. Wenn Sie eine Eingabe, deren name auf guest gesetzt ist, und eine weitere, deren name auf hat-size gesetzt ist, haben, 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 einer integrierten Eigenschaft des Formulars entspricht, da Sie damit die vordefinierte Eigenschaft oder Methode mit diesem Bezug auf das entsprechende Eingabefeld überschreiben würden.

pattern

Gültig für text, search, url, tel, email, und password ist das pattern-Attribut ein regulärer Ausdruck, dem der value des Eingabefelds entsprechen muss, damit der Wert die Existenzüberprüfung besteht. Er muss ein gültiger JavaScript-Regulärer-Ausdruck sein, wie er durch den RegExp Typ verwendet wird, und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist. Keine Schrägstriche sollten um den Mustertext angegeben werden. Beim Kompilieren des regulären Ausdrucks:

1. wird das Muster implizit mit ^(?: und )$ umschlossen, so dass die Übereinstimmung gegen die gesamte Eingabe des Wertes erforderlich ist, d.h. ^(?:<pattern>)$.
2. wird das 'v' Flagge angegeben, so dass das Muster als eine Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII.

Wenn das pattern-Attribut vorhanden, aber nicht spezifiziert oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut wird vollständig ignoriert. Ist das pattern-Attribut gültig und ein nicht-leerer Wert stimmt nicht mit dem Muster überein, verhindert die Existenzüberprüfung die Formularübermittlung. Wenn das multiple vorhanden ist, wird der kompilierte reguläre Ausdruck gegen jeden durch Kommas getrennten Wert abgeglichen.

Hinweis: Wenn Sie das pattern-Attribut verwenden, informieren Sie den Benutzer über das erwartete Format, indem Sie erläuternden Text in der Nähe angeben. Sie können auch ein title Attribut einschließen, um zu erklären, welche Anforderungen an das Muster erfordern sind; die meisten Browser werden diesen Titel als Tooltip angezeigt. Die sichtbare Erklärung ist zur Barrierefreiheit erforderlich. Der Tooltip ist eine Verbesserung.

Siehe Client-seitige Validierung für weitere Informationen.

placeholder

Gültig für text, search, url, tel, email, password, und number, das placeholder-Attribut bietet dem Benutzer einen kurzen Hinweis darauf, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf den erwarteten Datentyp gibt, anstatt einer Erklärung oder einer Aufforderung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten. Wenn beispielsweise ein Feld erwartet, den Vornamen des Benutzers zu erfassen, und sein Label "Vorname" lautet, könnte ein geeigneter Platzhalter "z.B. Mustafa" sein.

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

popovertarget

Wandelt ein <input type="button"> Element in einen Popover-Steuerknopf um; nimmt die ID des kontrollierten Popover-Elements als Wert. Siehe die Popover-API Landing-Seite für mehr Details. Das Herstellen einer Beziehung zwischen einem Popover und seinem Auslöser-Button mithilfe 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 Tastaturnavigationsfolge, wenn es angezeigt wird. Dies macht das Popover zugänglicher für Tastatur- und unterstützende Technologie-(AT)-Benutzer (siehe auch Popover-Barrierefreiheitsfunktionen).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr bequem macht, Popover relativ zu ihren Steuerungen mit CSS-Ankerpositionierung zu positionieren. Siehe Popover-Ankerpositionierung für weitere Details.

popovertargetaction

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

"hide"

Der Button wird ein angezeigtes Popover ausblenden. Wenn Sie versuchen, ein bereits verborgenes Popover auszublenden, wird keine Aktion durchgeführt.

"show"

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

"toggle"

Der Button wird ein Popover zwischen angezeigtem und verborgenem Zustand umschalten. Wenn das Popover verborgen ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es verborgen. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die vom Steuerknopf ausgeführt wird.

readonly

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

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

required

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

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

size

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

src

Nur für den image Eingabetyp gültig, ist das src ein String, der die URL der anzuzeigenden Bilddatei angibt, um die grafische Sende-Schaltfläche darzustellen. Siehe den image Eingangstyp.

step

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

Wenn nicht explizit eingeschlossen:

• Standardmäßig ist step auf 1 für number und range.
• Jeder Datums-/Uhrzeit-Eingabetyp hat einen Standard-step-Wert, der für den Typ angemessen ist; siehe die einzelnen Eingabeseiten: date, datetime-local, month, time, und week.

Der Wert muss eine positive Zahl - Ganzzahl oder Gleitkommazahl - oder der spezielle Wert any sein, was bedeutet, dass kein Schritt impliziert ist und jeder Wert erlaubt ist (vorbehaltlich anderer Einschränkungen, wie min und max).

Wenn any nicht explizit gesetzt ist, sind für number, datums-/uhrzeitspezifische Eingabetypen und range-Eingabetypen gültige Werte gleich dem Schrittgrund - dem min Wert und Inkrementen des Schrittwertes, bis zum max Wert, falls angegeben.

Zum Beispiel, wenn Sie <input type="number" min="10" step="2"> haben, dann ist jede gerade Zahl größer oder gleich 10 gültig. Falls weggelassen, <input type="number">, jede ganze Zahl ist gültig, aber Gleitkommazahlen (wie 4.2) sind nicht gültig, da step standardmäßig auf 1 gesetzt ist. Damit 4.2 gültig ist, hätte step auf any, 0.1, 0.2, oder ein anderer Wert gesetzt werden müssen oder der min-Wert wäre eine Zahl gewesen, die auf .2 endet, zum Beispiel <input type="number" min="-5.2">.

Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht der Schrittkonfiguration entsprechen, wird der Wert in der Existenzüberprüfung als ungültig angesehen und entspricht der :invalid Pseudoklasse.

Siehe Client-seitige Validierung für weitere Informationen.

tabindex

Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, ein ganzzahliges Attribut, das anzeigt, ob das Element den Eingabefokus erhalten kann (fokussierbar ist), ob es an der sequentiellen Tastaturnavigation teilnehmen soll. Da alle Eingabetypen außer für Eingaben vom Typ hidden fokussierbar sind, sollte dieses Attribut nicht auf Formularsteuerungen angewendet werden, da das Erfordernis der Verwaltung der Fokusreihenfolge für alle Elemente im Dokument mit dem Risiko der Schädigung von Benutzerfreundlichkeit und Zugänglichkeit, wenn es unkorrekt durchgeführt wird, besteht.

title

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

type

Ein String, der angibt, welche Art von Steuerelement gerendert werden soll. Zum Beispiel wird ein Wert von checkbox verwendet, um eine Checkbox zu erstellen. Wird weggelassen (oder ein unbekannter Wert angegeben), so wird der Eingabetyp text verwendet, und es wird ein einfaches Texteingabefeld erstellt.

Zugelassene Werte sind oben in den Eingabetypen aufgelistet.

value

Der Wert der Eingabesteuerung. Wenn im HTML angegeben, ist dies der Anfangswert, und von da an kann er jederzeit mithilfe von JavaScript, um die jeweilige HTMLInputElement Objekt value-Eigenschaft zuzugreifen, geändert oder abgerufen werden. Das value-Attribut ist immer optional, sollte jedoch als obligatorisch für checkbox, radio, und hidden betrachtet werden.

width

Nur für den image Eingabetyp gültig, ist die width die Breite der zu darstellenden Bilddatei, um die grafische Sende-Schaltfläche zu repräsentieren. Siehe den image Eingangstyp.

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

incremental Nicht standardisiert

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

Wenn incremental nicht spezifiziert ist, wird das search Ereignis nur gesendet, wenn der Benutzer explizit eine Suche initiiert (z.B. durch Drücken der Enter- oder Return-Taste während der Bearbeitung des Feldes).

Das search Ereignis unterliegt einer Frequenzbegrenzung, sodass es nicht häufiger als in einem implementationsspezifischen Intervall gesendet wird.

orient Nicht standardisiert

Ähnlich dem -moz-orient nicht-standardisierten CSS-Stil, der die <progress> und <meter> Elemente betrifft, definiert das orient Attribut die Ausrichtung des Bereichsschiebers. Zu den Werten gehören horizontal, wodurch der Bereich horizontal gerendert wird, und vertical, bei der der Bereich vertikal gerendert wird. Siehe Erstellen von vertikalen Formular-Steuerelementen für einen modernen Ansatz zur Erstellung vertikaler Formular-Steuerelemente.

results Nicht standardisiert

Das results Attribut – nur von Safari unterstützt – ist ein numerischer Wert, der es Ihnen erlaubt, die maximale Anzahl von Einträgen zu überschreiben, die im vom <input> Element nativ bereitgestellten Dropdown-Menü vorheriger Suchanfragen angezeigt werden.

Der Wert muss eine nicht-negative Dezimalzahl sein. Falls nicht angegeben oder ein ungültiger Wert angegeben wird, verwendet der Browser die standardmäßig maximale Anzahl von Einträgen.

webkitdirectory Nicht standardisiert

Das Boolean webkitdirectory-Attribut, wenn vorhanden, gibt an, dass nur Verzeichnisse für die Auswahl des Benutzers im Datei-Picker-Interface zur Verfügung stehen sollten. Siehe HTMLInputElement.webkitdirectory für zusätzliche Details und Beispiele.

Obwohl ursprünglich nur für WebKit-basierte Browser implementiert, ist webkitdirectory auch in Microsoft Edge sowie Firefox 50 und späteren Versionen verwendbar. Trotz der vergleichsweise breiten Unterstützung sollte es dennoch nicht verwendet werden, es sei denn, es gibt keine Alternative.

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

checkValidity()

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

reportValidity()

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

select()

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

setCustomValidity()

Setzt eine benutzerdefinierte Nachricht zur Anzeige, wenn der Eingabewert des Elements ungültig ist.

setRangeText()

Setzt den Inhalt des angegebenen Zeichenbereichs im Eingabelement auf eine angegebene Zeichenfolge. Ein selectMode Parameter ist verfügbar, um zu steuern, wie der bestehende Inhalt betroffen ist.

setSelectionRange()

Wählt den angegebenen Zeichenbereich innerhalb eines Text-Eingabeelements aus. Bewirkt nichts für Eingaben, die nicht als Text-Eingabefelder dargestellt werden.

showPicker()

Zeigt den Auswahlsteuerelement für das Eingabeelement im Browser an, der normalerweise angezeigt wird, wenn das Element ausgewählt wird, jedoch durch einen Tastendruck oder eine andere Benutzerinteraktion ausgelöst.

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.

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

Pseudoklassen-Beispiel

Wir können ein Checkbox-Label basierend darauf stylen, ob die Checkbox angekreuzt ist oder nicht. In diesem Beispiel stylen wir die color und font-weight des <label>, das unmittelbar nach einem angekreuzten Input kommt. Wir haben keine Styles angewendet, wenn das input nicht angekreuzt 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 Typen von Formularelementen basierend auf ihrem type mit Attributselektoren anzusprechen. CSS-Attributselektoren selektieren Elemente basierend auf entweder nur dem Vorhandensein eines Attributs oder dem Wert eines bestimmten Attributs.

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

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

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

Standardmäßig erscheint der Placeholder-Text in einem durchscheinenden oder hellgrauen Farbton. Das ::placeholder Pseudoelement ist der placeholder Text des Inputs. Es kann mit einem limitierten Satz von CSS-Eigenschaften gestyled werden.

::placeholder {
  color: blue;
}

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

Die appearance Eigenschaft ermöglicht das Darstellen von (fast) jedem Element im plattformeigenen Stil basierend auf dem Betriebssystemthema sowie das Entfernen jeglicher plattformeigenen Gestaltung mit dem Wert none.

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

Das Festlegen von appearance: none entfernt die plattformeigenen Rahmen, aber nicht die Funktionalität.

Eine Eigenschaft, die speziell auf textorientierte Eingabeelemente abzielt, ist die CSS-Eigenschaft caret-color, die Ihnen die Möglichkeit gibt, die Farbe des Texteingabe-Cursors zu bestimmen:

HTML

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

CSS

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

Ergebnis

Die field-sizing Eigenschaft ermöglicht es Ihnen, das Größenverhalten von Formulareingaben zu steuern (d.h., sie erhalten standardmäßig eine bevorzugte Größe). Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben und Formularelementen zu erlauben, sich in der Größe anzupassen, um ihren Inhalt 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), Eingabetypen file und <textarea> Elementen.

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

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

• Anwendung von Farbe auf HTML-Elemente mit CSS.

Siehe auch:

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

Labels sind erforderlich, um erklärenden Text mit einem <input> zu verknüpfen. Das <label>-Element bietet erläuternde Informationen über ein Formularfeld, die immer angemessen sind (abgesehen von jeglichen Layoutbedenken, die Sie haben könnten). Es ist immer eine gute Idee, ein <label> zu verwenden, um zu erklären, was in ein <input> oder <textarea> eingegeben werden soll.

Zugewiesene Labels

Die semantische Paarung von <input> und <label>-Elementen ist nützlich für Hilfstechnologien wie Bildschirmleser. Indem sie mit dem for-Attribut des <label> miteinander verbunden werden, binden Sie das Label an das Input auf eine Art, die es Bildschirmlesern ermöglicht, Eingaben den Nutzern präziser zu beschreiben.

Es reicht nicht aus, einfachen Text neben dem <input>-Element zu haben. Vielmehr erfordert die Benutzerfreundlichkeit und Barrierefreiheit 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 existiert keine Beziehung zwischen der Aufforderung und dem <input>-Element.

Zusätzlich zu einem zugänglichen Namen bietet das Label eine größere "Treffer"-Fläche für Maus- und Touchscreen-Benutzer zum Klicken oder Berühren. Indem ein <label> mit einem <input> gepaart wird, fokussiert das Klicken auf eines von beiden das <input>. Wenn Sie einfachen Text verwenden, um Ihre Eingabe "zu beschriften", wird dies nicht passieren. Das Einbeziehen der Aufforderung als Aktivierungsbereich für die Eingabe ist hilfreich für Menschen mit motorischen Kontrollbedingungen.

Als Webentwickler ist es wichtig, dass wir niemals annehmen, dass Menschen alles wissen, was wir wissen. Die Vielfalt der Menschen, die das Web - und damit Ihre Website - nutzen, garantiert praktisch, dass einige Besucher Ihrer Website einige Variation in ihren Denkprozessen und/oder Umständen haben werden, die sie dazu bringt, Ihre Formulare sehr unterschiedlich von Ihnen zu interpretieren, ohne klare und korrekt präsentierte Labels.

Platzhalter sind nicht zugänglich

Das placeholder-Attribut ermöglicht es Ihnen, Text festzulegen, der innerhalb der inhaltsbereichsichen <input>-Elemente selbst erscheint, wenn sie leer sind. Der Platzhalter sollte niemals benötigt werden, um Ihre Formulare zu verstehen. Er ist kein Label und sollte nicht als Ersatz verwendet werden, weil er keins ist. Der Platzhalter wird verwendet, um einen Hinweis darauf zu geben, wie der eingegebene Wert aussehen sollte, nicht als Erklärung oder Aufforderung.

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

Zusätzlich zur Nutzung von CSS, um Inputs basierend auf den :valid- oder :invalid-UI-Zuständen basierend auf dem aktuellen Zustand jedes Inputs zu stylen, wie im Abschnitt UI-Pseudoklassen oben erwähnt, bietet der Browser bei (versuchter) Formularübermittlung eine client-seitige Validierung an. Bei der Formularübermittlung, wenn es ein Formularsteuerungselement gibt, das die Eingabebereichsvalidierung nicht besteht, zeigen unterstützte Browser eine Fehlermeldung am ersten ungültigen Formularsteuerungselement an; sie zeigen entweder eine Standard-Nachricht basierend auf dem Fehlertyp oder eine von Ihnen festgelegte Nachricht an.

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

Für die Eingabetypen, deren mögliche Werte periodisch sind (das heißt, beim höchsten möglichen Wert, wickeln sie sich zurück zum Anfang anstatt zu enden), ist es möglich, dass die Werte der Eigenschaften max und min umgekehrt sind, was darauf hinweist, dass der Bereich der zulässigen Werte bei min beginnt, sich zurückwickelt zum niedrigsten möglichen Wert und dann weitergeht bis max erreicht wird. Dies ist besonders nützlich für Daten und Zeiten, z.B. wenn Sie das Zeitfenster von 20:00 Uhr bis 8:00 Uhr erlauben wollen:

<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 eine leere Zeichenfolge nicht ungültig. Selbst wenn die oben genannten Attribute vorhanden sind, mit Ausnahme von required, führt eine leere Zeichenfolge nicht zu einem Fehler.

Wir können Einschränkungen dafür setzen, welche Werte wir akzeptieren, und unterstützende Browser werden diese Formularwerte nativ validieren und den Benutzer nach einem Fehler beim Absenden des Formulars benachrichtigen.

Zusätzlich zu den oben in der Tabelle beschriebenen Fehlern enthält das validityState-Interface die 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 Booleans ist ein Wert von true eine Bestätigung, dass der angegebene Grund, warum die Validierung möglicherweise fehlgeschlagen ist, zutrifft, mit Ausnahme der Eigenschaft valid, die true ist, wenn der Wert des Elements alle Einschränkungen einhält.

Wenn ein Fehler auftritt, warnen unterstützte Browser sowohl den Benutzer als auch verhindern das Senden des Formulars. Ein Wort der Warnung: Wenn eine benutzerdefinierte Fehlernachricht auf einen wahrheitsgemäßen Wert (alles andere als die leere Zeichenfolge oder null) gesetzt wird, wird das Formular daran gehindert, gesendet zu werden. Wenn es keine benutzerdefinierte Fehlermeldung gibt und keine anderen Eigenschaften true zurückgeben, wird valid true sein und das Formular kann gesendet 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 die leere Zeichenfolge setzt, ist entscheidend. Wenn der Benutzer einen Fehler macht und die Gültigkeit gesetzt wird, wird es nicht senden, selbst wenn alle Werte gültig sind, bis die Meldung null ist.

Beispiel für benutzerdefinierte Validierungsfehler

Wenn Sie eine benutzerdefinierte Fehlernachricht anzeigen möchten, wenn ein Feld die Validierung nicht besteht, müssen Sie die Constraint Validation API verwenden, die für <input> (und verwandte) Elemente verfügbar ist. 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 dies eine Standardfehlermeldung erzeugt, wenn Sie versuchen, das Formular ohne gültig ausgefüllte oder nicht mit dem pattern übereinstimmende Werte abzusenden.

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

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

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

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

Das Beispiel wird wie folgt dargestellt:

Kurz gesagt:

• Wir prüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sich dessen Wert ändert, indem wir die checkValidity()-Methode über den input-Ereignishandler ausführen.
• Wenn der Wert ungültig ist, wird ein invalid-Ereignis ausgelöst und die invalid-Ereignishandlerfunktion wird ausgeführt. Innerhalb dieser Funktion ermitteln wir anhand eines if ()-Blocks, ob der Wert ungültig ist, weil er leer ist oder nicht dem Muster entspricht, und setzen eine benutzerdefinierte Fehlernachricht für die Gültigkeit.
• Infolgedessen wird, wenn der Eingabewert ungültig ist, wenn der Senden-Button gedrückt wird, eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Ist er gültig, wird er wie erwartet gesendet. Damit dies geschieht, muss die benutzerdefinierte Gültigkeit storniert werden, indem setCustomValidity() mit einem leeren Zeichenfolgenwert aufgerufen wird. Deshalb machen wir dies jedes Mal, wenn das input-Ereignis ausgelöst wird. Wenn Sie dies nicht tun und zuvor eine benutzerdefinierte Gültigkeit festgelegt wurde, registriert sich die Eingabe als ungültig, selbst wenn sie derzeit einen gültigen Wert enthält, sobald sie gesendet wird.

Die zugelassenen Eingaben für bestimmte <input>-Typen hängen von der lokalen Region ab. In einigen Regionen ist 1.000,00 eine gültige Nummer, während in anderen Regionen die gültige Eingabe 1.000,00 ist.

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

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

Beim Einfügen von Eingaben ist es eine Anforderung bei der Barrierefreiheit, nebenstehend Labels hinzuzufügen. Dies ist notwendig, damit Benutzer, die assistive Technologien verwenden, erkennen können, wofür die Eingabe gedacht ist. Außerdem verleiht das Klicken oder Berühren eines Labels dem zugehörigen Formularsteuerungselement den Fokus. Dies verbessert die Zugänglichkeit und Benutzerfreundlichkeit für sehende Benutzer und erhöht den Bereich, den ein Benutzer klicken oder berühren kann, um das Formularsteuerungselement zu aktivieren. Dies ist besonders nützlich (und sogar notwendig) für Radiobuttons und Checkboxen, die winzig sind. Weitere Informationen zu Labels im Allgemeinen finden Sie unter Labels.

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

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

Interaktive Elemente wie Formulareingaben sollten eine ausreichend große Fläche bieten, damit es leicht ist, sie zu aktivieren. Dies hilft einer Vielzahl von Personen, einschließlich Menschen mit motorischen Kontrollproblemen und Personen, die ungenaue Eingabemethoden wie einen Stylus oder Finger verwenden. Eine minimale interaktive Größe von 44×44 [CSS-Pixel] ist empfohlen.

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

• Formular-Constraint-Validierung
• Ihr erstes HTML-Formular
• Anleitung zur Strukturierung eines HTML-Formulars
• Native Formular-Widgets
• Versenden von Formulardaten
• Formdatenvalidierung
• Anleitung zur Erstellung benutzerdefinierter Formular-Widgets
• HTML-Formulare in Legacy-Browsern
• Styling von HTML-Formularen
• Fortgeschrittenes Styling für HTML-Formulare
• Erstellen vertikaler Formulareingaben