<input>: HTML-Eingabeelement

Probieren Sie es aus

<label for="name">Name (4 to 8 characters):</label>

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

<input>-Typen

Wie ein <input> funktioniert, hängt wesentlich vom Wert seines type-Attributs ab. Deshalb werden die verschiedenen Typen auf eigenen Referenzseiten behandelt. Ist dieses Attribut nicht angegeben, wird standardmäßig der Typ text verwendet.

Folgende Typen sind verfügbar:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Attribute

Das <input>-Element ist vor allem wegen seiner Attribute so leistungsfähig. Das wichtigste davon ist das oben anhand von Beispielen beschriebene Attribut type. Da jedes <input>-Element unabhängig vom Typ auf der Schnittstelle HTMLInputElement basiert, haben alle technisch gesehen genau dieselben Attribute. Tatsächlich wirken sich die meisten Attribute jedoch nur auf eine bestimmte Teilmenge der Eingabetypen aus. Zudem hängt die Wirkung einiger Attribute vom jeweiligen Eingabetyp ab.

Dieser Abschnitt enthält zunächst eine Tabelle aller Attribute mit kurzen Beschreibungen. Anschließend werden die einzelnen Attribute und die zugehörigen Eingabetypen ausführlicher beschrieben. Attribute, die für die meisten oder alle Eingabetypen gelten, werden weiter unten näher erläutert. Attribute, die nur für bestimmte Eingabetypen gelten – oder für alle gelten, bei einem bestimmten Typ aber ein besonderes Verhalten aufweisen –, werden stattdessen auf den Referenzseiten der jeweiligen Typen dokumentiert.

Zu den Attributen des <input>-Elements gehören die globalen HTML-Attribute sowie:

Nach den Beschreibungen der Standardattribute werden einige weitere, nicht standardisierte Attribute aufgeführt.

Einzelne Attribute

accept

Das Attribut accept gilt nur für den Eingabetyp file und legt fest, welche Dateitypen in einem file-Steuerelement zum Hochladen ausgewählt werden können. Siehe den Eingabetyp file.

alpha

Das Attribut alpha gilt nur für den Eingabetyp color und ermöglicht es Benutzern, die Deckkraft der ausgewählten Farbe festzulegen.

alt

Das Attribut alt gilt nur für die Schaltfläche vom Typ image. Es stellt Alternativtext für das Bild bereit und zeigt den Attributwert an, wenn die Bildressource unter src fehlt oder nicht geladen werden kann. Siehe den Eingabetyp image.

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und gegebenenfalls auf welche Weise. Weitere Informationen finden Sie auf der Seite zum globalen Attribut autocapitalize.

autocomplete

(Kein boolesches Attribut!) Das Attribut autocomplete erwartet eine durch Leerzeichen getrennte Zeichenfolge. Sie beschreibt, welche Art der automatischen Vervollständigung das Eingabefeld gegebenenfalls anbieten soll. Üblicherweise werden dabei zuvor in dasselbe Eingabefeld eingegebene Werte erneut angeboten. Es sind aber auch komplexere Formen möglich: Ein Browser könnte beispielsweise auf die Kontaktliste eines Geräts zugreifen, um email-Adressen in einem E-Mail-Eingabefeld zu vervollständigen. Zulässige Werte finden Sie unter autocomplete.

Das Attribut autocomplete ist für hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color und password gültig. Es wirkt sich nicht auf Eingabetypen aus, die keine Zahlen- oder Textdaten zurückgeben, und gilt für alle Eingabetypen außer checkbox, radio, file und den Schaltflächentypen.

Weitere Informationen, unter anderem zur Passwortsicherheit und dazu, wie sich autocomplete bei hidden geringfügig von anderen Eingabetypen unterscheidet, finden Sie auf der Seite zum Attribut autocomplete.

autofocus

Ein boolesches Attribut, das angibt, dass das Eingabefeld nach dem Laden der Seite automatisch den Fokus erhalten soll – oder nachdem das <dialog>, das das Element enthält, angezeigt wurde.

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

Höchstens ein Element im Dokument darf das Attribut autofocus haben. Ist es für mehrere Elemente angegeben, erhält das erste davon den Fokus.

Das Attribut autofocus kann nicht für Eingabefelder vom Typ hidden verwendet werden, da verborgene Eingabefelder keinen Fokus erhalten können.

Warnung: Wenn ein Formularsteuerelement automatisch den Fokus erhält, kann dies Menschen mit Sehbeeinträchtigungen, die Screenreader verwenden, sowie Menschen mit kognitiven Beeinträchtigungen verwirren. Bei Verwendung von autofocus versetzen Screenreader ihre Benutzer ohne vorherige Ankündigung direkt zum Formularsteuerelement.

Berücksichtigen Sie die Barrierefreiheit sorgfältig, wenn Sie das Attribut autofocus verwenden. Der automatische Fokus auf ein Steuerelement kann dazu führen, dass die Seite beim Laden scrollt. Auf manchen Touch-Geräten kann dadurch außerdem eine Bildschirmtastatur eingeblendet werden. Ein Screenreader gibt zwar die Beschriftung des fokussierten Formularsteuerelements aus, kündigt davor aber nichts an. Auch sehenden Benutzern kleiner Geräte kann dadurch der Kontext aus dem vorhergehenden Inhalt entgehen.

capture

Das mit der HTML-Media-Capture-Spezifikation eingeführte Attribut capture gilt nur für den Eingabetyp file. Es legt in unterstützten Szenarien fest, welches Medium – Mikrofon, Video oder Kamera – verwendet werden soll, um eine neue Datei für das Hochladen mit dem file-Steuerelement aufzunehmen. Siehe den Eingabetyp file.

checked

checked ist ein boolesches Attribut für die Typen radio und checkbox. Bei radio gibt es an, dass dieses Optionsfeld innerhalb der Gruppe gleichnamiger Optionsfelder aktuell ausgewählt ist. Bei checkbox gibt es an, dass das Kontrollkästchen beim Laden der Seite standardmäßig ausgewählt ist. Es gibt nicht an, ob das Kontrollkästchen derzeit ausgewählt ist: Ändert sich dessen Zustand, spiegelt dieses HTML-Attribut die Änderung nicht wider. (Nur das IDL-Attribut checked von HTMLInputElement wird aktualisiert.)

