Das<input>-ElementHTML wird verwendet, um interaktive Steuerelemente für webbasierte Formulare zu erstellen, um Daten vom Benutzer zu akzeptieren. Je nach Gerät undBenutzeragent stehen eine Vielzahl von Eingabedaten und Steuerelement-Widgets zur Verfügung. Das<input>-Element ist eines der mächtigsten und komplexesten im gesamten HTML aufgrund der schier zahlreichen Kombinationen von Eingabetypen und Attributen.

Probieren Sie es aus

<label for="name">Name (4 to 8 characters):</label><input  type="text"   name="name"  required  minlength="4"  maxlength="8"  size="10" />

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

<input> Typen

Wie ein<input> funktioniert, variiert erheblich abhängig vom Wert seinestype-Attributs. Daher werden die unterschiedlichen Typen in separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben wird, ist der Standardtyptext.

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 name="userId" type="hidden" value="abc123" />

<input type="image" name="image" src="" alt="image input"/>

<input type="month" name="month"/>

<input type="number" name="number"/>

<input type="password" name="password"/>

<input type="radio" name="radio"/>

<input type="range" name="range" min="0" max="25"/>

<input type="reset" name="reset"/>

<input type="search" name="search"/>

<input type="submit" name="submit"/>

<input type="tel" name="tel"/>

<input type="text" name="text"/>

<input type="time" name="time"/>

<input type="url" name="url"/>

<input type="week" name="week"/>

<input type="datetime" name="datetime"/>

Attribute

Das<input>-Element ist so mächtig, aufgrund seiner Attribute; dastype-Attribut, wie oben in den Beispielen beschrieben, ist das wichtigste. Da jedes<input>-Element, unabhängig vom Typ, auf derHTMLInputElement-Schnittstelle basiert, teilen sie technisch gesehen denselben Satz an Attributen. In der Realität haben jedoch die meisten Attribute nur einen Effekt auf eine bestimmte Teilmenge von Eingabetypen. Darüber hinaus beeinflussen einige Attribute, je nach Eingabetyp, unterschiedliche Eingabetypen auf unterschiedliche Weise.

Dieser Abschnitt enthält eine Tabelle, in der alle Attribute mit einer kurzen Beschreibung aufgeführt sind. Danach folgt eine Liste, die jedes Attribut im Detail beschreibt, sowie die damit verbundenen Eingabetypen. Attribute, die den meisten oder allen Eingabetypen gemeinsam sind, werden weiter unten ausführlicher definiert. Attribute, die für bestimmte Eingabetypen einzigartig sind – oder Attribute, die für alle Eingabetypen gemeinsam sind, aber spezielle Verhaltensweisen haben, wenn sie auf einen bestimmten Eingabetyp angewendet werden – werden stattdessen auf den Seiten dieser Typen dokumentiert.

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

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

Einzelne Attribute

accept

Gültig nur für denfile Eingabetyp, dasaccept-Attribut definiert, welche Dateitypen in einemfile Upload-Steuerelement auswählbar sind. Siehe denfile Eingabetyp.

alphaExperimentell

Gültig nur für dencolor Eingabetyp, dasalpha-Attribut gibt dem Endbenutzer die Möglichkeit, die Deckkraft der ausgewählten Farbe festzulegen.

alt

Gültig nur für denimage Button, dasalt-Attribut liefert alternativen Text für das Bild und zeigt den Wert des Attributs an, falls das Bildsrc fehlt oder anderweitig nicht geladen werden kann. Siehe denimage Eingabetyp.

autocapitalize

Steuert, ob eingegebener Text automatisch in Großbuchstaben umgewandelt wird und, falls ja, auf welche Weise. Siehe die globalen Attributseiteautocapitalize für weitere Informationen.

autocomplete

(Kein booleanes Attribut!) Dasautocomplete-Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenfolge an, die beschreibt, welche Art von Autovervollständigungsfunktionalität das Eingabefeld bereitstellen soll. Eine typische Implementierung von Autovervollständigung erfasst zuvor eingegebene Werte in demselben Eingabefeld, es können jedoch komplexere Formen der Autovervollständigung existieren. Beispielsweise könnte ein Browser die Kontaktliste eines Geräts integrieren, umemail-Adressen in einem E-Mail-Eingabefeld automatisch auszufüllen. Sieheautocomplete für erlaubte Werte.

Dasautocomplete-Attribut ist gültig fürhidden,text,search,url,tel,email,date,month,week,time,datetime-local,number,range,color, undpassword. Dieses Attribut hat keine Wirkung auf Eingabetypen, die keine numerischen oder Textdaten zurückgeben, es ist für alle Eingabetypen außercheckbox,radio,file, oder eine der Schaltflächen-Typen gültig.

Siehe dasautocomplete-Attribut für weitere Informationen, einschließlich Informationen zur Passwortsicherheit und wieautocomplete beihidden leicht anders ist als bei anderen Eingabetypen.

autofocus

Ein booleanes Attribut, das, falls vorhanden, angibt, dass das Eingabefeld automatisch den Fokus haben soll, wenn die Seite fertig geladen ist (oder wenn das<dialog>, das das Element enthält, angezeigt wird).

Hinweis:Ein Element mit demautofocus-Attribut kann den Fokus erhalten, bevor dasDOMContentLoaded-Ereignis ausgelöst wird.

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

Dasautofocus-Attribut kann nicht auf Eingaben vom Typhidden verwendet werden, da verborgene Eingaben nicht fokussiert werden können.

Warnung:Ein automatisches Fokussieren eines Formularsteuerelements kann sehbehinderten Menschen, die Bildschirmlesegeräte verwenden, und Menschen mit kognitiven Beeinträchtigungen verwirren. Wennautofocus zugewiesen ist, "teleportieren" Bildschirmlesegeräte ihren Benutzer ohne Vorwarnung zum Formularsteuerelement.

