<input>: Das HTML Input-Element

Wie ein <input> funktioniert, variiert erheblich abhängig vom Wert seines type-Attributs, weshalb die verschiedenen Typen auf separaten Referenzseiten behandelt werden. 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 leistungsfähig aufgrund seiner Attribute; das type-Attribut, das oben mit Beispielen beschrieben wurde, ist das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-Schnittstelle basiert, teilen sie sich technisch genau den gleichen Satz von Attributen. In der Realität haben jedoch die meisten Attribute nur auf eine bestimmte Untermenge von Eingabetypen Auswirkungen. Darüber hinaus hängt es vom Eingabetyp ab, wie einige Attribute eine Eingabe beeinflussen und unterschiedliche Eingabetypen unterschiedlich beeinflussen.

In diesem Abschnitt finden Sie eine Tabelle mit allen Attributen und einer kurzen Beschreibung. Diese Tabelle wird gefolgt von einer Liste, die jedes Attribut ausführlicher beschreibt, zusammen mit den Eingabetypen, mit denen sie verbunden sind. Attribute, die für die meisten oder alle Eingabetypen gemeinsam sind, werden unten ausführlicher definiert. Attribute, die für bestimmte Eingabetypen einzigartig sind oder Attribute, die für alle Eingabetypen gemeinsam sind, aber ein spezielles Verhalten haben, 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 sind nach den Beschreibungen der Standardattribute aufgeführt.

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.

alt

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

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und, wenn ja, auf welche Weise. Weitere Informationen finden Sie auf der globalen Attributseite autocapitalize.

autocomplete

(Kein Boolean-Attribut!) Das autocomplete-Attribut nimmt als seinen Wert eine durch Leerzeichen getrennte Zeichenfolge an, die beschreibt, welche, wenn überhaupt, Art von Autovervollständigungsfunktionalität das Eingabefeld bereitstellen soll. Eine typische Implementierung von Autovervollständigung erinnert sich an vorherige Werte, die im selben Eingabefeld eingegeben wurden, aber komplexere Formen der Autovervollständigung können existieren. Zum Beispiel könnte ein Browser mit der Kontakliste eines Geräts integriert werden, um E-Mail-Adressen in einem E-Mail-Eingabefeld automatisch zu vervollständigen. Siehe autocomplete für zulässige Werte.

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

Siehe das autocomplete-Attribut für zusätzliche Informationen, einschließlich Informationen zur Passwortsicherheit und wie autocomplete etwas anders für hidden ist als für andere Eingabetypen.

autofocus

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

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

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

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

Warnung: Ein Formularsteuerungselement automatisch zu fokussieren, kann sehbehinderte Menschen, die Bildschirmlesetechnologie verwenden, und Menschen mit kognitiven Beeinträchtigungen verwirren. Wenn autofocus zugewiesen wird, "beamen" Bildschirmleser ihren Benutzer ohne Vorwarnung zur Formularsteuerung.

Verwenden Sie sorgfältige Überlegungen für die Barrierefreiheit, wenn Sie das autofocus-Attribut anwenden. Das automatische Fokussieren auf ein Steuerelement kann bewirken, dass die Seite beim Laden scrollt. Der Fokus kann auch dafür sorgen, dass auf einigen Touch-Geräten dynamische Tastaturen angezeigt werden. Während ein Bildschirmleser die Beschriftung der Fokus-erhaltenden Formularsteuerung ankündigt, wird der Bildschirmleser nichts vor der Beschriftung ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird ebenso den durch den vorhergehenden Inhalt erzeugten Kontext 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 zur Upload mit file-Upload-Steuerung in unterstützenden Szenarien zu erfassen. Siehe den file-Eingabetyp.

checked

Gültig für beide radio- und checkbox-Typen, checked ist ein Boolean-Attribut. Wenn es auf einen radio-Typ angewendet wird, gibt es an, dass die Radiobox das derzeit ausgewählte im Kreis von gleichnamigen Radio-Buttons ist. Wenn es auf einen checkbox-Typ angewendet wird, gibt es an, dass die Checkbox standardmäßig (beim Laden der Seite) ausgewählt ist. Es zeigt nicht an, ob diese Checkbox derzeit ausgewählt ist: Wenn der Zustand der Checkbox geändert wird, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das HTMLInputElement's checked IDL-Attribut wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabesteuerungselementen wird der Wert von Checkboxes und Radio-Buttons nur in die gesendeten Daten aufgenommen, wenn sie gerade checked sind. Wenn sie es sind, werden der Name und die Wert(e) der ausgewählten Steuerung gesendet.