Hinweis: Anders als bei anderen Eingabesteuerelementen werden die Werte von Kontrollkästchen und Optionsfeldern nur dann in die übermittelten Daten aufgenommen, wenn sie aktuell checked sind. In diesem Fall werden Name und Wert der ausgewählten Steuerelemente übermittelt.

Hat beispielsweise ein Kontrollkästchen den name fruit und den value cherry und ist es ausgewählt, enthalten die übermittelten Formulardaten fruit=cherry. Ist das Kontrollkästchen nicht ausgewählt, erscheint es überhaupt nicht in den Formulardaten. Der Standardwert von value für Kontrollkästchen und Optionsfelder ist on.

colorspace

Das Attribut colorspace gilt nur für den Eingabetyp color und legt den Farbraum fest, den das Eingabefeld type="color" verwendet. Mögliche aufgezählte Werte sind:

• "limited-srgb": Die Farbe liegt im sRGB-Farbraum. Dazu gehören Werte der Formate rgb(), hsl(), hwb() und <hex-color>. Der Farbwert ist auf 8 Bit je r-, g- und b-Komponente begrenzt. Dies ist der Standardwert.
• "display-p3": Der Display-P3-Farbraum, zum Beispiel color(display-p3 1.84 -0.19 0.72 / 0.6)

dirname

Das Attribut dirname gilt für die Eingabetypen hidden, text, search, url, tel und email und ermöglicht die Übermittlung der Schreibrichtung des Elements. Ist es vorhanden, übermittelt das Formularsteuerelement zwei Name-Wert-Paare: Das erste besteht aus name und value. Beim zweiten ist der Wert des Attributs dirname der Name und ltr oder rtl der vom Browser festgelegte Wert.

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

Beim Übermitteln des obigen Formulars werden sowohl das name-/value-Paar fruit=cherry als auch das dirname-/Schreibrichtungs-Paar fruit-dir=ltr gesendet. Weitere Informationen finden Sie unter Attribut dirname.

disabled

Ein boolesches Attribut, das angibt, dass Benutzer nicht mit dem Eingabefeld interagieren können. Deaktivierte Eingabefelder werden normalerweise blasser oder auf andere Weise als nicht verfügbar dargestellt.

Insbesondere empfangen deaktivierte Eingabefelder kein click-Ereignis und werden nicht mit dem Formular übermittelt.

Hinweis: Obwohl die Spezifikation dies nicht verlangt, speichert Firefox standardmäßig den dynamischen Deaktivierungszustand eines <input> auch über das erneute Laden der Seite hinweg. Mit dem Attribut autocomplete können Sie dieses Verhalten steuern.

form

Eine Zeichenfolge, die das <form>-Element angibt, dem das Eingabefeld zugeordnet ist – seinen Formularbesitzer. Ist ein Wert vorhanden, muss er mit der id eines <form>-Elements im selben Dokument übereinstimmen. Ist das Attribut nicht angegeben, wird das <input>-Element gegebenenfalls dem nächstgelegenen umgebenden Formular zugeordnet.

Mit dem Attribut form können Sie ein Eingabefeld an beliebiger Stelle im Dokument platzieren und es dennoch in ein Formular an anderer Stelle im Dokument einbinden.

Hinweis: Ein Eingabefeld kann nur einem Formular zugeordnet sein.

formaction

Gilt nur für die Eingabetypen image und submit. Weitere Informationen finden Sie beim Eingabetyp submit.

formenctype

Gilt nur für die Eingabetypen image und submit. Weitere Informationen finden Sie beim Eingabetyp submit.

formmethod

Gilt nur für die Eingabetypen image und submit. Weitere Informationen finden Sie beim Eingabetyp submit.

formnovalidate

Gilt nur für die Eingabetypen image und submit. Weitere Informationen finden Sie beim Eingabetyp submit.

formtarget

Gilt nur für die Eingabetypen image und submit. Weitere Informationen finden Sie beim Eingabetyp submit.

height

Gilt nur für die Eingabeschaltfläche vom Typ image. height gibt die Höhe der Bilddatei an, mit der die grafische Schaltfläche zum Übermitteln dargestellt wird. Siehe den Eingabetyp image.

id

Ein für alle Elemente einschließlich aller Eingabetypen gültiges globales Attribut. Es legt eine Kennung (ID) fest, die innerhalb des gesamten Dokuments eindeutig sein muss. Sie dient dazu, das Element für Verknüpfungen zu identifizieren. Ihr Wert wird als Wert des Attributs for von <label> verwendet, um die Beschriftung mit dem Formularsteuerelement zu verknüpfen. Siehe <label>.

inputmode

Ein globales Attribut, das für alle Elemente gilt und Browsern einen Hinweis darauf gibt, welche Konfiguration der Bildschirmtastatur beim Bearbeiten des Elements oder seines Inhalts verwendet werden soll. Zu den Werten gehören none, text, tel, url, email, numeric, decimal und search.

list

Der Wert des Attributs list sollte die id eines <datalist>-Elements im selben Dokument sein. <datalist> stellt eine Liste vordefinierter Werte bereit, die Benutzern für dieses Eingabefeld vorgeschlagen werden. Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht als Vorschläge angezeigt. Die Werte sind Vorschläge, keine Vorgaben: Benutzer können einen Wert aus der Liste auswählen oder einen anderen eingeben.

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

Laut Spezifikation wird das Attribut list für hidden, password, checkbox, radio, file und sämtliche Schaltflächentypen nicht unterstützt.

Je nach Browser sehen Benutzer möglicherweise eine vorgeschlagene Farbpalette, Markierungen entlang eines Schiebereglers oder sogar ein Eingabefeld, das sich wie ein <select> öffnet, aber auch nicht aufgeführte Werte zulässt. Beachten Sie für die anderen Eingabetypen die Tabelle zur Browser-Kompatibilität.

