<input>: Das HTML-Eingabeelement

Wie ein <input> funktioniert, variiert erheblich abhängig vom Wert des type-Attributs, weshalb die verschiedenen Typen in ihren eigenen separaten Referenzseiten behandelt werden. Wenn dieses Attribut nicht angegeben ist, ist der Standardtyp text.

Die verfügbaren Typen sind wie folgt:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Das <input>-Element ist so leistungsstark wegen seiner Attribute; das type-Attribut, das mit Beispielen oben beschrieben wurde, ist das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf dem HTMLInputElement-Interface basiert, teilen sie technisch dasselbe Set an Attributen. In Wirklichkeit haben jedoch die meisten Attribute nur auf eine bestimmte Teilmenge von Eingabetypen Auswirkungen. Außerdem beeinflussen einige Attribute eine Eingabe je nach Eingabetyp unterschiedlich.

Dieser Abschnitt bietet eine Tabelle mit allen Attributen sowie einer kurzen Beschreibung. Anschließend folgt eine Liste, die jedes Attribut detaillierter beschreibt, zusammen mit den Eingabetypen, mit denen sie verknüpft sind. Attribute, die für die meisten oder alle Eingabetypen gemeinsam sind, werden unten detailliert definiert. Attribute, die einzigartig für bestimmte Eingabetypen sind – oder Attribute, die für alle Eingabetypen gemeinsam sind, aber ein spezielles Verhalten bei bestimmten Eingabetypen haben – sind 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-standardisierte Attribute sind in den Beschreibungen der standardisierten Attribute aufgeführt.

accept

Nur gültig für den Eingabetyp file, das accept-Attribut definiert, welche Dateitypen in einer file-Upload-Kontrolle ausgewählt werden können. Siehe den file Eingabetyp.

alt

Nur gültig für die image-Schaltfläche, das alt-Attribut stellt alternativen Text für das Bild bereit, der den Wert des Attributs anzeigt, 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, in welcher Weise. Weitere Informationen finden Sie auf der globalen Attributseite von 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, falls vorhanden, das Eingabefeld bereitstellen soll. Eine typische Implementierung von Autovervollständigung merkt sich vorher in demselben Eingabefeld eingegebene Werte, aber komplexere Formen der 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 komplettieren. Siehe autocomplete für erlaubte Werte.

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

Weitere Informationen, einschließlich Informationen zur Passwortsicherheit und wie autocomplete leicht unterschiedlich für hidden im Vergleich zu anderen Eingabetypen ist, finden Sie im autocomplete attribute.

autofocus

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

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

Nicht mehr als ein Element im Dokument darf das autofocus-Attribut besitzen. Wenn es mehr als einem Element zugewiesen wird, erhält das erste Element mit dem Attribut den Fokus.

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

Warnung: Das automatische Fokussieren einer Formularsteuerung kann Personen mit Sehbeeinträchtigungen, die Bildschirmlesetechnologie verwenden, und Personen mit kognitiven Beeinträchtigungen verwirren. Wenn autofocus zugewiesen ist, "teleportieren" Bildschirmlesegeräte ihren Benutzer ohne Vorwarnung zur Formularsteuerung.

Die Anwendung des autofocus-Attributs sollte sorgfältig hinsichtlich der Barrierefreiheit betrachtet werden. Das automatische Fokussieren einer Steuerung kann bewirken, dass die Seite beim Laden scrollt. Der Fokus kann auch bewirken, dass dynamische Tastaturen auf einigen Berührungsgeräten angezeigt werden. Während ein Bildschirmlesegerät das Label der Formularsteuerung, die den Fokus erhält, ansagt, wird das Bildschirmlesegerät nichts vor dem Label ansagen, und der sehende Benutzer auf einem kleinen Gerät wird gleichermaßen den Kontext durch den davor liegenden Inhalt verpassen.

capture