Verwenden Sie dasautofocus-Attribut mit Bedacht auf die Barrierefreiheit. Ein automatisches Fokussieren auf ein Steuerelement kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann auch auf einigen Touch-Geräten dynamische Tastaturen anzeigen. Während ein Bildschirmlesegerät das Label des Formularsteuerelements ankündigt, das den Fokus erhält, wird das Bildschirmlesegerät nichts vor dem Label ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird den Kontext des vorangegangenen Inhalts ebenso verpassen.

capture

Eingeführt in der HTML Media Capture-Spezifikation und nur für denfile Eingabetyp gültig, definiert dascapture-Attribut, welches Medium – Mikrofon, Video oder Kamera – verwendet werden soll, um eine neue Datei mit demfile Upload-Steuerelement in unterstützenden Szenarien hochzuladen. Siehe denfile Eingabetyp.

checked

Gültig für die Typenradio undcheckbox, istchecked ein booleanes Attribut. Wenn es auf einemradio-Typ vorhanden ist, gibt es an, dass der Radiobutton der aktuell ausgewählte in der Gruppe der gleichnamigen Radiobuttons ist. Wenn es auf einemcheckbox-Typ vorhanden ist, gibt es an, dass die Checkbox standardmäßig aktiviert ist (wenn die Seite geladen wird). Es zeigtnicht an, ob diese Checkbox aktuell aktiviert ist: Wenn sich der Zustand der Checkbox ändert, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur dasHTMLInputElementchecked IDL-Attribut wird aktualisiert.)

Hinweis:Im Gegensatz zu anderen Eingabesteuerungen werden der Wert von Checkboxen und Radiobuttons nur dann in den übermittelten Daten enthalten, wenn sie derzeitchecked sind. Wenn sie es sind, werden der Name und die Werte der aktivierten Kontrollen übermittelt.

Wenn beispielsweise eine Checkbox mit demnamefruit denvalue "cherry" hat und die Checkbox aktiviert ist, enthalten die übermittelten Formulardatenfruit=cherry. Wenn die Checkbox nicht aktiv ist, wird sie in den Formulardaten nicht aufgeführt. Der Standardwert für Checkboxen und Radiobuttons iston.

colorspaceExperimentell

Gültig nur für dencolor Eingabetyp, gibt dascolorspace-Attribut denFarbraum an, der von der Eingabe mittype="color" verwendet wird. Möglicheaufgelistete Werte sind:

• "limited-srgb": Die Farbe befindet sich imsRGB Farbraum. Dies umfasstrgb(),hsl(),hwb() und<hex-color> Werte. Der Farbwert ist auf 8-Bit pror,g undb Komponente begrenzt. Dies ist der Standard.
• "display-p3": DerDisplay P3 Farbraum, z.B.color(display-p3 1.84 -0.19 0.72 / 0.6)

dirname

Gültig für die Eingabetypenhidden,text,search,url,tel undemail, ermöglicht dasdirname-Attribut die Übermittlung der Ausrichtung des Elements. Wenn sie enthalten ist, wird das Formularsteuerelement mit zwei Name/Wert-Paaren übermittelt: das erste istname /value und das zweite ist der Wert desdirname-Attributs als Name mit einem Wert vonltr oderrtl, wie vom Browser festgelegt.

html

<form action="page.html" method="post">  <label>    Fruit:    <input type="text" name="fruit" dirname="fruit-dir" value="cherry" />  </label>  <input type="submit" /></form><!-- page.html?fruit=cherry&fruit-dir=ltr -->

Wenn das oben genannte Formular übermittelt wird, führt die Eingabe dazu, dass sowohl dasname /value Paarfruit=cherry als auch dasdirname / Richtungspaarfruit-dir=ltr gesendet werden.Weitere Informationen finden Sie imdirname-Attribut.

disabled

Ein booleanes Attribut, das, wenn vorhanden, angibt, dass der Benutzer nicht mit der Eingabe interagieren sollte. Deaktivierte Eingaben werden typischerweise mit einer abgedunkelten Farbe angezeigt oder durch eine andere Form der Anzeige, dass das Feld nicht verfügbar ist.

Insbesondere erhalten deaktivierte Eingaben nicht dasclick-Ereignis und werden nicht zusammen mit dem Formular übermittelt.

Hinweis:Obwohl nicht von der Spezifikation gefordert, wird Firefox standardmäßig den dynamischen deaktivierten Zustand von einem<input> über Seitenladungen hinwegspeichern. Verwenden Sie dasautocomplete-Attribut, um diese Funktion zu steuern.

form

Ein String, der das<form>-Element angibt, mit dem die Eingabe zugeordnet ist (d.h. ihrFormularbesitzer). Der Wert dieses Strings, falls vorhanden, muss mit derid eines<form>-Elements im selben Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, ist das<input>-Element mit dem nächstgelegenen enthaltenen Formular assoziiert, falls vorhanden.

Dasform-Attribut ermöglicht es Ihnen, eine Eingabe überall im Dokument zu platzieren, aber sie in einem Formular an anderer Stelle im Dokument einzubinden.

Hinweis:Eine Eingabe kann nur einem Formular zugeordnet sein.

formaction

Nur gültig für die Eingabetypenimage undsubmit. Weitere Informationen finden Sie imsubmit-Eingabetyp.

formenctype

Nur gültig für die Eingabetypenimage undsubmit. Weitere Informationen finden Sie imsubmit-Eingabetyp.

formmethod

Nur gültig für die Eingabetypenimage undsubmit. Weitere Informationen finden Sie imsubmit-Eingabetyp.

formnovalidate

Nur gültig für die Eingabetypenimage undsubmit. Weitere Informationen finden Sie imsubmit-Eingabetyp.

formtarget

Nur gültig für die Eingabetypenimage undsubmit. Weitere Informationen finden Sie imsubmit-Eingabetyp.

height