Siehe das Element <datalist>.

max

Gilt für date, month, week, time, datetime-local, number und range und legt den größten zulässigen Wert fest. Überschreitet der im Element eingegebene value diesen Wert, schlägt die Constraint Validation fehl. Ist der Wert des Attributs max keine Zahl, hat das Element keinen Höchstwert.

Es gibt einen Sonderfall: Ist der Datentyp periodisch, etwa bei Datums- oder Uhrzeitangaben, darf der Wert von max kleiner sein als der von min. Das zeigt an, dass der Bereich über seinen Endpunkt hinausreichen kann. So lässt sich beispielsweise ein Zeitraum von 22 Uhr bis 4 Uhr festlegen.

maxlength

Gilt für text, search, url, tel, email und password und legt die maximale Länge der Zeichenfolge fest, die Benutzer in das Feld eingeben können (gemessen in UTF-16-Codeeinheiten). Der Wert muss eine ganze Zahl ab 0 sein. Ist maxlength nicht angegeben oder ungültig, hat das Feld keine maximale Länge. Der Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Constraint Validation schlägt fehl, wenn der eingegebene Text länger als maxlength UTF-16-Codeeinheiten ist. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als das Attribut maxlength erlaubt. Die Constraint Validation wird nur angewendet, wenn Benutzer den Wert ändern. Weitere Informationen finden Sie unter Clientseitige Validierung.

min

Gilt für date, month, week, time, datetime-local, number und range und legt den kleinsten zulässigen Wert fest. Ist der im Element eingegebene value kleiner, schlägt die Constraint Validation fehl. Ist der Wert des Attributs min keine Zahl, hat das Element keinen Mindestwert.

Dieser Wert muss kleiner oder gleich dem Wert des Attributs max sein. Ist das Attribut min vorhanden, aber ohne Wert oder ungültig, wird kein Mindestwert angewendet. Ist min gültig und ein nicht leerer Wert kleiner als der festgelegte Mindestwert, verhindert die Constraint Validation die Formularübermittlung. Weitere Informationen finden Sie unter Clientseitige Validierung.

Es gibt einen Sonderfall: Ist der Datentyp periodisch, etwa bei Datums- oder Uhrzeitangaben, darf der Wert von max kleiner sein als der von min. Das zeigt an, dass der Bereich über seinen Endpunkt hinausreichen kann. So lässt sich beispielsweise ein Zeitraum von 22 Uhr bis 4 Uhr festlegen.

minlength

Gilt für text, search, url, tel, email und password und legt die Mindestlänge der Zeichenfolge fest, die Benutzer in das Feld eingeben können (gemessen in UTF-16-Codeeinheiten). Der Wert muss eine nicht negative ganze Zahl sein, die kleiner oder gleich dem Wert von maxlength ist. Ist minlength nicht angegeben oder ungültig, hat das Eingabefeld keine Mindestlänge.

Die Constraint Validation schlägt fehl, wenn der eingegebene Text kürzer als minlength UTF-16-Codeeinheiten ist. Dadurch wird die Formularübermittlung verhindert. Die Constraint Validation wird nur angewendet, wenn Benutzer den Wert ändern. Weitere Informationen finden Sie unter Clientseitige Validierung.

multiple

Ist das boolesche Attribut multiple gesetzt, können Benutzer im E-Mail-Feld mehrere durch Kommas getrennte E-Mail-Adressen eingeben oder bei einem file-Eingabefeld mehrere Dateien auswählen. Siehe die Eingabetypen email und file.

name

Eine Zeichenfolge, die den Namen des Eingabesteuerelements festlegt. Dieser Name wird bei der Formularübermittlung zusammen mit dem Wert des Steuerelements gesendet.

Behandeln Sie name als erforderliches Attribut, auch wenn es formal keines ist. Ist für ein Eingabefeld kein name angegeben oder ist name leer, wird sein Wert nicht mit dem Formular übermittelt! Auch deaktivierte Steuerelemente, nicht ausgewählte Optionsfelder und Kontrollkästchen sowie Reset-Schaltflächen werden nicht gesendet.

Es gibt zwei Sonderfälle:

1. _charset_: Wird dies als Name eines <input>-Elements vom Typ hidden verwendet, setzt der User-Agent dessen value automatisch auf die Zeichenkodierung, die zur Übermittlung des Formulars verwendet wird.
2. isindex: Aus historischen Gründen ist der Name isindex nicht zulässig.

Das Attribut name bewirkt bei Optionsfeldern ein besonderes Verhalten.

Innerhalb einer Gruppe gleichnamiger Optionsfelder kann jeweils nur eines ausgewählt sein. Wird ein anderes Optionsfeld der Gruppe ausgewählt, wird das bisher ausgewählte automatisch abgewählt. Bei der Formularübermittlung werden der Name und der Wert des ausgewählten Optionsfelds gesendet.

Wenn Sie mit der Tabulatortaste zu einer Gruppe gleichnamiger Optionsfelder wechseln und eines davon ausgewählt ist, erhält dieses den Fokus. Stehen die Optionsfelder im Quellcode nicht unmittelbar beieinander, beginnt die Tabulatornavigation durch die Gruppe beim ersten Optionsfeld, überspringt aber alle nicht ausgewählten Optionsfelder. Anders ausgedrückt: Ist eines ausgewählt, werden die nicht ausgewählten Optionsfelder der Gruppe mit der Tabulatortaste übersprungen. Ist keines ausgewählt, erhält die Gruppe den Fokus beim ersten gleichnamigen Optionsfeld.

Sobald eines der Optionsfelder einer Gruppe den Fokus hat, können Sie mit den Pfeiltasten durch alle gleichnamigen Optionsfelder navigieren, auch wenn sie im Quellcode nicht unmittelbar beieinanderstehen.

