<input>: Das HTML-Eingabeelement

Probieren Sie es aus

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

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

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

input,
label {
  margin: 0.4rem 0;
}

<input>-Typen

Wie ein <input> funktioniert, variiert erheblich, abhängig vom Wert seines type-Attributs, daher werden die verschiedenen Typen auf separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben ist, wird der Standardtyp text übernommen.

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

Attribute

Das <input>-Element ist so leistungsfähig aufgrund seiner Attribute; das type-Attribut, das mit Beispielen oben beschrieben wurde, ist dabei das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf dem HTMLInputElement-Interface basiert, teilen sie technisch die exakt gleichen Attributsätze. Allerdings haben die meisten Attribute in der Praxis nur Einfluss auf einen bestimmten Teil der Eingabetypen. Darüber hinaus wirkt sich die Art und Weise, wie einige Attribute auf eine Eingabe wirken, unterschiedlich auf verschiedene Eingabetypen aus.

Dieser Abschnitt bietet eine Tabelle, die alle Attribute mit einer kurzen Beschreibung auflistet. Diese Tabelle wird gefolgt von einer Liste, die jedes Attribut detaillierter beschreibt, zusammen mit den Eingabetypen, mit denen sie assoziiert sind. Diejenigen, die für die meisten oder alle Eingabetypen gemeinsam sind, werden ausführlicher unten definiert. Attribute, die bei bestimmten Eingabetypen einzigartig sind – oder Attribute, die für alle Eingabetypen üblich sind, aber spezielles Verhalten aufweisen, wenn sie auf einem bestimmten Eingabetyp verwendet werden – sind stattdessen auf den Seiten dieser Typen dokumentiert.

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

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

Einzelne Attribute

accept

Gültig nur für den file-Eingabetyp, das accept-Attribut legt fest, welche Dateitypen in einer file-Upload-Steuerung auswählbar sind. Siehe den file-Eingabetyp.

alpha Experimentell

Gültig nur für den color-Eingabetyp, das alpha-Attribut ermöglicht es dem Endbenutzer, die Deckkraft der ausgewählten Farbe festzulegen.

alt

Gültig nur für den image-Button, das alt-Attribut bietet einen Alternativtext für das Bild und zeigt den Wert des Attributs an, wenn das Bild src fehlt oder anderweitig nicht geladen wird. Siehe den image-Eingabetyp.

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und, falls ja, in welcher Weise. Siehe die autocapitalize Globale Attribute-Seite für mehr Informationen.

autocomplete

(Kein Boolean-Attribut!) Das autocomplete-Attribut nimmt als Wert einen Leerzeichen-getrennten String an, der beschreibt, welche, wenn überhaupt, Art von Autovervollständigungsfunktionalität die Eingabe bieten soll. Eine typische Implementierung für Autovervollständigung erinnert sich an zuvor eingetragene Werte in dasselbe Eingabefeld, aber komplexere Formen der Autovervollständigung können existieren. Beispielsweise könnte ein Browser mit einer Geräteliste für Autovervollständigung für E-Mail-Adressen in einem E-Mail-Eingabefeld integrieren. 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 Textdaten zurückgeben, da es für alle Eingabetypen außer checkbox, radio, file oder eine der Schaltflächen gültig ist.

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

autofocus

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

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

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

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

Warnung: Automatisches Fokussieren auf ein Formularelement kann Menschen mit Sehbehinderungen, die Bildschirmlesetechnologie nutzen, und Menschen mit kognitiven Beeinträchtigungen verwirren. Wenn autofocus zugewiesen ist, "teleportieren" Bildschirmleser ihre Benutzer zu der Formsteuerung, ohne sie vorher zu warnen.

Verwenden Sie das autofocus-Attribut mit überlegter Berücksichtigung der Zugänglichkeit. Das automatische Fokussieren auf ein Steuerelement kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann auch auf einigen Touch-Geräten dazu führen, dass dynamische Tastaturen angezeigt werden. Während ein Bildschirmleser das Label der fokussierten Formsteuerung ankündigt, wird der Bildschirmleser nichts vor dem Label ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird den durch den vorhergehenden Inhalt geschaffenen Kontext ebenfalls verpassen.

capture

Eingeführt in der HTML-Medienaufnahme-Spezifikation und gültig nur für den file-Eingabetyp, das capture-Attribut definiert, welches Medien – Mikrofon, Video oder Kamera – zum Aufnehmen einer neuen Datei für den Upload mit der file-Upload-Steuerung verwendet werden sollten. Siehe den file-Eingabetyp.

checked

