<input>: Das HTML-Input-Element

Die Funktionsweise eines <input> variiert erheblich abhängig vom Wert seines type-Attributs, daher sind die verschiedenen Typen in ihren eigenen, separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben ist, wird der Standardtyp text verwendet.

Die verfügbaren Typen sind wie folgt:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Das <input>-Element ist so leistungsstark aufgrund seiner Attribute; das type-Attribut, wie oben mit Beispielen beschrieben, ist dabei das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-Schnittstelle basiert, teilen sie sich technisch gesehen denselben Satz von Attributen. In der Praxis wirken sich jedoch die meisten Attribute nur auf eine bestimmte Teilmenge von Eingabetypen aus. Zusätzlich hängt die Wirkung einiger Attribute auf eine Eingabe vom Eingabetyp ab und beeinflusst verschiedene Eingabetypen auf unterschiedliche Weise.

Dieser Abschnitt bietet eine Tabelle, die alle Attribute mit einer kurzen Beschreibung auflistet. Diese Tabelle wird gefolgt von einer Liste, die jedes Attribut im Detail beschreibt, zusammen mit den mit ihnen assoziierten Eingabetypen. Attribute, die für die meisten oder alle Eingabetypen gemeinsam sind, werden unten detailliert beschrieben. Attribute, die einzigartig für bestimmte Eingabetypen sind – oder Attribute, die für alle Eingabetypen gemeinsam sind, aber besondere Verhaltensweisen haben, wenn sie auf einen bestimmten Eingabetyp angewendet 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-standardmäßige Attribute sind im Anschluss an die Beschreibungen der Standardattribute aufgeführt.

accept

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

alt

