<input>: Das HTML-Eingabeelement

Wie ein <input> funktioniert, variiert erheblich je nach Wert des type-Attributs. Daher werden die verschiedenen Typen auf eigenen Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben ist, wird standardmäßig der Typ text angenommen.

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 aufgrund seiner Attribute so leistungsfähig; das type-Attribut, das oben mit Beispielen beschrieben wird, ist das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-Schnittstelle basiert, haben sie technisch dieselbe Menge von Attributen gemeinsam. In der Realität haben jedoch die meisten Attribute nur auf eine bestimmte Teilmenge von Eingabetypen Einfluss. Darüber hinaus hängt die Art und Weise, wie einige Attribute eine Eingabe beeinflussen, vom Eingabetyp ab, der verschiedene Eingabetypen auf unterschiedliche Weise beeinflusst.

Dieser Abschnitt enthält eine Tabelle, in der alle Attribute mit einer kurzen Beschreibung aufgeführt sind. Diese Tabelle wird durch eine Liste ergänzt, die jedes Attribut detaillierter beschreibt und angibt, mit welchen Eingabetypen sie in Verbindung stehen. Attribute, die für die meisten oder alle Eingabetypen gemeinsam sind, werden weiter unten ausführlicher definiert. Attribute, die für bestimmte Eingabetypen einzigartig sind, oder Attribute, die zwar für alle Eingabetypen gelten, aber bei bestimmten Eingabetypen besondere Verhaltensweisen aufweisen, werden stattdessen auf den Seiten dieser Typen dokumentiert.

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

Einige zusätzliche nicht standardmäßige Attribute sind nach den Beschreibungen der Standardattribute aufgeführt.

accept

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

alt

Gültig nur für den Bild-Button, bietet das alt-Attribut alternativen Text für das Bild, indem der Wert des Attributs angezeigt wird, wenn das Bild src fehlt oder anders nicht geladen werden kann. Siehe den image-Eingabetyp.

autocapitalize

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

autocomplete

(Kein Boolean-Attribut!) Das autocomplete-Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenkette an, die beschreibt, welche Art von Autovervollständigungsfunktionalität das Eingabefeld bieten soll. Eine typische Implementierung von Autovervollständigung erinnert sich an zuvor eingegebene Werte im selben Eingabefeld, aber komplexere Arten von Autovervollständigung können existieren. Beispielsweise könnte ein Browser mit der Kontaktliste eines Geräts interagieren, um email-Adressen in einem E-Mail-Eingabefeld automatisch zu vervollständigen. Siehe autocomplete für zulässige Werte.

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

Weitere Informationen finden Sie im autocomplete-Attribut, einschließlich Informationen zur Passwortsicherheit und wie sich autocomplete für hidden leicht von anderen Eingabetypen unterscheidet.

autofocus