Nur gültig für denimage-Button, dieheight ist die Höhe der Bilddatei, die als grafischer Submit-Button dargestellt werden soll. Siehe denimage-Eingabetyp.

id

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

inputmode

Globaler Wert, der für alle Elemente gültig ist, und einen Hinweis an Browser liefert, welche Art von virtueller Tastaturkonfiguration beim Bearbeiten dieses Elements oder seines Inhalts verwendet werden soll. Werte umfassennone,text,tel,url,email,numeric,decimal, undsearch.

list

Der demlist-Attribut zugewiesene Wert sollte dieid einesdatalist-Elements im selben Dokument sein. Die<datalist> bietet eine Liste von vordefinierten Werten, die dem Benutzer zur Eingabe für diese Eingabe vorgeschlagen werden. Alle in der Liste enthaltenen Werte, die nicht mit demtype übereinstimmen, werden nicht in den vorgeschlagenen Optionen enthalten sein. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Nutzer können aus dieser vorgefertigten Liste auswählen oder einen anderen Wert angeben.

Es ist gültig fürtext,search,url,tel,email,date,month,week,time,datetime-local,number,range, undcolor.

Entsprechend den Spezifikationen wird daslist-Attribut nicht vonhidden,password,checkbox,radio,file, oder einer der Schaltflächentypen 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 gelistete Werte zulässt. Überprüfen Sie dieBrowser-Kompatibilitätstabelle für die anderen Eingabetypen.

Siehe das<datalist>-Element.

max

Gültig fürdate,month,week,time,datetime-local,number, undrange, definiert den höchsten Wert innerhalb des Bereichs der erlaubten Werte. Wenn der eingegebenevalue dieses Element überschreitet, schlägt die Element-Einschränkungsvalidierung fehl. Wenn der Wert desmax-Attributs keine Zahl ist, hat das Element keinen Maximalwert.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), darf dermax-Wert niedriger sein als dermin-Wert, was darauf hinweist, dass der Bereich sich umstellen kann; dies erlaubt es beispielsweise, einen Zeitbereich von 22:00 bis 04:00 Uhr festzulegen.

maxlength

Gültig fürtext,search,url,tel,email, undpassword, definiert die maximale Zeichenlänge (gemessen inUTF-16 Codeeinheiten), die der Benutzer in das Feld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn keinemaxlength angegeben ist oder ein ungültiger Wert angegeben wird, hat das Feld keine Maximallänge. Dieser Wert muss auch größer oder gleich dem Wert vonminlength sein.

Die Eingabe schlägt bei derEinschränkungsvalidierung fehl, wenn die Länge des eingegebenen Textes größer ist alsmaxlengthUTF-16 code units Länge. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als durch dasmaxlength-Attribut erlaubt sind. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert durch den Benutzer geändert wird. SieheClient-seitige Validierung für weitere Informationen.

min

Gültig fürdate,month,week,time,datetime-local,number, undrange, definiert den negativsten Wert innerhalb des Bereichs der erlaubten Werte. Wenn der eingegebenevalue des Elements darunter fällt, schlägt dieEinschränkungsvalidierung fehl. Wenn der Wert desmin-Attributs keine Zahl ist, hat das Element keinen Minimalwert.

Dieser Wert muss kleiner oder gleich dem Wert desmax-Attributs sein. Wenn dasmin-Attribut vorhanden, aber nicht angegeben oder ungültig ist, wird keinmin-Wert angewendet. Wenn dasmin-Attribut gültig ist und ein Nicht-Null-Wert unter dem minimal erlaubten Wert gemäß demmin-Attribut liegt, verhindert die Einschränkungsvalidierung die Formularübermittlung. SieheClient-seitige Validierung für weitere Informationen.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), darf dermax-Wert niedriger sein als dermin-Wert, was darauf hinweist, dass der Bereich sich umstellen kann; dies erlaubt es beispielsweise, einen Zeitbereich von 22:00 bis 04:00 Uhr festzulegen.

minlength

Gültig fürtext,search,url,tel,email, undpassword, definiert die minimal Zeichenlänge (gemessen inUTF-16 Codeeinheiten), die der Benutzer in das Eingabefeld eingeben kann. Dies muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich der durch dasmaxlength-Attribut festgelegten Länger ist. Wenn keineminlength angegeben ist oder ein ungültiger Wert angegeben wird, hat die Eingabe keine Minimallänge.

Die Eingabe schlägt bei derEinschränkungsvalidierung fehl, wenn die Zeichenanzahl des Textes, die in das Feld eingegeben wird, weniger ist alsminlengthUTF-16 code units und verhindert die Formularübermittlung. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert durch den Benutzer geändert wird. SieheClient-seitige Validierung für weitere Informationen.

multiple

Das booleschemultiple-Attribut, wenn es gesetzt ist, bedeutet, dass der Benutzer durch Komma getrennte E-Mail-Adressen in das E-Mail-Widget eingeben oder mehr als eine Datei mithilfe desfile-Inputs auswählen kann. Siehe denemail undfile Eingabetyp.

name

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