Erhält ein Eingabeelement einen name, wird dieser Name zu einer Eigenschaft von HTMLFormElement.elements des zugehörigen Formularelements. Wenn ein Eingabefeld den name guest und ein anderes den name hat-size hat, können Sie den folgenden Code verwenden:

js

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

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

Nach Ausführung dieses Codes ist guestName das HTMLInputElement für das Feld guest, während hatSize das Objekt für das Feld hat-size ist.

Warnung: Vergeben Sie für Formularelemente keinen name, der einer integrierten Eigenschaft des Formulars entspricht. Andernfalls würde die Referenz auf das entsprechende Eingabefeld die vordefinierte Eigenschaft oder Methode überschreiben.

pattern

Das Attribut pattern gilt für text, search, url, tel, email und password. Daraus wird ein regulärer Ausdruck kompiliert, dem der value des Eingabefelds entsprechen muss, damit die Constraint Validation erfolgreich ist. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er vom Typ RegExp verwendet und in unserem Leitfaden zu regulären Ausdrücken beschrieben wird. Der Mustertext darf nicht von Schrägstrichen umschlossen sein. Beim Kompilieren des regulären Ausdrucks gilt:

1. Das Muster wird implizit mit ^(?: und )$ umschlossen, sodass der gesamte Eingabewert übereinstimmen muss, also ^(?:<pattern>)$.
2. Das Flag 'v' wird gesetzt, sodass das Muster als Folge von Unicode-Codepunkten statt als ASCII behandelt wird.

Ist das Attribut pattern vorhanden, aber ohne Wert oder ungültig, wird kein regulärer Ausdruck angewendet und das Attribut vollständig ignoriert. Ist das Muster gültig und entspricht ein nicht leerer Wert ihm nicht, verhindert die Constraint Validation die Formularübermittlung. Ist multiple vorhanden, wird der kompilierte reguläre Ausdruck mit jedem durch Kommas getrennten Wert abgeglichen.

Hinweis: Wenn Sie das Attribut pattern verwenden, informieren Sie Benutzer durch einen erklärenden Text in der Nähe über das erwartete Format. Sie können auch ein Attribut title hinzufügen, um die Anforderungen des Musters zu erläutern; die meisten Browser zeigen dessen Wert als Tooltip an. Die sichtbare Erläuterung ist für die Barrierefreiheit erforderlich. Der Tooltip ist eine Ergänzung.

Weitere Informationen finden Sie unter Clientseitige Validierung.

placeholder

Das Attribut placeholder gilt für text, search, url, tel, email, password und number. Es gibt Benutzern einen kurzen Hinweis darauf, welche Informationen im Feld erwartet werden. Der Hinweis sollte aus einem Wort oder einer kurzen Formulierung bestehen, die den erwarteten Datentyp verdeutlicht, statt eine Erklärung oder Aufforderung zu sein. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten. Soll ein Feld beispielsweise den Vornamen erfassen und lautet seine Beschriftung „Vorname“, könnte „z. B. Mustafa“ ein geeigneter Platzhalter sein.

Hinweis: Das Attribut placeholder ist semantisch weniger hilfreich als andere Möglichkeiten, ein Formular zu erklären, und kann unerwartete technische Probleme mit Ihren Inhalten verursachen. Weitere Informationen finden Sie unter Beschriftungen.

popovertarget

Macht ein <input type="button">-Element zu einer Schaltfläche, die ein Popover steuert. Als Wert wird die ID des zu steuernden Popover-Elements verwendet. Weitere Einzelheiten finden Sie auf der Einstiegsseite zur Popover API. Die Verknüpfung zwischen einem Popover und seiner aufrufenden Schaltfläche über das Attribut popovertarget hat zwei weitere nützliche Auswirkungen:

• Der Browser erstellt eine implizite Beziehung über aria-details und aria-expanded zwischen Popover und aufrufender Schaltfläche. Außerdem ordnet er das angezeigte Popover an einer logischen Stelle in der Tastatur-Fokusreihenfolge ein. Dadurch ist das Popover für Benutzer von Tastaturen und assistiven Technologien (AT) besser zugänglich (siehe auch Barrierefreiheitsfunktionen von Popovers).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden Elementen. Dadurch lassen sich Popovers mit CSS-Ankerpositionierung bequem relativ zu ihren Steuerelementen positionieren. Weitere Einzelheiten finden Sie unter Ankerpositionierung von Popovers.

popovertargetaction

Legt fest, welche Aktion ein <input type="button">-Steuerelement für das von ihm gesteuerte Popover-Element ausführt. Mögliche Werte sind:

"hide"

Die Schaltfläche verbirgt ein angezeigtes Popover. Ist das Popover bereits verborgen, geschieht nichts.

"show"

Die Schaltfläche zeigt ein verborgenes Popover an. Ist das Popover bereits sichtbar, geschieht nichts.

"toggle"

Die Schaltfläche wechselt zwischen sichtbarem und verborgenem Popover. Ein verborgenes Popover wird angezeigt, ein sichtbares verborgen. Wird popovertargetaction weggelassen, ist "toggle" die Standardaktion der Schaltfläche.

readonly

Ein boolesches Attribut, das angibt, dass Benutzer den Wert des Eingabefelds nicht bearbeiten können. Das Attribut readonly wird von den Eingabetypen text, search, url, tel, email, date, month, week, time, datetime-local, number und password unterstützt.

Weitere Informationen finden Sie unter HTML-Attribut: readonly.

required

required ist ein boolesches Attribut, das angibt, dass Benutzer einen Wert für das Eingabefeld angeben müssen, bevor das zugehörige Formular übermittelt werden kann. Das Attribut required 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 Clientseitige Validierung und HTML-Attribut: required.

size

Das Attribut size gilt für email, password, tel, url und text und legt fest, wie viel vom Eingabefeld angezeigt wird. Im Wesentlichen entspricht das Ergebnis dem Festlegen der CSS-Eigenschaft width, allerdings mit einigen Besonderheiten. Die Einheit des Werts hängt vom Eingabetyp ab. Bei password und text handelt es sich um eine Anzahl von Zeichen (oder em-Einheiten) mit dem Standardwert 20, bei den anderen um Pixel (oder px-Einheiten). CSS-width hat Vorrang vor dem Attribut size.