Gültig für beide radio- und checkbox-Typen, checked ist ein Boolean-Attribut. Wenn es bei einem radio-Typ vorhanden ist, zeigt es an, dass der Radiobutton der derzeit ausgewählte in der Gruppe der gleichnamigen Radiobuttons ist. Wenn checked bei einem checkbox-Typ vorhanden ist, zeigt es an, dass das Kontrollkästchen standardmäßig (beim Laden der Seite) aktiviert ist. Es zeigt nicht an, ob dieses Kontrollkästchen derzeit aktiviert ist: Wenn sich der Status des Kontrollkästchens ändert, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das HTMLInputElement-ssm checked IDL-Attribut wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabekontrollen werden der Wert eines Kontrollkästchens und eines Radiobuttons nur gesendet, wenn sie derzeit checked sind. Wenn sie das sind, werden der Name und der Wert der aktivierten Kontrollen gesendet.

Wenn zum Beispiel ein Kontrollkästchen, dessen name fruit ist, einen value von cherry hat und das Kontrollkästchen aktiviert ist, enthält die gesendete Formular-Daten fruit=cherry. Wenn das Kontrollkästchen nicht aktiv ist, ist es in den Formulardaten überhaupt nicht aufgeführt. Der Standardwert für Kontrollkästchen und Radiobuttons ist on.

colorspace Experimentell

Gültig nur für den color-Eingabetyp, das colorspace-Attribut gibt den Farbraum an, der vom type="color"-Eingabefeld verwendet wird. Mögliche Aufzählungswerte sind:

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

dirname

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

html

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

Wenn das obige Formular übermittelt wird, führt die Eingabe dazu, dass sowohl das name/value-Paar fruit=cherry als auch das dirname/direction-Paar fruit-dir=ltr gesendet werden. Für weitere Informationen siehe das dirname-Attribut.

disabled

Ein Boolean-Attribut, das, falls vorhanden, angibt, dass der Benutzer nicht mit der Eingabe interagieren sollte. Deaktivierte Eingaben werden typischerweise in einer schwächeren Farbe oder mit einer anderen Form von Hinweis darauf dargestellt, dass das Feld nicht verwendet werden kann.

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

Hinweis: Auch wenn es von der Spezifikation nicht erforderlich ist, wird Firefox standardmäßig den dynamischen deaktivierten Status eines <input> über Seitenladevorgänge hinweg beibehalten. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

form

Eine Zeichenkette, die das <form>-Element spezifiziert, mit dem die Eingabe verbunden ist (d.h. ihr Formulareigentümer). Der Wert dieser Zeichenkette, falls vorhanden, muss mit der id eines <form>-Elements im selben Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, wird das <input>-Element mit dem nächstgelegenen umschließenden Formular verknüpft, falls vorhanden.

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

Hinweis: Eine Eingabe kann nur einem Formular zugeordnet werden.

formaction

Gültig nur für die image- und submit-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp.

formenctype

Gültig nur für die image- und submit-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp.

formmethod

Gültig nur für die image- und submit-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp.

formnovalidate

Gültig nur für die image- und submit-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp.

formtarget

Gültig nur für die image- und submit-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp.

height

Gültig nur für den image-Eingabe-Button, die height ist die Höhe der Bilddatei, die als grafischer Absende-Button angezeigt werden soll. Weitere Informationen finden Sie im image-Eingabetyp.

id

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

inputmode

Globaler Wert, der für alle Elemente gültig ist und einen Hinweis an Browser zur Art der virtuellen Tastaturkonfiguration gibt, die beim Bearbeiten dieses Elements oder seines Inhalts verwendet werden soll. Werte beinhalten none, text, tel, url, email, numeric, decimal und search.

list

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

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

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

Abhängig vom Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen bekommen, Ticks entlang einer Reichweite oder sogar eine Eingabe, die wie ein <select> geöffnet wird, aber es den Eintritt weiterer nicht aufgeführter Werte ermöglicht. Besuchen Sie die Browser-Kompatibilität-Tabelle für die anderen Eingabetypen.

Weitere Informationen finden Sie im <datalist>-Element.

max

Gültig für date, month, week, time, datetime-local, number und range, es definiert den größten Wert innerhalb des Bereichs der zulässigen Werte. Wenn der in das Element eingetragene value mehr als dieser ist, scheitert das Element an der Einschränkungsvalidierung. Wenn der Wert des max-Attributs keine Zahl ist, dann hat das Element keinen Maximalwert.