Betrachten Sie denname als ein erforderliches Attribut (auch wenn es das nicht ist). Wenn keine Bezeichnung angegeben ist odername leer ist, wird der Wert der Eingabe nicht mit dem Formular gesendet! (Deaktivierte Steuerelemente, nicht aktivierte Radiobuttons, nicht aktivierte Checkboxen und Zurücksetzen-Schaltflächen werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

1. _charset_ : Wenn alsname eines<input>-Elements vom Typhidden verwendet, wird der Wert des Eingabefeldes automatisch vomBenutzeragent auf die zum Senden des Formulars verwendete Zeichenkodierung gesetzt.
2. isindex: Aus historischen Gründen ist der Nameisindex nicht erlaubt.

Dasname-Attribut schafft ein einzigartiges Verhalten für Radiobuttons.

Nur ein Radiobutton innerhalb einer gleichnamigen Gruppe aus Radiobuttons kann gleichzeitig aktiviert sein. Wenn irgendein Radiobutton in dieser Gruppe ausgewählt wird, wird jeder derzeit aktivierte Radiobutton in derselben Gruppe automatisch deselektiert. Der Wert dieses einen aktivierten Radiobuttons wird mit dem Namen gesendet, wenn das Formular übermittelt wird.

Wenn in eine Serie von gleichnamigen Radiobuttons getabt wird, falls einer aktiviert ist, wird dieser den Fokus erhalten. Wenn sie nicht in Quellcode-Reihenfolge gruppiert sind, wenn einer aus der Gruppe aktiviert ist, beginnt das Tabben in die Gruppe, wenn der erste in der Gruppe erreicht wird, wobei alle aktuellen deaktivierten übersprungen werden. Anders gesagt, wenn einer aktiviert ist, wird das Tabben die nicht aktivierten Radiobuttons in der Gruppe überspringen. Wenn keiner aktiviert ist, erhält die Radiobutton-Gruppe den Fokus, wenn der erste Button in der Gruppe mit demselben Namen erreicht wird.

Sobald einer der Radiobuttons in einer Gruppe den Fokus hat, erfolgt die Navigation durch die Pfeiltasten durch alle Radiobuttons des gleichen Namens, auch wenn die Radiobuttons im Quellcode nicht zusammengefasst sind.

Wenn einem Eingabeelement einname zugewiesen wird, wird dieser Name zu einem Eigentum des eigentlichen FormularelementsHTMLFormElement.elements-Eigenschaft. Wenn Sie eine Eingabe mit dem Namenguest und eine andere mit dem Namenhat-size haben, kann der folgende Code verwendet werden:

js

let form = document.querySelector("form");let guestName = form.elements.guest;let hatSize = form.elements["hat-size"];

Wenn dieser Code ausgeführt wurde, wirdguestName dasHTMLInputElement für das Gastfeld sein, undhatSize das Objekt für das Hutgrößenfeld.

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

pattern

Gültig fürtext,search,url,tel,email, undpassword, wird daspattern-Attribut verwendet, um einen regulären Ausdruck zu kompilieren, den dervalue der Eingabe erfüllen muss, damit der Wert dieEinschränkungsvalidierung besteht. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er vomRegExp Typ verwendet wird, und imLeitfaden zu regulären Ausdrücken dokumentiert ist. Vorwärtsslashs sollten nicht um den Mustertext angegeben werden. Beim Kompilieren des regulären Ausdrucks:

1. Das Muster wird implizit mit^(?: und)$ umschlossen, so dass die Übereinstimmung auf dengesamten Eingabewert erforderlich ist, d.h.^(?:<pattern>)$.
2. Das'v' Flag wird spezifiziert, so dass das Muster als Sequenz von Unicode-Codepunkten behandelt wird und nicht alsASCII.

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

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

SieheClient-seitige Validierung für weitere Informationen.

placeholder

Gültig fürtext,search,url,tel,email,password, undnumber, dasplaceholder-Attribut bietet einen kurzen Hinweis für den Benutzer auf welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf die erwartete Art von Daten gibt, anstelle einer Erklärung oder Aufforderung. Der Textdarf nicht Wagenrückläufe oder Zeilenumbrüche enthalten. Zum Beispiel, wenn ein Feld erwartet, den Vornamen eines Benutzers zu erfassen und sein Label „Vorname“ ist, könnte ein geeignetes Platzhalter sein „z.B., Mustafa“.

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

popovertarget

Verwandelt ein<input type="button">-Element in einen Popover-Steuerknopf; nimmt die ID des Popover-Elements, das kontrolliert werden soll, als Wert an. Siehe diePopover API-Landeseite für weitere Details. Die Herstellung einer Beziehung zwischen einem Popover und seinem Aufrufknopf mit dempopovertarget-Attribut hat zwei zusätzliche, nützliche Effekte:

• Der Browser erstellt eine implizitearia-details- undaria-expanded-Beziehung zwischen Popover und Aufrufer, und platziert das Popover in einer logischen Position in der Tastaturfokus-Navigationsreihenfolge, wenn es angezeigt wird. Dadurch wird das Popover für Tastatur- und assistive Technologie (AT)-Benutzer zugänglicher (siehe auchPopover-Zugänglichkeitsfunktionen).
• Der Browser erstellt eine implizite Ankerverbindung zwischen den beiden, was es sehr bequem macht, Popovers relativ zu ihren Steuerelementen mitCSS-Anker-Positionierung zu positionieren. SiehePopover-Ankerpositionierung für mehr Details.

popovertargetaction

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

"hide"

Der Knopf wird ein gezeigtes Popover verbergen. Wenn versucht wird, ein bereits verstecktes Popover zu verstecken, wird keine Aktion durchgeführt.

"show"

Der Knopf wird ein verstecktes Popover zeigen. Wenn versucht wird, ein bereits angezeigtes Popover zu zeigen, wird keine Aktion durchgeführt.

"toggle"

Der Knopf wird ein Popover zwischen dem Zeigen und dem Verbergen umschalten. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Wennpopovertargetaction weggelassen wird, ist"toggle" die standardmäßige Aktion, die vom Steuerknopf durchgeführt wird.

readonly

Ein booleanes Attribut, das, wenn vorhanden, angibt, dass der Benutzer den Wert der Eingabe nicht bearbeiten soll. Dasreadonly-Attribut wird von den Eingabetypentext,search,url,tel,email,date,month,week,time,datetime-local,number, undpassword unterstützt.

Siehe dasHTML-Attribut:readonly für mehr Informationen.

required

required ist ein booleanes Attribut, das, wenn vorhanden, angibt, dass der Benutzer einen Wert für die Eingabe angeben muss, bevor das dazugehörige Formular eingereicht werden kann. Dasrequired-Attribut wird von den Ausgabetypentext,search,url,tel,email,date,month,week,time,datetime-local,number,password,checkbox,radio, undfile unterstützt.

SieheClient-seitige Validierung und dasHTML-Attribut:required für mehr Informationen.

size

Gültig füremail,password,tel,url, undtext, dassize-Attribut spezifiziert, wie viel der Eingabe gezeigt wird. Erzeugt im Wesentlichen dasselbe Ergebnis wie das Setzen der CSS-width-Eigenschaft mit einigen Besonderheiten. Die tatsächliche Einheit des Wertes hängt vom Eingabetyp ab. Fürpassword undtext ist es eine Anzahl von Zeichen (oderem-Einheiten) mit einem Standardwert von20, und für andere sind es Pixel (oderpx-Einheiten). CSSwidth hat Vorrang vor demsize-Attribut.

src

Nur gültig für denimage-Button istsrc eine Zeichenfolge, die die URL der Bilddatei angibt, die dargestellt werden soll, um den grafischen Submit-Button anzuzeigen. Siehe denimage-Eingabetyp.

step

Gültig fürdate,month,week,time,datetime-local,number, undrange, dasstep Attribut ist eine Zahl, die die Granularität, der der Wert entsprechen muss, angibt. Nur Werte, die eine ganze Anzahl von Schritten vom Schritt-Basiswert entfernt sind, sind gültig. Der Schritt-Basis istmin, wenn angegeben,value andernfalls oder0, wenn keiner vorhanden ist (außerweek, das einen standardmäßigen Schritt-Basis von −259,200,000 hat, was dem Beginn von Woche1970-W01 entspricht).

Wenn nicht explizit angegeben:

• step ist standardmäßig 1 fürnumber undrange.
• Jeder Date/Time Eingabetyp hat einen standardmäßigenstep-Wert, der für den Typ geeignet ist; siehe die individuellen Eingabeseiten:date,datetime-local,month,time, undweek.

Der Wert muss eine positive Zahl sein – ganze Zahl oder Gleitkommazahl – oder der spezielle Wertany, was bedeutet, dass keine Schritte impliziert sind und jeder Wert erlaubt ist (unter Ausschluss anderer Einschränkungen, wiemin undmax).

Zum Beispiel, wenn Sie<input type="number" min="10" step="2"> haben, dann ist jede gerade Zahl,10 oder größer, gültig. Wenn nicht festgelegt wird,<input type="number">, ist jede ganze Zahl gültig, aber Fließkommazahlen (wie4.2) sind nicht gültig, weilstep standardmäßig1 ist. Damit4.2 gültig ist, hättestep aufany, 0.1, 0.2 gesetzt werden müssen oder dermin-Wert hätte eine Zahl sein müssen, die mit.2 endet, wie<input type="number" min="-5.2">.

Hinweis:Wenn die durch den Benutzer eingegebenen Daten nicht mit der Schritt-Konfiguration übereinstimmen, wird der Wert in der Einschränkungsvalidierung als ungültig betrachtet und das:invalid-Pseudoklasse wird übereinstimmen.

SieheClient-seitige Validierung für mehr Informationen.

switchExperimentellNicht standardisiert

Nur gültig fürcheckbox Eingaben,switch ist ein booleanes Attribut, das angibt, ob die Checkbox-Eingabe als Schalter dargestellt werden soll.

Hinweis:Dieses Attribut ist noch experimentell und hat begrenzte Browserunterstützung. Das Attribut wird auf nicht unterstützten Browsern ignoriert.

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), wenn es an der sequentiellen Keyboard-Navigation teilnehmen soll. Da alle Eingabetypen mit Ausnahme von Eingaben vom Typ hidden fokussierbar sind, sollte dieses Attribut nicht auf Formular-Steuerelementen verwendet werden, da dies erfordern würde, dass die Fokusreihenfolge für alle Elemente im Dokument verwaltet wird, mit dem Risiko, Gebrauchstauglichkeit und Barrierefreiheit zu beeinträchtigen, wenn es nicht korrekt gemacht wird.