Gültig nur für die image-Schaltfläche, bietet das alt-Attribut alternativen Text für das Bild und zeigt den Wert des Attributs an, wenn das Bild-[src](#src) fehlt oder nicht geladen werden kann. Siehe den image Eingabetyp.

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und, wenn ja, in welcher Weise. Siehe die autocapitalize globale Attributseite für weitere Informationen.

autocomplete

(Kein boolesches Attribut!) Das autocomplete-Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenkette an, die beschreibt, welche, wenn überhaupt, Art der Autovervollständigungsfunktion die Eingabe bieten soll. Eine typische Implementierung der Autovervollständigung ruft frühere Werte auf, die im selben Eingabefeld eingegeben wurden, aber es können auch komplexere Formen der Autovervollständigung existieren. Zum Beispiel könnte ein Browser mit der Kontaktliste eines Geräts integrieren, um E-Mail-Adressen in einem E-Mail-Eingabefeld autovervollständigen. Siehe autocomplete für erlaubte 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 Auswirkungen auf Eingabetypen, die keine numerischen oder Textdaten zurückgeben, gültig für alle Eingabetypen außer checkbox, radio, file oder eine der Schaltflächentypen.

Weitere Informationen, einschließlich Informationen zur Passwortsicherheit und zur Funktionsweise von autocomplete bei hidden, finden Sie im Autocomplete-Attribut.

autofocus

Ein boolesches Attribut, das, wenn vorhanden, angibt, dass die Eingabe automatisch den Fokus erhalten soll, wenn die Seite geladen wurde (oder wenn das <dialog>, das das Element enthält, angezeigt wurde).

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 ist, erhält das erste mit dem Attribut den Fokus.

Das autofocus-Attribut kann nicht auf Eingaben des Typs hidden verwendet werden, da versteckte Eingaben nicht fokussierbar sind.

Warnung: Einem Formularsteuerelement automatisch den Fokus zu geben, kann Menschen mit visuellen Einschränkungen, die Technologien zur Bildschirmvorlesung verwenden, und Menschen mit kognitiven Beeinträchtigungen verwirren. Wenn autofocus zugewiesen ist, "teleportiert" der Bildschirmleser seinen Benutzer ohne Vorwarnung zur Formularsteuerung.

Verwenden Sie sorgfältige Überlegungen zur Barrierefreiheit, wenn Sie das autofocus-Attribut anwenden. Einem Steuerelement automatisch den Fokus zu geben, kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann auf einigen Touch-Geräten auch dazu führen, dass dynamische Tastaturen angezeigt werden. Während ein Bildschirmleser das Label des Formularelements ankündigt, das den Fokus erhält, wird er nichts vor dem Label ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird den Kontext des vorhergehenden Inhalts ebenfalls nicht wahrnehmen.

capture

Eingeführt in der HTML Media Capture-Spezifikation und gültig nur für den file Eingabetyp, definiert das capture Attribut, welches Medium—Mikrofon, Video oder Kamera— verwendet werden soll, um eine neue Datei zur Upload mit einer file Upload-Steuerung im unterstützenden Szenario festzulegen. Siehe den file Eingabetyp.

checked

Gültig sowohl für den radio-als auch den checkbox-Typ. checked ist ein boolesches Attribut. Bei Vorhandensein bei radio zeigt es an, dass die Optionsschaltfläche die aktuell ausgewählte in der Gruppe gleichnamiger Radio-Buttons ist. Bei checkbox zeigt es an, dass das Kontrollkästchen standardmäßig aktiviert ist (wenn die Seite geladen wird). Es gibt 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's checked IDL-Attribut wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabesteuerungen werden der Wert von Kontrollkästchen und Radio-Buttons nur dann in den übermittelten Daten aufgenommen, wenn sie aktuell aktiviert sind. Wenn sie aktiviert sind, werden der Name und die Wert(e) der aktivierten Steuerungen übermittelt.

Wenn zum Beispiel ein Kontrollkästchen, dessen name frucht ist, einen value von kirsche hat und das Kontrollkästchen aktiviert ist, werden in den gesendeten Formulardaten frucht=kirsche enthalten sein. Wenn das Kontrollkästchen nicht aktiv ist, wird es überhaupt nicht in den Formulardaten aufgelistet. Der Standardwert für Kontrollkästchen und Radio-Buttons ist on.

dirname

Gültig für die Eingabetypen hidden, text, search, url, tel und email, ermöglicht das dirname-Attribut die Übermittlung der Richtung des Elements. Wenn es enthalten ist, wird die Formularsteuerung mit zwei Name/Wert-Paaren übermittelt: Das erste ist der name und value, und das zweite ist der Wert des dirname-Attributs als Name, mit einem Wert 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, lässt die Eingabe sowohl das name / value Paar frucht=kirsche als auch das dirname / Richtungs-Paar frucht-dir=ltr gesendet werden. Für weitere Informationen siehe das dirname-Attribut.

disabled

Ein boolesches Attribut, das, wenn vorhanden, angibt, dass der Benutzer nicht mit der Eingabe interagieren können soll. Deaktivierte Eingaben werden typischerweise mit einer dunkleren Farbe dargestellt oder in anderer Weise darauf hingewiesen, dass das Feld nicht zur Verwendung verfügbar ist.

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

Hinweis: Obwohl es von der Spezifikation nicht gefordert wird, wird Firefox standardmäßig den dynamischen deaktivierten Zustand eines <input> über Seitenladevorgänge hinweg persistieren. Verwenden Sie das autocomplete-Attribut zur Steuerung dieser Funktion.

form

Eine Zeichenkette, die das <form>-Element angibt, mit dem die Eingabe verknüpft ist (d.h. sein Formular Besitzer). Der Wert dieser Zeichenkette muss, falls vorhanden, mit der id eines <form>-Elements im selben Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, ist das <input>-Element mit dem nächstgelegenen umgebenden Formular verbunden, falls vorhanden.

Das form-Attribut ermöglicht es Ihnen, eine Eingabe irgendwo im Dokument zu platzieren, sie aber in einem Formular woanders im Dokument einzuschließen.

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

formaction

Gültig nur für den Eingabetyp image und submit. Siehe den submit Eingabetyp für weitere Informationen.

formenctype

Gültig nur für den Eingabetyp image und submit. Siehe den submit Eingabetyp für weitere Informationen.

formmethod

Gültig nur für den Eingabetyp image und submit. Siehe den submit Eingabetyp für weitere Informationen.

formnovalidate

Gültig nur für den Eingabetyp image und submit. Siehe den submit Eingabetyp für weitere Informationen.

formtarget

Gültig nur für den Eingabetyp image und submit. Siehe den submit Eingabetyp für weitere Informationen.

height

Gültig nur für die image-Schaltfläche, die height ist die Höhe der Bilddatei, die angezeigt werden soll, um die grafische Submit-Schaltfläche darzustellen. Siehe den image Eingabetyp.

id

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

inputmode

Globaler Wert, der für alle Elemente gültig ist. Es bietet einen Hinweis für Browser auf die Art der virtuellen Tastaturkonfiguration, die beim Bearbeiten dieses Elements oder seiner Inhalte zu verwenden ist. Werte sind none, text, tel, url, email, numeric, decimal und search.

list

Der dem list-Attribut gegebene Wert sollte die id eines <datalist>-Elements im selben Dokument sein. Das <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle nicht mit dem type kompatiblen Werte 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.

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

Je nach Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen, Markierungen entlang eines Bereichs oder sogar eine Eingabe sehen, die sich wie ein <select> öffnet, aber auch nicht aufgelistete Werte zulässt. Sehen Sie sich die Browser-Kompatibilitätstabelle für die anderen Eingabetypen an.

Siehe das <datalist>-Element.

max

Gültig für date, month, week, time, datetime-local, number und range, definiert den größten Wert im Bereich der zulässigen Werte. Wenn der in das Element eingegebene value diesen überschreitet, schlägt das Element die Constraints-Überprüfung 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 Terminen oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was darauf hinweist, dass der Bereich sich umwickeln kann; dies ermöglicht beispielsweise das Spezifizieren eines Zeitbereichs von 22 Uhr bis 4 Uhr.

maxlength

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

Die Eingabe schlägt die Constraints-Überprüfung fehl, wenn die Länge des in das Feld eingegebenen Textes größer ist als maxlength UTF-16-Codeeinheiten lang ist. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als vom maxlength-Attribut erlaubt ist. Constraints-Überprüfung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen.

min

Gültig für date, month, week, time, datetime-local, number und range, definiert den niedrigsten Wert im Bereich der zulässigen Werte. Wenn der in das Element eingegebene value weniger als dieser ist, schlägt das Element die Constraints-Überprüfung 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-leerer Wert niedriger ist als das mindestens vom min-Attribut erlaubte, verhindert die Constraints-Überprüfung das Absenden des Formulars. Siehe Client-seitige Validierung für weitere Informationen.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Terminen oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was darauf hinweist, dass der Bereich sich umwickeln kann; dies ermöglicht beispielsweise das Spezifizieren eines Zeitbereichs von 22 Uhr bis 4 Uhr.

minlength

Gültig für text, search, url, tel, email und password, definiert sie die minimale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das Eingabefeld eingeben kann. Dies muss ein nicht-negativer Integer-Wert sein, der kleiner oder gleich dem vom maxlength spezifizierten Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben ist, hat die Eingabe keine Mindestlänge.

Die Eingabe schlägt die Constraints-Überprüfung fehl, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength UTF-16-Codeeinheiten lang ist, wodurch das Absenden des Formulars verhindert wird. Constraints-Überprüfung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen.

multiple

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

name

Ein String, der einen Namen für die Eingabesteuerung angibt. Dieser Name wird zusammen mit dem Wert der Steuerung übermittelt, wenn die Formulardaten übermittelt werden.

Betrachten Sie das name als erforderliches Attribut (auch wenn es das nicht ist). Wenn eine Eingabe kein angegebenes name hat oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular gesendet! (Deaktivierte Steuerungen, nicht ausgewählte Optionsfelder, nicht aktivierte Kontrollkästchen und Rücksetzschaltflächen werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

1. _charset_ : Wenn als Name eines <input>-Elements vom Typ hidden verwendet, wird der value der Eingabe automatisch vom Benutzeragent auf die Zeichencodierung gesetzt, die zur Übermittlung des Formular verwendet wird.
2. isindex: Aus historischen Gründen ist der Name isindex nicht erlaubt.

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

Nur ein Radio-Button in einer gleichen Namensgruppe von Radio-Buttons kann gleichzeitig ausgewählt sein. Das Auswählen eines Radio-Buttons in dieser Gruppe deselektiert automatisch einen aktuell ausgewählten Radio-Button in derselben Gruppe. Der Wert dieses einen ausgewählten Radio-Buttons wird zusammen mit dem Namen übermittelt, wenn das Formular übermittelt wird.

Wenn man in eine Reihe von gleichnamigen Radio-Buttons wechselt, wird, wenn einer ausgewählt ist, dieser den Fokus erhalten. Wenn sie nicht in der Quelldatei gruppiert sind, wird, wenn eines der Gruppe ausgewählt ist, beim Überspringen nicht ausgewählter Radio-Buttons in der Gruppe gestartet, sobald das erste der Gruppe erreicht wird. In anderen Worten, wenn ein Radio-Button ausgewählt ist, überspringt das Überspringen die nicht ausgewählten Radio-Buttons in der Gruppe. Wenn keiner ausgewählt ist, wird die Radio-Button-Gruppe fokussiert, wenn der erste in derselben Namensgruppe erreicht ist.

Sobald eines der Radio-Buttons in einer Gruppe den Fokus hat, wird durch Verwenden der Pfeiltasten durch alle Radio-Buttons des gleichen Namens navigiert, auch wenn die Radio-Buttons nicht in der Quelldatei gruppiert sind.

Wenn ein Eingabeelement einen name zugewiesen bekommt, wird dieser Name zu einer Eigenschaft der HTMLFormElement.elements-Eigenschaft des besitzenden Formularelements. Wenn Sie eine Eingabe haben, deren name auf gast und eine weitere, deren name auf hut-groesse festgelegt 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 gastName das HTMLInputElement für das gast-Feld und hutGroesse das Objekt für das hut-groesse-Feld sein.

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

pattern

Gültig für text, search, url, tel, email und password, wird das pattern-Attribut verwendet, um einen regulären Ausdruck zu kompilieren, dem der value der Eingabe entsprechen muss, damit der Wert die Constraints-Überprüfung besteht. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er vom RegExp-Typ verwendet wird, und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert. Um die Mustertexte sollten keine Schrägstriche angegeben werden. Bei der Kompilierung des regulären Ausdrucks:

1. wird das Muster implizit mit ^(?: und )$ umschlossen, sodass die Übereinstimmung mit dem gesamten Eingabewert erforderlich ist, d.h. ^(?:<pattern>)$.
2. wird das 'v'-Flag festgelegt, sodass das Muster als eine Folge von Unicode-Codepunkten behandelt wird, anstelle von 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, wird die Constraints-Überprüfung das Formulargestaltungsverfahren verhindern. Wenn das multiple vorhanden ist, wird der kompilierte reguläre Ausdruck mit jedem kommagetrennten 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 hinzufügen. Sie können auch ein title-Attribut aufnehmen, 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 erforderlich für Zugänglichkeit. Der Tooltip ist eine Verbesserung.

Siehe Client-seitige Validierung für mehr 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 an, welche Art von Informationen in das Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf die erwartete Art von Daten gibt, anstatt eine Erklärung oder Aufforderung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten. Wenn ein Feld beispielsweise den Vorname des Benutzers erfassen soll und sein Label "Vorname" lautet, könnte ein geeigneter Placeholder "z.B. Mustafa" sein.

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

popovertarget

Wandelt ein <input type="button">-Element in eine Popover-Steuerungsschaltfläche um; nimmt die ID des Popover-Elements, das kontrolliert werden soll, als seinen Wert. Siehe die Popover API-Startseite für mehr Details. Die Herstellung einer Beziehung zwischen einem Popover und seiner Invokanten-Taste mithilfe des popovertarget-Attributs hat zwei weitere nützliche Effekte:

• Der Browser erstellt eine implizite aria-details und aria-expanded Beziehung zwischen Popover und Invoker und platziert das Popover in einer logischen Position innerhalb der Tastaturfokus-Navigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover für Benutzer von Tastatur- und assistiven Technologien (AT) besser zugänglich (siehe auch Popover-Zugänglichkeitseigenschaften).
• Der Browser erstellt eine implizite Anker-Referenz zwischen den beiden, was es sehr bequem macht, Popovers relativ zu ihren Steuerungen mithilfe von CSS-Ankerpositionierung zu positionieren. Siehe Popover-Ankerpositionierung für mehr Details.

popovertargetaction

Gibt die zu ausführende Aktion auf einem von einer Steuerung <input type="button"> gesteuerten Popover-Element an. Mögliche Werte sind:

"hide"

Die Schaltfläche verbirgt ein angezeigtes Popover. Wenn Sie versuchen, ein bereits verstecktes Popover zu verbergen, wird keine Aktion durchgeführt.

"show"

Die Schaltfläche zeigt ein verstecktes Popover an. Wenn Sie versuchen, ein bereits gezeigtes Popover zu zeigen, wird keine Aktion durchgeführt.

"toggle"

Die Schaltfläche wechselt ein Popover zwischen angezeigt und versteckt. Wenn das Popover ausgeblendet ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es ausgeblendet. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die von der Steuerungsschaltfläche ausgeführt wird.

readonly

Ein boolesches Attribut, das, wenn vorhanden, angibt, dass der Benutzer den Wert der Eingabe nicht bearbeiten kann. 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 boolesches Attribut, das, wenn vorhanden, angibt, dass der Benutzer einen Wert für die Eingabe angeben muss, bevor das Formular gesendet werden kann. Das required-Attribut wird von text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio und file Eingaben unterstützt.

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

size

Gültig für email, password, tel, url und text, spezifiziert das size-Attribut, wie viel der Eingabe angezeigt wird. Grundsätzlich wird dasselbe Ergebnis erzielt wie durch das Setzen der CSS-[width](/de/docs/Web/CSS/width) Eigenschaft mit einigen Besonderheiten. Die tatsächliche Einheit des Werts hängt vom Eingabetyp ab. Für passwordundtextist es eine Anzahl von Zeichen (oderem-Einheiten) mit einem Standardwert von 20, und für andere ist es Pixel (oder px-Einheiten). CSS-widthhat Vorrang vor demsize`-Attribut.

src

Gültig nur für die image-Schaltfläche, ist das src eine Zeichenkette, die die URL der Bilddatei angibt, die als grafische Submit-Schaltfläche angezeigt werden soll. Siehe den image Eingabetyp.

step

Gültig für date, month, week, time, datetime-local, number und range, ist das step-Attribut eine Zahl, die die Granularität spezifiziert, der der Wert entsprechen muss. Nur Werte, die eine ganzzahlige Schrittanzahl vom Basiswert entfernt sind, sind gültig. Der Basiswert ist min, wenn angegeben, value andernfalls oder 0, wenn weder noch angegeben (außer für week, das einen Standardbasiswert für Schritte von −259.200.000 hat, der den Anfang der Woche 1970-W01 darstellt).

Wenn nicht explizit enthalten:

• Standardmäßig ist step 1 für number und range.
• Jeder Datum/Zeit-Eingabetyp hat einen Standardwert für step, der für den Typ geeignet ist; siehe die einzelnen Eingabeseiten: date, datetime-local, month, time und week.

Der Wert muss eine positive Zahl sein—ganzzahlig oder gleitkommagesteuert—oder der spezielle Wert any, was bedeutet, dass kein Schritt impliziert wird und jeder Wert erlaubt ist (abzüglich anderer Einschränkungen, wie min und max).

Wenn Sie beispielsweise <input type="number" min="10" step="2"> haben, ist jede gerade ganze Zahl, 10 oder größer, gültig. Wenn weggelassen, <input type="number">, ist jede Zahl gültig, aber Gleitkommazahlen (wie 4.2) sind nicht gültig, da step standardmäßig 1 ist. Für 4.2, um gültig zu sein, müsste step auf any, 0.1, 0.2 gesetzt werden oder der min-Wert müsste eine Zahl sein, die auf .2 endet, wie <input type="number" min="-5.2">.

Hinweis: Wenn die Daten, die der Benutzer eingegeben hat, nicht der Schritt-Konfiguration entsprechen, wird der Wert als ungültig in der Constraints-Überprüfung angesehen und wird die :invalid-Pseudoklasse anpassen.

Siehe Client-seitige Validierung für weitere Informationen.

tabindex

Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, ein Integer-Attribut, das anzeigt, ob das Element Eingabefokus nehmen kann (fokussierbar ist), ob es an der sequentiellen Tastaturnavigation teilnehmen sollte. Da alle Eingabetypen außer Typ hidden fokussierbar sind, sollte dieses Attribut nicht auf Formularsteuerelementen verwendet werden, da sonst der Fokusreihenfolge für alle Elemente im Dokument verwaltet werden müsste, mit dem Risiko, die Usability und Zugänglichkeit bei falscher Implementierung zu beeinträchtigen.

title

Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, das einen Text enthält, der Beratungsinformationen 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 primäre Erklärung für den Zweck der Formularsteuerung verwendet werden. Stattdessen sollte das <label>-Element verwendet werden, dessen for-Attribut auf das id-Attribut der Form-Steuerelemente gesetzt wird. Siehe Labels unten.

type

Eine Zeichenkette, die den Typ der zu rendernden Steuerung spezifiziert. Zum Beispiel, um ein Kontrollkästchen zu erstellen, wird ein Wert von checkbox verwendet. Wenn weggelassen (oder ein unbekannter Wert angegeben), wird der Eingabety text verwendet, was ein Klartext-Eingabefeld erstellt.

Erlaubte Werte sind in Eingabetypen oben aufgelistet.

value

Der Wert der Eingabesteuerung. Wenn im HTML angegeben, ist dies der Anfangswert, und von da an kann er jederzeit mit JavaScript geändert oder abgerufen werden, indem auf die entsprechende HTMLInputElement-Objekteigenschaft value zugegriffen wird. Das value-Attribut ist immer optional, obwohl es als obligatorisch für checkbox, radio und hidden betrachtet werden sollte.

width

Gültig nur für die image-Schaltfläche, gibt die width die Breite der Bilddatei an, die zur Darstellung der grafischen Übermittlungsschaltfläche angezeigt werden soll. Siehe den image Eingabetyp.

Die folgenden nicht-standardisierten Attribute sind auch in einigen Browsern verfügbar. Allgemein sollte man die Verwendung vermeiden, es sei denn, es ist unvermeidbar.

incremental Nicht standardisiert

Das Boolean-Attribut incremental ist eine Erweiterung von WebKit und Blink (so unterstützt von Safari, Opera, Chrome, usw.), die, wenn vorhanden, dem Benutzeragent anweist, 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 die Suchbox darstellt. Dies ermöglicht es Ihrem Code, die Suchergebnisse in Echtzeit zu aktualisieren, während der Benutzer die Suche bearbeitet.

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

Das search-Ereignis ist so begrenzt, dass es nicht häufiger als in einem implementierungsdefinierten Intervall gesendet wird.

orient Nicht standardisiert

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

results Nicht standardisiert

Das nur von Safari unterstützte results-Attribut ist ein numerischer Wert, der es Ihnen ermöglicht, die maximale Anzahl von Einträgen zu überschreiben, die im <input>-Element des nativen Dropdown-Menüs der vorherigen Suchabfragen angezeigt werden sollen.

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

webkitdirectory Nicht standardisiert

Das Boolean-Attribut webkitdirectory, wenn vorhanden, gibt an, dass nur Verzeichnisse von dem Benutzer im Datei-Picker ausgewählt werden dürfen. Siehe HTMLInputElement.webkitdirectory für weitere 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. Obwohl es ziemlich umfangreich unterstützt wird, ist es immer noch nicht standardisiert und sollte nicht verwendet werden, es sei denn, es gibt keine Alternative.

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

checkValidity()

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

reportValidity()

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

select()

Wählt den gesamten Inhalt des <input>-Elements aus, wenn der Inhalt des Elements auswählbar ist. Bei Elementen ohne auswählbaren Text-Inhalt (wie ein visueller Farbwähler oder Kalendereingabe) tut 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 Eingabefeld auf eine gegebene Zeichenkette. Ein selectMode-Parameter ist verfügbar, um zu steuern, wie der vorhandene Inhalt betroffen ist.

setSelectionRange()

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

showPicker()

Zeigt den Browser-Auswahl für das Eingabelement an, das normalerweise angezeigt wird, wenn das Element ausgewählt wird, aber durch einen Tastenanschlag oder eine andere Benutzerinteraktion ausgelöst wird.

stepDown()

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

stepUp()

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

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

Beispiel für Pseudoklassen

Wir können das Label eines Kontrollkästchens basierend darauf stylen, ob das Kontrollkästchen aktiviert ist oder nicht. In diesem Beispiel gestalten wir die color und font-weight des <label>, das unmittelbar nach einem aktivierten Input kommt. Wir haben keine Stile angewendet, wenn das 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;
}

Es ist möglich, verschiedene Arten von Formularelementen basierend auf ihrem type mit Attributselektoren anzusprechen. CSS-Attributselektoren stimmen mit Elementen basierend entweder auf dem Vorhandensein eines Attributs oder dem Wert eines bestimmten Attributs überein.

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

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

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

Standardmäßig erscheint der Platzhaltertext als durchscheinend oder hellgrau. Das ::placeholder Pseudoelement ist der placeholder Text des Inputs. Es kann mit einem begrenzten Satz von CSS-Eigenschaften gestylt werden.

::placeholder {
  color: blue;
}

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

Die appearance Eigenschaft ermöglicht das Anpassen von (fast) jedem Element im plattformnativen Stil basierend auf dem Thema des Betriebssystems sowie das Entfernen jeglicher plattform-natürlichen Stile mit dem Wert none.

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

Das Setzen von appearance: none entfernt plattform-native Rahmen, aber nicht die Funktionalität.

Eine spezifische Eigenschaft für texteingabebezogene Elemente ist die CSS caret-color Eigenschaft, die es ermöglicht, die Farbe der Texteingabe-Markierung festzulegen:

HTML

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

CSS

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

Ergebnis

Die field-sizing Eigenschaft ermöglicht Ihnen, das Größenverhalten von Formulareingaben zu steuern (d.h. sie haben standardmäßig eine bevorzugte Größe). Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben und Formularelementen zu erlauben, die Größe an ihre Inhalte anzupassen.

Diese Eigenschaft wird typischerweise verwendet, um Formularfelder zu erstellen, die ihren Inhalt einwickeln und wachsen, während mehr Text eingegeben wird. Dies funktioniert mit Eingabetypen, die direkte Texteingabe akzeptieren (zum Beispiel, text und url), Eingabetyp file, und <textarea>-Elementen.

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

Weitere Informationen zum Hinzufügen von Farben zu Elementen in HTML finden Sie unter:

• Farbe auf HTML-Elemente mit CSS anwenden.

Siehe auch:

• HTML-Formulare gestalten
• Erweiterte Gestaltung von HTML-Formularen und

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

Zugeordnete Labels

Die semantische Koppelung von <input> und <label>-Elementen ist nützlich für unterstützende Technologien wie Screenreader. Indem sie mit dem for-Attribut des <label>-Elements gekoppelt werden, verbinden Sie das Label mit dem Input auf eine Weise, die es Screenreadern ermöglicht, Eingaben Benutzern präziser zu beschreiben.

Es reicht nicht aus, nur Text neben dem <input>-Element zu haben. Vielmehr erfordern Benutzerfreundlichkeit und Barrierefreiheit, dass entweder implizite oder explizite <label> enthalten sind:

<!-- 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 Aufforderung und dem <input>-Element.

Zusätzlich zu einem zugänglichen Namen bietet das Label eine größere Erkennungsfläche für Maus- und Touchscreen-Nutzer, um darauf zu klicken oder es zu berühren. Indem Sie ein <label> mit einem <input> koppeln, wird durch Klicken auf eines von beiden das <input> fokussiert. Wenn Sie einfachen Text verwenden, um Ihr Eingabefeld zu "labeln", passiert dies nicht. Es ist hilfreich für Menschen mit motorischen Störungen, wenn der Aktivierungsbereich des Eingabefelds Teil der Aufforderung ist.

Als Webentwickler ist es wichtig, dass wir niemals davon ausgehen, dass Menschen all das wissen, was wir wissen. Die Vielfalt der Menschen, die das Web nutzen – und damit auch Ihre Website – garantiert praktisch, dass einige der Besucher Ihrer Website einige Abweichungen in Denkprozessen und/oder Umständen haben, die sie dazu bringt, Ihre Formulare sehr unterschiedlich von Ihnen zu interpretieren, ohne klare und ordnungsgemäß präsentierte Labels.

Platzhalter sind nicht zugänglich

Das placeholder-Attribut erlaubt es Ihnen, Text anzugeben, der im Inhaltsbereich des <input>-Elements selbst erscheint, wenn er leer ist. Der Platzhalter sollte niemals erforderlich sein, um Ihre Formulare zu verstehen. Es ist kein Label und sollte nicht als Ersatz verwendet werden, weil es kein Label ist. Der Platzhalter dient dazu, einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht als Erklärung oder Aufforderung.

Nicht nur ist der Platzhalter für Screenreader nicht zugänglich, sondern wenn der Benutzer Text in das Eingabefeld eingibt oder wenn das Eingabefeld bereits einen Wert hat, verschwindet der Platzhalter. Browser mit automatischen Seitentranslationsfunktionen überspringen möglicherweise Attribute bei der Übersetzung, was bedeutet, dass der placeholder möglicherweise nicht übersetzt wird.

Zusätzlich zur Verwendung von CSS, um Inputs basierend auf dem :valid oder :invalid UI-Zuständen basierend auf dem aktuellen Zustand jedes Inputs zu stylen, wie im Abschnitt UI-Pseudoklassen oben beschrieben, bietet der Browser eine Client-seitige Validierung bei (versuchter) Formularübermittlung. Bei der Formularübermittlung, wenn es ein Formularelement gibt, das die Eingabekontrolle nicht erfüllt, zeigen unterstützende Browser eine Fehlermeldung beim ersten ungültigen Formularelement an; entweder eine Standardmeldung basierend auf dem Fehlertyp oder eine von Ihnen festgelegte Nachricht.

Einige Eingabetypen und andere Attribute begrenzen, 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. Mehrere Fehler können auftreten, einschließlich eines rangeUnderflow-Fehlers, wenn der Wert kleiner als 2 ist, rangeOverflow, wenn er größer als 10 ist, stepMismatch, wenn der Wert eine Zahl zwischen 2 und 10 ist, aber keine gerade Ganzzahl (entspricht nicht den Anforderungen des step-Attributs), oder typeMismatch, wenn der Wert keine Zahl ist.

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

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

Spezifische Attribute und ihre Werte können zu einem bestimmten Fehler im 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, mit Ausnahme von required, führt ein leerer String nicht zu einem Fehler.

Wir können festlegen, welche Werte wir akzeptieren, und unterstützende Browser werden diese Formularwerte nativ validieren und den Benutzer informieren, wenn beim Absenden des Formulars ein Fehler vorliegt.

Zusätzlich zu den in der obigen Tabelle beschriebenen Fehlern enthält die validityState-Schnittstelle die booleschen Lese-Schreib-Eigenschaften badInput, valid, und customError. Das Gültigkeitsobjekt 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 möglicherweise fehlgeschlagen ist, zutrifft, mit Ausnahme der valid-Eigenschaft, die true ist, wenn der Wert des Elements alle Einschränkungen befolgt.

Wenn ein Fehler auftritt, werden unterstützende Browser sowohl den Benutzer benachrichtigen als auch das Absenden des Formulars verhindern. Ein Wort der Vorsicht: Wenn ein benutzerdefinierter Fehler auf einen wahrheitsgemäßen Wert gesetzt wird (alles außer dem leeren String oder null), wird das Absenden des Formulars verhindert. Wenn keine benutzerdefinierte Fehlermeldung vorhanden ist und keine der anderen Eigenschaften true zurückgibt, wird valid true und das Formular kann gesendet werden.

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

Die letzte Zeile, die die benutzerdefinierte Gültigkeitsnachricht auf den leeren String setzt, ist entscheidend. Wenn der Benutzer einen Fehler macht und die Gültigkeit eingestellt ist, wird das Formular selbst dann nicht abgesendet, 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 verursachen, dass dies eine Standardfehlermeldung ausgibt, wenn Sie versuchen, das Formular entweder ohne gültiges Feld zu übermitteln oder einen Wert, der nicht dem pattern entspricht.

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

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

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

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

Das Beispiel wird wie folgt angezeigt:

Kurz gesagt:

• Wir überprüfen den gültigen Status des Eingabeelements jedes Mal, wenn sein Wert geändert wird, indem wir die Methode checkValidity() ü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 ermitteln wir, ob der Wert ungültig ist, weil er leer ist oder weil er nicht zum Muster passt, indem wir einen if () Block verwenden und eine benutzerdefinierte Gültigkeitsfehlermeldung setzen.
• Dadurch wird bei Drücken der Submit-Taste, wenn der Eingabewert ungültig ist, eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Wenn es gültig ist, wird es wie erwartet gesendet. Damit dies geschieht, muss die benutzerdefinierte Gültigkeit durch Aufrufen 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 zuvor eine benutzerdefinierte Gültigkeit festgelegt wurde, wird die Eingabe als ungültig registriert, auch wenn sie derzeit beim Absenden einen gültigen Wert enthält.

Die zulässigen Eingaben für bestimmte <input>-Typen hängen von der Spracheinstellung ab. In einigen Sprachversionen ist 1.000,00 eine gültige Zahl, während in anderen Sprachversionen die gültige Eingabemöglichkeit 1.000,00 ist.

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

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

Beim Einschließen von Eingabefeldern ist es eine Anforderung bezüglich der Barrierefreiheit, Labels hinzuzufügen. Dies ist notwendig, damit diejenigen, die unterstützende Technologien verwenden, erkennen können, wofür die Eingabe ist. Zudem gibt das Klicken oder Berühren eines Labels den Fokus auf das mit dem Label verknüpfte Formularelement. Dadurch wird die Barrierefreiheit und Benutzerfreundlichkeit für sehbare Nutzer erhöht, und es vergrößert den Bereich, den ein Nutzer anklicken oder berühren kann, um das Formularelement zu aktivieren. Dies ist besonders nützlich (und auch erforderlich) für Radio-Buttons und Kontrollkästchen, die winzig sind. Weitere Informationen zu Labels im Allgemeinen finden Sie unter Labels.

Das folgende Beispiel zeigt, wie Sie das <label> und das <input>-Element im obigen Stil verknüpfen können. Sie müssen dem <input> ein id-Attribut geben. Das <label> benötigt dann ein for-Attribut, dessen Wert denselben Wert wie das id des Inputs hat.

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

Interaktive Elemente wie Formulareingaben sollten eine Fläche bereitstellen, die groß genug ist, damit es leicht ist, sie zu aktivieren. Dies hilft einer Vielzahl von Personen, einschließlich Personen mit motorischen Störungen und Personen, die ungenaue Formen der Eingabe verwenden, wie einen Stift oder Finger. Eine Mindestgröße der interaktiven Fläche von 44×44 CSS-Pixeln wird empfohlen.

• Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
• Target Size and 2.5.5 | Adrian Roselli
• Schnelltest: Große Berührungsziele - Das A11Y-Projekt

• Formular-Eingabekontrolle
• Ihr erstes HTML-Formular
• Wie man ein HTML-Formular strukturiert
• Die nativen Formular-Widgets
• Formulardaten senden
• Formulardatenvalidierung
• Wie man benutzerdefinierte Formular-Widgets erstellt
• HTML-Formulare in Legacy-Browsern
• HTML-Formulare gestalten
• Erweiterte Gestaltung von HTML-Formularen
• Vertikale Formular-Steuerelemente erstellen