Ein Boolean-Attribut, das, falls vorhanden, anzeigt, dass die Eingabe automatisch den Fokus haben soll, nachdem die Seite geladen wurde (oder nachdem 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 vorhanden ist, erhält das erste Element mit dem Attribut den Fokus.

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

Warnung: Das automatische Fokussieren auf ein Formularelement kann sehbehinderte Menschen, die Bildschirmlesetechnologie verwenden, und Menschen mit kognitiven Beeinträchtigungen verwirren. Wenn autofocus zugewiesen wird, "teleportieren" Bildschirmleser ihre Benutzer ohne vorherige Warnung zum Formularelement.

Berücksichtigen Sie den Aspekt der Zugänglichkeit sorgfältig, wenn Sie das autofocus-Attribut anwenden. Das automatische Fokussieren auf ein Steuerelement kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann auch dazu führen, dass dynamische Tastaturen auf einigen Touch-Geräten angezeigt werden. Während ein Bildschirmleser das Label des fokussierten Formularelements ankündigt, wird der Bildschirmleser nichts vor dem Label ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird gleichermaßen den Kontext, der durch den vorhergehenden Inhalt geschaffen wird, verpassen.

capture

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

checked

Gültig für sowohl radio als auch checkbox Typen, ist checked ein Boolean-Attribut. Wenn es beim radio-Typ vorhanden ist, zeigt es an, dass die Radiobox derzeit die ausgewählte in der Gruppe gleichnamiger Radioboxen ist. Wenn es beim checkbox-Typ vorhanden ist, zeigt es an, dass das Kontrollkästchen standardmäßig (beim Laden der Seite) aktiviert ist. Es zeigt nicht an, ob das Kontrollkästchen derzeit aktiviert ist: Wenn sich der Zustand 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 ist der Wert eines Kontrollkästchens und Radios nur dann in den übermittelten Daten enthalten, wenn sie aktuell checked sind. Wenn sie das sind, werden der Name und die Wert(e) der aktivierten Steuerelemente übermittelt.

Zum Beispiel, wenn ein Kontrollkästchen, dessen name fruit ist, einen value von cherry hat und das Kontrollkästchen aktiviert ist, werden die Formulardaten fruit=cherry enthalten. Wenn das Kontrollkästchen nicht aktiv ist, wird es in den Formulardaten überhaupt nicht aufgelistet. Der Standard-value für Kontrollkästchen und Radios ist on.

dirname

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

htmlCopy to Clipboard

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

disabled

Ein Boolean-Attribut, das, falls vorhanden, anzeigt, dass der Benutzer nicht in der Lage sein sollte, mit der Eingabe zu interagieren. Deaktivierte Eingaben werden typischerweise mit einer gedämpfteren Farbe oder mit einer anderen Form von Indikator darstellt, dass das Feld nicht verfügbar ist.

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

Hinweis: Obwohl nicht durch die Spezifikationen gefordert, wird Firefox standardmäßig den dynamischen deaktivierten Zustand eines <input> beim Seitenladen beibehalten. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

form

Ein String, der das <form>-Element spezifiziert, mit dem die Eingabe verknüpft ist (d.h. sein Formularbesitzer). Der Wert dieses Strings, falls vorhanden, muss der id eines <form>-Elements im selben Dokument entsprechen. Wenn dieses Attribut nicht angegeben ist, wird das <input>-Element dem am nächsten gelegenen enthaltenden Formular zugeordnet, falls vorhanden.

Das form-Attribut ermöglicht es Ihnen, eine Eingabe irgendwo im Dokument zu platzieren, sie aber als Teil eines Formulars mit einzubeziehen, das sich an einer anderen Stelle im Dokument befindet.

Hinweis: Eine Eingabe kann nur einem Formular zugeordnet werden.

formaction

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

formenctype

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

formmethod

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

formnovalidate

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

formtarget

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

height

Gültig nur für den Bild-Button, die height ist die Höhe der Bilddatei, die angezeigt werden soll, um den grafischen Übertragungsbutton darzustellen. Siehe den image-Eingabetyp.

id

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, definiert es einen eindeutigen Identifikator (ID), der im gesamten Dokument einzigartig sein muss. Zweck ist die Identifikation des Elements beim Verlinken. Der Wert wird als Wert des for-Attributs des <label>-Tags verwendet, um das Label mit dem Formularelement zu verknüpfen. Siehe <label>.

inputmode

Globaler Wert, gültig für alle Elemente, bietet einen Hinweis an Browser, welche Art der virtuellen Tastaturkonfiguration bei der Bearbeitung dieses Elements oder seines Inhalts verwendet werden soll. Werte sind zum Beispiel none, text, tel, url, email, numeric, decimal und search.

list

Der für das list-Attribut angegebene Wert sollte die id eines <datalist>-Elements sein, das sich im selben Dokument befindet. Das <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht in den vorgeschlagenen Optionen enthalten. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste wä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.

Entsprechend den Spezifikationen wird das list-Attribut nicht unterstützt von hidden, password, checkbox, radio, file oder jede der Schaltflächenarten.

Abhängig vom Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen bekommen, Markierungen entlang eines Bereichs sehen oder sogar eine Eingabe, die wie ein <select> öffnet aber nicht aufgeführte Werte erlaubt. Siehe die Browser-Kompatibilitätstabelle für andere Eingabetypen.

Siehe das <datalist>-Element.

max

Gültig für date, month, week, time, datetime-local, number, und range, definiert das Attribut den größten Wert im Bereich zugelassener Werte. Wenn der in das Element eingetragene value diesen überschreitet, scheitert das Element an der Einschränkungsvalidierung. Wenn der Wert des max-Attributs keine Zahl ist, dann hat das Element keinen Maximalwert.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (zum Beispiel für Daten oder Zeiten), kann der Wert von max niedriger als der Wert von min sein, was darauf hinweist, dass der Bereich umschlagen kann; zum Beispiel erlaubt dies, einen Zeitbereich von 22 Uhr bis 4 Uhr festzulegen.

maxlength

Gültig für text, search, url, tel, email, und password, definiert das Attribut die maximale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das Feld eingeben kann. Dies muss ein Ganzzahlwert von 0 oder größer sein. Wenn kein maxlength 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.

Das Eingabefeld wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des eingegebenen Textes größer als maxlength UTF-16-Codeeinheiten ist. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen als durch das maxlength-Attribut erlaubt eingegeben werden. Die Einschränkungsvalidierung wird nur angewendet, wenn sich der Wert durch den Benutzer ändert. Siehe Client-seitige Validierung für weitere Informationen.

min

Gültig für date, month, week, time, datetime-local, number, und range, definiert das Attribut den negativsten Wert im Bereich zulässiger Werte. Wenn der in das Element eingetragene value niedriger als dieser ist, schlägt das Element die Einschränkungsvalidierung fehl. Wenn der Wert des min-Attributs keine Zahl ist, hat das Element keinen Minimalwert.

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

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (zum Beispiel für Daten oder Zeiten), kann der Wert von max niedriger als der Wert von min sein, was darauf hinweist, dass der Bereich umschlagen kann; zum Beispiel erlaubt dies, einen Zeitbereich von 22 Uhr bis 4 Uhr festzulegen.

minlength

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

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des eingegebenen Textes kürzer als minlength UTF-16-Codeeinheiten ist, was die Formulareinreichung verhindert. Einschränkungsvalidierung wird nur angewendet, wenn sich der Wert durch den Benutzer ändert. Siehe Client-seitige Validierung für weitere Informationen.

multiple

Das Boolean-Attribut multiple, wenn gesetzt, bedeutet, dass der Benutzer im E-Mail-Widget kommagetrennte E-Mail-Adressen eingeben oder mehr als eine Datei mit der file-Eingabe wählen kann. Siehe die email und file Eingabetypen.

name

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

Betrachten Sie das name-Attribut als erforderlich (obwohl es nicht ist). Wenn eine Eingabe keinen name angegeben hat oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular übermittelt! (Deaktivierte Steuerelemente, nicht markierte Optionsfelder, nicht markierte Kontrollkästchen und Reset-Tasten werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

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

Das name-Attribut erzeugt ein spezielles Verhalten für Optionen.

Nur ein Optionsfeld in einer Gruppe gleichnamiger Optionsfelder kann gleichzeitig ausgewählt sein. Das Auswählen eines Optionsfelds in dieser Gruppe hebt automatisch die Auswahl eines derzeit ausgewählten Optionsfelds in derselben Gruppe auf. Der Wert dieses einen ausgewählten Optionsfelds wird zusammen mit dem Namen übermittelt, wenn das Formular übermittelt wird.

Wenn Sie eine Reihe gleichnamiger Gruppen von Optionsfeldern durchgehen, wird in den Fokus des ersten, der überprüft ist, genommen. Wenn sie nicht in der Quellreihenfolge gruppiert sind, beginnt das Tabulieren in die Gruppe, wenn der erste in der Gruppe erreicht wird, wobei alle übersprungen werden, die nicht überprüft sind. Mit anderen Worten, wenn einer geprüft wird, werden die nicht überprüften Optionsfelder in der Gruppe übersprungen. Wenn keiner geprüft ist, erhält die Optionsfeldgruppe den Fokus, wenn der erste in der gleichnamigen Gruppe erreicht wird.

Sobald eines der Optionsfelder in einer Gruppe den Fokus hat, navigieren die Pfeiltasten durch alle Optionsfelder des gleichen Namens, selbst wenn die Optionsfelder nicht zusammen in der Quellreihenfolge gruppiert sind.

Wenn ein Eingabefeld ein name-Attribut erhält, wird dieser Name zu einer Eigenschaft des Eigentümerformularelements HTMLFormElement.elements-Eigenschaft. Wenn Sie eine Eingabe haben, deren name auf guest gesetzt ist und eine andere, deren name hat-size ist, kann folgender Code verwendet werden:

jsCopy to Clipboard

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 das Objekt für das hat-size-Feld.

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

pattern

Gültig für text, search, url, tel, email, und password, das pattern-Attribut wird verwendet, um ein reguläres Ausdrucksmuster zu kompilieren, das der value der Eingabe entsprechen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript Regulärer Ausdruck sein, wie er vom RegExp Typ verwendet wird und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert. Keine Schrägstriche sollten um den Mustertext 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 das 'v' Flag angegeben, sodass das Muster als Sequenz von Unicode-Codepunkten, und nicht als ASCII, behandelt wird.

Wenn das pattern-Attribut vorhanden, 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äre Ausdruck gegen jeden kommagetrennten Wert abgeglichen.

Hinweis: Wenn das pattern-Attribut verwendet wird, informieren Sie den Benutzer über das erwartete Format, indem Sie erklärenden Text in der Nähe bereitstellen. Sie können auch ein title-Attribut hinzufügen, um die Anforderungen zum Übereinstimmen mit dem Muster zu erklären; die meisten Browser zeigen diesen Titel als Tooltip an. Die sichtbare Erklärung ist erforderlich für die Zugänglichkeit. Der Tooltip ist eine Verbesserung.

Siehe Client-seitige Validierung für weitere Informationen.

placeholder

Gültig für text, search, url, tel, email, password, und number, bietet das placeholder-Attribut einen kurzen Hinweis für den Benutzer, welche Art von Information im Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf die erwartete Art der Daten gibt, anstatt einer Erklärung oder Aufforderung. Der Text darf keine Wagenrücklauf- oder Zeilenumbruchszeichen enthalten. Wenn beispielsweise erwartet wird, dass ein Feld den Vornamen eines Benutzers erfasst und dessen Etikett "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 Ihrem Inhalt verursachen. Siehe Label für weitere Informationen.

popovertarget

Wandelt ein <input type="button">-Element in eine Knopf-Steuerung für Popover um; nimmt die ID des Popover-Elements als Wert. Siehe die Popover API Übersichtsseite für mehr Details. Das Herstellen einer Beziehung zwischen einem Popover und seinem Invoker-Button mit dem popovertarget-Attribut hat zwei zusätzliche nützliche Effekte:

• Der Browser erstellt eine implizite aria-details und aria-expanded Beziehung zwischen Popover und Invoker und platziert das Popover in einer logischen Position in der Tastaturnavigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover zugänglicher für Tastatur- und Hilfsgerät-(AT) Benutzer (siehe auch Popover Zugänglichkeitsmerkmale).
• Der Browser erstellt einen impliziten Ankerbezug zwischen den beiden, was es sehr praktisch macht, Popover relativ zu ihren Kontrollen mithilfe von CSS Ankerpositionierung zu positionieren. Siehe Popover Ankerpositionierung für mehr Details.

popovertargetaction

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

"hide"

Der Knopf wird ein gezeigtes Popover verbergen. Versuchen Sie, ein bereits verborgenes Popover zu verstecken, wird keine Aktion durchgeführt.

"show"

Der Knopf wird ein verborgenes Popover zeigen. Versuchen Sie, ein bereits sichtbares Popover zu zeigen, wird keine Aktion durchgeführt.

"toggle"

Der Knopf wird ein Popover zwischen Sichtbarkeit und Unsichtbarkeit umschalten. Wird das Popover verborgen, wird es angezeigt; wenn das Popover angezeigt wird, wird es verborgen. Falls popovertargetaction ausgelassen wird, ist "toggle" die Standardaktion, die durch den Steuerknopf ausgeführt wird.

readonly

Ein Boolean-Attribut, das, falls vorhanden, anzeigt, dass der Benutzer den Wert der Eingabe nicht bearbeiten darf. 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 weitere Informationen.

required

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

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

size

Gültig für email, password, tel, url, und text, das size-Attribut bestimmt, wie viel der Eingabe angezeigt wird. Im Grunde genommen schafft es dasselbe Ergebnis wie das Setzen der CSS-Eigenschaft width mit ein paar Besonderheiten. Die tatsächliche Einheit des Wertes hängt vom Eingabetyp ab. Bei password und text ist es eine Zeichenanzahl (oder em Einheiten) mit einem Standardwert von 20, und für andere ist es Pixel (oder px Einheiten). Die CSS-Eigenschaft width hat Vorrang über das size-Attribut.

src

Nur gültig für den Bild-Button, das src ist ein String, der die URL der Bilddatei angibt, die angezeigt werden soll, um den grafischen Übertragungsbutton 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, die der Wert einhalten muss.

Wenn nicht explizit enthalten:

• step default auf 1 für number und range.
• Jeder date/time Eingabetyp hat einen Standard-step-Wert, der für den Typ angemessen ist, siehe die Einzelseiten: date, datetime-local, month, time, und week.

Der Wert muss eine positive Zahl—Ganzzahl oder Fließkommazahlen—sein oder der spezielle Wert any, was bedeutet, dass kein Trittbrettfahren impliziert ist, und jeder Wert zulässig ist (abgesehen von anderen Einschränkungen wie min und max).

Wenn any nicht explizit gesetzt ist, sind gültige Werte für die number, date/time Eingabetypen, und range Eingabetypen gleich der Grundlage für das Schritte—der min Wert und Inkremente des Schrittwertes, bis zum max Wert, wenn angegeben.

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

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

Siehe Client-seitige Validierung für weitere Informationen.

tabindex

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, ein Integer-Attribut, das angibt, ob das Element Eingabefokus annehmen kann (fokussierbar ist), wenn es an sequentieller Tastaturnavigation teilnehmen soll. Da alle Eingabetypen außer Eingaben des Typs versteckt fokusierbar sind, sollte dieses Attribut nicht auf Formularelementen verwendet werden, denn dies würde das Verwalten der Fokusreihenfolge für alle Elemente im Dokument erfordern mit dem Risiko der Beeinträchtigung der Benutzerfreundlichkeit und Zugänglichkeit, wenn nicht korrekt durchgeführt.

title

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, das einen Text enthält, der Beratungsinformationen zu dem Element, zu dem es gehört, repräsentiert. Solche Informationen können typischerweise, aber nicht notwendigerweise, dem Benutzer als Tooltip angezeigt werden. Der Titel sollte NICHT als primäre Erklärung des Zwecks des Formularelements verwendet werden. Verwenden Sie stattdessen das <label>-Element mit einem for-Attribut, das auf das id-Attribut des Formularelements gesetzt ist. Siehe Label unten.

type

Ein String, der den Typ der zu rendernden Steuerung angibt. Um beispielsweise ein Kontrollkästchen zu erstellen, wird ein Wert von checkbox verwendet. Falls weggelassen (oder ein unbekannter Wert angegeben wird), wird der text Eingabetyp verwendet, das ein Klartexteingabefeld erzeugt.

Zulässige Werte sind in Input Typen oben aufgelistet.

value

Der Wert des Eingabesteuerung. Wenn im HTML angegeben, ist dies der Anfangswert, und dann kann er jederzeit geändert oder abgerufen werden, indem JavaScript verwendet wird, um auf die entsprechende HTMLInputElement-Objekt value-Eigenschaft zuzugreifen. Das value-Attribut ist immer optional, sollte jedoch als obligatorisch für checkbox, radio und hidden betrachtet werden.

width

Nur gültig für den Bild-Button, die width ist die Breite der Bilddatei, die angezeigt werden soll, um den grafischen Übertragungsbutton darzustellen. Siehe den image-Eingabetyp.

Die folgenden nicht standardisierten Attribute sind auch in einigen Browsern verfügbar. Als allgemeine Regel sollten Sie sie vermeiden, es sei denn, es lässt sich nicht vermeiden.

incremental Nicht standardisiert

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

Falls incremental nicht festgelegt ist, wird das search-Ereignis nur gesendet, wenn der Benutzer die Suche explizit einleitet (zum Beispiel durch Drücken der Enter- oder Return-Taste, während das Feld bearbeitet wird).

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

orient Nicht standardisiert

Ähnlich dem nicht standardkonformen CSS-Eigenschaft -moz-orient, das die <progress>- und <meter>-Elemente beeinflusst, definiert das orient-Attribut die Orientierung des Bereichsschiebers. Werte schließen horizontal ein, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wobei der Bereich vertikal gerendert wird. Siehe Erstellen vertikaler Formularelemente für einen modernen Ansatz zur Erstellung vertikaler Formularelemente.

results Nicht standardisiert

Das in Safari unterstützte results-Attribut ist ein numerischer Wert, der es Ihnen erlaubt, die maximale Anzahl an Einträgen zu überschreiben, die in der nativ bereitgestellten Dropdown-Liste des <input>-Elements für frühere Suchanfragen angezeigt werden soll.

Der Wert muss eine nicht-negative Dezimalzahl sein. Wenn nicht angegeben oder ein ungültiger Wert angegeben wird, wird die Standardmaximalzahl an Einträgen des Browsers verwendet.

webkitdirectory Nicht standardisiert

Das Boolean-Attribut webkitdirectory, wenn vorhanden, zeigt an, dass nur Verzeichnisse im Dateiauswahldialog verfügbar sein sollen, um vom Benutzer ausgewählt zu werden. Siehe HTMLInputElement.webkitdirectory für zusätzliche Details und Beispiele.

Obwohl ursprünglich nur für WebKit-basierte Browser implementiert, ist webkitdirectory auch in Microsoft Edge und seit Firefox 50 und höher verwendbar. Auch wenn es relativ breit unterstützt wird, ist es noch nicht standardisiert und sollte nicht verwendet werden, es sei denn, Sie haben keine Alternative.

Die folgenden Methoden werden von der HTMLInputElement-Schnittstelle bereitgestellt, die <input>-Elemente im DOM darstellt. Außerdem sind die von den Elternschnittstellen, HTMLElement, Element, Node, und EventTarget spezifizierten Methoden verfügbar.

checkValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; ansonsten gibt es false zurück und feuert ein invalid-Ereignis im Element aus.

reportValidity()

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

select()

Wählt den gesamten Inhalt des <input>-Elements aus, falls der Inhalt des Elements auswählbar ist. Bei Elementen mit keinem auswählbaren Textinhalt (wie ein visueller Farbwähler oder eine Kalenderdatums-Eingabe) 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 spezifizierten Zeichenbereichs im Eingabeelement auf einen angegebenen String. Ein selectMode-Parameter ist verfügbar, um zu kontrollieren, wie der vorhandene Inhalt betroffen ist.

setSelectionRange()

Wählt den spezifizierten Zeichenbereich innerhalb eines textlichen Eingabeelements aus. Macht nichts für Eingaben, die nicht als Texteingabefelder präsentiert werden.

showPicker()

Zeigt den Browserwähler für das Eingabeelement an, der normalerweise angezeigt wird, wenn das Element ausgewählt wird, aber ausgelöst durch das Drücken eines Buttons oder eine andere Benutzerinteraktion.

stepDown()

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

stepUp()

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

Inputs, als ersetzte Elemente, haben einige Eigenschaften, die für Nicht-Formularelemente nicht zutreffen. Es gibt CSS-Selektoren, die gezielt Formularelemente basierend auf ihren UI-Eigenschaften ansprechen können, auch bekannt als UI-Pseudoklassen. Das Input-Element kann auch anhand des Typs mit Attributselektoren angesprochen werden. Einige Eigenschaften sind dabei besonders nützlich.

Beispiel für Pseudoklassen

Wir können das Label eines Auswahlkästchens basierend darauf stylen, ob das Kästchen markiert ist oder nicht. In diesem Beispiel stylen wir die color und font-weight des <label>, das unmittelbar nach einem markierten Input folgt. Wir haben keine Stile angewendet, wenn das input nicht markiert 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 gezielt anzusprechen. CSS-Attributselektoren passen zu Elementen basierend auf der bloßen Existenz eines Attributs oder dem Wert eines bestimmten Attributs.

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

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

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

Standardmäßig erscheint der Platzhaltertext in einem durchscheinenden oder hellgrauen Ton. Das ::placeholder-Pseudoelement ist der placeholder-Text des Inputs. Es kann mit einem begrenzten Satz an CSS-Eigenschaften gestylt werden.

::placeholder {
  color: blue;
}

Nur der Teil der CSS-Eigenschaften, der auf das ::first-line-Pseudoelement angewendet werden kann, kann in einer Regel verwendet werden, die ::placeholder im Selektor hat.

Die appearance-Eigenschaft ermöglicht es, (fast) jedes Element in einem plattform-eigenen Stil basierend auf dem Betriebssystem-Thema anzuzeigen sowie jede nativen Plattform-Stile mit dem Wert none zu entfernen.

Sie könnten ein <div> wie ein Auswahlkästchen aussehen lassen, indem Sie div {appearance: radio;} setzen oder ein Radio wie ein Kontrollkästchen mit [type="radio"] {appearance: checkbox;}, aber tun Sie das nicht.

Wenn Sie appearance: none setzen, werden die plattformnativen Ränder entfernt, jedoch nicht die Funktionalität.

Eine Eigenschaft, die speziell für texteingabebezogene Elemente genutzt werden kann, ist die CSS-caret-color-Eigenschaft, mit der Sie die Farbe des Texteingabe-Cursors festlegen können:

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 Größe). Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben und Formularelemente in ihrer Größe an ihren Inhalt anzupassen.

Diese Eigenschaft wird typischerweise verwendet, um Formularfelder zu erstellen, die sich an ihren Inhalt anpassen und mit zunehmendem Text wachsen. Dies funktioniert mit Eingabetypen, die direkte Texteingabe akzeptieren (zum Beispiel, text und url), Eingabetyp file und <textarea>-Elemente.

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

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

• Anwendung von Farben auf HTML-Elemente mittels CSS.

Siehe auch:

• Styling HTML-Formulare
• Erweiterte Stylingoptionen für HTML-Formulare und

Labels sind notwendig, um erläuternden Text mit einem <input> zu verbinden. Das <label>-Element liefert erklärende Informationen über ein Formularfeld, die immer angemessen sind (abgesehen von Layoutaspekten). 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

Die semantische Paarung von <input>- und <label>-Elementen ist nützlich für Technologien für Barrierefreiheit, wie Screenreader. Indem Sie sie mit dem [for](<a href="/de/docs/Web/HTML/Element/label#for) for-Attribut eines <label> verbinden, verbinden Sie das Label mit dem Input auf eine Weise, die es Screenreadern erlaubt, Benutzer die Eingaben präziser zu beschreiben.

Es reicht nicht aus, einfachen Text neben das <input>-Element zu stellen. Vielmehr erfordern Benutzbarkeit und Zugangsfähigkeit 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 unzugänglich: Es existiert keine Beziehung zwischen der Eingabeaufforderung und dem <input>-Element.

Zusätzlich zu einem zugänglichen Namen bietet das Label eine größere "Trefferfläche" für Maus- und Touchscreen-Benutzer, um darauf zu klicken oder zu tippen. Durch das Verbinden eines <label>- mit einem <input>-Element fokussiert das Klicken auf eines von beiden das <input>. Wenn Sie einfachen Text verwenden, um Ihr Input zu "labeln", wird dies nicht passieren. Dass die Eingabeaufforderung Teil der Aktivierungsfläche für das Input ist, ist hilfreich für Menschen mit motorischen Beeinträchtigungen.

Als Webentwickler ist es wichtig, dass wir niemals annehmen, dass Menschen all die Dinge wissen, die wir wissen. Die Vielfalt der Personen, die das Web nutzen — und davon abgeleitet Ihre Website — garantiert praktisch, dass einige Besucher Ihrer Website einige Gedankenprozesse und/oder Umstände haben werden, die sie dazu bringen, Ihre Formulare sehr unterschiedlich von Ihnen zu interpretieren, wenn keine klaren und richtig präsentierten Labels vorhanden sind.

Platzhalter sind nicht zugänglich

Das placeholder-Attribut ermöglicht es Ihnen, Text anzugeben, der im Inhaltsbereich des <input>-Elements selbst erscheint, wenn es leer ist. Der Platzhalter sollte niemals nötig sein, um Ihre Formulare zu verstehen. Es ist kein Label und sollte nicht als Ersatz verwendet werden, weil 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 nicht zugänglich für Screenreader, und sobald der Benutzer Text in das Formularelement eingibt oder wenn das Formularelement bereits einen Wert hat, verschwindet der Platzhalter. Browser mit automatischen Seitenübersetzungsfunktionen können Attribute beim Übersetzen überspringen, was bedeutet, dass der placeholder möglicherweise nicht übersetzt wird.

Zusätzlich zur Verwendung von CSS, um Inputs basierend auf den :valid- oder :invalid-UI-Zuständen basierend auf dem aktuellen Zustand jedes Inputs zu stylen, stellt der Browser auch eine clientseitige Validierung beim (versuchten) Absenden von Formularen bereit. Beim Absenden eines Formulars, wenn es ein Formularelement gibt, das die Constraint-Validierung nicht erfüllt, zeigt der unterstützende Browser eine Fehlermeldung auf dem ersten ungültigen Formularelement an; wobei eine Standardnachricht basierend auf dem Fehlerart oder eine von Ihnen festgelegte Nachricht angezeigt wird.

Einige Input-Typen und andere Attribute begrenzen, welche Werte für ein gegebenes Input gültig sind. Zum Beispiel bedeutet <input type="number" min="2" max="10" step="2">, dass nur die Zahlen 2, 4, 6, 8 oder 10 gültig sind. Mehrere Fehler könnten auftreten, 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 ganze Zahl (nicht den Anforderungen des step-Attributs entspricht), oder typeMismatch, wenn der Wert keine Zahl ist.

Für die Input-Typen, deren Wertebereich periodisch ist (das heißt, beim höchsten möglichen Wert wickeln sich die Werte wieder zu Beginn zurück, anstatt zu enden), ist es möglich, dass die Werte der max- und min-Eigenschaften umgekehrt werden, was angibt, dass der erlaubte Wertebereich bei min beginnt, um die niedrigsten möglichen Werte umgewandelt wird und dann weitergeht, bis max erreicht ist. Dies ist besonders nützlich für Daten und Zeiten, zum Beispiel, wenn Sie möchten, dass der Bereich von 20 Uhr bis 8 Uhr zulässig ist:

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

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

Wenn ein Formularelement nicht das required-Attribut hat, ist kein Wert oder eine leere Zeichenfolge nicht ungültig. Auch wenn die oben genannten Attribute vorhanden sind, ist eine leere Zeichenfolge mit Ausnahme von required kein Fehler.

Wir können Grenzen für die akzeptierten Werte setzen, und unterstützende Browser werden diese Formularwerte nativ validieren und den Benutzer bei einem Fehler alarmieren, wenn das Formular eingereicht wird.

Zusätzlich zu den in der obigen Tabelle beschriebenen Fehlern enthält die validityState-Schnittstelle die booleschen readonly-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 zeigt ein Wert von true an, dass der angegebene Grund für eine mögliche Validierungsfehlstellung zutrifft, mit Ausnahme der valid-Eigenschaft, die true ist, wenn der Wert des Elements alle Constraints einhält.

Wenn es einen Fehler gibt, alarmieren unterstütztende Browser sowohl den Benutzer als auch verhindern, dass das Formular eingereicht wird. Ein Wort der Vorsicht: Wenn ein benutzerdefinierter Fehler auf einen wahrheitswert ist (alles außer der leeren Zeichenfolge oder null), wird das Formular an der Einreichung gehindert. Wenn keine benutzerdefinierte Fehlermeldung vorliegt und keine der anderen Eigenschaften wahr ist, wird valid wahr sein 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 die leere Zeichenfolge setzt, ist entscheidend. Wenn der Benutzer einen Fehler macht und die Gültigkeit gesetzt ist, wird es nicht gesendet, auch 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 verwandte) Elemente anwendbar 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 eine Standardfehlermeldung angezeigt wird, wenn Sie versuchen, das Formular ohne gültige Eingaben oder mit einem Wert, der nicht zum pattern passt, zu senden.

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

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

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

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

Das Beispiel wird wie folgt gerendert:

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. In dieser Funktion überprüfen wir, ob der Wert wegen Leere oder wegen Nichtübereinstimmung mit dem Muster ungültig ist, indem wir einen if ()-Block verwenden und eine benutzerdefinierte Fehlermeldung setzen.
• Infolgedessen wird, wenn der Eingabewert ungültig ist, wenn der Senden-Button gedrückt wird, eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Wenn er gültig ist, wird er wie erwartet gesendet. Damit das passiert, muss die benutzerdefinierte Gültigkeit durch das Aufrufen von setCustomValidity() mit einem leeren Zeichenfolgenwert abgebrochen werden. Dies tun wir daher jedes Mal, wenn das input-Ereignis ausgelöst wird. Wenn Sie dies nicht tun und eine benutzerdefinierte Gültigkeit zuvor gesetzt wurde, wird die Eingabe als ungültig registriert, auch wenn sie derzeit einen gültigen Wert bei der Einreichung enthält.

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

Firefox verwendet folgende Heuristiken, um die Sprache zu bestimmen, in der die Benutzereingabe validiert werden soll (zumindest für type="number"):

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

Beim Einfügen von Inputs ist es erforderlich, Labels hinzuzufügen. Dies ist notwendig, damit Benutzer mit Hilfstechnologien erkennen können, wofür das Input ist. Außerdem wird durch Klicken oder Tippen auf ein Label der Fokus auf das zugehörige Formularelement gesetzt. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für sehende Benutzer, erhöht die Fläche, auf die ein Benutzer klicken oder tippen kann, um das Formularelement zu aktivieren. Dies ist besonders nützlich (und sogar erforderlich) für Radio-Buttons und Auswahlkästchen, die sehr klein sind. Weitere Informationen zu Labels im Allgemeinen finden Sie unter Labels.

Das folgende Beispiel zeigt, wie das <label>-Element mit einem <input>-Element im oben genannten Stil assoziiert wird. Sie müssen dem <input> ein id-Attribut geben. Das <label> benötigt dann ein for-Attribut, dessen Wert dem id des Inputs entspricht.

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

Interaktive Elemente wie Formulareingaben sollten eine genügend große Fläche bieten, damit sie leicht zu aktivieren sind. Dies hilft einer Vielzahl von Menschen, einschließlich Personen mit motorischen Beeinträchtigungen und Personen, die unpräzise Eingabemethoden wie einen Stift oder Finger verwenden. Eine minimale interaktive Größe von 44×44 CSS-Pixeln wird empfohlen.

• Erfolgskriterium 2.5.5: Zielgröße | W3C Verständliche WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Zielbereiche - Das A11Y-Projekt

• Formular Zwänge Validierung
• Ihr erstes HTML-Formular
• Wie man ein HTML-Formular strukturiert
• Die nativen Formular-Widgets
• Senden von Formulardaten
• Formular Datenvalidierung
• Wie man benutzerdefinierte Formular-Widgets erstellt
• HTML-Formulare in Legacy-Browsern
• Styling HTML-Formulare
• Erweiterte Stylingoptionen für HTML-Formulare
• Erstellen von vertikalen Formularelementen