title

Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, das einen Text enthält, der beratende Informationen im Zusammenhang mit dem Element 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 primäre Erklärung für den Zweck des Formular-Steuerelements verwendet werden. Stattdessen verwenden Sie das<label>-Element mit einemfor-Attribut, das auf das Formular-Steuerelementid gesetzt ist. SieheLabels unten.

type

Ein String, der den Typ des darzustellenden Steuerelements angibt. Um beispielsweise eine Checkbox zu erstellen, wird ein Wert voncheckbox verwendet. Wenn weggelassen (oder ein unbekannter Wert angegeben wird), wird der Eingabetyptext verwendet, was ein Klartext-Eingabefeld erstellt.

Erlaubte Werte werden unterEingabetypen oben aufgelistet.

value

Der Wert des Eingabefeldes. Wenn im HTML festgelegt, ist dies der anfängliche Wert, und kann von da an jederzeit geändert oder durch JavaScript abgerufen werden, um die entsprechendeHTMLInputElement-Eigenschaft auf den Wert zuzugreifen. Dasvalue-Attribut ist immer optional, sollte aber als obligatorisch betrachtet werden fürcheckbox,radio, undhidden.

width

Nur gültig für denimage-Button ist diewidth die Breite der Bilddatei, die dargestellt werden soll, um den grafischen Submit-Button anzuzeigen. Siehe denimage-Eingabetyp.

Nicht standardisierte Attribute

Die folgenden nicht standardisierten Attribute sind auch in einigen Browsern verfügbar. Generell sollten Sie vermeiden, sie zu verwenden, es sei denn, es ist unvermeidlich.

incrementalNicht standardisiert