Zum Beispiel, wenn eine Checkbox, deren name fruit ist, value von cherry hat und die Checkbox aktiviert ist, werden die Formulardaten fruit=cherry enthalten. Wenn die Checkbox nicht aktiv ist, wird sie überhaupt nicht in den Formulardaten aufgeführt. Der Standardwert von Checkboxes und Radio-Buttons ist on.

dirname

Gültig für hidden, text, search, url, tel und email-Eingabetypen, ermöglicht das dirname-Attribut die Übermittlung der Richtung des Elements. Wenn es eingeschlossen ist, wird das Formularfeld mit zwei Name-Wert-Paaren gesendet: das erste ist der name und value, und das zweite ist der Wert des dirname-Attributs als Name, mit einem Wert von ltr oder rtl, wie vom Browser eingestellt.

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 stehende Formular gesendet wird, sorgt die Eingabe dafür, dass sowohl das name / value-Paar fruit=cherry als auch das dirname / Richtungs-Paar fruit-dir=ltr gesendet wird. Weitere Informationen finden Sie im dirname-Attribut.

disabled

Ein Boolean-Attribut, das, wenn vorhanden, angibt, dass der Benutzer nicht mit der Eingabe interagieren können sollte. Deaktivierte Eingaben werden normalerweise mit einer blasseren Farbe oder unter Verwendung einer anderen Form der Anzeige, dass das Feld nicht verfügbar ist, angezeigt.

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

Hinweis: Obwohl nicht durch die Spezifikation erforderlich, wird Firefox standardmäßig den dynamischen deaktivierten Zustand eines <input> über Seitenladungen hinweg beibehalten. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

form

Ein String, der das <form>-Element angibt, mit dem die Eingabe verknüpft ist (d.h. sein Formularinhaber). Dieses Attribut muss, wenn vorhanden, mit der id eines <form>-Elements im selben Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, wird das <input>-Element mit dem nächsten enthaltenden Formular verknüpft, wenn vorhanden.

Das form-Attribut erlaubt es Ihnen, eine Eingabe überall im Dokument zu platzieren, aber sie bei einem Formular anderswo im Dokument einzuschließen.

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

formaction

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

formenctype

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

formmethod

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

formnovalidate

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

formtarget

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

height

Nur für die image-Eingabeschaltfläche gültig, die height ist die Höhe der Bilddatei, die angezeigt wird, um die grafische Absenden-Schaltfläche darzustellen. Siehe den image-Eingabetyp.

id

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

inputmode

Globaler Wert, der für alle Elemente gültig ist, er bietet einen Hinweis an Browser, welche Art von virtueller Tastaturkonfiguration bei der Bearbeitung dieses Elements oder seines Inhalts zu verwenden ist. Werte umfassen none, text, tel, url, email, numeric, decimal und search.

list

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

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

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

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

Siehe das <datalist>-Element.

max

Gültig für date, month, week, time, datetime-local, number und range, definiert es den größten Wert im Bereich der zulässigen Werte. Wenn der eingefügte value den überschreitet, misslingt das Element die Einschränkungsvalidierung. Wenn der Wert des max-Attributs keine Zahl ist, hat das Element keinen Maximalwert.