src

Gilt nur für die Eingabeschaltfläche vom Typ image. src ist eine Zeichenfolge mit der URL der Bilddatei, die als grafische Schaltfläche zum Übermitteln angezeigt wird. Siehe den Eingabetyp image.

step

Das Attribut step gilt für date, month, week, time, datetime-local, number und range. Es ist eine Zahl, die die Schrittweite festlegt, der der Wert entsprechen muss. Gültig sind nur Werte, die um eine ganze Anzahl von Schritten vom Ausgangswert entfernt sind. Der Ausgangswert ist min, falls angegeben, andernfalls value, oder 0, wenn beides fehlt. Eine Ausnahme ist week: Hier beträgt der standardmäßige Ausgangswert −259.200.000 und stellt den Beginn der Woche 1970-W01 dar.

Wird step nicht ausdrücklich angegeben:

• Für number und range ist der Standardwert von step 1.
• Jeder Datums- und Uhrzeiteingabetyp hat einen geeigneten Standardwert für step. Siehe die Seiten der einzelnen Eingabetypen: date, datetime-local, month, time und week.

Der Wert muss eine positive Zahl – ganzzahlig oder mit Nachkommastellen – oder der Sonderwert any sein. any bedeutet, dass keine Schrittweite vorgegeben wird und jeder Wert erlaubt ist, sofern keine anderen Einschränkungen wie min und max entgegenstehen.

Bei <input type="number" min="10" step="2"> ist beispielsweise jede gerade ganze Zahl ab 10 gültig. Wird step weggelassen, wie bei <input type="number">, ist jede ganze Zahl gültig, Zahlen mit Nachkommastellen wie 4.2 dagegen nicht, da step standardmäßig 1 ist. Damit 4.2 gültig ist, müsste step auf any, 0.1 oder 0.2 gesetzt werden. Alternativ müsste der Wert von min auf .2 enden, etwa bei <input type="number" min="-5.2">.

Hinweis: Entsprechen die von Benutzern eingegebenen Daten nicht der festgelegten Schrittweite, gelten sie bei der Constraint Validation als ungültig und entsprechen der Pseudoklasse :invalid.

Weitere Informationen finden Sie unter Clientseitige Validierung.

switch

switch gilt nur für Eingabefelder vom Typ checkbox und ist ein boolesches Attribut, das angibt, ob das Kontrollkästchen als Schalter dargestellt werden soll.

Hinweis: Dieses Attribut ist noch experimentell und wird nur von wenigen Browsern unterstützt. Nicht unterstützende Browser ignorieren es.

tabindex

Ein globales, für alle Elemente einschließlich aller Eingabetypen gültiges Attribut mit einem ganzzahligen Wert. Es gibt an, ob das Element den Eingabefokus erhalten kann und ob es an der sequenziellen Tastaturnavigation teilnehmen soll. Da alle Eingabetypen außer hidden fokussierbar sind, sollte dieses Attribut nicht für Formularsteuerelemente verwendet werden. Andernfalls müsste die Fokusreihenfolge aller Elemente im Dokument verwaltet werden. Bei Fehlern kann dies die Benutzerfreundlichkeit und Barrierefreiheit beeinträchtigen.

title

Ein globales, für alle Elemente einschließlich aller Eingabetypen gültiges Attribut. Es enthält einen Text mit ergänzenden Informationen zum jeweiligen Element. Diese Informationen können Benutzern üblicherweise, aber nicht zwingend, als Tooltip angezeigt werden. title sollte NICHT als wichtigste Erklärung für den Zweck eines Formularsteuerelements verwendet werden. Nutzen Sie stattdessen das Element <label> mit einem for-Attribut, dessen Wert dem id-Attribut des Formularsteuerelements entspricht. Siehe Beschriftungen weiter unten.

type

Eine Zeichenfolge, die den darzustellenden Steuerelementtyp festlegt. Um beispielsweise ein Kontrollkästchen zu erstellen, wird der Wert checkbox verwendet. Fehlt das Attribut oder ist sein Wert unbekannt, wird der Eingabetyp text verwendet und ein einfaches Texteingabefeld erstellt.

Zulässige Werte sind oben unter Eingabetypen aufgeführt.

value

Der Wert des Eingabesteuerelements. Wird er im HTML angegeben, ist er der Anfangswert. Anschließend kann er jederzeit mit JavaScript über die Eigenschaft value des entsprechenden HTMLInputElement-Objekts geändert oder abgerufen werden. Das Attribut value ist immer optional, sollte für checkbox, radio und hidden jedoch als erforderlich betrachtet werden.

webkitdirectory

Ist das boolesche Attribut webkitdirectory vorhanden, stehen Benutzern in der Dateiauswahl nur Verzeichnisse zur Auswahl. Weitere Einzelheiten und Beispiele finden Sie unter HTMLInputElement.webkitdirectory.

Hinweis: webkitdirectory ist in der File and Directory Entries API definiert. Der Name webkitdirectory stammt daher, dass es ursprünglich eine Chrome-spezifische API war. Inzwischen ist sie in allen Browsern verfügbar.

width

Gilt nur für die Eingabeschaltfläche vom Typ image. width gibt die Breite der Bilddatei an, die als grafische Schaltfläche zum Übermitteln angezeigt wird. Siehe den Eingabetyp image.

Nicht standardisierte Attribute

Die folgenden nicht standardisierten Attribute sind ebenfalls in einigen Browsern verfügbar. Grundsätzlich sollten Sie ihre Verwendung nach Möglichkeit vermeiden.

incremental

Das boolesche Attribut incremental ist eine Erweiterung von WebKit und Blink, die unter anderem von Safari, Opera und Chrome unterstützt wird. Ist es vorhanden, weist es den User-Agent an, das Eingabefeld als Live-Suche zu behandeln. Während Benutzer den Feldwert bearbeiten, sendet der User-Agent search-Ereignisse an das HTMLInputElement-Objekt, das das Suchfeld repräsentiert. So kann Ihr Code die Suchergebnisse während der Eingabe in Echtzeit aktualisieren.