Das boolesche Attributincremental ist eine WebKit- und Blink-Erweiterung (daher unterstützt von Safari, Opera, Chrome usw.), die, wenn vorhanden, denBenutzeragent dazu auffordert, die Eingabe als Live-Suche zu verarbeiten. Während der Benutzer den Wert des Feldes bearbeitet, sendet der Benutzeragentsearch-Ereignisse an dasHTMLInputElement-Objekt, das das Suchfeld repräsentiert. Dadurch kann Ihr Code die Suchergebnisse in Echtzeit aktualisieren, während der Benutzer die Suche bearbeitet.

Wennincremental nicht spezifiziert ist, wird dassearch-Ereignis nur gesendet, wenn der Benutzer ausdrücklich eine Suche initiiert (z.B. durch Drücken derEnter- oderReturn-Taste, während das Feld bearbeitet wird).

Dassearch-Ereignis ist so rate-limitiert, dass es nicht häufiger gesendet wird als ein implementierungsdefinierter Intervall.

orientNicht standardisiert

Ähnlich wie die nicht standardisierte CSS-Eigenschaft -moz-orient, die die<progress> und<meter>-Elemente betrifft, definiert dasorient-Attribut die Ausrichtung des Range-Schiebereglers. Werte umfassenhorizontal, was bedeutet, dass der Range horizontal gerendert wird, undvertical, wo der Range vertikal gerendert wird. SieheErstellen von vertikalen Formularsteuerelementen für einen modernen Ansatz zur Erstellung von vertikalen Formularsteuerelementen.

resultsNicht standardisiert

Dasresults-Attribut, das nur von Safari unterstützt wird, ist ein numerischer Wert, der es Ihnen erlaubt, die maximale Anzahl von Einträgen zu überschreiben, die in der nativ bereitgestellten Dropdown-Liste der vorhergehenden Suchanfragen des<input>-Elements angezeigt werden soll.

Der Wert muss eine nicht-negative Dezimalzahl sein. Wenn nicht bereitgestellt oder ein ungültiger Wert angegeben wird, wird die standardmäßige maximale Anzahl an Einträgen des Browsers verwendet.

webkitdirectoryNicht standardisiert

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

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

Methoden

Die folgenden Methoden werden von derHTMLInputElement-Schnittstelle bereitgestellt, die<input>-Elemente im DOM darstellt. Außerdem stehen die Methoden zur Verfügung, die von den übergeordneten SchnittstellenHTMLElement,Element,Node undEventTarget spezifiziert sind.

checkValidity()

Gibttrue zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls wirdfalse zurückgegeben und eininvalid-Ereignis am Element ausgelöst.

reportValidity()

Gibttrue zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls wirdfalse zurückgegeben, eininvalid-Ereignis am Element ausgelöst, und (wenn das Ereignis nicht abgebrochen wird) das Problem dem Benutzer gemeldet.

select()

Wählt den gesamten Inhalt des<input>-Elements aus, wenn der Inhalt des Elements auswählbar ist. Bei Elementen ohne auswählbaren Textinhalt (wie einem visuellen Farbwähler oder einem Kalenderdateneingabefeld) hat diese Methode keine Wirkung.

setCustomValidity()

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

setRangeText()

Setzt den Inhalt des angegebenen Zeichenbereichs im Eingabeelement auf einen bestimmten String. EinselectMode-Parameter steht zur Verfügung, um zu steuern, wie der bestehende Inhalt beeinflusst wird.

setSelectionRange()

Wählt den angegebenen Zeichenbereich innerhalb eines Texteingabeelements aus. Macht nichts für Eingaben, die nicht als Texteingabefelder dargestellt werden.

showPicker()

Zeigt den Browserwähler für das Eingabeelement an, der normalerweise beim Auswählen des Elements angezeigt wird, aber durch einen Tastendruck oder eine andere Benutzerinteraktion ausgelöst wird.

stepDown()

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

stepUp()

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

CSS

Da Eingaben ersetzte Elemente sind, besitzen sie einige Funktionen, die für Nicht-Formularelemente nicht zutreffen. Es gibt CSS-Selektoren, die speziell Formularelemente basierend auf ihren UI-Funktionen, auch bekannt als UI-Pseudoklassen, ansprechen können. Das Eingabeelement kann auch anhand des Typs mit Attributselektoren angesprochen werden. Einige Eigenschaften sind ebenfalls besonders nützlich.

UI-Pseudoklassen

Beispiel für Pseudoklassen

Wir können eine Checkbox-Beschriftung basierend darauf, ob die Checkbox aktiviert ist oder nicht, stylen. In diesem Beispiel gestalten wir diecolor undfont-weight der<label>, die direkt nach einer gewählten Eingabe folgt. Wenn dasinput nicht aktiviert ist, haben wir keine Styles angewendet.

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

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

Attributselektoren

Es ist möglich, verschiedene Arten von Formularelementen basierend auf ihremtype mitAttributselektoren zu wählen. CSS-Attributselektoren entsprechen Elementen basierend entweder nur auf dem Vorhandensein eines Attributs oder dem Wert eines gegebenen Attributs.

/* matches a password input */input[type="password"] {}/* matches a form control whose valid values are limited to a range of values */input[min][max] {}/* matches a form control with a pattern attribute */input[pattern] {}

::placeholder

Standardmäßig erscheint der Platzhaltertext in einer durchscheinenden oder hellgrauen Farbe. Das::placeholder-Pseudoelement ist derplaceholder-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 für das::first-line-Pseudoelement gelten, kann in einer Regel verwendet werden, die::placeholder in ihrem Selektor verwendet.

caret-color

Eine Eigenschaft, die sich speziell auf Texteingabeelemente bezieht, ist die CSS-Eigenschaftcaret-color, mit der Sie die Farbe festlegen können, die verwendet wird, um die Texteingabemarkierung zu zeichnen:

HTML

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

CSS

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

Ergebnis

field-sizing

Diefield-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 aufzunehmen.

