Das HTML-Element <input>

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 ist das oben anhand von Beispielen beschriebene Attribut type. Da jedes <input>-Element unabhängig von seinem Typ auf der Schnittstelle HTMLInputElement basiert, besitzen technisch gesehen alle dieselben Attribute. Tatsächlich wirken sich die meisten Attribute jedoch nur auf bestimmte Eingabetypen aus. Zudem hängt die Wirkung mancher Attribute vom jeweiligen Eingabetyp ab.

Dieser Abschnitt enthält zunächst eine Tabelle aller Attribute mit kurzen Beschreibungen. Anschließend werden die Attribute und die Eingabetypen, für die sie gelten, genauer erläutert. Attribute, die für die meisten oder alle Eingabetypen gelten, werden weiter unten ausführlicher beschrieben. Attribute, die nur für bestimmte Eingabetypen gelten oder bei einem bestimmten Typ ein besonderes Verhalten haben, sind dagegen auf den Referenzseiten dieser Typen dokumentiert.

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

Nach den Beschreibungen der standardisierten Attribute werden einige zusätzliche, 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 einen Alternativtext für das Bild bereit, der angezeigt wird, wenn die Bilddatei unter src fehlt oder nicht geladen werden kann. Siehe den Eingabetyp image.

autocapitalize

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

autocomplete

(Kein boolesches Attribut!) Das Attribut autocomplete erwartet eine durch Leerzeichen getrennte Zeichenfolge, die beschreibt, welche Art der automatischen Vervollständigung das Eingabefeld gegebenenfalls bieten soll. Typischerweise werden dafür zuvor in dasselbe Feld eingegebene Werte wiederverwendet; es sind aber auch komplexere Formen möglich. Beispielsweise könnte ein Browser die Kontaktliste eines Geräts verwenden, 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 hat keine Wirkung bei Eingabetypen, die weder numerische Daten noch Text zurückgeben. Es gilt für alle Eingabetypen außer checkbox, radio, file und den Schaltflächentypen.

Weitere Informationen, unter anderem zur Sicherheit von Passwörtern 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 automatisch den Fokus erhalten soll, sobald die Seite geladen ist oder der <dialog>, in dem sich das Element befindet, 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. Wenn es mehreren Elementen zugewiesen wird, erhält das erste dieser Elemente den Fokus.

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

Warnung: Das automatische Fokussieren eines Formularsteuerelements kann Menschen mit Sehbehinderungen, 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 autofocus verwenden. Das automatische Fokussieren eines Steuerelements kann dazu führen, dass die Seite beim Laden scrollt. Auf manchen Touch-Geräten kann dadurch außerdem die Bildschirmtastatur eingeblendet werden. Ein Screenreader liest zwar die Beschriftung des fokussierten Formularsteuerelements vor, kündigt davor aber nichts an. Auch sehenden Benutzern kleiner Geräte kann dadurch der Kontext aus den vorhergehenden Inhalten entgehen.

capture