Ist incremental nicht angegeben, wird das Ereignis search nur gesendet, wenn Benutzer ausdrücklich eine Suche starten, etwa indem sie beim Bearbeiten des Felds Enter oder Return drücken.

Die Häufigkeit des search-Ereignisses ist begrenzt: Es wird nicht öfter als in einem von der Implementierung festgelegten Zeitabstand gesendet.

orient

Ähnlich wie die nicht standardisierte CSS-Eigenschaft -moz-orient, die sich auf die Elemente <progress> und <meter> auswirkt, legt das Attribut orient die Ausrichtung eines Schiebereglers fest. Zu den Werten gehören horizontal für eine waagerechte und vertical für eine senkrechte Darstellung. Einen modernen Ansatz für vertikale Formularsteuerelemente finden Sie unter Vertikale Formularsteuerelemente erstellen.

results

Das nur von Safari unterstützte Attribut results ist ein Zahlenwert, mit dem Sie die Höchstzahl der Einträge im browserseitig bereitgestellten Dropdown-Menü früherer Suchanfragen eines <input>-Elements überschreiben können.

Der Wert muss eine nicht negative Dezimalzahl sein. Ist er nicht angegeben oder ungültig, verwendet der Browser seine standardmäßige Höchstzahl an Einträgen.

Methoden

Die folgenden Methoden werden von der Schnittstelle HTMLInputElement bereitgestellt, die <input>-Elemente im DOM repräsentiert. Ebenfalls verfügbar sind die Methoden der übergeordneten Schnittstellen HTMLElement, Element, Node und EventTarget.

checkValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht. Andernfalls wird false zurückgegeben und am Element ein invalid-Ereignis ausgelöst.

reportValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht. Andernfalls wird false zurückgegeben, am Element ein invalid-Ereignis ausgelöst und – sofern das Ereignis nicht abgebrochen wird – das Problem den Benutzern gemeldet.

select()

Wählt den gesamten Inhalt des <input>-Elements aus, sofern dessen Inhalt auswählbar ist. Bei Elementen ohne auswählbaren Textinhalt, etwa einer grafischen Farbauswahl oder einer Kalenderauswahl für ein Datum, bewirkt diese Methode nichts.

setCustomValidity()

Legt eine benutzerdefinierte Meldung fest, die angezeigt wird, wenn der Wert des Eingabeelements ungültig ist.

setRangeText()

Ersetzt den Inhalt eines angegebenen Zeichenbereichs im Eingabeelement durch eine Zeichenfolge. Mit dem Parameter selectMode lässt sich steuern, wie sich dies auf den vorhandenen Inhalt auswirkt.

setSelectionRange()

Wählt einen angegebenen Zeichenbereich innerhalb eines Texteingabeelements aus. Bei Eingabefeldern, die nicht als Textfelder dargestellt werden, bewirkt die Methode nichts.

showPicker()

Zeigt die Browser-Auswahloberfläche für das Eingabeelement an. Normalerweise erscheint sie, wenn das Element ausgewählt wird; mit dieser Methode kann sie durch einen Schaltflächenklick oder eine andere Benutzerinteraktion geöffnet werden.

stepDown()

Verringert den Wert eines numerischen Eingabefelds standardmäßig um eine Einheit oder um die angegebene Anzahl von Einheiten.

stepUp()

Erhöht den Wert eines numerischen Eingabefelds um eine Einheit oder um die angegebene Anzahl von Einheiten.

CSS

Eingabefelder sind ersetzte Elemente und haben daher einige Eigenschaften, die für andere Elemente als Formularelemente nicht gelten. Mit bestimmten CSS-Selektoren lassen sich Formularsteuerelemente anhand ihrer Oberflächeneigenschaften ansprechen; diese Selektoren werden auch UI-Pseudoklassen genannt. Eingabeelemente können außerdem mithilfe von Attributselektoren nach Typ ausgewählt werden. Daneben gibt es einige besonders nützliche Eigenschaften.

UI-Pseudoklassen

Beispiel für Pseudoklassen

Die Beschriftung eines Kontrollkästchens kann unterschiedlich gestaltet werden, je nachdem, ob das Kontrollkästchen ausgewählt ist. In diesem Beispiel gestalten wir color und font-weight des <label>, das unmittelbar auf ein ausgewähltes Eingabefeld folgt. Wenn input nicht ausgewählt ist, wenden wir keine Stile an.

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

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

Attributselektoren

Mit Attributselektoren können verschiedene Arten von Formularsteuerelementen anhand ihres type ausgewählt werden. CSS-Attributselektoren stimmen mit Elementen überein, wenn ein Attribut vorhanden ist oder einen bestimmten Wert hat.

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

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

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

::placeholder

Standardmäßig wird Platzhaltertext durchscheinend oder hellgrau dargestellt. Das Pseudoelement ::placeholder steht für den placeholder-Text eines Eingabefelds. Es kann mit einer begrenzten Auswahl an CSS-Eigenschaften gestaltet werden.

::placeholder {
  color: blue;
}

In einer Regel mit ::placeholder im Selektor können nur die CSS-Eigenschaften verwendet werden, die auch für das Pseudoelement ::first-line gelten.

caret-color

Die CSS-Eigenschaft caret-color ist besonders für Elemente zur Texteingabe relevant. Mit ihr können Sie die Farbe der Einfügemarke festlegen:

HTML

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

CSS

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

Ergebnis

field-sizing

Mit der Eigenschaft field-sizing können Sie steuern, wie die Größe von Formulareingabefeldern bestimmt wird. Standardmäßig erhalten sie eine bevorzugte Größe. Mit dieser Eigenschaft können Sie dieses Verhalten überschreiben, sodass Formularsteuerelemente ihre Größe an ihren Inhalt anpassen.

