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 unterschiedlichen Typen in separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben wird, ist der Standardtyp text.

Die verfügbaren Typen sind wie folgt:

<input type="button" name="button" value="Button" />

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

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

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

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

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

<input type="file" accept="image/*, text/*" name="file"/>

<input id="userId" name="userId" type="hidden" value="abc123" />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Attribute

Das <input>-Element ist so mächtig, aufgrund seiner Attribute; das type-Attribut, wie oben in den Beispielen beschrieben, ist das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-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 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 definiert, welche Dateitypen in einem file Upload-Steuerelement auswählbar sind. Siehe den file Eingabetyp.

alpha Experimentell

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

alt

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

autocapitalize

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

autocomplete

(Kein booleanes Attribut!) Das autocomplete-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, um email-Adressen in einem E-Mail-Eingabefeld automatisch auszufüllen. Siehe autocomplete für erlaubte Werte.

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

Siehe das autocomplete-Attribut für weitere Informationen, einschließlich Informationen zur Passwortsicherheit und wie autocomplete bei hidden 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 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 angebracht ist, erhält das erste Element mit dem Attribut den Fokus.

Das autofocus-Attribut kann nicht auf Eingaben vom Typ hidden 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. Wenn autofocus zugewiesen ist, "teleportieren" Bildschirmlesegeräte ihren Benutzer ohne Vorwarnung zum Formularsteuerelement.

Verwenden Sie das autofocus-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 den file Eingabetyp gültig, definiert das capture-Attribut, welches Medium – Mikrofon, Video oder Kamera – verwendet werden soll, um eine neue Datei mit dem file Upload-Steuerelement in unterstützenden Szenarien hochzuladen. Siehe den file Eingabetyp.

checked

Gültig für die Typen radio und checkbox, ist checked ein booleanes Attribut. Wenn es auf einem radio-Typ vorhanden ist, gibt es an, dass der Radiobutton der aktuell ausgewählte in der Gruppe der gleichnamigen Radiobuttons ist. Wenn es auf einem checkbox-Typ vorhanden ist, gibt es an, dass die Checkbox standardmäßig aktiviert ist (wenn die Seite geladen wird). Es zeigt nicht an, ob diese Checkbox aktuell aktiviert ist: Wenn sich der Zustand der Checkbox ändert, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das HTMLInputElement checked 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 derzeit checked sind. Wenn sie es sind, werden der Name und die Werte der aktivierten Kontrollen übermittelt.

Wenn beispielsweise eine Checkbox mit dem name fruit den value "cherry" hat und die Checkbox aktiviert ist, enthalten die übermittelten Formulardaten fruit=cherry. Wenn die Checkbox nicht aktiv ist, wird sie in den Formulardaten nicht aufgeführt. Der Standardwert für Checkboxen und Radiobuttons ist on.

colorspace Experimentell

Gültig nur für den color Eingabetyp, gibt das colorspace-Attribut den Farbraum an, der von der Eingabe mit type="color" verwendet wird. Mögliche aufgelistete Werte sind:

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

dirname

Gültig für die Eingabetypen hidden, text, search, url, tel und email, ermöglicht das dirname-Attribut die Übermittlung der Ausrichtung des Elements. Wenn sie enthalten ist, wird das Formularsteuerelement mit zwei Name/Wert-Paaren übermittelt: das erste ist name / 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 oben genannte Formular übermittelt wird, führt die Eingabe dazu, dass sowohl das name / value Paar fruit=cherry als auch das dirname / Richtungspaar fruit-dir=ltr gesendet werden. Weitere Informationen finden Sie im dirname-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 das click-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 hinweg speichern. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

form

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

Das form-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 Eingabetypen image und submit. Weitere Informationen finden Sie im submit-Eingabetyp.

formenctype

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

formmethod

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

formnovalidate

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

formtarget

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

height

Nur gültig für den image-Button, die height ist die Höhe der Bilddatei, die als grafischer Submit-Button dargestellt werden soll. Siehe den image-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 umfassen none, text, tel, url, email, numeric, decimal, und search.

list

Der dem list-Attribut zugewiesene Wert sollte die id eines datalist-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 dem type ü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ür text, search, url, tel, email, date, month, week, time, datetime-local, number, range, und color.

Entsprechend den Spezifikationen wird das list-Attribut nicht von hidden, 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 die Browser-Kompatibilitätstabelle für die anderen Eingabetypen.

Siehe das <datalist>-Element.

max

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

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), darf der max-Wert niedriger sein als der min-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ür text, search, url, tel, email, und password, definiert die maximale Zeichenlänge (gemessen in UTF-16 Codeeinheiten), die der Benutzer in das Feld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn keine maxlength 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 von minlength sein.

Die Eingabe schlägt bei der Einschränkungsvalidierung fehl, wenn die Länge des eingegebenen Textes größer ist als maxlength UTF-16 code units Länge. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als durch das maxlength-Attribut erlaubt sind. Die 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, definiert den negativsten Wert innerhalb des Bereichs der erlaubten Werte. Wenn der eingegebene value des Elements darunter fällt, schlägt die Einschränkungsvalidierung fehl. Wenn der Wert des min-Attributs keine Zahl ist, hat das Element keinen Minimalwert.