Das Attribut capture wurde in der HTML-Media-Capture-Spezifikation eingeführt und gilt nur für den Eingabetyp file. Es legt fest, welches Medium – Mikrofon, Video oder Kamera – in unterstützten Szenarien verwendet werden soll, um eine neue Datei für den Upload über das 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 das Optionsfeld innerhalb der Gruppe gleichnamiger Optionsfelder ausgewählt ist. Bei checkbox gibt es an, dass das Kontrollkästchen beim Laden der Seite standardmäßig ausgewählt ist. Es zeigt nicht an, ob das Kontrollkästchen aktuell ausgewählt ist: Ändert sich dessen Zustand, wird diese Änderung nicht im HTML-Attribut widergespiegelt. (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-Wert fruit und den value-Wert cherry und ist es ausgewählt, enthalten die übermittelten Formulardaten fruit=cherry. Ist es nicht ausgewählt, erscheint es überhaupt nicht in den Formulardaten. Der Standardwert von value ist bei Kontrollkästchen und Optionsfeldern 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 Aufzählungswerte sind:

• "limited-srgb": Die Farbe liegt im sRGB-Farbraum. Dazu gehören Werte von rgb(), hsl(), hwb() und <hex-color>. Der Farbwert ist auf 8 Bit pro r-, g- und b-Komponente begrenzt. Dies ist der Standardwert.
• "display-p3": Der Display-P3-Farbraum, beispielsweise 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. Es ermöglicht, die Schreibrichtung des Elements mit dem Formular zu übermitteln. 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 die vom Browser festgelegte Schreibrichtung ltr oder rtl der 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 Absenden des obigen Formulars werden sowohl das Paar aus name und value, fruit=cherry, als auch das Paar aus dirname und Schreibrichtung, 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 üblicherweise ausgegraut oder auf andere Weise als nicht verfügbar gekennzeichnet.

Deaktivierte Eingabefelder empfangen insbesondere kein click-Ereignis und werden nicht mit dem Formular übermittelt.

Hinweis: Obwohl die Spezifikation dies nicht verlangt, speichert Firefox den dynamisch gesetzten Deaktivierungszustand eines <input> standardmäßig ü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, also sein übergeordnetes Formular. Ist ein Wert vorhanden, muss er mit der id eines <form>-Elements im selben Dokument übereinstimmen. Fehlt das Attribut, ist das <input>-Element gegebenenfalls dem nächstgelegenen umschließenden Formular zugeordnet.

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

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, die als grafische Schaltfläche zum Absenden angezeigt wird. Siehe den Eingabetyp image.

id

Dieses globale Attribut gilt für alle Elemente einschließlich aller Eingabetypen. Es legt eine Kennung (ID) fest, die im gesamten Dokument eindeutig sein muss. Sie dient dazu, das Element bei Verknüpfungen zu identifizieren. Ihr Wert wird als Wert des Attributs for eines <label> verwendet, um die Beschriftung mit dem Formularsteuerelement zu verknüpfen. Siehe <label>.

inputmode

Dieses globale Attribut gilt für alle Elemente und gibt Browsern einen Hinweis darauf, welche Bildschirmtastatur beim Bearbeiten des Elements oder seines Inhalts verwendet werden soll. Mögliche Werte sind none, text, tel, url, email, numeric, decimal und search.

list

Der Wert des Attributs list sollte der id eines <datalist>-Elements im selben Dokument entsprechen. Das <datalist> enthält vordefinierte Werte, die Benutzern für dieses Eingabefeld vorgeschlagen werden. Werte, die nicht mit dem type kompatibel sind, erscheinen nicht unter den Vorschlägen. Es handelt sich um Vorschläge, nicht um Vorgaben: Benutzer können einen Wert aus der Liste wählen oder einen anderen eingeben.

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

Laut Spezifikation wird list von hidden, password, checkbox, radio, file und den Schaltflächentypen nicht unterstützt.

Je nach Browser wird möglicherweise eine vorgeschlagene Farbpalette, eine Skala entlang eines Schiebereglers oder ein Eingabefeld angezeigt, das sich wie ein <select> öffnet, aber auch nicht aufgeführte Werte zulässt. Informationen zu den anderen Eingabetypen finden Sie in der Browser-Kompatibilitätstabelle.

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, besteht das Element die Einschränkungsvalidierung nicht. Ist der Wert von max keine Zahl, hat das Element keinen Höchstwert.

Es gibt einen Sonderfall: Bei periodischen Datentypen wie Datums- oder Uhrzeitwerten darf max kleiner als min sein. Das bedeutet, dass der Bereich über seinen Anfang hinausreichen kann. So lässt sich beispielsweise ein Zeitbereich von 22:00 Uhr bis 04:00 Uhr angeben.

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. Fehlt maxlength oder ist sein Wert ungültig, hat das Feld keine maximale Länge. Der Wert muss außerdem mindestens so groß wie minlength sein.

Überschreitet die Länge des eingegebenen Texts maxlength UTF-16-Codeeinheiten, besteht das Eingabefeld die Einschränkungsvalidierung nicht. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als maxlength erlaubt. Die Einschränkungsvalidierung 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. Liegt der im Element eingegebene value darunter, besteht das Element die Einschränkungsvalidierung nicht. Ist der Wert von min keine Zahl, hat das Element keinen Mindestwert.

Dieser Wert muss kleiner oder gleich dem Wert von max sein. Ist min vorhanden, aber ohne Wert oder mit einem ungültigen Wert angegeben, wird kein Mindestwert angewendet. Ist min gültig und ein nicht leerer Eingabewert kleiner als der zulässige Mindestwert, verhindert die Einschränkungsvalidierung das Absenden des Formulars. Weitere Informationen finden Sie unter Clientseitige Validierung.

Es gibt einen Sonderfall: Bei periodischen Datentypen wie Datums- oder Uhrzeitwerten darf max kleiner als min sein. Das bedeutet, dass der Bereich über seinen Anfang hinausreichen kann. So lässt sich beispielsweise ein Zeitbereich von 22:00 Uhr bis 04:00 Uhr angeben.

minlength

Gilt für text, search, url, tel, email und password und legt die minimale Lä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 maxlength ist. Fehlt minlength oder ist sein Wert ungültig, hat das Eingabefeld keine Mindestlänge.

Unterschreitet die Länge des eingegebenen Texts minlength UTF-16-Codeeinheiten, besteht das Eingabefeld die Einschränkungsvalidierung nicht und das Formular kann nicht abgesendet werden. Die Einschränkungsvalidierung 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 email-Feld mehrere durch Kommas getrennte E-Mail-Adressen eingeben oder im file-Eingabefeld mehrere Dateien auswählen. Siehe die Eingabetypen email und file.

name

Eine Zeichenfolge, die den Namen des Eingabesteuerelements angibt. Dieser Name wird beim Absenden der Formulardaten zusammen mit dem Wert des Steuerelements übermittelt.

Betrachten Sie name als erforderliches Attribut, auch wenn es formal nicht erforderlich ist. Wenn für ein Eingabefeld kein name angegeben ist oder name leer ist, wird sein Wert nicht mit dem Formular übermittelt. Deaktivierte Steuerelemente, nicht ausgewählte Optionsfelder und Kontrollkästchen sowie Schaltflächen zum Zurücksetzen werden ebenfalls nicht übermittelt.

Es gibt zwei Sonderfälle:

1. _charset_: Wird dieser Wert als Name eines <input>-Elements vom Typ hidden verwendet, setzt der User Agent dessen value automatisch auf die für die Formularübermittlung verwendete Zeichenkodierung.
2. isindex: Aus historischen Gründen ist der Name isindex nicht zulässig.

Bei Optionsfeldern führt das Attribut name zu einem besonderen Verhalten.

Innerhalb einer Gruppe gleichnamiger Optionsfelder kann jeweils nur eines ausgewählt sein. Wenn Sie ein anderes Optionsfeld derselben Gruppe auswählen, wird das zuvor ausgewählte automatisch abgewählt. Beim Absenden des Formulars wird der Wert des ausgewählten Optionsfelds zusammen mit dem Namen übermittelt.

Wenn Sie mit der Tabulatortaste zu einer Gruppe gleichnamiger Optionsfelder navigieren und eines davon ausgewählt ist, erhält dieses den Fokus. Stehen die Optionsfelder im Quelltext nicht direkt nebeneinander, wird die Gruppe beim ersten Optionsfeld erreicht; nicht ausgewählte Felder werden dabei übersprungen. Ist kein Feld ausgewählt, erhält das erste Optionsfeld der gleichnamigen Gruppe den Fokus.

Sobald eines der Optionsfelder einer Gruppe den Fokus hat, können Sie mit den Pfeiltasten zwischen allen gleichnamigen Optionsfeldern navigieren, auch wenn sie im Quelltext nicht direkt nebeneinanderstehen.

Erhält ein Eingabeelement einen name, wird dieser Name zu einer Eigenschaft von HTMLFormElement.elements des zugehörigen Formulars. Wenn Sie ein Eingabefeld mit name="guest" und ein weiteres mit name="hat-size" haben, können Sie 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 enthält guestName das HTMLInputElement für das Feld guest und hatSize das Objekt für das Feld hat-size.

Warnung: Geben Sie Formularelementen keinen name, der einer integrierten Eigenschaft des Formulars entspricht. Andernfalls überschreiben Sie die vordefinierte Eigenschaft oder Methode mit einer Referenz auf das entsprechende Eingabefeld.

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, um die Einschränkungsvalidierung zu bestehen. Es muss sich um einen gültigen regulären JavaScript-Ausdruck handeln, wie ihn der Typ RegExp verwendet und wie er in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist. Setzen Sie keine Schrägstriche um den Mustertext. Beim Kompilieren des regulären Ausdrucks gilt:

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

Ist pattern vorhanden, aber ohne Wert oder mit einem ungültigen Wert angegeben, wird kein regulärer Ausdruck angewendet und das Attribut vollständig ignoriert. Ist das Muster gültig und ein nicht leerer Wert entspricht ihm nicht, verhindert die Einschränkungsvalidierung das Absenden des Formulars. Ist multiple vorhanden, wird der kompilierte reguläre Ausdruck auf jeden durch Kommas getrennten Wert angewendet.

Hinweis: Wenn Sie pattern verwenden, erläutern Sie das erwartete Format in einem Text in der Nähe des Eingabefelds. Sie können zusätzlich ein Attribut title angeben, das die Anforderungen des Musters beschreibt; die meisten Browser zeigen dessen Wert als Tooltip an. Die sichtbare Erläuterung ist für die Barrierefreiheit erforderlich. Der Tooltip ist lediglich 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 zum erwarteten Datentyp bestehen, nicht aus einer ausführlichen Erklärung oder Aufforderung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten. Soll ein Feld beispielsweise den Vornamen erfassen und lautet seine Beschriftung „Vorname“, wäre „z. B. Mustafa“ ein geeigneter Platzhalter.

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

popovertarget

Macht ein <input type="button">-Element zu einer Schaltfläche zur Steuerung eines Popovers. Als Wert wird die ID des zu steuernden Popover-Elements angegeben. Weitere Informationen finden Sie auf der Übersichtsseite zur Popover API. Die Verknüpfung eines Popovers mit seiner auslösenden Schaltfläche über popovertarget hat zwei weitere nützliche Auswirkungen:

• Der Browser stellt implizit eine Beziehung über aria-details und aria-expanded zwischen Popover und auslösender Schaltfläche her. Wenn das Popover angezeigt wird, ordnet er es außerdem an einer logischen Stelle in der Tastatur-Fokusreihenfolge ein. Das verbessert die Zugänglichkeit für Benutzer von Tastaturen und unterstützenden Technologien (siehe auch Barrierefreiheitsfunktionen von Popovers).
• Der Browser erstellt eine implizite Ankerreferenz zwischen beiden Elementen. Dadurch lassen sich Popovers bequem mithilfe der CSS-Ankerpositionierung relativ zu ihren Steuerelementen platzieren. Weitere Informationen finden Sie unter Ankerpositionierung von Popovers.

popovertargetaction

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

"hide"

Die Schaltfläche verbirgt ein sichtbares 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 dem sichtbaren und dem verborgenen Zustand des Popovers. Ist es verborgen, wird es angezeigt; ist es sichtbar, wird es verborgen. Wenn popovertargetaction fehlt, ist "toggle" die Standardaktion.

readonly

Ein boolesches Attribut, das angibt, dass Benutzer den Wert des Eingabefelds nicht bearbeiten können. 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. Ist es vorhanden, müssen Benutzer einen Wert für das Eingabefeld angeben, bevor das zugehörige Formular abgesendet werden kann. Unterstützt wird es von Eingabefeldern der Typen text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio und file.

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 groß das Eingabefeld dargestellt wird. Im Wesentlichen ähnelt das Ergebnis dem Setzen der CSS-Eigenschaft width, allerdings gibt es einige Besonderheiten. Die Einheit hängt vom Eingabetyp ab. Bei password und text entspricht der Wert einer Anzahl von Zeichen beziehungsweise em-Einheiten; der Standardwert ist 20. Bei den anderen Typen sind es Pixel beziehungsweise px-Einheiten. Die CSS-Eigenschaft width hat Vorrang vor 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 Absenden 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 zulässige Schrittweite festlegt. Gültig sind nur Werte, die um eine ganze Anzahl von Schritten vom Ausgangswert entfernt sind. Als Ausgangswert dient min, falls angegeben, andernfalls value, oder 0, wenn keines der beiden Attribute vorhanden ist. Eine Ausnahme bildet week: Hier ist der standardmäßige Ausgangswert −259.200.000, was dem Beginn der Woche 1970-W01 entspricht.

Wird step nicht ausdrücklich angegeben:

• Für number und range ist der Standardwert von step 1.
• Jeder Datums- und Uhrzeit-Eingabetyp hat einen passenden Standardwert für step. Siehe die jeweiligen Referenzseiten: date, datetime-local, month, time und week.

Der Wert muss eine positive Zahl – ganzzahlig oder als Gleitkommazahl – oder der besondere Wert any sein. any bedeutet, dass keine Schrittweite vorgegeben ist und jeder Wert zulässig 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 wie bei <input type="number"> weggelassen, sind alle ganzen Zahlen gültig, Gleitkommazahlen wie 4.2 jedoch nicht, da step standardmäßig 1 ist. Damit 4.2 gültig ist, müsste step auf any, 0.1 oder 0.2 gesetzt sein, oder min müsste auf eine Zahl mit der Nachkommastelle .2 gesetzt werden, etwa <input type="number" min="-5.2">.

Hinweis: Wenn die von Benutzern eingegebenen Daten nicht der festgelegten Schrittweite entsprechen, gilt der Wert bei der Einschränkungsvalidierung als ungültig und entspricht der Pseudoklasse :invalid.

Weitere Informationen finden Sie unter Clientseitige Validierung.

switch

Das boolesche Attribut switch gilt nur für checkbox-Eingabefelder und gibt an, 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

Dieses globale ganzzahlige Attribut gilt für alle Elemente einschließlich aller Eingabetypen. Es gibt an, ob ein Element den Fokus erhalten und an der sequenziellen Tastaturnavigation teilnehmen kann. Da alle Eingabetypen außer hidden fokussierbar sind, sollte dieses Attribut nicht für Formularsteuerelemente verwendet werden. Andernfalls müssten Sie die Fokusreihenfolge sämtlicher Elemente im Dokument verwalten und könnten bei Fehlern Bedienbarkeit und Barrierefreiheit beeinträchtigen.

title

Dieses globale Attribut gilt für alle Elemente einschließlich aller Eingabetypen. Es enthält einen Text mit ergänzenden Informationen über das Element. Solche 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 dienen. Verwenden Sie stattdessen ein <label>-Element, dessen Attribut for auf die id des Formularsteuerelements gesetzt ist. Siehe Beschriftungen weiter unten.

type

Eine Zeichenfolge, die den darzustellenden Steuerelementtyp angibt. Um beispielsweise ein Kontrollkästchen zu erstellen, verwenden Sie den Wert checkbox. Fehlt das Attribut oder ist der Wert unbekannt, wird text verwendet und ein einfaches Textfeld erstellt.

Die zulässigen Werte sind oben unter Eingabetypen aufgeführt.

value

Der Wert des Eingabesteuerelements. Wird er im HTML angegeben, ist er der Anfangswert. Anschließend lässt er sich jederzeit über die Eigenschaft value des entsprechenden HTMLInputElement-Objekts mit JavaScript ändern oder abrufen. Das Attribut value ist immer optional, sollte bei checkbox, radio und hidden jedoch als erforderlich betrachtet werden.

webkitdirectory

Das boolesche Attribut webkitdirectory gibt an, dass Benutzer in der Dateiauswahl nur Verzeichnisse auswählen können. Weitere Einzelheiten und Beispiele finden Sie unter HTMLInputElement.webkitdirectory.

Hinweis: webkitdirectory ist in der File and Directory Entries API definiert. Der Name stammt daher, dass es ursprünglich eine Chrome-spezifische API war. Mittlerweile ist es 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 Absenden 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 sie nur verwenden, wenn es sich nicht vermeiden lässt.

incremental

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

Fehlt incremental, wird das search-Ereignis nur gesendet, wenn Benutzer ausdrücklich eine Suche starten, beispielsweise 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 des Schiebereglers fest. Mögliche Werte sind horizontal für eine waagerechte und vertical für eine senkrechte Darstellung. Einen modernen Ansatz für senkrechte Formularsteuerelemente finden Sie unter Senkrechte Formularsteuerelemente erstellen.

results

Mit dem nur von Safari unterstützten numerischen Attribut results können Sie die maximale Anzahl der Einträge überschreiben, die im browserseitigen Dropdown-Menü des <input>-Elements mit früheren Suchanfragen angezeigt werden.

Der Wert muss eine nicht negative Dezimalzahl sein. Fehlt er oder ist er ungültig, verwendet der Browser seine standardmäßige Höchstzahl.

Methoden

Die folgenden Methoden stellt die Schnittstelle HTMLInputElement bereit, die <input>-Elemente im DOM repräsentiert. Zusätzlich sind die Methoden der übergeordneten Schnittstellen HTMLElement, Element, Node und EventTarget verfügbar.

checkValidity()

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

reportValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht. Andernfalls gibt die Methode false zurück, löst am Element ein invalid-Ereignis aus und meldet Benutzern das Problem, sofern das Ereignis nicht abgebrochen wird.

select()

Wählt den gesamten Inhalt des <input>-Elements aus, sofern dessen Inhalt auswählbar ist. Bei Elementen ohne auswählbaren Textinhalt, etwa einem grafischen Farbwähler oder einer Datumsauswahl, hat die Methode keine Wirkung.

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 die bestehende Auswahl auswirkt.

setSelectionRange()

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

showPicker()

Zeigt die browserseitige Auswahloberfläche des Eingabeelements an, die normalerweise bei dessen Auswahl erscheint, hier jedoch durch einen Schaltflächenklick oder eine andere Benutzerinteraktion ausgelöst wird.

stepDown()

Verringert den Wert eines numerischen Eingabefelds standardmäßig um einen Schritt oder um die angegebene Anzahl von Schritten.

stepUp()

Erhöht den Wert eines numerischen Eingabefelds um einen Schritt oder um die angegebene Anzahl von Schritten.

CSS

Eingabefelder sind ersetzte Elemente und besitzen daher einige Eigenschaften, die nicht für andere Elemente als Formularelemente gelten. CSS-Selektoren können Formularsteuerelemente anhand von Merkmalen ihrer Benutzeroberfläche gezielt auswählen; diese Selektoren werden auch UI-Pseudoklassen genannt. Eingabeelemente lassen sich außerdem anhand ihres Typs mit Attributselektoren auswählen. Daneben sind einige CSS-Eigenschaften besonders nützlich.

UI-Pseudoklassen

Beispiel für Pseudoklassen

Die Beschriftung eines Kontrollkästchens lässt sich abhängig davon gestalten, ob das Kästchen ausgewählt ist. In diesem Beispiel legen wir color und font-weight für das <label> fest, das unmittelbar auf ein ausgewähltes Eingabefeld folgt. Ist input nicht ausgewählt, werden keine Stile angewendet.

<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 Sie Formularsteuerelemente anhand ihres type auswählen. 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 erscheint Platzhaltertext halbtransparent oder hellgrau. Das Pseudoelement ::placeholder repräsentiert den placeholder-Text eines Eingabefelds. Es lässt sich mit einer begrenzten Auswahl von CSS-Eigenschaften gestalten.

::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 legen Sie die Farbe des Texteingabecursors fest:

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 steuern Sie, wie die Größe von Formulareingabefeldern bestimmt wird. Standardmäßig erhalten sie eine bevorzugte Größe. Mit dieser Eigenschaft können Sie das Standardverhalten überschreiben, sodass sich die Größe der Formularsteuerelemente an ihren Inhalt anpasst.

Typischerweise wird die Eigenschaft verwendet, um Formularfelder zu erstellen, die sich zunächst eng an ihren Inhalt anschmiegen und mit zusätzlichem Text wachsen. Das funktioniert mit Eingabetypen für direkte Texteingaben, etwa 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 lassen sich seine Größe und Position innerhalb seines Rahmens mit den CSS-Eigenschaften object-position und object-fit anpassen.

Gestaltung

Weitere Informationen zum Einfärben von HTML-Elementen finden Sie unter:

• Farben mit CSS auf HTML-Elemente anwenden.

Siehe auch:

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

Zusätzliche Funktionen

Beschriftungen

Beschriftungen werden benötigt, um ein <input> mit erläuterndem Text zu verknüpfen. Das Element <label> stellt Informationen zu einem Formularfeld bereit, die – abgesehen von möglichen Layoutaspekten – immer sinnvoll sind. Es ist stets empfehlenswert, mit einem <label> zu erläutern, was in ein <input> oder <textarea> eingegeben werden soll.

Zugeordnete Beschriftungen

Die semantische Verknüpfung von <input>- und <label>-Elementen hilft unterstützenden Technologien wie Screenreadern. Wenn Sie beide über das Attribut for von <label> verbinden, können Screenreader das Eingabefeld genauer beschreiben.

Einfacher Text neben dem <input>-Element reicht nicht aus. Für Bedienbarkeit und Barrierefreiheit ist stattdessen ein implizit oder explizit zugeordnetes <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.

Eine Beschriftung stellt nicht nur einen zugänglichen Namen bereit, sondern vergrößert auch die Fläche, die Benutzer mit der Maus anklicken oder auf einem Touchscreen berühren können. Ist ein <label> mit einem <input> verknüpft, fokussiert ein Klick auf eines der beiden das <input>. Bei einfachem Text, der nur als Beschriftung dienen soll, geschieht das nicht. Eine größere Aktivierungsfläche ist besonders für Menschen mit motorischen Einschränkungen hilfreich.

Als Webentwickler sollten wir niemals voraussetzen, 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 aufgrund anderer Denkweisen oder Umstände Ihre Formulare ohne klare, angemessen dargestellte Beschriftungen ganz anders verstehen als Sie.

Platzhalter sind nicht barrierefrei

Mit dem Attribut placeholder legen Sie Text fest, der im Inhaltsbereich eines leeren <input>-Elements erscheint. Das Verständnis eines Formulars darf niemals vom Platzhalter abhängen. Er ist keine Beschriftung und sollte nicht als Ersatz dafür verwendet werden. Ein Platzhalter gibt einen Hinweis darauf, wie ein Eingabewert aussehen sollte; er dient nicht als Erklärung oder Aufforderung.

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

Clientseitige Validierung

Wie oben unter UI-Pseudoklassen beschrieben, können Sie Eingabefelder mit CSS anhand ihres aktuellen Zustands über :valid oder :invalid gestalten. Darüber hinaus bietet der Browser eine clientseitige Validierung, wenn versucht wird, ein Formular abzusenden. Besteht dabei ein Formularsteuerelement die Einschränkungsvalidierung nicht, zeigen unterstützende Browser am ersten ungültigen Steuerelement eine Fehlermeldung an: entweder eine Standardmeldung zum Fehlertyp oder eine von Ihnen festgelegte Meldung.

Einige Eingabetypen und Attribute schränken die gültigen Werte ein. <input type="number" min="2" max="10" step="2"> erlaubt beispielsweise nur die Zahlen 2, 4, 6, 8 und 10. Verschiedene Fehler sind möglich: rangeUnderflow bei einem Wert unter 2, rangeOverflow bei einem Wert über 10, stepMismatch bei einer Zahl zwischen 2 und 10, die keine gerade ganze Zahl ist und damit step nicht entspricht, oder typeMismatch, wenn der Wert keine Zahl ist.

Bei Eingabetypen mit einem periodischen Wertebereich – bei denen nach dem höchstmöglichen Wert wieder der niedrigste folgt – dürfen die Werte der Eigenschaften max und min vertauscht sein. Das bedeutet, dass der zulässige Bereich bei min beginnt, nach dem höchstmöglichen Wert beim niedrigsten fortgesetzt wird und bei max endet. Das ist besonders für Datums- und Uhrzeitwerte nützlich, etwa wenn Sie einen Bereich von 20:00 Uhr bis 08:00 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 ValidityState-Fehler führen:

Wenn ein Formularsteuerelement nicht das Attribut required besitzt, ist ein fehlender Wert beziehungsweise eine leere Zeichenfolge nicht ungültig. Selbst wenn die oben genannten Attribute vorhanden sind, führt eine leere Zeichenfolge – mit Ausnahme von required – zu keinem Fehler.

Wir können einschränken, welche Werte akzeptiert werden. Unterstützende Browser validieren diese Formularwerte selbst und weisen Benutzer beim Absenden auf Fehler hin.

Neben den in der Tabelle beschriebenen Fehlern enthält die Schnittstelle validityState die schreibgeschützten booleschen Eigenschaften badInput, valid und customError. Das Gültigkeitsobjekt umfasst:

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

Bei jeder dieser booleschen Eigenschaften bedeutet true, dass der jeweilige mögliche Fehlergrund vorliegt. Die Ausnahme ist valid: Diese Eigenschaft ist true, wenn der Wert des Elements alle Einschränkungen erfüllt.

Bei einem Fehler weisen unterstützende Browser Benutzer darauf hin und verhindern das Absenden des Formulars. Beachten Sie: Ist ein benutzerdefinierter Fehler auf einen als wahr ausgewerteten Wert gesetzt – also auf etwas anderes als eine leere Zeichenfolge oder null –, wird das Absenden verhindert. Ist keine benutzerdefinierte Fehlermeldung vorhanden und liefert keine der anderen Eigenschaften true, ist valid gleich true und das Formular kann abgesendet 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, in der die benutzerdefinierte Gültigkeitsmeldung auf eine leere Zeichenfolge gesetzt wird, ist entscheidend. Wenn nach einem Eingabefehler eine Fehlermeldung gesetzt bleibt, kann das Formular selbst dann nicht abgesendet werden, wenn inzwischen alle Werte gültig sind – bis die Meldung null ist.

Beispiel für einen benutzerdefinierten Validierungsfehler

Wenn Sie bei einer fehlgeschlagenen Validierung eine eigene Fehlermeldung anzeigen möchten, verwenden Sie die Constraint Validation API, die für <input>-Elemente und verwandte Elemente verfügbar ist. Betrachten Sie folgendes 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 grundlegende HTML-Formularvalidierung zeigt eine Standardfehlermeldung an, wenn Sie versuchen, das Formular ohne gültigen Wert oder mit einem Wert abzusenden, der pattern nicht entspricht.

Um stattdessen eigene Fehlermeldungen anzuzeigen, können Sie beispielsweise folgendes JavaScript 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 so dargestellt:

Kurz zusammengefasst:

• Jedes Mal, wenn sich der Wert des Eingabeelements ändert, prüfen wir seinen Gültigkeitszustand, indem wir im Handler des input-Ereignisses checkValidity() aufrufen.
• Ist der Wert ungültig, wird ein invalid-Ereignis ausgelöst und dessen Handler ausgeführt. Darin ermitteln 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 Fehlermeldung fest.
• Ist der Eingabewert beim Drücken der Schaltfläche zum Absenden ungültig, erscheint dadurch eine der benutzerdefinierten Fehlermeldungen.
• Ist der Wert gültig, wird das Formular wie erwartet abgesendet. Dazu muss die benutzerdefinierte Fehlermeldung durch einen Aufruf von setCustomValidity() mit einer leeren Zeichenfolge aufgehoben werden. Deshalb tun wir dies bei jedem input-Ereignis. Andernfalls würde ein zuvor gesetzter benutzerdefinierter Fehler das Eingabefeld beim Absenden weiterhin als ungültig kennzeichnen, obwohl es inzwischen einen gültigen Wert enthält.

Lokalisierung

Welche Eingaben für bestimmte <input>-Typen zulässig sind, hängt vom Gebietsschema ab. In manchen Gebietsschemas ist 1,000.00 eine gültige Zahl; in anderen muss dieselbe Zahl als 1.000,00 eingegeben werden.

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

• Zuerst wird die Sprache verwendet, die durch ein lang- oder xml:lang-Attribut am Element oder einem seiner übergeordneten Elemente angegeben ist.
• Danach wird die Sprache aus einem gegebenenfalls vorhandenen HTTP-Header Content-Language versucht.
• Ist keine Sprache angegeben, wird das Gebietsschema des Browsers verwendet.

Barrierefreiheit

Beschriftungen

Bei Eingabefeldern sind zugehörige Beschriftungen eine Anforderung der Barrierefreiheit. Menschen, die unterstützende Technologien verwenden, können dadurch erkennen, wozu ein Feld dient. Ein Klick oder eine Berührung der Beschriftung fokussiert außerdem das zugehörige Formularsteuerelement. Das verbessert auch für sehende Benutzer die Zugänglichkeit und Bedienbarkeit, weil die anklickbare beziehungsweise berührbare Fläche größer wird. Besonders hilfreich – und teils notwendig – ist das für die kleinen Optionsfelder und Kontrollkästchen. Weitere Informationen finden Sie unter Beschriftungen.

Das folgende Beispiel zeigt, wie Sie ein <label> auf die oben beschriebene Weise mit einem <input>-Element verknüpfen. Geben Sie dem <input> ein Attribut id. Das <label> benötigt dann 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 leicht aktiviert werden können. Das hilft unter anderem Menschen mit motorischen Einschränkungen und Menschen, 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 zum Strukturieren eines HTML-Formulars
• Native Formularsteuerelemente
• Formulardaten senden
• Einschränkungsvalidierung von Formularen
• HTML-Formulare gestalten