Es gibt einen Sonderfall: wenn der Datentyp periodisch ist (wie etwa für Daten oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was darauf hinweist, dass der Bereich sich umwickeln kann; zum Beispiel erlaubt dies das Festlegen eines Zeitbereichs von 22 Uhr bis 4 Uhr.

maxlength

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

Die Eingabe misslingt die Einschränkungsvalidierung, wenn die Länge des in das Feld eingegebenen Textes länger ist als maxlength UTF-16-Codeeinheiten. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als durch das maxlength-Attribut erlaubt sind. Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für mehr Informationen.

min

Gültig für date, month, week, time, datetime-local, number und range, definiert es den kleinsten zulässigen Wert im Bereich der zulässigen Werte. Wenn der value, der in das Element eingegeben wird, geringer ist als dies, misslingt das Element die Einschränkungsvalidierung. 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 ist, aber nicht angegeben oder ungültig ist, wird kein min-Wert angewendet. Wenn das min-Attribut gültig ist und ein nicht leerer Wert kleiner ist als der durch das min-Attribut erlaubte Minimalwert, verhindert die Einschränkungsvalidierung die Formulareinreichung. Siehe Client-seitige Validierung für mehr Informationen.

Es gibt einen Sonderfall: wenn der Datentyp periodisch ist (wie etwa für Daten oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was darauf hinweist, dass der Bereich sich umwickeln kann; zum Beispiel erlaubt dies das Festlegen eines Zeitbereichs von 22 Uhr bis 4 Uhr.

minlength

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

Die Eingabe misslingt die Einschränkungsvalidierung, wenn die Länge des in das Feld eingegebenen Textes kürzer als minlength UTF-16-Codeeinheiten ist, wodurch die Formulareinreichung verhindert wird. Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für mehr Informationen.

multiple

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

name

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

Betrachten Sie name als erforderliches Attribut (auch wenn es nicht ist). Wenn eine Eingabe kein name angegeben hat oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular gesendet! (Deaktivierte Steuerungen, nicht aktivierte Radio-Buttons, nicht aktivierte Checkboxes und Reset-Schaltflächen werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

1. _charset_ : Wenn es als Name eines <input>-Elements des Typs hidden verwendet wird, wird der Wert der Eingabe automatisch auf die Zeichenkodierung gesetzt, die verwendet wird, um das Formular zu übermitteln.
2. isindex: Aus historischen Gründen ist der Name isindex nicht erlaubt.

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

Nur ein Radio-Button in einer gleichnamigen Gruppe von Radio-Buttons kann gleichzeitig ausgewählt sein. Wenn ein Radio-Button in dieser Gruppe selektiert wird, wird automatisch der derzeit selektierte Radio-Button in derselben Gruppe deaktiviert. Der Wert dieses einen selektierten Radio-Buttons wird zusammen mit dem Namen gesendet, wenn das Formular übermittelt wird.

Wenn durchgehend eine Gruppe von gleichnamigen Radio-Buttons indiziert wird, wird, wenn eines davon selektiert ist, dieses den Fokus erhalten. Wenn sie nicht zusammen in der Quell-Reihenfolge gruppiert sind, wird, wenn eines der Gruppe selektiert ist, das Indizieren in die Gruppe gestartet, wenn das erste in der Gruppe erreicht wird, wobei alle ignoriert werden, die nicht selektiert sind. Mit anderen Worten, wenn eines selektiert ist, wird das Indizieren die nicht-selektierten Radio-Buttons in der Gruppe überspringen. Wenn keine selektiert sind, erhält die Radio-Button-Gruppe den Fokus, wenn der erste Radio-Button in der gleichnamigen Gruppe erreicht ist.

Sobald ein Radio-Button in einer Gruppe den Fokus hat, kann mit den Pfeiltasten durch alle Radio-Buttons des gleichen Namens navigiert werden, auch wenn die Radio-Buttons nicht zusammen in der Quell-Reihenfolge sind.

Wenn einem Eingabefeld ein name zugewiesen wird, wird dieser Name zu einer Eigenschaft des HTMLFormElement.elements-Eigenschaftselements des Besitzformulars. Wenn Sie eine Eingabe haben, deren name auf guest und eine andere auf hat-size gesetzt 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 wurde, wird guestName das HTMLInputElement für das guest-Feld sein, und hatSize der Objekt für das hat-size-Feld.

Warnung: Vermeiden Sie es, Formularelementen einen name zu geben, der einer integrierten Eigenschaft des Formulars entspricht, da Sie damit die vordefinierte Eigenschaft oder Methode mit diesem 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, um die Einschränkungsvalidierung zu bestehen. 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 ist. Es sollten keine Schrägstriche um den Text des Musters angegeben werden. Beim Kompilieren des regulären Ausdrucks:

1. wird das Muster implizit mit ^(?: und )$ umschlossen, sodass die Übereinstimmung gegen den gesamten Eingabewert erforderlich ist, d.h. ^(?:<pattern>)$.
2. wird der 'v'-Flag angegeben, damit das Muster als eine Folge von Unicode-Codierungen behandelt wird, anstelle von ASCII.

Wenn das pattern-Attribut vorhanden ist, aber nicht spezifiziert oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut wird vollständig ignoriert. Wenn das Musterattribut gültig ist und ein nicht leerer Wert nicht mit dem Muster übereinstimmt, wird die Einschränkungsvalidierung die Formulareinreichung verhindern. Wenn das multiple vorhanden ist, wird der kompilierte regulären Ausdruck gegen jeden der durch Kommata getrennten Werte getestet.

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 hinzufügen, um die Anforderungen anzugeben, die sinnvollerweise in einem Tooltip angezeigt werden können; die meisten Browser zeigen diesen Titel als Tooltip an. Die sichtbare Erklärung ist aus Gründen der Zugänglichkeit erforderlich. Der Tooltip ist eine Verbesserung.

Siehe die 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 an den Benutzer, welche Art von Information in das Feld eingegeben werden soll. Es sollte ein Wort oder ein kurzer Satz sein, der einen Hinweis auf die erwartete Datenart gibt und keine Erklärung oder Eingabeaufforderung. Der Text darf nicht Wagenrückläufe oder Zeilenumbrüche enthalten. Beispielsweise, wenn ein Feld darauf ausgelegt ist, den Vornamen eines Benutzers zu erfassen, und seine Beschriftung "Vorname" lautet, könnte ein geeigneter Platzhalter "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 Ihrer Inhalte verursachen. Siehe Labels für mehr Informationen.

popovertarget

Macht ein <input type="button">-Element zu einer Popover-Steuerelement-Schaltfläche; verwendet die ID des Popover-Elements, das gesteuert werden soll. Siehe die Popover-API-Startseite für weitere Details. Eine Beziehung zwischen einem Popover und seiner Invoker-Schaltfläche durch das popovertarget-Attribut zu etablieren, hat zwei zusätzliche nützliche Effekte:

• Der Browser erstellt eine implizite aria-details- und aria-expanded-Beziehung zwischen Popover und Invoker und platziert das Popover logisch in der Fokusnavigation durch die Tastatur, wenn es angezeigt wird. Dies macht das Popover zugänglicher für Benutzer von Bildschirmlesern und assistiven Technologien (siehe auch Popover-Zugänglichkeitsmerkmale).
• Der Browser erstellt ein implizites Anker-Referenz zwischen den beiden, sodass es sehr bequem ist, Popovers relativ zu ihren Steuerelementen zu positionieren, mithilfe der CSS-Ankerpositionierung. Siehe Popover-Ankerpositionierung für mehr Details.

popovertargetaction

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

"hide"

Die Schaltfläche versteckt ein angezeigtes Popover. Wenn Sie versuchen, ein bereits ausgeblendetes Popover zu verstecken, wird keine Aktion vorgenommen.

"show"

Die Schaltfläche zeigt ein ausgeblendetes Popover an. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion vorgenommen.

"toggle"

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

readonly

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

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

required

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

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

size

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

src

Gültig nur für die image-Eingabeschaltfläche, src ist ein String, der die URL der Bilddatei angibt, die angezeigt werden soll, um die grafische Absenden-Schaltfläche darzustellen. 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 bestimmt, an die sich der Wert halten muss.

Wenn es nicht ausdrücklich einbezogen ist:

• step wird für number und range standardmäßig auf 1 gesetzt.
• Jeder Datum-/Zeiteingabetyp hat einen Standard-step-Wert, der dem Typ angemessen ist; siehe die individuellen Eingabeseiten: date, datetime-local, month, time und week.

Der Wert muss eine positive Zahl—ganzzahlig oder Gleitkommazahl—sein oder der spezielle Wert any, was bedeutet, dass kein Schritt eingeschränkt werden muss und jeder Wert (abgesehen von anderen Einschränkungen wie min und max) erlaubt ist.

Wenn any nicht ausdrücklich gesetzt ist, sind gültige Werte für die number-, Datum-/Zeit-Eingabetypen und range-Eingabetypen gleich dem Schrittfundament—dem min-Wert und Inkrementen des step-Wertes bis zum max-Wert, falls angegeben.

Zum Beispiel, wenn Sie <input type="number" min="10" step="2"> haben, dann ist jede gerade Zahl, 10 oder höher, gültig. Wenn der Wert weggelassen wird, <input type="number">, ist jede Ganzzahl gültig, aber Gleitkommazahlen (wie 4.2) sind nicht gültig, da step standardmäßig 1 ist. Für 4.2, 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 vom Benutzer eingegebenen Daten sich nicht an die Stepping-Konfiguration halten, wird der Wert in der Einschränkungsvalidierung als ungültig betrachtet und entspricht dem :invalid-Pseudoklasse.

Siehe die Client-seitige Validierung für mehr Informationen.

tabindex

Globales Attribut gültig für alle Elemente, einschließlich aller Eingabetypen, ein ganzzahliges Attribut, das angibt, ob das Element den Eingabefokus aufnehmen kann (fokussierbar ist), wenn es an der sequentiellen Tastaturnavigation teilnehmen soll. Da alle Eingabetypen, außer der Eingabe des Typs hidden, fokussierbar sind, sollte dieses Attribut nicht auf Formularsteuerungselementen verwendet werden, weil man dann die Fokusreihenfolge für alle Elemente im Dokument mit der Gefahr der Beeinträchtigung der Benutzerfreundlichkeit und Zugänglichkeit steuern müsste, wenn es falsch gemacht wird.

title

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

type

Ein String, der angibt, welcher Steuerelementtyp gerendert werden soll. Zum Beispiel, um ein Kontrollkästchen zu erstellen, wird ein Wert von checkbox verwendet. Wenn weggelassen (oder ein unbekannter Wert angegeben), wird der Eingabetyp text verwendet, was ein Nur-Text-Eingabefeld erstellt.

Zulässige Werte sind in den Eingabetypen oben aufgelistet.

value

Der Wert des Eingabesteuerelements. Wenn im HTML angegeben, ist das der initiale Wert, und dann kann er jederzeit durch JavaScript geändert oder abgerufen werden, indem auf die entsprechende HTMLInputElement-Objekteigenschaft value zugegriffen wird. Das value-Attribut ist immer optional, sollte aber für checkbox, radio und hidden als erforderlich betrachtet werden.

width

Nur für die image-Eingabeschaltfläche gültig, die width ist die Breite der Bilddatei, die angezeigt wird, um die grafische Absenden-Schaltfläche darzustellen. Siehe den image-Eingabetyp.

Die folgenden nicht-standardisierten Attribute sind auch in einigen Browsern verfügbar. Grundsätzlich sollten Sie sie vermeiden, es sei denn, es gibt keine Alternative.

incremental Nicht standardisiert

Das Boolean-Attribut incremental ist eine Erweiterung von WebKit und Blink (also unterstützt von Safari, Opera, Chrome, etc.), die, wenn vorhanden, dem Benutzer-Agenten sagt, dass die Eingabe als Live-Suche verarbeitet wird. Während der Benutzer den Wert des Feldes bearbeitet, sendet der Benutzer-Agent search-Ereignisse an das HTMLInputElement-Objekt, das das Suchfeld repräsentiert. Dies ermöglicht Ihrem Code das Aktualisieren der Suchergebnisse in Echtzeit, während der Benutzer die Suche bearbeitet.

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

Das search-Ereignis ist so limitiert, dass es nicht öfter gesendet wird als im Implementationsabstand definiert.

orient Nicht standardisiert

Ähnlich der nicht-standardisierten CSS-Eigenschaft -moz-orient, die die <progress>- und <meter>-Elemente beeinflusst, definiert das orient-Attribut die Ausrichtung des Bereichschiebers. Zu den Werten gehören horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, bei dem der Bereich vertikal gerendert wird. Siehe Erstellen vertikaler Formularsteuerungen für einen modernen Ansatz zur Erstellung vertikaler Formularsteuerungen.

results Nicht standardisiert

Das results-Attribut—nur von Safari unterstützt—ist ein numerischer Wert, der Ihnen erlaubt, die maximale Anzahl von Einträgen zu überschreiben, die im nativ bereitgestellten Drop-down-Menü der vorherigen Suchanfragen des <input>-Elements angezeigt werden.

Der Wert muss eine nicht-negative Dezimalzahl sein. Wenn nicht bereitgestellt oder ein ungültiger Wert angegeben ist, wird die Standard-Maximalzahl von Einträgen des Browsers verwendet.

webkitdirectory Nicht standardisiert

Das Boolean-webkitdirectory-Attribut, wenn vorhanden, gibt an, dass nur Verzeichnisse im Datei-Auswahl-Interface vom Benutzer zur Auswahl verfügbar gemacht werden sollen. Siehe HTMLInputElement.webkitdirectory für zusätzliche Details und Beispiele.

Auch wenn es ursprünglich nur für WebKit-basierte Browser implementiert wurde, kann webkitdirectory auch in Microsoft Edge wie auch in Firefox 50 und höher verwendet werden. Trotz der relativ breiten Unterstützung ist es 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. Ebenfalls verfügbar sind die in den übergeordneten Schnittstellen spezifizierten Methoden, HTMLElement, Element, Node und EventTarget.

checkValidity()

Gibt true zurück, wenn der Wert des Elements die Validitätsprüfungen besteht; ansonsten gibt es false zurück und löst ein invalid-Ereignis am Element aus.

reportValidity()

Gibt true zurück, wenn der Wert des Elements die Validitätsprüfungen besteht; ansonsten gibt es false zurück, löst ein invalid-Ereignis am Element aus und (wenn das Ereignis nicht abgebrochen wird) meldet das Problem an den Benutzer.

select()

Wählt den gesamten Inhalt des <input>-Elements aus, wenn der Inhalt des Elements auswählbar ist. Bei Elementen mit nicht auswählbarem Textinhalt (z.B. ein visueller Farbwähler oder ein Kalendardatumeingabefeld) macht diese Methode nichts.

setCustomValidity()

Setzt eine benutzerdefinierte Nachricht, die angezeigt wird, wenn der Wert des Eingabefelds ungültig ist.

setRangeText()

Setzt den Inhalt des angegebenen Zeichenbereichs im Eingabefeld auf eine gegebene Zeichenfolge. Ein selectMode-Parameter ist verfügbar, um zu steuern, wie der vorhandene Inhalt betroffen ist.

setSelectionRange()

Wählt den angegebenen Bereich von Zeichen innerhalb eines Text-Eingabeelements aus. Machen Sie nichts für Eingabefelder, die nicht als Texteingabefelder dargestellt werden.

showPicker()

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

stepDown()

Verringert 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 Eigenschaften, die nicht auf Nicht-Formularelemente anwendbar sind. Es gibt CSS-Selektoren, die gezielt Formularsteuerungen basierend auf ihren UI-Funktionen ansprechen können, auch bekannt als UI-Pseudo-Klassen. Das Input-Element kann auch nach Typ mit Attributselektoren angesprochen werden. Einige Eigenschaften sind ebenfalls besonders nützlich.

Beispiel für Pseudo-Klassen

Wir können das Label eines Kontrollkästchens basierend darauf stylen, ob das Kontrollkästchen ausgewählt ist oder nicht. In diesem Beispiel stylen wir die color und font-weight des <label>, das sofort nach einem ausgewählten input kommt. Wir haben keine Stile angewendet, wenn die input-Eingabe nicht ausgewählt 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 Attribut-Selektoren anzusprechen. CSS Attribut-Selektoren stimmen Elemente basierend entweder nur auf das Vorhandensein eines Attributs oder den 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 placeholder-Text transluzent oder hellgrau. Das ::placeholder Pseudo-Element ist der placeholder-Text der Eingabe. Es kann mit einem begrenzten Teil von CSS-Eigenschaften gestylt werden.

::placeholder {
  color: blue;
}

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

Die appearance Eigenschaft ermöglicht es, (fast) jedem Element eine plattformnative Darstellung basierend auf dem Betriebssystemthema zu geben sowie die Entfernung jeglicher plattformnativen Gestaltung mit dem Wert none.

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

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

Eine Eigenschaft, die speziell für Texteingabeelemente gilt, ist die CSS caret-color Eigenschaft, mit der Sie die Farbe festlegen können, die zum Zeichnen des Texteingabecursors verwendet wird:

HTML

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

CSS

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

Ergebnis

Die field-sizing Eigenschaft ermöglicht es Ihnen, das Größenverhalten von Formulareingaben zu steuern (d.h. sie erhalten standardmäßig eine bevorzugte Standardgröße). Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben, sodass Formularelemente ihre Größe ändern können, um ihren Inhalt anzupassen.

Diese Eigenschaft wird typischerweise verwendet, um Formularfelder zu erstellen, die ihren Inhalt umschließen und wachsen, wenn mehr Text eingegeben wird. Dies funktioniert mit Eingabetypen, die direkte Texteingaben akzeptieren (z.B. text und url), Eingabetyp file und <textarea> Elemente.

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

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

• Anwenden von Farbe auf HTML-Elemente mit CSS.

Siehe auch:

• Styling von HTML-Formularen
• Erweiterte Gestaltung für HTML-Formulare und

Labels sind erforderlich, um erklärenden Text mit einem <input> zu verknüpfen. Das <label> Element bietet stets geeignete erläuternde Informationen über ein Formularfeld (abgesehen von eventuellen Layoutproblemen). Es ist nie eine schlechte Idee, ein <label> zu verwenden, um zu erklären, was in ein <input> oder <textarea> eingegeben werden soll.

Zugeordnete Labels

Das semantische Paaren von <input> und <label> Elementen ist nützlich für unterstützende Technologien wie Screenreader. Durch das Paaren mit dem for Attribut des <label>, binden Sie das Label an das Eingabeelement auf eine Weise, die Screenreadern ermöglicht, Eingaben den Benutzern präziser zu beschreiben.

Es reicht nicht aus, einfachen Text neben dem <input> Element zu haben. Vielmehr erfordert Benutzerfreundlichkeit und Zugänglichkeit die Einbeziehung eines impliziten oder expliziten <label>:

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

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

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

Das erste Beispiel ist nicht barrierefrei: Es besteht keine Beziehung zwischen der Aufforderung und dem <input> Element.

Zusätzlich zu einem zugänglichen Namen bietet das Label einen größeren "Treffer"-Bereich für Maus- und Touchscreen-Benutzer, auf den sie klicken oder tippen können. Durch das Paaren eines <label> mit einem <input>, führt ein Klick oder Tipp auf eines der beiden zur Fokussierung des <input>. Wenn Sie einfachen Text verwenden, um Ihre Eingabe zu "labeln", passiert dies nicht. Das Einfügen der Aufforderung als Teil des Aktivierungsbereichs für das Eingabefeld ist hilfreich für Personen mit motorischen Störungen.

Als Webentwickler sollten wir niemals davon ausgehen, dass Menschen alles wissen, was wir wissen. Die Vielfalt der Menschen, die das Web nutzen - und damit auch Ihre Website - garantiert praktisch, dass einige Ihrer Website-Besucher aufgrund unterschiedlicher Denkmuster und/oder Umstände Ihre Formulare ohne klare und ordnungsgemäß präsentierte Labels sehr unterschiedlich interpretieren.

Platzhalter sind nicht barrierefrei

Das placeholder Attribut ermöglicht es Ihnen, Text zu spezifizieren, der innerhalb des <input> Elements angezeigt wird, wenn es leer ist. Der Platzhalter sollte niemals erforderlich sein, um Ihre Formulare zu verstehen. Es ist kein Label und darf nicht als Ersatz verwendet werden, da es keins ist. Der Platzhalter wird verwendet, um einen Hinweis zu geben, wie ein eingegebener Wert aussehen sollte, nicht als Erklärung oder Aufforderung.

Der Platzhalter ist für Screenreader nicht zugänglich, und 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 bei der Übersetzung, was bedeutet, dass der placeholder möglicherweise nicht übersetzt wird.

Zusätzlich zur Verwendung von CSS, um Eingaben basierend auf den :valid oder :invalid UI-Zuständen zu stylen, basierend auf dem aktuellen Zustand jeder Eingabe, wie im Abschnitt UI-Pseudo-Klassen oben erwähnt, bietet der Browser die client-seitige Validierung bei (versuchter) Formularübermittlung. Bei der Formularübermittlung wird bei einem Formularsteuerelement, das die Einschränkungsvalidierung nicht erfüllt, ein unterstützender Browser eine Fehlermeldung am ersten ungültigen Formularsteuerelement anzeigen; sei es durch die Anzeige einer Standardmeldung basierend auf dem Fehlertyp oder einer von Ihnen festgelegten Meldung.

Einige Eingabetypen und andere Attribute setzen Grenzen für die gültigen Werte, die für eine gegebene Eingabe zulässig 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önnen mehrere Fehler auftreten, darunter ein rangeUnderflow Fehler, wenn der Wert kleiner als 2 ist, rangeOverflow, wenn größer als 10, stepMismatch, wenn der Wert eine Zahl zwischen 2 und 10 ist, aber keine gerade Ganzzahl (nicht den Anforderungen des step Attributs entspricht), oder typeMismatch, wenn der Wert keine Zahl ist.

Für die Eingabetypen, deren Werteraum periodisch ist (also am höchsten möglichen Wert, die Werte zurück zum Anfang überschreiten, anstatt zu enden), ist es möglich, dass die Werte der max und min Eigenschaften umgekehrt sind, was zeigt, dass der Bereich der erlaubten Werte bei min beginnt, dann zum niedrigsten möglichen Wert springt, und dann weitergeht, bis max erreicht ist. Dies ist besonders nützlich für Datums- und Zeitangaben, wie zum Beispiel, wenn Sie den Bereich von 20 Uhr bis 8 Uhr zulassen möchten:

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

Spezifische Attribute und ihre Werte können zu einem bestimmten Fehler ValidityState führen:

Wenn ein Formularelement nicht das required Attribut hat, ist kein Wert oder ein leerer String nicht ungültig. Auch wenn die oben genannten Attribute vorhanden sind, mit Ausnahme von required, wird ein leerer String nicht zu einem Fehler führen.

Wir können Grenzen festlegen, welche Werte wir akzeptieren, und unterstützende Browser werden diese Formularwerte nativ validieren und den Benutzer benachrichtigen, wenn bei der Einreichung ein Fehler vorliegt.

Neben den in der Tabelle beschriebenen Fehlern enthält die validityState-Schnittstelle die booleschen, nur lesbaren 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

Bei diesen booleschen Eigenschaften zeigt ein Wert von true an, dass der angegebene Grund für das Scheitern der Validierung wahr ist, mit Ausnahme der valid-Eigenschaft, die true ist, wenn der Wert des Elements alle Einschränkungen erfüllt.

Wenn ein Fehler auftritt, benachrichtigen unterstützende Browser den Benutzer und verhindern das Absenden des Formulars. Eine Warnung: Wenn ein benutzerdefinierter Fehler auf einen wahrheitsgemäßen Wert gesetzt wird (d.h. alles andere als ein leerer String oder null), wird das Absenden des Formulars verhindert. Wenn keine benutzerdefinierte Fehlermeldung vorliegt und keine der anderen Eigenschaften true zurückgibt, ist valid wahr und das Formular kann abgesendet 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 Fehlermeldung auf den leeren String setzt, ist entscheidend. Wenn der Benutzer einen Fehler macht und die Gültigkeit gesetzt ist, wird das Formular nicht gesendet, selbst wenn alle Werte gültig sind, bis die Nachricht null ist.

Beispiel für benutzerdefinierte Validierungsfehler

Wenn Sie eine benutzerdefinierte Fehlermeldung präsentieren möchten, wenn ein Feld die Validierung nicht besteht, müssen Sie die Constraint Validation API verwenden, die auf <input> (und verwandte) Elemente 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 führen dazu, dass dies eine Standardfehlermeldung anzeigt, wenn Sie versuchen, das Formular einzureichen, ohne gültig ausgefüllt zu sein oder einen Wert zu haben, der nicht dem pattern entspricht.

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

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

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

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

Das Beispiel sieht wie folgt aus:

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 ausgeführt. Innerhalb dieser Funktion ermitteln wir, ob der Wert unzulässig ist, weil er leer ist oder weil er nicht dem Muster entspricht, indem wir eine if ()-Block verwenden und eine benutzerdefinierte Fehlernachricht festlegen.
• Infolgedessen, wenn der Eingabewert ungültig ist, wenn die Schaltfläche "Senden" gedrückt wird, wird eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Wenn es gültig ist, wird es auf die erwartete Weise gesendet. Damit dies geschieht, muss die benutzerdefinierte Gültigkeit mit dem Aufruf von setCustomValidity() mit einem leeren String-Wert abgebrochen werden. Wir tun dies daher jedes Mal, wenn das input-Ereignis ausgelöst wird. Wenn Sie dies nicht tun und eine benutzerdefinierte Gültigkeit zuvor festgelegt wurde, wird die Eingabe als ungültig registriert, auch wenn sie derzeit einen gültigen Wert beim Absenden enthält.

Die erlaubten Eingaben für bestimmte <input> Typen hängen vom Gebietsschema ab. In einigen Gebietsschemata ist 1.000,00 eine gültige Zahl, während in anderen Gebietsschemata die gültige Eingabemöglichkeit 1.000,00 ist.

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

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

Wenn Eingaben enthalten sind, ist es eine Zugänglichkeitsanforderung, Labels beizufügen. Dies ist erforderlich, damit diejenigen, die unterstützende Technologien verwenden, erkennen können, welche Funktion die Eingabe hat. Außerdem erhält ein Klick oder ein Fingertipp auf ein Label den Fokus auf das mit dem Label verknüpfte Formularelement. Dies verbessert die Zugänglichkeit und Benutzerfreundlichkeit für sehende Benutzer, erhöht den Bereich, den Benutzer klicken oder berühren können, um die Formularelemente zu aktivieren. Dies ist besonders nützlich (und sogar erforderlich) für Radiobuttons und Kontrollkästchen, die klein sind. Für weitere Informationen zu Labels im Allgemeinen siehe Labels.

Das folgende ist ein Beispiel, wie Sie das <label> mit einem <input> Element im oben beschriebenen Stil verknüpfen können. Sie müssen dem <input> ein id-Attribut zuweisen. Das <label> benötigt dann ein for-Attribut, dessen Wert mit der id der Eingabe übereinstimmt.

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

Interaktive Elemente wie Formulareingaben sollten einen ausreichend großen Bereich bieten, um sie leicht zu aktivieren. Dies hilft einer Vielzahl von Menschen, einschließlich Personen mit motorischen Einschränkungen und Personen, die ungenaue Eingabemethoden wie einen Stylus oder Finger verwenden. Eine Mindestinteraktionsgröße von 44×44 CSS-Pixeln wird empfohlen.

• Verstehen des Erfolgskriteriums 2.5.5: Zielgröße | W3C Understanding WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Touch-Ziele - The A11Y Project

• Formularbeschränkungsvalidierung
• Ihr erstes HTML-Formular
• Wie man ein HTML-Formular strukturiert
• Die nativen Formular-Widgets
• Versenden von Formulardaten
• Formulardatenvalidierung
• Wie man benutzerdefinierte Formular-Widgets erstellt
• HTML-Formulare in älteren Browsern
• Styling von HTML-Formularen
• Erweiterte Gestaltung für HTML-Formulare
• Erstellen von vertikalen Formularsteuerungen