Dieser Wert muss kleiner oder gleich dem Wert des max-Attributs sein. Wenn das min-Attribut vorhanden, aber nicht angegeben oder ungültig ist, wird kein min-Wert angewendet. Wenn das min-Attribut gültig ist und ein Nicht-Null-Wert unter dem minimal erlaubten Wert gemäß dem min-Attribut liegt, 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 bei Daten oder Zeiten), darf der max-Wert niedriger sein als der min-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ür text, search, url, tel, email, und password, definiert die minimal Zeichenlänge (gemessen in UTF-16 Codeeinheiten), die der Benutzer in das Eingabefeld eingeben kann. Dies muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich der durch das maxlength-Attribut festgelegten Länger ist. Wenn keine minlength angegeben ist oder ein ungültiger Wert angegeben wird, hat die Eingabe keine Minimallänge.

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

multiple

Das boolesche multiple-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 des file-Inputs auswählen kann. Siehe den email und file 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 den name als ein erforderliches Attribut (auch wenn es das nicht ist). Wenn keine Bezeichnung angegeben ist oder name 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 als name eines <input>-Elements vom Typ hidden verwendet, wird der Wert des Eingabefeldes automatisch vom Benutzeragent auf die zum Senden 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 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 ein name zugewiesen wird, wird dieser Name zu einem Eigentum des eigentlichen Formularelements HTMLFormElement.elements-Eigenschaft. Wenn Sie eine Eingabe mit dem Namen guest und eine andere mit dem Namen hat-size haben, kann der folgende Code verwendet werden:

js

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

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

Wenn dieser Code ausgeführt wurde, wird guestName das HTMLInputElement für das Gastfeld sein, und hatSize das Objekt für das Hutgrößenfeld.

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

pattern

Gültig für text, search, url, tel, email, und password, wird das pattern-Attribut verwendet, um einen regulären Ausdruck zu kompilieren, den der value der Eingabe erfüllen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er vom RegExp Typ verwendet wird, und im Leitfaden 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 den gesamten 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 als ASCII.

Wenn das pattern-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 das multiple vorhanden ist, wird der kompilierte reguläre Ausdruck mit jedem durch Komma getrennten Wert abgeglichen.

Hinweis: Wenn Sie das pattern-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 ein title-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.

Siehe Client-seitige Validierung für weitere Informationen.

placeholder

Gültig für text, search, url, tel, email, password, und number, das placeholder-Attribut bietet 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 Text darf 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: Das placeholder-Attribut ist nicht so semantisch nützlich wie andere Wege, Ihr Formular zu erklären, und kann unerwartete technische Probleme mit Ihrem Inhalt verursachen. Siehe Labels 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 die Popover API-Landeseite für weitere Details. Die Herstellung einer Beziehung zwischen einem Popover und seinem Aufrufknopf mit dem popovertarget-Attribut hat zwei zusätzliche, nützliche Effekte:

• Der Browser erstellt eine implizite aria-details- und aria-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 auch Popover-Zugänglichkeitsfunktionen).
• Der Browser erstellt eine implizite Ankerverbindung zwischen den beiden, was es sehr bequem macht, Popovers relativ zu ihren Steuerelementen mit CSS-Anker-Positionierung zu positionieren. Siehe Popover-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. Wenn popovertargetaction 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. Das readonly-Attribut wird von den Eingabetypen text, search, url, tel, email, date, month, week, time, datetime-local, number, und password unterstützt.

Siehe das HTML-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. Das required-Attribut wird von den Ausgabetypen text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, und file unterstützt.

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

size

Gültig für email, password, tel, url, und text, das size-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ür password und text ist es eine Anzahl von Zeichen (oder em-Einheiten) mit einem Standardwert von 20, und für andere sind es Pixel (oder px-Einheiten). CSS width hat Vorrang vor dem size-Attribut.

src

Nur gültig für den image-Button ist src eine Zeichenfolge, die die URL der Bilddatei angibt, die dargestellt werden soll, um den grafischen Submit-Button anzuzeigen. Siehe den 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, 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 ist min, wenn angegeben, value andernfalls oder 0, wenn keiner vorhanden ist (außer week, das einen standardmäßigen Schritt-Basis von −259,200,000 hat, was dem Beginn von Woche 1970-W01 entspricht).

Wenn nicht explizit angegeben:

• step ist standardmäßig 1 für number und range.
• Jeder Date/Time Eingabetyp hat einen standardmäßigen step-Wert, der für den Typ geeignet ist; siehe die individuellen Eingabeseiten: 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 keine Schritte impliziert sind und jeder Wert erlaubt ist (unter Ausschluss anderer Einschränkungen, wie min und max).

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 (wie 4.2) sind nicht gültig, weil step standardmäßig 1 ist. Damit 4.2 gültig ist, 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 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.