Eingeführt in der HTML Media Capture-Spezifikation und nur gültig für den Eingabetyp file, das capture-Attribut definiert, welches Medium—Mikrofon, Video oder Kamera—zum Erfassen einer neuen Datei für den Upload mit der file-Upload-Kontrolle in unterstützenden Szenarien verwendet werden soll. Siehe den file Eingabetyp.

checked

Gültig für sowohl radio- als auch checkbox-Typen, checked ist ein Boolean-Attribut. Wenn es bei einem radio-Typ vorhanden ist, zeigt es an, dass die Radiobox die aktuell ausgewählte in der Gruppe gleichnamiger Radio-Buttons ist. Wenn es bei einem checkbox-Typ vorhanden ist, zeigt es an, dass das Kontrollkästchen standardmäßig aktiviert ist (wenn die Seite geladen wird). Es zeigt nicht an, ob dieses Kontrollkästchen aktuell aktiviert ist: Wenn der Zustand des Kontrollkästchens geändert wird, wird dieses Inhaltsattribut nicht aktualisiert. (Nur das HTMLInputElement's checked IDL-Attribut wird aktualisiert.)

Hinweis: Anders als bei anderen Eingabesteuerungen wird der Wert eines Kontrollkästchens oder eines Optionsfeldes nur in die übermittelten Daten aufgenommen, wenn sie derzeit checked sind. Falls ja, werden der Name und die Wert(e) der aktivierten Steuerungen übermittelt.

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

dirname

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

html

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

Wenn das Formular oben übermittelt wird, führt die Eingabe zu sowohl dem name / value-Paar fruit=cherry als auch dem dirname / Richtungspaar fruit-dir=ltr. Weitere Informationen finden Sie im dirname attribute.

disabled

Ein Boolean-Attribut, das, wenn vorhanden, angibt, dass der Benutzer nicht mit der Eingabefeld interagieren können sollte. Deaktivierte Eingaben werden typischerweise mit einer gedimmten Farbe oder einer anderen Form von Hinweis darauf, dass das Feld nicht zur Verwendung verfügbar ist, gerendert.

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

Hinweis: Obwohl nicht von der Spezifikation gefordert, behält Firefox standardmäßig den dynamischen deaktivierten Zustand eines <input> über Seitenladezeiten hinweg bei. Verwenden Sie das autocomplete-Attribut, um dieses Feature zu steuern.

form

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

Das form-Attribut ermöglicht es Ihnen, eine Eingabe irgendwo im Dokument zu platzieren, aber sie mit einem Formular an einer anderen Stelle im Dokument einzubeziehen.

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

formaction

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

formenctype

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

formmethod

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

formnovalidate

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

formtarget

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

height

Nur gültig für die image-Eingabeschaltfläche, die height ist die Höhe der Bilddatei, die dargestellt werden soll, um die grafische Absenden-Schaltfläche zu repräsentieren. Siehe den image Eingabetyp.

id

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

inputmode

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

list

Der dem list-Attribut gegebene Wert sollte die id einer <datalist> im selben Dokument sein. Der <datalist> bietet eine Liste von vordefinierten Werten, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die angegebenen Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

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

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

Je nach Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen, Tic-Marken entlang eines Bereichs oder sogar eine Eingabe sehen, die sich wie ein <select> öffnet, aber nicht aufgeführte Werte erlaubt. Schauen Sie sich die Browser-Kompatibilitätstabelle für die anderen Eingabetypen an.

Siehe das <datalist>-Element.

max

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

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max niedriger als der Wert von min sein, was darauf hinweist, dass der Bereich sich umschließen kann; zum Beispiel ermöglicht dies, einen Zeitbereich von 22 Uhr bis 4 Uhr festzulegen.

maxlength

Gültig für text, search, url, tel, email, und password, es definiert die maximal Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das Feld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn 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.

Die Eingabe wird in der Einschränkungsvalidierung scheitern, wenn die Länge des in das Feld eingegebenen Textes größer als maxlength UTF-16-Codeeinheiten ist. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als das maxlength-Attribut erlaubt. Die 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, es definiert den niedrigsten Wert im Bereich der erlaubten Werte. Wenn der in das Element eingegebene value diesen unterschreitet, schlägt das Element in der Einschränkungsvalidierung fehl. Wenn der Wert des min-Attributs keine Zahl ist, dann 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 niedriger als der minimal erlaubte vom min-Attribut ist, wird die Einschränkungsvalidierung die Formularübermittlung verhindern. Siehe Client-seitige Validierung für mehr Informationen.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max niedriger als der Wert von min sein, was darauf hinweist, dass sich der Bereich umschließen kann; zum Beispiel ermöglicht dies, einen Zeitbereich von 22 Uhr bis 4 Uhr festzulegen.

minlength

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

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

multiple

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

name

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

Betrachten Sie das name als erforderliches Attribut (obwohl es das nicht ist). Wenn eine Eingabe keinen angegebenen name hat oder ist name leer, wird der Wert der Eingabe nicht mit dem Formular übermittelt! (Deaktivierte Steuerungen, nicht geprüfte Optionsfelder, nicht überprüfte Kontrollkästchen und Zurücksetzen-Schaltflächen werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

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

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

Nur ein Optionsfeld in einer gleichnamigen Gruppe von Optionsfeldern kann zu einem Zeitpunkt überprüft sein. Das Auswählen eines beliebigen Optionsfelds in dieser Gruppe deselektiert automatisch jedes aktuell ausgewählte Optionsfeld in derselben Gruppe. Der Wert dieses einen überprüften Optionsfeldes wird zusammen mit dem Namen gesendet, falls das Formular übermittelt wird.

Wenn man sich auf eine Serie von gleichnamigen Gruppen von Optionsfeldern tabt, erhält das, was überprüft ist, den Fokus. Wenn sie nicht im Quellcode zusammen gruppiert sind, wenn eines der Gruppe überprüft ist, beginnt das Tabben in der Gruppe, wenn das erste davon in der Gruppe erreicht wird, wobei alle nicht überprüften übersprungen werden. Mit anderen Worten, wenn eines überprüft ist, überspringt das Tabben die nicht überprüften Optionsfelder in der Gruppe. Wenn keines überprüft ist, erhält die Optionsfeldgruppe den Fokus, wenn das erste Element in der Gruppe denselben Namen erreicht hat.

Sobald eines der Optionsfelder in der Gruppe den Fokus hat, navigieren die Pfeiltasten durch alle Optionsfelder desselben Namens, selbst wenn sie nicht zusammen im Quellcode gruppiert sind.

Wenn einem Eingabeelement ein name zugewiesen wird, wird dieser Name eine Eigenschaft des HTMLFormElement.elements-Eigentümerformularelements. Wenn Sie eine Eingabe haben, deren name auf guest und ein anderes, dessen name 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 das Objekt für das hat-size-Feld.

Warnung: Vermeiden Sie, Formularelemente mit einem name zu versehen, das einer integrierten Eigenschaft des Formulars entspricht, da Sie sonst die vordefinierte Eigenschaft bzw. Methode mit diesem Verweis auf das entsprechende Eingabefeld überschreiben würden.

pattern

Gültig für text, search, url, tel, email, und password, das pattern-Attribut wird verwendet, um einen regulären Ausdruck zu kompilieren, den der value der Eingabe erfüllen muss, damit der Wert in der Einschränkungsvalidierung als gültig anerkannt wird. Er muss einem gültigen regulären JavaScript-Ausdruck entsprechen, wie er für den RegExp-Typ verwendet wird, und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert. Es sollten keine Schrägstriche um den Text des Musters angegeben werden. Beim Kompilieren des regulären Ausdrucks:

1. Das Muster wird implizit mit ^(?: und )$ umschlossen, so dass die Übereinstimmung gegen den gesamten Eingabewert erforderlich ist, d.h. ^(?:<pattern>)$.
2. Das 'v'-Flag ist angegeben, so dass das Muster als eine Sequenz von Unicode-Codepunkten behandelt wird, anstatt als 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 Pattern-Attribut gültig ist und ein nicht leerer Wert das Muster nicht erfüllt, wird die Einschränkungsvalidierung die Formularübermittlung verhindern. Wenn das multiple vorhanden ist, wird der kompilierte reguläre Ausdruck gegen jeden durch Komma getrennten Wert abgeglichen.

Hinweis: Wenn Sie das pattern-Attribut verwenden, informieren Sie den Benutzer über das erwartete Format, indem Sie erläuternden Text in der Nähe bereitstellen. Sie können auch ein title-Attribut hinzufügen, um zu erklären, welche Anforderungen bestehen, um das Muster zu erfüllen; die meisten Browser zeigen diesen Titel als Tooltip an. Die sichtbare Erklärung ist für die Barrierefreiheit erforderlich. Der Tooltip ist eine Verbesserung.

Siehe Client-seitige Validierung für mehr Informationen.

placeholder

Gültig für text, search, url, tel, email, password, und number, das placeholder-Attribut bietet dem Benutzer einen kurzen Hinweis darauf, welche Art von Informationen erwartet werden. 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 nicht Umbrüche oder Zeilenumbrüche enthalten. Wenn zum Beispiel erwartet wird, dass ein Feld den Vornamen erfassen soll und das Label "First Name" ist, könnte ein geeigneter Platzhalter "z.B. Mustafa" lauten.

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

popovertarget

Macht ein <input type="button">-Element zu einer Popover-Steuerungsschaltfläche; es nimmt die ID des zu steuernden Popover-Elements als Wert. Weitere Informationen finden Sie auf der Popover API Hauptseite.

popovertargetaction

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

"hide"

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

"show"

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

"toggle"

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

readonly

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

Weitere Informationen finden Sie im HTML-Attribut: readonly.

required

required ist ein Boolean-Attribut, das, wenn vorhanden, angibt, 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.

Weitere Informationen finden Sie unter Client-seitige Validierung und im HTML-Attribut: required.

size

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

src

Nur gültig für die image-Eingabeschaltfläche, das src ist eine Zeichenkette, die die URL der Bilddatei angibt, die dargestellt wird, um die grafische Absende-Schaltfläche zu repräsentieren. 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 Feinheit angibt, die der Wert einhalten muss.

Wenn nicht explizit enthalten:

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

Der Wert muss eine positive Zahl sein—ganze Zahl oder Gleitkommazahl—oder der spezielle Wert any, was bedeutet, dass kein Stufenverhalten impliziert wird und jeder Wert erlaubt ist (außer anderen Einschränkungen, wie min und max).

Wenn any nicht explizit gesetzt ist, sind gültige Werte für die number, Datum/Zeit-Eingabetypen und range Eingabetypen gleich dem Referenzwert für das Stufen—der min Wert und Inkremente des Schrittwerts, 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 größer, gültig. Wenn weggelassen, <input type="number">, ist jede ganze Zahl gültig, Gleitkommazahlen (wie 4.2) sind nicht gültig, da step standardmäßig 1 ist. Für 4.2, um gültig zu sein, müsste step auf any, 0.1, 0.2 gesetzt werden oder der min-Wert müsste eine Zahl sein, die auf .2 endet, wie <input type="number" min="-5.2">

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

Weitere Informationen finden Sie unter Client-seitige Validierung.

tabindex

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, ein ganzzahliges Attribut, das angibt, ob das Element Eingabefokus aufnehmen kann (fokussierbar ist), wenn es am sequentiellen Tastaturnavigation teilnehmen sollte. Da alle Eingabetypen außer Eingaben des Typs hidden fokussierbar sind, sollte dieses Attribut nicht auf Formularsteuerungen verwendet werden, weil dies die Verwaltung der Fokusreihenfolge für alle Elemente im Dokument erforderlich machen würde, mit dem Risiko, die Benutzerfreundlichkeit und Barrierefreiheit zu beeinträchtigen, wenn es nicht korrekt angewendet wird.

title

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, das einen Text darstellt, der beratende Informationen über das Element enthält, zu dem es gehört. Solche Informationen können typischerweise, aber nicht notwendigerweise, dem Benutzer als Tooltip präsentiert werden. Der Titel sollte NICHT als die primäre Erklärung für den Zweck der Formularsteuerung verwendet werden. Verwenden Sie stattdessen das <label>-Element mit einem for-Attribut, das auf das id-Attribut der Steuerung gesetzt ist. Weitere Informationen finden Sie unter Labels unten.

type

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

Erlaubte Werte sind in Eingabetypen oben aufgeführt.

value

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

width

Nur gültig für die image-Eingabeschaltfläche, die width ist die Breite der Bilddatei, die dargestellt wird, um die grafische Absende-Schaltfläche zu repräsentieren. Siehe den image Eingabetyp.

Die folgenden nicht-standardisierten Attribute sind ebenfalls in einigen Browsern verfügbar. Als allgemeine Regel sollten Sie die Verwendung vermeiden, es sei denn, es ist unvermeidbar.

incremental Nicht standardisiert

Das Boolean-Attribut incremental ist eine WebKit- und Blink-Erweiterung (daher unterstützt von Safari, Opera, Chrome, etc.), die, wenn 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 es Ihrem Code, die Suchergebnisse in Echtzeit zu aktualisieren, während der Benutzer die Suche bearbeitet.

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

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

orient Nicht standardisiert

Ähnlich wie das nicht standardisierte CSS-Property -moz-orient, das die <progress>- und <meter>-Elemente beeinflusst, definiert das orient-Attribut die Ausrichtung des Bereichsschiebers. Werte beinhalten horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wo der Bereich vertikal gerendert wird. Siehe Erstellen von vertikalen Formularsteuerungen für einen modernen Ansatz zum Erstellen von vertikalen Formularsteuerungen.

results Nicht standardisiert

Das results-Attribut—nur von Safari unterstützt—ist ein numerischer Wert, der es Ihnen erlaubt, die maximale Anzahl von Einträgen zu überschreiben, die im nativ bereitgestellten Dropdown-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 wird, wird die standardmäßige maximale Anzahl von Einträgen des Browsers verwendet.

webkitdirectory Nicht standardisiert

Das Boolean-Attribut webkitdirectory, wenn vorhanden, gibt an, dass nur Verzeichnisse von dem Benutzer im Dateiauswahldialog auswählbar sein sollen. Weitere Details und Beispiele finden Sie in HTMLInputElement.webkitdirectory.

Obwohl ursprünglich nur für WebKit-basierte Browser implementiert, ist webkitdirectory auch in Microsoft Edge sowie Firefox 50 und höher nutzbar. Es hat jedoch trotz seiner relativ breiten Unterstützung noch keinen Standardstatus und sollte nicht verwendet werden, es sei denn, es gibt keine Alternative.

Die folgenden Methoden werden vom HTMLInputElement-Interface bereitgestellt, das <input>-Elemente im DOM darstellt. Auch stehen die Methoden der übergeordneten Interfaces, HTMLElement, Element, Node, und EventTarget, zur Verfügung.

checkValidity()

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

reportValidity()

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

select()

Wählt den gesamten Inhalt des <input>-Elements aus, wenn der Inhalt des Elements auswählbar ist. Für Elemente ohne auswählbaren Textinhalt (wie ein visueller Farbwähler oder Kalender Datumseingabe), tut diese Methode nichts.

setCustomValidity()

Setzt eine benutzerdefinierte Nachricht, die angezeigt wird, wenn der Wert des Eingabeelements nicht gültig ist.

setRangeText()

Setzt den Inhalt des angegebenen Zeichenbereichs im Eingabeelement auf eine gegebene Zeichenfolge. Ein selectMode-Parameter ist verfügbar, um zu steuern, wie der bestehende Inhalt beeinflusst wird.

setSelectionRange()

Wählt den angegebenen Bereich von Zeichen in einem Texteingabeelement aus. Macht nichts für Eingaben, die nicht als Texteingabefelder dargestellt werden.

showPicker()

Zeigt den Browser-Auswahlbildschirm für das Eingabeelement 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 auf Nicht-Formularelemente nicht anwendbar sind. Es gibt CSS-Selektoren, die gezielt Steuerelemente basierend auf ihren UI-Funktionen anvisieren können, auch bekannt als UI-Pseudoklassen. Das input-Element kann auch nach Typ mit Attributselektoren gezielt werden. Es gibt einige Eigenschaften, die besonders nützlich sind.

Beispiel für Pseudoklassen

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

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

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

Es ist möglich, verschiedene Arten von Formularelementen basierend auf ihrem type mit Attributselektoren gezielt anzusprechen. CSS-Attributselektoren entsprechen Elementen basierend entweder auf der bloßen Anwesenheit 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 ist das Erscheinen von Platzhaltertexten durchscheinend oder hellgrau. Das ::placeholder-Pseudo-Element ist der placeholder Text der Eingabe. Es kann mit einem eingeschränkten Satz von CSS-Eigenschaften gestylt werden.

::placeholder {
  color: blue;
}

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

Die appearance Eigenschaft ermöglicht das Anzeigen von (fast) jedem Element als plattformnativer Stil basierend auf dem Thema des Betriebssystems sowie das Entfernen jeglicher plattformnativer Stile mit dem Wert none.

Man könnte ein <div> wie einen Radiobutton aussehen lassen mit div {appearance: radio;} oder ein Radio wie ein Kontrollkästchen mit [type="radio"] {appearance: checkbox;}, aber sollten Sie nicht.

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

Eine spezifische Eigenschaft für Texteingabe-bezogene Elemente ist die CSS caret-color Eigenschaft, die es Ihnen erlaubt, die Farbe zu setzen, die verwendet wird, um den Texteingabecursor zu zeichnen:

HTML

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

CSS

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

Ergebnis

Die field-sizing Eigenschaft ermöglicht Ihnen die Steuerung des Größenverhaltens von Formulareingaben (d.h. sie haben standardmäßig eine bevorzugte Größe.) Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben und Formularelementen zu erlauben, ihre Größe anzupassen, um ihren Inhalt zu fassen.

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

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

Für weitere Informationen über das Hinzufügen von Farbe zu Elementen in HTML, siehe:

• Anwenden von Farbe auf HTML-Elemente mit CSS.

Siehe auch:

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

Labels sind erforderlich, um unterstützende Texte mit einem <input> zu verknüpfen. Das <label> Element bietet erklärende Informationen über ein Formularfeld, das immer angemessen ist (unabhängig von jeglichen Layout-Bedenken, die Sie haben könnten). Es ist nie eine schlechte Idee, ein <label> zu verwenden, um zu erklären, was in ein <input> oder <textarea> eingegeben werden sollte.

Assoziierte Labels

Die semantische Paarung von <input> und <label> Elementen ist nützlich für unterstützende Technologien wie Bildschirmleser. Indem Sie sie mit Hilfe des for Attributes des <label>-Elements paaren, verbinden Sie das Label mit dem Input auf eine Weise, die Bildschirmlesern ermöglicht, Eingaben präziser zu beschreiben.

Es reicht nicht aus, normalen Text neben dem <input> Element zu haben. Vielmehr erfordern Benutzbarkeit und Zugänglichkeit das Einschließen von entweder 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 zugänglich: Es gibt keine Beziehung zwischen dem Prompt und dem <input> Element.

Zusätzlich zu einem zugänglichen Namen bietet das Label eine größere 'Treffer'-Fläche für Maus- und Touchscreen-Benutzer, um darauf zu klicken oder zu berühren. Indem Sie ein <label> mit einem <input> paaren, wird durch Klicken auf eines von beiden der Fokus auf das <input> gelegt. Wenn Sie normalen Text verwenden, um Ihre Eingabe zu "bezeichnen", passiert dies nicht. Wenn der Prompt Teil der Aktivierungsfläche für die Eingabe ist, ist das hilfreich für Menschen mit motorischen Steuerungsbedingungen.

Als Webentwickler sollten wir nie zu der Annahme gelangen, dass Menschen alle Dinge wissen, die wir wissen. Die Vielfalt der Menschen, die das Web nutzen – und damit auch Ihre Website – garantiert praktisch, dass einige Besucher Ihrer Website einige Variationen in Denkprozessen und/oder Umständen haben werden, die sie dazu bringen, Ihre Formulare sehr unterschiedlich von Ihnen zu interpretieren ohne klare und korrekt präsentierte Labels.

Platzhalter sind nicht zugänglich

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. Er ist kein Label und sollte nicht als Ersatz verwendet werden, weil es das nicht ist. Der Platzhalter dient dazu, einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht als Erklärung oder Aufforderung.

Der Platzhalter ist nicht nur für Bildschirmleser nicht zugänglich, sondern verschwindet auch, sobald der Benutzer Text in das Formularelement eingibt oder wenn das Formularelement bereits einen Wert hat. Browser mit automatischen Seitenübersetzungsfunktionen könnten Attribute beim Übersetzen überspringen, 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 gestalten, wie im Abschnitt UI Pseudoklassen oben erwähnt, bietet der Browser eine clientseitige Validierung bei (versuchter) Formularübersendung. Bei der Formularübermittlung wird, wenn eine Formulareingabe die Einschränkungsvalidierung nicht besteht, in unterstützenden Browsern eine Fehlermeldung am ersten ungültigen Formularelement angezeigt; dabei wird eine Standardmeldung basierend auf dem Fehlertyp angezeigt oder eine von Ihnen festgelegte Nachricht.

Einige Eingabetypen und andere Attribute legen fest, welche Werte für eine bestimmte Eingabe gültig sind. Zum Beispiel bedeutet <input type="number" min="2" max="10" step="2">, dass nur die Zahlen 2, 4, 6, 8 oder 10 gültig sind. Mehrere Fehler können auftreten, darunter ein rangeUnderflow Fehler, wenn der Wert kleiner als 2 ist, rangeOverflow wenn er größer als 10 ist, stepMismatch, wenn der Wert eine Zahl zwischen 2 und 10 ist, aber keine gerade Ganzzahl (entspricht nicht den Anforderungen des step Attributs), oder typeMismatch, wenn der Wert keine Zahl ist.

Für die Eingabetypen, deren Menge der möglichen Werte periodisch ist (das heißt, bei maximal möglichen Wert drehen sich die Werte wieder zu Anfang statt aufzuhören), ist es möglich, dass die Werte der max und min Eigenschaften umgekehrt sind, was anzeigt, dass der Bereich der zulässigen Werte bei min beginnt, zum niedrigsten möglichen Wert springt und dann weiter zu max reicht. Dies ist besonders nützlich für Datums- und Zeitangaben, wie im Fall einer Erlaubnis für den Bereich von 8 Uhr abends bis 8 Uhr morgens:

<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. Selbst wenn die obigen Attribute vorhanden sind, mit Ausnahme von required, führt ein leerer String nicht zu einem Fehler.

Wir können Grenzen festlegen, für welche Werte wir akzeptieren, und unterstützende Browser werden diese Formulareingaben nativ validieren und den Benutzer benachrichtigen, wenn beim Einreichen des Formulars ein Fehler vorliegt.

Zusätzlich zu den in der obigen Tabelle beschriebenen Fehlern enthält die validityState-Schnittstelle die Eigenschaften badInput, valid und customError, die alle Boolesche schreibgeschützte Eigenschaften sind. Das Gültigkeitsobjekt enthält:

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

Für jede dieser Boolean-Eigenschaften zeigt ein Wert von true, dass der angegebene Grund der Validierung möglicherweise fehlschlägt, mit Ausnahme der valid Eigenschaft, die true ist, wenn der Wert des Elements alle Einschränkungen einhält.

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

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

Die letzte Zeile, die die benutzerdefinierte Fehlermeldung auf den leeren String setzt, ist entscheidend. Wenn der Benutzer einen Fehler macht und die Gültigkeit festgelegt ist, wird es nicht gesendet, selbst wenn alle Werte gültig sind, bis die Nachricht null ist.

Beispiel für benutzerdefinierte Validierungsfehler

Wenn Sie eine benutzerdefinierte Fehlermeldung anzeigen möchten, wenn ein Feld die Validierung nicht besteht, müssen Sie die Constraint Validation API verwenden, die für <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 veranlassen dies, um eine Standard-Fehlermeldung zu erzeugen, wenn Sie versuchen, das Formular ohne gültig ausgefüllt oder einem Wert, der nicht dem pattern entspricht, abzusenden.

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 dargestellt:

In Kürze:

• Wir überprüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sich sein Wert ändert, indem wir die Methode checkValidity() über den input Ereignis-Handler ausführen.
• Wenn der Wert ungültig ist, wird ein invalid Ereignis ausgelöst und die invalid Ereignishandler-Funktion wird ausgeführt. In dieser Funktion arbeiten wir heraus, ob der Wert ungültig ist, weil er leer ist oder weil er nicht dem Muster entspricht, indem wir einen if () Block verwenden und eine benutzerdefinierte Validitätsfehlermeldung setzen.
• Infolgedessen wird eine der benutzerdefinierten Fehlermeldungen angezeigt, wenn der Eingabewert ungültig ist, wenn die Senden-Schaltfläche gedrückt wird.
• Wenn er gültig ist, wird er wie erwartet gesendet. Dafür muss die benutzerdefinierte Gültigkeit durch Aufruf von setCustomValidity() mit einem leeren String-Wert abgesagt werden. Deshalb machen wir das 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 bei der Übermittlung enthält.

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

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

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

Beim Einschließen von Eingaben ist es eine Zugänglichkeitsanforderung, Labels hinzuzufügen. Dies wird benötigt, damit diejenigen, die unterstützende Technologien verwenden, erkennen können, wofür die Eingabe gedacht ist. Auch das Klicken oder Antippen eines Labels gibt den Fokus an das mit dem Label verbundene Formsteuerelement. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für sehende Benutzer, erhöht den Bereich, den ein Benutzer klicken oder antippen kann, um das Formsteuerelement zu aktivieren. Dies ist besonders nützlich (und sogar erforderlich) für Radioknöpfe und Kontrollkästchen, die klein sind. Weitere Informationen zu Labels im Allgemeinen finden Sie unter Labels.

Das folgende ist ein Beispiel dafür, wie das <label> mit einem <input> Element im obigen Stil verbunden wird. Sie müssen dem <input> ein id Attribut geben. Das <label> benötigt dann ein for Attribut, dessen Wert derselbe wie das id des Inputs ist.

<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, dass sie leicht aktiviert werden können. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit Problemen bei der motorischen Steuerung und Menschen, die nicht präzise Eingabemethoden wie einen Stift oder Finger verwenden. Eine Mindestinteraktive Größe von 44×44 [CSS-Pixel] wird empfohlen.

• Verständnis des Erfolgskriteriums 2.5.5: Zielgruppengröße | W3C Understanding WCAG 2.1
• Zielgruppengröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Berührungsziele - Das A11Y-Projekt

• Formulareinschränkungsvalidierung
• Ihr erstes HTML-Formular
• Anleitung zur Strukturierung eines HTML-Formulars
• Die nativen Formular-Widgets
• Formulardaten senden
• Formulareingaben-Validierung
• Anleitung zum Erstellen benutzerdefinierter Formular-Widgets
• HTML-Formulare in älteren Browsern
• Styling von HTML-Formularen
• Erweiterte Stilgebung für HTML-Formulare
• Erstellen von vertikalen Formulareingabefeldern