Es gibt einen Sonderfall: wenn der Datentyp periodisch ist (wie für Daten oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was bedeutet, dass der Bereich übergehen kann; zum Beispiel ermöglicht dies die Angabe eines Zeitbereichs von 22 Uhr bis 4 Uhr.

maxlength

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

Die Eingabe wird an der Einschränkungsvalidierung scheitern, wenn die Länge des in das Feld eingegebenen Textes länger als maxlength UTF-16_Code-Einheiten ist. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als das maxlength-Attribut erlaubt. Einschränkungsvalidierung wird nur angewendet, wenn der Wert durch den 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, es definiert den kleinsten Wert innerhalb des Bereichs der zulässigen Werte. Wenn der in das Element eingetragene value weniger als dieser ist, scheitert das Element an der Einschränkungsvalidierung. Wenn der Wert des min-Attributs keine Zahl ist, dann hat das Element keinen Mindestwert.

Dieser Wert muss kleiner oder gleich dem Wert des max-Attributs sein. Wenn das min-Attribut vorhanden ist, aber nicht spezifiziert oder ungültig ist, wird kein min-Wert angewendet. Wenn das min-Attribut gültig ist und ein nicht-leerer Wert geringer ist als das Minimum, das vom min-Attribut erlaubt wird, verhindert die Einschränkungsvalidierung die Formularübermittlung. Siehe Client-seitige Validierung für weitere Informationen.

Es gibt einen Sonderfall: wenn der Datentyp periodisch ist (wie für Daten oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was bedeutet, dass der Bereich übergehen kann; zum Beispiel ermöglicht dies die Angabe eines Zeitbereichs von 22 Uhr bis 4 Uhr.

minlength

Gültig für text, search, url, tel, email und password, es definiert die minimale Zeichenfolgelänge (gemessen in UTF-16_Code-Einheiten), die der Benutzer in das Eingabefeld eingetragen kann. Dies muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn kein minlength angegeben oder ein ungültiger Wert spezifiziert ist, hat die Eingabe keine Mindestlänge.

Die Eingabe wird an der Einschränkungsvalidierung scheitern, wenn die Länge des in das Feld eingegebenen Textes kürzer als minlength UTF-16_Code-Einheiten ist, was die Formularübermittlung verhindert. Einschränkungsvalidierung wird nur angewendet, wenn der Wert durch den Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen.

multiple

Das Boolean-multiple-Attribut, wenn gesetzt, bedeutet, dass der Benutzer durch Kommas getrennte E-Mail-Adressen in das E-Mail-Widget eingeben oder mehr als eine Datei mit dem file-Eingang auswählen kann. Siehe den email- und den file-Eingabetyp.

name

Eine Zeichenkette, die einen Namen für das Eingabesteuerelement spezifiziert. Dieser Name wird zusammen mit dem Wert der Steuerung gesendet, wenn die Formulardaten übermittelt werden.

Betrachten Sie den name-Attribut als obligatorisch (auch wenn er es nicht ist). Wenn eine Eingabe keinen spezifizierten name hat oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular gesendet! (Deaktivierte Steuerelemente, nicht ausgewählte Radiobuttons, nicht aktivierte Kontrollkästchen und Zurücksetz-Schaltflächen werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

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

Das name-Attribut schafft ein einzigartiges Verhalten für Radiobuttons.

Nur ein Radiobutton in einer gleichnamigen Gruppe von Radiobuttons kann gleichzeitig ausgewählt werden. Wenn ein Radiobutton in dieser Gruppe ausgewählt wird, werden alle anderen derzeit ausgewählten Radiobuttons in derselben Gruppe automatisch abgewählt. Der Wert dieses einen ausgewählten Radiobuttons wird zusammen mit dem Namen gesendet, wenn das Formular übermittelt wird,

Wenn durch eine Serie gleichnamiger Gruppen von Radiobuttons getabt wird und einer ausgewählt ist, erhält dieser den Fokus. Wenn sie nicht in der Quellreihenfolge gruppiert sind, wenn einer der Gruppe ausgewählt ist, beginnt das Tabben in die Gruppe, wenn der erste der Gruppe erreicht wird, und überspringt alle, die nicht ausgewählt sind. Mit anderen Worten, wenn einer ausgewählt ist, überspringt das Tabben die nicht ausgewählten Radiobuttons in der Gruppe. Wenn keiner ausgewählt ist, erhält die Radiobutton-Gruppe den Fokus, wenn der erste der gleichnamigen Gruppe erreicht wird.

Sobald einer der Radiobuttons in einer Gruppe den Fokus hat, wird mit den Pfeiltasten durch alle Radiobuttons des gleichen Namens navigiert, auch wenn die Radiobuttons nicht zusammen in der Quellreihenfolge angeordnet sind.

Wenn ein Eingabeelement einen name erhält, wird dieser Name zu einer Eigenschaft des HTMLFormElement.elements-Eigentums des Eigentümerformulars. Wenn Sie eine Eingabe haben, deren name auf guest gesetzt ist, und eine andere, deren name hat-size ist, kann der folgende Code verwendet werden:

js

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

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

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

Warnung: Vermeiden Sie es, Formularelementen einen name zu geben, der einer eingebauten Eigenschaft des Formulars entspricht, da Sie dann die vordefinierte Eigenschaft oder Methode mit dieser Referenz auf das entsprechende Eingabeelement überschreiben würden.

pattern

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

1. das Muster wird implizit mit ^(?: und )$ umgeben, sodass der Abgleich gegen den gesamten Eingabewert erforderlich ist, d.h. ^(?:<pattern>)$.
2. das 'v'-Flag wird angegeben, sodass das Muster als Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII.

Wenn das pattern-Attribut vorhanden ist, aber nicht spezifiziert ist 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 dem Muster entspricht, verhindert die Einschränkungsvalidierung die Formularübermittlung. Wenn die 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 durch Hinzufügen von erläuterndem Text in der Nähe. Sie können auch ein title-Attribut einschließen, um zu erläutern, welche Anforderungen erfüllt werden müssen, um das Muster zu entsprechen; die meisten Browser werden diesen Titel als Tooltip anzeigen. Die sichtbare Erklärung ist erforderlich für Barrierefreiheit. Der Tooltip ist eine Erweiterung.

Siehe Client-seitige Validierung für weitere Informationen.

placeholder

Gültig für text, search, url, tel, email, password und number, bietet das placeholder-Attribut einen kurzen Hinweis für den Benutzer, welche Art von Information im Feld erwartet wird. Es sollte ein Wort oder ein kurzer Satz sein, der einen Hinweis auf den erwarteten Datentyp gibt, anstatt einer Erklärung oder Aufforderung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten. Wenn erwartet wird, dass ein Feld den Vornamen eines Benutzers aufzeichnet und sein Label "Vorname" lautet, könnte eine geeignete Platzhalteranzeige "z.B., Mustafa" sein.

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

popovertarget

Wandelt ein <input type="button">-Element in einen Popover-Steuerungsknopf um; nimmt die ID des zu steuernden Popover-Elements als Wert. Weitere Details finden Sie auf der Popover-API-Landeseite. Die Einrichtung einer Beziehung zwischen einem Popover und seinem Auslöserknopf mit dem popovertarget-Attribut hat zwei weitere nützliche Wirkungen:

• 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 Reihenfolge der Tastaturfokus-Navigation, wenn es angezeigt wird. Dies macht das Popover zugänglicher für Tastaturnutzer und Benutzer von unterstützenden Technologien (AT-Nutzer) (siehe auch Popover-Accessibility-Features).
• Der Browser erstellt eine implizite Ankerreferenz zwischen dem Popover und seiner Steuerung, was es sehr bequem macht, Popover durch CSS-Ankerpositionierung relativ zu ihren Steuerungen zu positionieren. Siehe Popover-Ankerpositionierung für weitere Details.

popovertargetaction

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

"hide"

Der Knopf wird ein sichtbares Popover ausblenden. Wenn Sie versuchen, ein bereits ausgeblendetes Popover auszublenden, wird keine Aktion ausgeführt.

"show"

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

"toggle"

Der Knopf wird ein Popover zwischen angezeigten und versteckten Zuständen umschalten. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die von der Steuerschaltfläche ausgeführt wird.

readonly

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

Für weitere Informationen siehe das HTML-Attribut: readonly.

required

required ist ein Boolean-Attribut, das, falls vorhanden, angibt, dass der Benutzer einen Wert für die Eingabe spezifizieren muss, bevor das Eigentümerformular gesendet werden kann. Das required-Attribut wird von den Eingabetypen text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio und file unterstützt.

Für weitere Informationen siehe Client-seitige Validierung und das HTML-Attribut: required.

size

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

src

Gültig nur für den image-Eingabe-Button, das src ist ein String, der die URL der Bilddatei angibt, die als grafischer Absende-Button angezeigt werden soll. Weitere Informationen finden Sie im image-Eingabetyp.

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. Es sind nur Werte gültig, die ein ganzzahliger Vielfaches der Schritte des Step-Basiswerts sind. Die Step-Basis ist min, wenn angegeben, value ansonsten, oder 0, wenn keines der beiden angegeben ist (außer für week, das eine Standard-Step-Basis von −259,200,000 hat, was dem Beginn der Woche 1970-W01 entspricht).

Wenn nicht explizit eingeschlossen:

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

Der Wert muss eine positive Zahl sein – ganze Zahl oder Gleitkommazahl – oder der spezielle Wert any, was bedeutet, dass kein Schritt erforderlich ist und jeder Wert zulässig ist (mit Ausnahme anderer Beschränkungen, wie min und max).

Zum Beispiel, wenn Sie <input type="number" min="10" step="2"> haben, dann ist jede ganze Zahl oder größer, 10 oder mehr, gültig. Wenn ausgelassen, <input type="number">, ist jede ganze Zahl gültig, aber Gleitkommazahlen (wie 4.2) sind nicht gültig, weil step standardmäßig 1 ist. Für 4.2 gültig zu sein, hätte step auf any, 0.1, 0.2 gesetzt werden müssen, oder der min-Wert hätte eine Zahl sein müssen, die mit .2 endet, wie <input type="number" min="-5.2">.

Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht mit der Step-Konfiguration übereinstimmen, wird der Wert bei der Einschränkungsvalidierung als ungültig angesehen und wird die :invalid-Pseudoklasse treffen.

Siehe Client-seitige Validierung für weitere Informationen.

tabindex

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, ein ganzzahliges Attribut, das angibt, ob das Element Eingabefokus erhalten kann (fokussierbar ist), ob es an der sequentiellen Tastaturnavigation teilnehmen sollte. Da alle Eingabetyps mit Ausnahme der versteckten eingabefokussierbaren sind, sollte dieses Attribut nicht auf Formularelementen verwendet werden, da dies die Verwaltung der Fokussierreihenfolge für alle Elemente im Dokument erfordern würde, mit dem Risiko, die Benutzerfreundlichkeit und Barrierefreiheit zu beeinträchtigen, wenn es falsch gemacht wird.

title

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, das 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 unbedingt, dem Benutzer als Tooltip präsentiert werden. Der Titel sollte NICHT als primäre Erklärung des Zwecks des Formsteuerelements verwendet werden. Verwenden Sie stattdessen das <label>-Element mit einem for-Attribut, das auf das id-Attribut des Steuerelements gesetzt wird. Siehe Labels unten.

type

Eine Zeichenkette, die den Typ des zu rendernden Steuerelements angibt. Um beispielsweise ein Kontrollkästchen zu erstellen, wird ein Wert von checkbox verwendet. Wenn ausgelassen (oder ein unbekannter Wert angegeben wird), wird der Eingabetyp text verwendet, wodurch ein Klartext-Eingabefeld erstellt wird.

Zulässige Werte sind in den Eingabetypen weiter oben aufgeführt.

value

Der Wert des Eingabesteuerelements. Wenn es im HTML angegeben wird, ist dies der anfängliche Wert, und von nun an kann es jederzeit mit JavaScript geändert oder abgerufen werden, indem auf die value-Eigenschaft des entsprechenden HTMLInputElement-Objekts zugegriffen wird. Das value-Attribut ist immer optional, sollte jedoch für checkbox, radio und hidden als verpflichtend angesehen werden.

width

Gültig nur für den image-Eingabe-Button, die width ist die Breite der Bilddatei, die als grafischer Absende-Button angezeigt werden soll. Weitere Informationen finden Sie im image-Eingabetyp.

Nicht-standardisierte Attribute

Die folgenden nicht-standardisierten Attribute sind auch in einigen Browsern verfügbar. Als allgemeine Regel sollten Sie sie vermeiden, es sei denn, es ist nicht anders möglich.

incremental Nicht standardisiert

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

Wenn incremental nicht angegeben ist, wird das search-Ereignis nur gesendet, wenn der Benutzer explicit ein Suchvorgang auslöst (wie etwa durch Drücken der Eingabetaste oder Return-Taste, während er das Feld bearbeitet).

Das search-Ereignis wird so rate-begrenzt, dass es nicht häufiger gesendet wird als ein implementierungsdefiniertes Intervall.

orient Nicht standardisiert

Ähnlich der nicht-standardisierten -moz-orient CSS-Eigenschaft, die die <progress>- und <meter>-Elemente betrifft, definiert das orient-Attribut die Ausrichtung des Bereichreglers. Werte beinhalten horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wo der Bereich vertikal gerendert wird. Siehe Erstellen vertikaler Formkontrollen für einen modernen Ansatz zum Erstellen vertikaler Formkontrollen.

results Nicht standardisiert

Das results-Attribut wird nur von Safari unterstützt und ist ein numerischer Wert, der es Ihnen ermöglicht, die maximale Anzahl von Einträgen zu überschreiben, die in der nativen Dropdown-Menueingabe des <input>-Elements vorheriger Suchanfragen angezeigt werden sollen.

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

webkitdirectory Nicht standardisiert

Das Boolean-webkitdirectory-Attribut, falls vorhanden, gibt an, dass der Benutzer nur Verzeichnisse in der Dateiauswahloberfläche auswählen darf. Weitere Details und Beispiele finden Sie unter HTMLInputElement.webkitdirectory.

Obwohl ursprünglich nur für WebKit-basierte Browser implementiert, ist webkitdirectory auch in Microsoft Edge sowie Firefox 50 und später nutzbar. Auch wenn es eine relativ breite Unterstützung hat, ist es dennoch nicht standardisiert und sollte nur verwendet werden, wenn Sie keine alternative Lösung haben.

Methoden

Die folgenden Methoden werden durch das HTMLInputElement Interface bereitgestellt, das <input> Elemente im DOM repräsentiert. Auch verfügbar sind die Methoden, die von den übergeordneten Interfaces, HTMLElement, Element, Node und EventTarget, spezifiziert werden.

checkValidity()

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

reportValidity()

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

select()

Wählt den gesamten Inhalt des <input> Elements aus, wenn der Inhalt wählbar ist. Bei Elementen ohne wählbaren Textinhalt (wie zum Beispiel visuelle Farbwähler oder Kalenderdatums-Eingaben) macht diese Methode nichts.

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 eine gegebene Zeichenkette. Ein selectMode Parameter steht zur Verfügung, um zu steuern, wie der vorhandene Inhalt betroffen ist.

setSelectionRange()

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

showPicker()

Zeigt den Browser-Wähler für das Eingabeelement an, der normalerweise angezeigt wird, wenn das Element ausgewählt wird, jedoch 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

Eingaben, die ersetzte Elemente sind, haben einige Merkmale, die auf Nicht-Formular-Elemente nicht anwendbar sind. Es gibt CSS-Selektoren, die speziell auf Formularsteuerelemente basierend auf ihren UI-Merkmalen, auch bekannt als UI-Pseudoklassen, abzielen können. Das Eingabeelement kann auch nach Typ mit Attributselektoren anvisiert werden. Es gibt einige Eigenschaften, die besonders nützlich sind.

UI-Pseudoklassen

Beispiel für Pseudoklassen

Wir können ein Kontrollkästchen-Label basierend darauf stylen, ob das Kontrollkästchen aktiviert ist oder nicht. In diesem Beispiel stylen wir die color und font-weight des <label>, das direkt nach einer aktivierten Eingabe kommt. Wir haben keine Stile angewendet, wenn die input nicht aktiviert ist.

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

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

Attributselektoren

Es ist möglich, verschiedene Typen von Formular-Steuerelementen basierend auf ihrem type zu adressieren, indem man Attributselektoren verwendet. CSS-Attributselektoren passen zu Elementen basierend auf entweder nur der Anwesenheit 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 als durchscheinend oder hellgrau. Das ::placeholder Pseudoelement ist der placeholder Text der Eingabe. Es kann mit einem begrenzten Satz von CSS-Eigenschaften gestylt werden.

::placeholder {
  color: blue;
}

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

caret-color

Eine spezifische Eigenschaft, die sich auf texteingabebezogene Elemente bezieht, ist die CSS-Eigenschaft caret-color, die es ermöglicht, die Farbe zu setzen, die zum Zeichnen des Texteingabecursors verwendet wird:

HTML

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

CSS

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

Ergebnis

Feldgröße

Die field-sizing Eigenschaft ermöglicht es Ihnen, das Größenverhalten von Formulareingaben zu steuern (d.h. sie haben standardmäßig eine bevorzugte Größe). Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben, sodass Formularelemente in der Größe an ihren Inhalt angepasst werden.

Diese Eigenschaft wird üblicherweise verwendet, um Formularfelder zu erstellen, die ihren Inhalt einschränken und wachsen, während mehr Text eingegeben wird. Dies funktioniert mit Eingabetypen, die direkte Texteingaben akzeptieren (z.B. text und url), Eingabetyp file, und <textarea> Elemente.

object-position and object-fit

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

Styling

Für weitere Informationen darüber, wie man Elemente in HTML einfärbt, siehe:

• Anwenden von Farbe auf HTML-Elemente mit CSS.

Siehe auch:

• HTML-Formulare stylen
• Erweitertes Styling für HTML-Formulare

Zusätzliche Funktionen

Labels

Labels werden benötigt, um unterstützenden Text mit einem <input> zu verknüpfen. Das <label> Element bietet erklärende Informationen über ein Formularfeld, das immer angebracht ist (abgesehen von etwaigen Layout-Bedenken). Es ist nie eine schlechte Idee, ein <label> zu verwenden, um zu erklären, was in ein <input> oder <textarea> eingegeben werden soll.

Zugehörige Labels

Die semantische Paarung von <input> und <label> Elementen ist nützlich für unterstützende Technologien wie Bildschirmleser. Indem man sie mit dem for Attribut des <label> verbindet, verknüpfen Sie das Label mit der Eingabe so, dass Bildschirmleser Eingaben den Benutzern präziser beschreiben können.

Es reicht nicht aus, nur einfachen Text neben das <input> Element zu setzen. Vielmehr erfordert die Benutzbarkeit und Zugänglichkeit die Aufnahme 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 besteht keine Beziehung zwischen der Eingabeaufforderung und dem <input> Element.

Zusätzlich zu einem zugänglichen Namen bietet das Label eine größere Zielzone für Maus- und Touchscreen-Nutzer zum Klicken oder Berühren. Indem ein <label> mit einem <input> verbunden wird, wird entweder durch Klicken auf das eine oder das andere die <input> fokussiert. Wenn Sie einfachen Text verwenden, um Ihre Eingabe zu "labeln", passiert das nicht. Die Eingabeaufforderung als Teil des Aktivierungsbereichs des Eingabefelds zu haben, ist hilfreich für Personen mit motorischen Kontrollbedingungen.

Als Webentwickler ist es wichtig, dass wir nie davon ausgehen, dass Menschen all das wissen, was wir wissen. Die Vielfalt der Menschen, die das Web nutzen—und in der Erweiterung Ihre Website—garantiert praktisch, dass einige Ihrer Webseitenbesucher Abweichungen in den Denkprozessen und/oder Umständen haben, die sie dazu führen, Ihre Formulare ohne klar und korrekt präsentierte Labels sehr unterschiedlich zu interpretieren.

Platzhalter sind nicht zugänglich

Das placeholder Attribut ermöglicht es Ihnen, Text anzugeben, der im Inhaltsbereich des <input> Elements selbst erscheint, wenn es leer ist. Der Platzhalter sollte nie 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 als Erklärung oder Aufforderung.

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

Client-seitige Validierung

Neben der Verwendung von CSS, um Eingaben basierend auf den :valid oder :invalid UI-Stati basierend auf dem aktuellen Zustand jeder Eingabe zu gestalten, wie im Abschnitt UI-Pseudoklassen oben beschrieben, bietet der Browser eine Client-seitige Validierung bei einer (versuchten) Formularübermittlung. Bei der Eingabe, wenn ein Formularelement vorhanden ist, das nicht den Einschränkungen entspricht, werden unterstützende Browser eine Fehlermeldung an dem ersten fehlerhaften Formularelement anzeigen; eine Standardmeldung basierend auf dem Fehlerdatum oder eine von Ihnen festgelegte Nachricht.

Einige Eingabetypen und andere Attribute setzen Grenzen auf, 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, darunter ein rangeUnderflow Fehler, wenn der Wert weniger als 2 ist, rangeOverflow wenn größer als 10, stepMismatch, wenn der Wert eine Zahl zwischen 2 und 10 ist, aber keine gerade Zahl (entspricht nicht den Anforderungen des step Attributs), oder typeMismatch, wenn der Wert keine Zahl ist.

Für die Eingabetypen, deren Bereich möglicher Werte periodisch ist (d.h. bei dem höchsten möglichen Wert, die Werte wieder zurück zum Anfang eingerollt werden, anstatt zu enden), können die Werte der max und min Eigenschaften umgedreht werden, was anzeigt, dass der Bereich der erlaubten Werte bei min beginnt, zurück zum niedrigsten möglichen Wert rollt und dann weitergeht, bis max erreicht wird. Dies ist besonders nützlich für Daten und Zeiten, wie wenn Sie den Bereich von 20:00 Uhr bis 8:00 Uhr erlauben möchten:

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

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

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

Wir können Limits festlegen, welche Werte wir akzeptieren, und unterstützende Browser werden nativ diese Formularwerte validieren und den Benutzer benachrichtigen, wenn beim Versand ein Fehler auftritt.

Zusätzlich zu den in der obigen Tabelle beschriebenen Fehlern enthält das validityState Interface die Boolean-Leseeigenschaften badInput, valid, und customError. Das Gültigkeitsobjekt beinhaltet:

• validityState.valueMissing
• validityState.typeMismatch
• validityState.patternMismatch
• validityState.tooLong
• validityState.tooShort
• validityState.rangeUnderflow
• validityState.rangeOverflow
• validityState.stepMismatch
• validityState.badInput
• validityState.valid
• validityState.customError

Für jede dieser Boolean-Eigenschaften bedeutet ein Wert von true, dass der spezifizierte Grund, warum die Validierung fehlgeschlagen ist, zutrifft, mit Ausnahme der valid Eigenschaft, die true ist, wenn der Wert des Elements alle Einschränkungen einhält.

Wenn ein Fehler vorliegt, werden unterstützende Browser sowohl den Benutzer warnen als auch verhindern, dass das Formular abgesendet wird. Ein Hinweis der Vorsicht: Wenn ein benutzerdefinierter Fehler auf einen wahrheitswertigen Wert gesetzt wird (alles außer dem leeren String oder null), wird das Formular daran gehindert, abgeschickt zu werden. Wenn keine benutzerdefinierte Fehlermeldung vorhanden ist und keine der anderen Eigenschaften true zurückgibt, wird valid true, und das Formular kann abgesendet werden.

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

Die letzte Zeile, die die benutzerdefinierte Gültigkeitsmeldung auf den leeren String setzt, ist wichtig. Wenn der Benutzer einen Fehler macht und die Gültigkeit gesetzt wird, wird es so lange nicht abgeschickt, selbst wenn alle Werte gültig sind, bis die Nachricht null ist.

Beispiel für benutzerdefinierte Validierungsfehler

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

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

Die grundlegenden HTML-Formularvalidierungsfunktionen werden dies dazu bringen, eine Standardfehlermeldung anzuzeigen, wenn Sie versuchen, das Formular zu übermitteln, ohne ein gültiges Feld auszufüllen oder ein Muster nicht zu entsprechen.

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

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

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

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

Das Beispiel rendert wie folgt:

Kurz gesagt:

• Wir überprüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sein Wert geändert wird, 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 ausgeführt. Innerhalb dieser Funktion bestimmen wir, ob der Wert ungültig ist, weil er leer ist oder, weil er das Muster nicht erfüllt, mithilfe eines if () Blocks und setzen eine benutzerdefinierte Gültigkeitsfehlermeldung.
• Infolgedessen wird, wenn der Eingabewert beim Drücken der Senden-Schaltfläche ungültig ist, eine der benutzerdefinierten Meldungen angezeigt.
• Wenn er gültig ist, wird es, wie erwartet, abgesendet. Dafür muss die benutzerdefinierte Gültigkeit abgebrochen werden, indem setCustomValidity() mit einem leeren String aufgerufen wird. Wir tun dies deshalb jedes Mal, wenn das input Ereignis ausgelöst wird. Wenn Sie dies nicht tun und eine benutzerdefinierte Gültigkeit zuvor gesetzt wurde, wird die Eingabe als ungültig registriert, selbst wenn sie derzeit beim Versand einen gültigen Wert enthält.

Lokalisierung

Die erlaubten Eingaben für bestimmte <input> Typen hängen von der Sprache ab. In einigen Sprachen sind 1.000,00 eine gültige Zahl, während in anderen Sprachen die gültige Art, diese Zahl einzugeben, 1.000,00 ist.

Firefox verwendet die folgenden Heuristiken, um die Sprache zu bestimmen, um die Eingaben des Benutzers zu validieren (zumindest für type="number"):

• Versuch die Sprache, die durch ein lang/xml:lang Attribut auf dem Element oder irgendeinem seiner Eltern angegeben wird.
• Versuch die Sprache, die durch einen Content-Language HTTP Header spezifiziert wird. Oder,
• Verwenden Sie die Sprache des Browsers, wenn keine angegeben ist.

Barrierefreiheit

Labels

Bei der Einbindung von Eingaben ist es eine Barrierefreiheitserfordernis, Labels hinzuzufügen. Dies ist erforderlich, damit diejenigen, die unterstützende Technologien verwenden, wissen, wofür die Eingabe ist. Außerdem wird durch Klicken oder Berühren eines Labels das zugehörige Formularelement fokussiert. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für sehende Benutzer, erhöht die Fläche, auf die der Benutzer klicken oder berühren kann, um das Formularelement zu aktivieren. Dies ist besonders nützlich (und sogar erforderlich) für Radiobuttons und Kontrollkästchen, die klein sind. Für weitere Informationen zu Labels im Allgemeinen, siehe Labels.

Im Folgenden finden Sie ein Beispiel dafür, wie das <label> mit einem <input> Element in obigem Stil verbunden wird. Sie müssen dem <input> ein id Attribut geben. Das <label> benötigt dann ein for Attribut, dessen Wert mit dem id des Eingabes identisch ist.

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

Größe

Interaktive Elemente wie Formulareingaben sollten einen Bereich bieten, der groß genug ist, dass sie leicht zu aktivieren sind. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Kontrollschwierigkeiten und Menschen, die ungenaue Eingabemethoden wie einen Stift oder Finger verwenden. Eine minimale interaktive Größe von 44×44 CSS-Pixeln wird empfohlen.

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS appearance Eigenschaft
• Ihr erstes HTML-Formular
• Anleitung zur Strukturierung eines HTML-Formulars
• Die nativen Formular-Widgets
• Formulardaten senden
• Formulareinschränkungs-Validierung
• HTML-Formulare stylen