Siehe Client-seitige Validierung für mehr Informationen.

switch Experimentell Nicht standardisiert

Nur gültig für checkbox 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 einem for-Attribut, das auf das Formular-Steuerelement id gesetzt ist. Siehe Labels unten.

type

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

Erlaubte Werte werden unter Eingabetypen 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 entsprechende HTMLInputElement-Eigenschaft auf den Wert zuzugreifen. Das value-Attribut ist immer optional, sollte aber als obligatorisch betrachtet werden für checkbox, radio, und hidden.

width

Nur gültig für den image-Button ist die width die Breite der Bilddatei, die dargestellt werden soll, um den grafischen Submit-Button anzuzeigen. Siehe den image-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.

incremental Nicht standardisiert

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

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

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

orient Nicht standardisiert

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

results Nicht standardisiert

Das results-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.

webkitdirectory Nicht standardisiert

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

Obwohl ursprünglich nur für WebKit-basierte Browser implementiert, ist webkitdirectory auch in Microsoft Edge sowie Firefox 50 und spä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 der HTMLInputElement-Schnittstelle bereitgestellt, die <input>-Elemente im DOM darstellt. Außerdem stehen die Methoden zur Verfügung, die von den übergeordneten Schnittstellen HTMLElement, Element, Node und EventTarget spezifiziert sind.

checkValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls wird false zurückgegeben und ein invalid-Ereignis 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 (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. Ein selectMode-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 die color und font-weight der <label>, die direkt nach einer gewählten Eingabe folgt. Wenn das input nicht aktiviert ist, haben wir keine Styles angewendet.

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

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

Attributselektoren

Es ist möglich, verschiedene Arten von Formularelementen basierend auf ihrem type mit Attributselektoren 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 der placeholder-Text der Eingabe. Es kann mit einem eingeschränkten Satz von CSS-Eigenschaften gestylt werden.

::placeholder {
  color: blue;
}

Nur der eingeschränkte Satz von CSS-Eigenschaften, die 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-Eigenschaft caret-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 id="textInput" class="custom" size="32" />

CSS

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

Ergebnis

field-sizing

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

object-position und object-fit

In bestimmten Fällen (typischerweise bei nicht-textlichen Eingaben und spezialisierten Schnittstellen) ist das <input>-Element ein ersetztes Element. Wenn es das ist, können Position und Größe des Elements innerhalb seines Rahmens mit den CSS-Eigenschaften object-position und object-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, die immer 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 dem for-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 id="name" type="text" size="30" /></p>

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

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

Das erste Beispiel ist nicht barrierefrei: 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 Attribut placeholder 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 der placeholder 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 Abschnitt UI-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 ein rangeUnderflow-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 des step-Attributs), oder typeMismatch, 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 der max- und min-Eigenschaften umgekehrt sind, was darauf hinweist, dass der Bereich der erlaubten Werte bei min beginnt, an den niedrigsten möglichen Wert zurückspringt und dann weitergeht, bis max 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 Fehler ValidityState führen:

Wenn ein Formularelement nicht das required-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 bei required) 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 die validityState-Schnittstelle die booleschen schreibgeschützten Eigenschaften badInput, valid und customError. Das Validitätsobjekt umfasst:

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

Für jede dieser booleschen Eigenschaften gibt ein Wert von true an, dass der angegebene Grund, warum die Validierung fehlgeschlagen sein könnte, zutrifft, mit Ausnahme der Eigenschaft valid, die true 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 oder null), wird die Übermittlung des Formulars verhindert. Wenn keine benutzerdefinierte Fehlermeldung vorhanden ist und keine der anderen Eigenschaften true zurückgibt, wird valid true 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 Meldung null ist.

Beispiel für eine benutzerdefinierte Validierungsfehlermeldung

Wenn Sie eine benutzerdefinierte Fehlermeldung anzeigen möchten, wenn ein Feld nicht validiert, müssen Sie die Constraint 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" 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 mit entweder einem nicht gültig ausgefüllten oder einem Wert, der das pattern 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 die checkValidity()-Methode über den input-Ereignishandler ausführen.
• Wenn der Wert ungültig ist, wird ein invalid-Ereignis ausgelöst, und die invalid-Ereignishandlerfunktion wird ausgeführt. Innerhalb dieser Funktion ermitteln wir mit einem if ()-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 von setCustomValidity() mit einem leeren String-Wert aufgehoben werden. Daher tun wir dies jedes Mal, wenn das input-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ür type="number"):

• Versuchen Sie, die Sprache zu verwenden, die durch ein lang/xml:lang-Attribut am Element oder einem seiner Elternteile angegeben ist.
• Versuchen Sie, die durch einen Content-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 unter Labels.

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

<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="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×44 CSS-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-Eigenschaft appearance
• Ihr erstes HTML-Formular
• Anleitung zur Strukturierung eines HTML-Formulars
• Die nativen Formularwidgets
• Senden von Formulardaten
• Formularbeschränkungsvalidierung
• Styling von HTML-Formularen