Die Eigenschaft wird typischerweise verwendet, um Formularfelder zu erstellen, die eng am Inhalt anliegen und mit zunehmender Texteingabe wachsen. Das funktioniert mit Eingabetypen, die eine direkte Texteingabe erlauben, beispielsweise text und url, mit dem Eingabetyp file sowie mit <textarea>-Elementen.

object-position und object-fit

In bestimmten Fällen – üblicherweise bei nicht textbasierten Eingaben und spezialisierten Oberflächen – ist das <input>-Element ein ersetztes Element. Dann können seine Positionierung und Größe innerhalb seines Rahmens mit den CSS-Eigenschaften object-position und object-fit angepasst werden.

Gestaltung

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

• Farbe mit CSS auf HTML-Elemente anwenden.

Siehe auch:

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

Weitere Funktionen

Beschriftungen

Beschriftungen sind erforderlich, um ein <input> mit einem erklärenden Text zu verknüpfen. Das Element <label> stellt Informationen zu einem Formularfeld bereit und ist dafür immer geeignet, sofern keine besonderen Layoutanforderungen entgegenstehen. Ein <label> zu verwenden, um zu erklären, was in ein <input> oder <textarea> eingegeben werden soll, ist stets sinnvoll.

Zugeordnete Beschriftungen

Die semantische Verknüpfung von <input>- und <label>-Elementen ist für assistive Technologien wie Screenreader hilfreich. Wenn Sie die beiden Elemente über das Attribut for von <label> verknüpfen, können Screenreader den Benutzern die Eingabefelder genauer beschreiben.

Ein einfacher Text neben dem <input>-Element reicht nicht aus. Für Benutzerfreundlichkeit und Barrierefreiheit ist vielmehr ein implizites oder explizites <label> erforderlich:

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

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

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

Das erste Beispiel ist nicht barrierefrei: Zwischen der Aufforderung und dem <input>-Element besteht keine Verknüpfung.

Neben einem zugänglichen Namen bietet die Beschriftung auch eine größere anklickbare beziehungsweise berührbare Fläche für Benutzer von Maus und Touchscreen. Sind ein <label> und ein <input> verknüpft, erhält das <input> den Fokus, wenn eines der beiden angeklickt wird. Wenn Sie das Eingabefeld lediglich mit einfachem Text „beschriften“, geschieht dies nicht. Dass die Aufforderung zum Aktivierungsbereich des Eingabefelds gehört, hilft insbesondere Menschen mit motorischen Einschränkungen.

Als Webentwickler sollten wir niemals davon ausgehen, dass andere Menschen alles wissen, was wir wissen. Die Vielfalt der Menschen, die das Web und damit auch Ihre Website nutzen, bedeutet praktisch zwangsläufig, dass manche Besucher Ihre Formulare aufgrund anderer Denkweisen oder Umstände ganz anders verstehen als Sie – sofern eindeutige und gut präsentierte Beschriftungen fehlen.

Platzhalter sind nicht barrierefrei

Mit dem Attribut placeholder können Sie Text festlegen, der im Inhaltsbereich eines leeren <input>-Elements angezeigt wird. Das Verständnis Ihrer Formulare darf niemals vom Platzhalter abhängen. Er ist keine Beschriftung und sollte auch nicht als Ersatz dafür verwendet werden. Ein Platzhalter soll lediglich darauf hinweisen, wie ein eingegebener Wert aussehen könnte, nicht das Feld erklären oder zur Eingabe auffordern.

Platzhalter sind nicht nur für Screenreader unzugänglich: Sobald Benutzer Text in das Formularsteuerelement eingeben oder bereits ein Wert vorhanden ist, verschwindet der Platzhalter. Browser mit automatischer Seitenübersetzung überspringen bei der Übersetzung möglicherweise Attribute, sodass der placeholder unter Umständen nicht übersetzt wird.

Clientseitige Validierung

Wie oben im Abschnitt UI-Pseudoklassen beschrieben, können Sie Eingabefelder mit CSS anhand ihres aktuellen Zustands über :valid oder :invalid gestalten. Darüber hinaus validiert der Browser Formulareingaben clientseitig, wenn versucht wird, ein Formular zu übermitteln. Besteht ein Formularsteuerelement die Constraint Validation nicht, zeigen unterstützende Browser beim ersten ungültigen Steuerelement eine Fehlermeldung an. Dabei wird entweder eine Standardmeldung für die Fehlerart oder eine von Ihnen festgelegte Meldung angezeigt.

Einige Eingabetypen und Attribute schränken die gültigen Werte eines Eingabefelds ein. Beispielsweise erlaubt <input type="number" min="2" max="10" step="2"> nur die Zahlen 2, 4, 6, 8 und 10. Es können verschiedene Fehler auftreten: rangeUnderflow, wenn der Wert kleiner als 2 ist; rangeOverflow, wenn er größer als 10 ist; stepMismatch, wenn er zwar zwischen 2 und 10 liegt, aber keine gerade ganze Zahl ist und somit die Anforderungen des Attributs step nicht erfüllt; oder typeMismatch, wenn der Wert keine Zahl ist.

Bei Eingabetypen mit einem periodischen Wertebereich – deren Werte nach dem höchsten möglichen Wert wieder am Anfang beginnen, statt dort zu enden – können die Werte der Eigenschaften max und min vertauscht sein. Das bedeutet, dass der zulässige Bereich bei min beginnt, über den höchsten Wert hinaus beim niedrigsten möglichen Wert fortgesetzt wird und bei max endet. Dies ist besonders bei Datums- und Uhrzeitangaben nützlich, etwa wenn Sie einen Zeitraum von 20 Uhr bis 8 Uhr zulassen möchten:

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

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

Wenn ein Formularsteuerelement kein Attribut required hat, ist ein fehlender Wert beziehungsweise eine leere Zeichenfolge nicht ungültig. Mit Ausnahme von required führt eine leere Zeichenfolge auch dann nicht zu einem Fehler, wenn die oben genannten Attribute vorhanden sind.