Diese Eigenschaft wird typischerweise verwendet, um Formulareingabefelder zu erstellen, die ihren Inhalt umschließen und mit der Eingabe von mehr Text wachsen. Dies erfolgt mit Eingabetypen, die direkte Texteingaben akzeptieren (zum Beispieltext undurl), Eingabetypenfile und<textarea>-Elementen.

object-position und object-fit

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

Styling

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

• Farbe auf HTML-Elemente anwenden.

Siehe auch:

• HTML-Formulare stylen
• Erweiterte Stile für HTML-Formulare

Zusätzliche Funktionen

Labels

Labels sind notwendig, um unterstützenden Text mit einer<input>-Eingabe zu verknüpfen. Das<label>-Element liefert erklärende Informationen über ein Formularfeld, dieimmer angemessen sind (abgesehen von jeglichen Layoutproblemen, die Sie haben). Es ist nie eine schlechte Idee, ein<label> zu verwenden, um zu erklären, was in eine<input>- oder<textarea>-Eingabe eingegeben werden sollte.

Zugehörige Labels

Die semantische Paarung von<input>- und<label>-Elementen ist nützlich für unterstützende Technologien wie Bildschirmleser. Indem sie mit demfor-Attribut des<label>-Elements kombiniert werden, verbinden Sie das Label mit der Eingabe in einer Weise, die Bildschirmlesern ermöglicht, Eingaben präziser zu beschreiben.

Es reicht nicht aus, einfachen Text neben dem<input>-Element zu haben. Vielmehr erfordert die Usability und Barrierefreiheit die Einbeziehung entweder impliziter oder expliziter<label>:

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

Das erste Beispiel ist nicht barrierefrei: keine Beziehung besteht zwischen dem Prompt 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. Durch das Kombinieren eines<label> mit einem<input> wird durch Klicken auf eines von beiden das<input> fokussiert. Wenn Sie einfachen Text verwenden, um Ihre Eingabe zu "labeln", wird dies nicht passieren. Das Einbeziehen des Prompts als Teil der Aktivierungsfläche für die Eingabe ist hilfreich für Menschen mit motorischen Beeinträchtigungen.

Als Web-Entwickler ist es wichtig, niemals anzunehmen, dass Menschen alles wissen, was wir wissen. Die Vielfalt der Menschen, die das Internet nutzen – und somit auch Ihre Website – garantiert praktisch, dass einige der Besucher Ihrer Website einige Abweichungen in Denkprozessen und/oder Umständen haben werden, die dazu führen, dass sie Ihre Formulare sehr unterschiedlich von Ihnen interpretieren, ohne klare und richtig präsentierte Labels.

Platzhalter sind nicht zugänglich

Das Attributplaceholder ermöglicht es Ihnen, Text anzugeben, der im Inhaltbereich des<input>-Elements angezeigt wird, wenn es leer ist. Der Platzhalter sollte niemals erforderlich sein, um Ihre Formulare zu verstehen. Er ist kein Label und sollte nicht als Ersatz verwendet werden, weil er es nicht ist. Der Platzhalter wird verwendet, um einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht eine Erklärung oder ein Prompt.

Nicht nur ist der Platzhalter für Bildschirmleser nicht zugänglich, sondern er verschwindet, sobald der Benutzer Text in das Formularelement eingibt oder wenn das Formularelement bereits einen Wert hat. Browser mit automatischen Seitenübersetzungsfunktionen überspringen möglicherweise Attribute während der Übersetzung, was bedeutet, dass derplaceholder möglicherweise nicht übersetzt wird.

Validierung auf Client-Seite

Zusätzlich zur Verwendung von CSS zum Stylen von Eingaben basierend auf den UI-Staaten:valid oder:invalid basierend auf dem aktuellen Zustand jeder Eingabe, wie im AbschnittUI-Pseudoklassen oben erwähnt, bietet der Browser eine Validierung auf Client-Seite bei (versuchter) Formularübermittlung. Bei der Formularübermittlung, wenn es ein Formularelement gibt, das die Validierungsanforderungen nicht erfüllt, zeigt der unterstützende Browser eine Fehlermeldung beim ersten ungültigen Formularelement an; eine Standardmeldung basierend auf dem Fehlertyp oder eine von Ihnen festgelegte Meldung.

Einige Eingabetypen und andere Attribute setzen Grenzen, welche Werte für eine bestimmte 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. Es könnten mehrere Fehler auftreten, darunter einrangeUnderflow-Fehler, wenn der Wert kleiner als 2 ist,rangeOverflow bei größerem Wert als 10,stepMismatch, wenn der Wert eine Zahl zwischen 2 und 10 ist, aber keine gerade ganze Zahl (entspricht nicht den Anforderungen desstep-Attributs), odertypeMismatch, wenn der Wert keine Zahl ist.

Für die Eingabetypen, deren Wertebereich periodisch ist (d.h. beim höchsten möglichen Wert werden die Werte zum Anfang zurückgesetzt, anstatt zu enden), ist es möglich, dass die Werte dermax- undmin-Eigenschaften umgekehrt sind, was darauf hinweist, dass der Bereich der erlaubten Werte beimin beginnt, an den niedrigsten möglichen Wert zurückspringt und dann weitergeht, bismax erreicht ist. Dies ist besonders nützlich für Datum und Uhrzeiten, z. B. wenn Sie den Bereich von 20 Uhr bis 8 Uhr erlauben möchten:

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

Bestimmte Attribute und deren Werte können zu einem spezifischen FehlerValidityState führen:

Wenn ein Formularelement nicht dasrequired-Attribut hat, ist kein Wert oder ein leerer String nicht ungültig. Selbst wenn die oben genannten Attribute vorhanden sind, führt ein leerer String (außer beirequired) zu keinem Fehler.

Wir können Grenzen festlegen, welche Werte wir akzeptieren, und unterstützende Browser werden diese Formularwerte nativ validieren und den Benutzer darauf hinweisen, wenn ein Fehler bei der Übermittlung des Formulars auftritt.