Wir können die zulässigen Werte begrenzen. Unterstützende Browser validieren diese Formularwerte dann selbst und informieren Benutzer bei der Übermittlung über Fehler.

Zusätzlich zu den in der Tabelle beschriebenen Fehlern enthält die Schnittstelle validityState die schreibgeschützten booleschen Eigenschaften badInput, valid und customError. Das Validitätsobjekt umfasst:

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

Bei jeder dieser booleschen Eigenschaften zeigt true an, dass der jeweilige Grund für eine fehlgeschlagene Validierung vorliegt. Eine Ausnahme ist die Eigenschaft valid: Sie ist true, wenn der Wert des Elements alle Anforderungen erfüllt.

Liegt ein Fehler vor, informieren unterstützende Browser die Benutzer und verhindern die Formularübermittlung. Beachten Sie: Ist eine benutzerdefinierte Fehlermeldung auf einen Truthy-Wert gesetzt – also auf etwas anderes als eine leere Zeichenfolge oder null –, wird die Formularübermittlung verhindert. Gibt es keine benutzerdefinierte Fehlermeldung und ist keine der anderen Fehlereigenschaften true, ist valid true und das Formular kann übermittelt werden.

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

Die letzte Zeile, die die benutzerdefinierte Validierungsmeldung auf eine leere Zeichenfolge setzt, ist entscheidend. Macht ein Benutzer einen Fehler und wird eine Validierungsmeldung gesetzt, kann das Formular trotz später gültiger Werte erst wieder übermittelt werden, wenn die Meldung null ist.

Beispiel für eine benutzerdefinierte Validierungsfehlermeldung

Wenn Sie bei einer fehlgeschlagenen Validierung eine eigene Fehlermeldung anzeigen möchten, müssen Sie die Constraint Validation API verwenden, die für <input>-Elemente und verwandte Elemente verfügbar ist. Betrachten 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>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

Die grundlegenden HTML-Funktionen zur Formularvalidierung zeigen hier eine Standardfehlermeldung an, wenn Sie versuchen, das Formular ohne einen gültigen Wert oder mit einem Wert zu übermitteln, der nicht dem pattern entspricht.

Wenn Sie stattdessen eigene Fehlermeldungen anzeigen möchten, können Sie JavaScript wie im folgenden Beispiel 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 folgendermaßen dargestellt:

Kurz zusammengefasst:

• Jedes Mal, wenn sich der Wert des Eingabeelements ändert, prüfen wir seine Gültigkeit, indem wir im Handler des input-Ereignisses die Methode checkValidity() ausführen.
• Ist der Wert ungültig, wird ein invalid-Ereignis ausgelöst und dessen Handler ausgeführt. Dort bestimmen wir mit einem if ()-Block, ob der Wert wegen eines leeren Felds oder wegen einer Abweichung vom Muster ungültig ist, und legen eine benutzerdefinierte Validierungsfehlermeldung fest.
• Ist der Eingabewert beim Drücken der Schaltfläche zum Übermitteln ungültig, wird daraufhin eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Ist er gültig, wird das Formular wie erwartet übermittelt. Dazu muss die benutzerdefinierte Validierungsfehlermeldung zurückgesetzt werden, indem setCustomValidity() mit einer leeren Zeichenfolge aufgerufen wird. Deshalb tun wir dies bei jedem input-Ereignis. Andernfalls würde ein Eingabefeld mit einer zuvor festgelegten Fehlermeldung auch dann noch als ungültig gelten, wenn es bei der Übermittlung inzwischen einen gültigen Wert enthält.

Lokalisierung

Welche Eingaben für bestimmte <input>-Typen zulässig sind, hängt von der Locale ab. In manchen Locales ist 1,000.00 eine gültige Zahl, während dieselbe Zahl in anderen als 1.000,00 eingegeben werden muss.

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

• Zunächst wird die Sprache aus einem lang-/xml:lang-Attribut des Elements oder eines seiner übergeordneten Elemente verwendet.
• Dann wird die Sprache aus einem etwaigen Content-Language-HTTP-Header verwendet.
• Ist keine Sprache angegeben, wird die Locale des Browsers verwendet.

Barrierefreiheit

Beschriftungen

Wenn Sie Eingabefelder einbinden, müssen Sie für die Barrierefreiheit auch Beschriftungen hinzufügen. Nur so können Menschen, die assistive Technologien verwenden, den Zweck eines Eingabefelds erkennen. Zudem erhält das zugehörige Formularsteuerelement den Fokus, wenn seine Beschriftung angeklickt oder berührt wird. Das verbessert auch für sehende Benutzer die Zugänglichkeit und Bedienbarkeit, weil die anklickbare beziehungsweise berührbare Fläche zum Aktivieren des Steuerelements größer wird. Besonders bei kleinen Optionsfeldern und Kontrollkästchen ist das hilfreich oder sogar notwendig. Allgemeine Informationen finden Sie unter Beschriftungen.

Das folgende Beispiel zeigt, wie Sie ein <label> wie oben beschrieben mit einem <input>-Element verknüpfen. Dazu benötigt das <input> ein Attribut id. Das <label> benötigt ein Attribut for mit demselben Wert wie die id des Eingabefelds.

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

Größe

Interaktive Elemente wie Formulareingabefelder sollten eine ausreichend große Fläche bieten, damit sie sich leicht aktivieren lassen. Das hilft unter anderem Menschen mit motorischen Einschränkungen und Personen, die weniger präzise Eingabemethoden wie einen Eingabestift oder ihre Finger verwenden. Empfohlen wird eine interaktive Mindestgröße von 44 × 44 CSS-Pixeln.

• Erfolgskriterium 2.5.5 verstehen: Zielgröße | W3C Understanding WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Touch-Ziele – The A11Y Project

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Eigenschaft appearance
• Ihr erstes HTML-Formular
• Anleitung zur Strukturierung eines HTML-Formulars
• Native Formularsteuerelemente
• Formulardaten senden
• Constraint Validation für Formulare
• HTML-Formulare gestalten