Zusätzlich zu den in der Tabelle oben beschriebenen Fehlern enthält dievalidityState-Schnittstelle die booleschen schreibgeschützten EigenschaftenbadInput,valid undcustomError. 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 gibt ein Wert vontrue an, dass der angegebene Grund, warum die Validierung fehlgeschlagen sein könnte, zutrifft, mit Ausnahme der Eigenschaftvalid, dietrue ist, wenn der Wert des Elements alle Einschränkungen erfüllt.

Wenn ein Fehler vorliegt, werden unterstützende Browser den Benutzer sowohl darauf hinweisen als auch verhindern, dass das Formular übermittelt wird. Ein Wort der Vorsicht: Wenn eine benutzerdefinierte Fehlermeldung auf einen wahren Wert gesetzt ist (irgendein Wert außer dem leeren String odernull), wird die Übermittlung des Formulars verhindert. Wenn keine benutzerdefinierte Fehlermeldung vorhanden ist und keine der anderen Eigenschaftentrue zurückgibt, wirdvalidtrue sein und das Formular kann übermittelt werden.

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

Die letzte Zeile, die die benutzerdefinierte Fehlermeldung auf den leeren String setzt, ist entscheidend. Wenn der Benutzer einen Fehler macht und die Gültigkeit gesetzt ist, wird es nicht übermitteln, selbst wenn alle Werte gültig sind, bis die Meldungnull ist.

Beispiel für eine benutzerdefinierte Validierungsfehlermeldung

Wenn Sie eine benutzerdefinierte Fehlermeldung anzeigen möchten, wenn ein Feld nicht validiert, müssen Sie dieConstraint Validation API verwenden, die für<input> (und verwandte) Elemente verfügbar ist. Betrachten Sie folgendes Formular:

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

Die grundlegenden HTML-Formularvalidierungsfunktionen werden dies dazu bringen, eine Standardfehlermeldung anzuzeigen, wenn Sie versuchen, das Formular mit entweder einem nicht gültig ausgefüllten oder einem Wert, der daspattern nicht entspricht, zu übermitteln.

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

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

Das Beispiel wird wie folgt angezeigt:

Kurz gesagt:

• Wir überprüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sich sein Wert ändert, indem wir diecheckValidity()-Methode über deninput-Ereignishandler ausführen.
• Wenn der Wert ungültig ist, wird eininvalid-Ereignis ausgelöst, und dieinvalid-Ereignishandlerfunktion wird ausgeführt. Innerhalb dieser Funktion ermitteln wir mit einemif ()-Block, ob der Wert ungültig ist, weil er leer ist oder weil er nicht das Muster entspricht, und setzen eine benutzerdefinierte Fehlermeldung.
• Infolgedessen, wenn der Eingabewert ungültig ist, wenn der Sende-Button gedrückt wird, wird eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Wenn er gültig ist, wird er erwartungsgemäß übermittelt. Damit dies geschieht, muss die benutzerdefinierte Gültigkeit durch den Aufruf vonsetCustomValidity() mit einem leeren String-Wert aufgehoben werden. Daher tun wir dies jedes Mal, wenn dasinput-Ereignis ausgelöst wird. Wenn Sie dies nicht tun und eine benutzerdefinierte Gültigkeit vorhergesetzt wurde, wird die Eingabe als ungültig registriert, selbst wenn sie derzeit einen gültigen Wert bei der Übermittlung enthält.

Lokalisierung

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

Firefox verwendet die folgenden Heuristiken, um das Lokale zur Validierung der Benutzereingabe zu bestimmen (zumindest fürtype="number"):

• Versuchen Sie, die Sprache zu verwenden, die durch einlang/xml:lang-Attribut am Element oder einem seiner Elternteile angegeben ist.
• Versuchen Sie, die durch einenContent-Language-HTTP-Header angegebene Sprache zu verwenden. Oder,
• Wenn keine angegeben wurde, verwenden Sie die Spracheinstellung des Browsers.

Barrierefreiheit

Labels

Beim Einschluss von Eingaben ist es ein Erfordernis zur Barrierefreiheit, Labels hinzuzufügen. Dies ist notwendig, damit diejenigen, die unterstützende Technologien nutzen, erkennen können, wofür die Eingabe gedacht ist. Außerdem gibt das Klicken oder Berühren eines Labels dem Label zugehörigen Formularsteuerelement den Fokus. Dies verbessert sowohl die Barrierefreiheit als auch die Benutzerfreundlichkeit für sehende Benutzer, indem es den Bereich vergrößert, auf den ein Benutzer klicken oder tippen kann, um das Steuerelement zu aktivieren. Dies ist besonders nützlich (und sogar notwendig) für Radiobuttons und Checkboxen, die klein sind. Weitere Informationen zu Labels im Allgemeinen finden Sie unterLabels.

Das Folgende ist ein Beispiel dafür, wie man das<label> mit einem<input>-Element im obigen Stil assoziiert. Sie müssen dem<input> einid-Attribut geben. Das<label> benötigt dann einfor-Attribut, dessen Wert identisch mit derid der Eingabe ist.

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

Größe

Interaktive Elemente wie Formulareingabefelder sollten eine Fläche groß genug bieten, damit es einfach ist, sie zu aktivieren. Dies hilft verschiedenen Menschen, einschließlich Menschen mit motorischen Kontrollproblemen und Menschen, die nicht präzise Eingabegeräte wie einen Stift oder Finger verwenden. Eine minimale Interaktionsgröße von 44×44CSS-Pixel wird empfohlen.

• Understand Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Touch-Ziele - The A11Y Project

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Eigenschaftappearance
• Ihr erstes HTML-Formular
• Anleitung zur Strukturierung eines HTML-Formulars
• Die nativen Formularwidgets
• Senden von Formulardaten
• Formularbeschränkungsvalidierung
• Styling von HTML-Formularen