<input> HTML-Eingabeelement

Probieren Sie es aus

<input> Typen

Wie ein <input> funktioniert, variiert erheblich je nach Wert des type-Attributs, weshalb die verschiedenen Typen in eigenen separaten Referenzseiten behandelt werden. Wenn dieses Attribut nicht angegeben ist, wird als Standardtyp text verwendet.

Die verfügbaren Typen sind wie folgt:

Type Beschreibung Grundlegende Beispiele Veraltete Werte

button	Ein Druckknopf ohne voreingestelltes Verhalten, der den Wert des value-Attributs anzeigt, standardmäßig leer.	<input type="button" name="button" value="Button" />
checkbox	Eine Checkbox, die die Auswahl/Abwahl einzelner Werte ermöglicht.	<input type="checkbox" name="checkbox"/>
color	Ein Steuerungselement zur Auswahl einer Farbe; öffnet einen Farbwähler in unterstützenden Browsern.	<input type="color" name="color"/>
date	Ein Steuerungselement zur Eingabe eines Datums (Jahr, Monat und Tag, ohne Zeit). Öffnet einen Datumsauswähler oder numerische Räder für Jahr, Monat und Tag in unterstützenden Browsern.	<input type="date" name="date"/>
datetime-local	Ein Steuerungselement zur Eingabe eines Datums und einer Uhrzeit, ohne Zeitzone. Öffnet einen Datumsauswähler oder numerische Räder für Datumskomponenten und Zeiteingaben in unterstützenden Browsern.	<input type="datetime-local" name="datetime-local"/>
email	Ein Feld zur Bearbeitung einer E-Mail-Adresse. Sieht aus wie ein text-Eingabefeld, aber enthält Validierungsparameter und relevante Tastaturen in unterstützenden Browsern und Geräten mit dynamischen Tastaturen.	<input type="email" name="email"/>
file	Ein Steuerelement, das dem Benutzer die Auswahl einer Datei ermöglicht. Verwenden Sie das accept-Attribut, um die Arten von Dateien zu definieren, die das Steuerelement auswählen kann.	<input type="file" accept="image/*, text/*" name="file"/>
hidden	Ein Steuerelement, das nicht angezeigt wird, dessen Wert jedoch an den Server übermittelt wird. Es gibt ein Beispiel in der nächsten Spalte, aber es ist verborgen!	<input id="userId" name="userId" type="hidden" value="abc123" />
image	Ein grafischer submit-Button. Zeigt ein Bild an, das durch das src-Attribut definiert ist. Das alt-Attribut wird angezeigt, wenn das Bildsrc fehlt.	<input type="image" name="image" src="" alt="image input"/>
month	Ein Kontrollfeld zur Eingabe von Monat und Jahr, ohne Zeitzone.	<input type="month" name="month"/>
number	Ein Kontrollfeld zur Eingabe einer Zahl. Zeigt einen Spinnbutton und fügt eine Standardvalidierung hinzu. Zeigt eine numerische Tastatur auf einigen Geräten mit dynamischen Tastaturen an.	<input type="number" name="number"/>
password	Ein einzeiliges Textfeld, dessen Wert verschleiert ist. Warnt den Benutzer, wenn die Seite nicht sicher ist.	<input type="password" name="password"/>
radio	Ein Radio-Button, der es erlaubt, einen einzelnen Wert aus mehreren Auswahlmöglichkeiten mit demselben name-Wert auszuwählen.	<input type="radio" name="radio"/>
range	Ein Steuerungselement zur Eingabe einer Zahl, deren exakter Wert unwichtig ist. Wird als Bereichs-Widget angezeigt, das standardmäßig auf den Mittelwert eingestellt ist. Wird in Verbindung mit min und max verwendet, um den Bereich akzeptabler Werte zu definieren.	<input type="range" name="range" min="0" max="25"/>
reset	Ein Button, der den Inhalt des Formulars auf die Standardwerte zurücksetzt. Nicht empfohlen.	<input type="reset" name="reset"/>
search	Ein einzeiliges Textfeld zur Eingabe von Suchbegriffen. Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt. Kann ein Löschsymbol in unterstützenden Browsern enthalten, das zum Löschen des Feldes verwendet werden kann. Zeigt auf einigen Geräten mit dynamischen Tastaturen ein Suchsymbol anstelle der Eingabetaste an.	<input type="search" name="search"/>
submit	Ein Button, der das Formular absendet.	<input type="submit" name="submit"/>
tel	Ein Steuerungselement zur Eingabe einer Telefonnummer. Zeigt eine Telefon-Tastatur auf einigen Geräten mit dynamischen Tastaturen an.	<input type="tel" name="tel"/>
text	Der Standardwert. Ein einzeiliges Textfeld. Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt.	<input type="text" name="text"/>
time	Ein Steuerungselement zur Eingabe eines Zeitwerts ohne Zeitzone.	<input type="time" name="time"/>
url	Ein Feld zur Eingabe einer URL. Sieht aus wie ein text-Eingabefeld, hat jedoch Validierungsparameter und relevante Tastaturen in unterstützenden Browsern und Geräten mit dynamischen Tastaturen.	<input type="url" name="url"/>
week	Ein Steuerungselement zur Eingabe eines Datums, bestehend aus einer Wochennummer und einer Jahreszahl, ohne Zeitzone.	<input type="week" name="week"/>
datetime	Ein Steuerungselement zur Eingabe eines Datums und einer Uhrzeit (Stunde, Minute, Sekunde und Bruchteil einer Sekunde) basierend auf der UTC-Zeitzone.	<input type="datetime" name="datetime"/>

Attribute

Das <input>-Element ist aufgrund seiner Attribute so leistungsstark; das type-Attribut, das oben mit Beispielen beschrieben wurde, ist hierbei das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-Schnittstelle basiert, teilen sie technisch dasselbe Attributset. In der Realität haben jedoch die meisten Attribute nur auf eine spezifische Untergruppe von Eingabetypen eine Wirkung. Darüber hinaus wirkt sich die Art und Weise, wie einige Attribute ein Eingabeelement beeinflussen, je nach Eingabetyp unterschiedlich aus.

Dieser Abschnitt bietet eine Tabelle, die alle Attribute mit einer kurzen Beschreibung auflistet. Nach dieser Tabelle folgt eine Liste, die jedes Attribut detaillierter beschreibt, zusammen mit den Eingabetypen, mit denen sie verbunden sind. Diejenigen, die zu den meisten oder allen Eingabetypen gehören, sind weiter unten ausführlicher definiert. Attribute, die einzigartig für bestimmte Eingabetypen sind, oder Attribute, die bei allen Eingabetypen gemein sind, aber spezielle Verhaltensweisen aufweisen, wenn sie auf einem bestimmten Eingabetyp verwendet werden, werden stattdessen auf den Seiten dieser Typen dokumentiert.

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

Attribut Typ(en) Beschreibung

accept	file	Hinweis auf den erwarteten Dateityp in Datei-Upload-Steuerelementen
alpha	color	Transparenz der Farbe
alt	image	alt Attribut für den Bildtyp. Erforderlich für Barrierefreiheit
autocapitalize	alle außer url, email, und password	Steuert die automatische Großschreibung im eingegebenen Text.
autocomplete	alle außer checkbox, radio, und buttons	Hinweis für Autofill-Funktion des Formulars
capture	file	Methode der Medienaufnahme in Datei-Upload-Steuerelementen
checked	checkbox, radio	Ob der Befehl oder das Steuerelement aktiviert ist
colorspace	color	Der Farbraum, der zum Auswählen des Farbwertes verwendet werden soll
dirname	hidden, text, search, url, tel, email	Name des Formularfeldes zum Senden der Richtung des Elements bei der Formularübermittlung
disabled	alle	Ob das Steuerelement des Formulars deaktiviert ist
form	alle	Verbindet das Steuerelement mit einem Formularelement
formaction	image, submit	URL zur Verwendung für die Formularübermittlung
formenctype	image, submit	Datensatz-Codierungstyp für die Formularübermittlung
formmethod	image, submit	HTTP-Methode zur Verwendung für die Formularübermittlung
formnovalidate	image, submit	Umgehung der Formularsteuerungsvalidierung bei der Formularübermittlung
formtarget	image, submit	Browsing-Kontext für die Formularübermittlung
height	image	Entspricht dem Höhenattribut für <img>; Vertikale Dimension
list	alle außer hidden, password, checkbox, radio, und buttons	Wert des id-Attributes der <datalist> der Autovervollständigungsoptionen
max	date, month, week, time, datetime-local, number, range	Maximalwert
maxlength	text, search, url, tel, email, password	Maximale Länge (Zeichenanzahl) von value
min	date, month, week, time, datetime-local, number, range	Minimalwert
minlength	text, search, url, tel, email, password	Minimale Länge (Zeichenanzahl) von value
multiple	email, file	Boolean. Ob mehrere Werte erlaubt werden
name	alle	Name des Formularsteuerelements. Wird zusammen mit dem Wert als Name/Werte-Paar übermittelt
pattern	text, search, url, tel, email, password	Muster, das value entsprechen muss, um gültig zu sein
placeholder	text, search, url, tel, email, password, number	Text, der im Feld des Formularsteuerelements erscheint, wenn kein Wert festgelegt ist
popovertarget	button	Bezeichnet ein <input type="button"> als Steuerelement für ein Popover-Element
popovertargetaction	button	Gibt die Aktion an, die ein Popover-Steuerelement ausführen soll
readonly	alle außer hidden, range, color, checkbox, radio, und buttons	Boolean. Der Wert ist nicht bearbeitbar
required	alle außer hidden, range, color, und buttons	Boolean. Ein Wert ist erforderlich oder muss überprüft werden, damit das Formular absendbar ist
size	text, search, url, tel, email, password	Größe des Steuerelements
src	image	Entspricht dem src-Attribut für <img>; Adresse der Bildressource
step	date, month, week, time, datetime-local, number, range	Inkrementell gültige Werte
switch	checkbox	Ob das Kontrollkästchen als Schalter gerendert werden soll
type	alle	Art des Formularsteuerelements
value	alle außer image	Der Wert des Steuerelements. Bei Angabe im HTML entspricht er dem Anfangswert
width	image	Entspricht dem width-Attribut für <img>

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

Einzelne Attribute

accept

Nur gültig für den file-Eingabetyp, definiert das accept-Attribut, welche Dateitypen in einem Datei-Upload-Steuerelement auswählbar sind. Siehe den file-Eingabetyp.

alpha

Nur gültig für den color-Eingabetyp, ermöglicht das alpha-Attribut dem Endbenutzer, die Deckkraft der ausgewählten Farbe festzulegen.

alt

Gültig nur für den image-Button, bietet das alt-Attribut einen alternativen Text für das Bild, der den Wert des Attributs anzeigt, falls das Bild src fehlt oder anderweitig nicht geladen werden kann. Siehe den image-Eingabetyp.

autocapitalize

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

autocomplete

(Kein Boolean-Attribut!) Das autocomplete-Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenkette, die beschreibt, welche, wenn überhaupt, Autovervollständigungsfunktionen die Eingabe bereitstellen soll. Eine typische Implementierung von Autovervollständigung ruft frühere Werte ab, die in dasselbe Eingabefeld eingegeben wurden, aber es können komplexere Formen von Autovervollständigung existieren. Beispielsweise könnte ein Browser mit der Kontaktliste eines Geräts integrieren, um email-Adressen in einem E-Mail-Eingabefeld automatisch zu vervollständigen. Weitere Informationen zu den erlaubten Werten finden Sie unter autocomplete.

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

Weitere Informationen, einschließlich Informationen zur Passwortsicherheit und wie autocomplete für hidden leicht anders funktioniert als für andere Eingabetypen, finden Sie im Abschnitt zum autocomplete-Attribut.

autofocus

Ein Boolean-Attribut, das, falls vorhanden, anzeigt, dass die Eingabe automatisch den Fokus erhalten soll, wenn die Seite geladen ist (oder wenn der <dialog> das Element enthält, angezeigt wurde).

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

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

Verwenden Sie beim Zuweisen des autofocus-Attributs sorgfältige Überlegungen zur Barrierefreiheit. Automatisches Fokussieren auf ein Steuerelement kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann auch dynamische Tastaturen auf einigen Touch-Geräten anzeigen. Während ein Bildschirmleser die Bezeichnung des Formularsteuerelements beim Fokus ankündigt, wird der Bildschirmleser nichts vor der Bezeichnung bekannt geben, und der sehende Benutzer auf einem kleinen Gerät wird den Kontext, der durch den vorangestellten Inhalt erstellt wurde, ebenso verpassen.

capture

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

checked

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

colorspace

Nur gültig für den color-Eingabetyp, das colorspace-Attribut spezifiziert den Farbraum, der von der type="color" Eingabe verwendet wird. Mögliche numerorierbare Werte sind:

• "limited-srgb": Die Farbe befindet sich im sRGB-Farbraum. Dies umfasst rgb(), hsl(), hwb() und <hex-color> Werte. Der Farbwert ist auf 8-Bit pro r, g und b-Komponente begrenzt. Dies ist der Standardwert.
• "display-p3": Der Display P3 Farbraum, z. B. color(display-p3 1.84 -0.19 0.72 / 0.6)

dirname

Gültig für hidden, text, search, url, tel und email Eingabetypen, ermöglicht das dirname-Attribut die Einsendung der Richtung des Elements. Bei Einbeziehung, wird das Formularsteuerelement mit zwei Name/Werte-Paaren gesendet: das erste ist der name und value, und das zweite ist der Wert des dirname-Attributs als Name mit einem Wert von ltr oder rtl, wie vom Browser festgelegt.

Wenn das obige Formular gesendet wird, verursacht die Eingabe sowohl die name / value-Paarung von fruit=cherry als auch die dirname / Richtungs-Paarung von fruit-dir=ltr, die gesendet werden. Weitere Informationen finden Sie beim dirname-Attribut.

disabled

Ein Boolean-Attribut, das, falls vorhanden, angibt, dass der Benutzer nicht mit der Eingabe interagieren können soll. Deaktivierte Eingaben werden typischerweise mit einer schwächeren Farbe oder unter Verwendung einer anderen Form der Anzeige dargestellt, dass das Feld nicht verfügbar ist.

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

form

Ein String, der das <form>-Element spezifiziert, mit dem die Eingabe verbunden ist (also sein Formularbesitzer). Der Wert dieses Strings, falls vorhanden, muss der id eines <form>-Elements im selben Dokument entsprechen. Wenn dieses Attribut nicht spezifiziert ist, wird das <input>-Element mit dem nächsten beinhaltenden Formular, falls vorhanden, verbunden.

Das form-Attribut ermöglicht es Ihnen, eine Eingabe überall im Dokument zu platzieren, aber sie zusammen mit einem Formular an anderer Stelle im Dokument zu verwenden.

formaction

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

formenctype

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

formmethod

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

formnovalidate

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

formtarget

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

height

Nur gültig für den image-Button, das height ist die Höhe der Bilddatei, die angezeigt werden soll, um den grafischen Absende-Button darzustellen. Siehe den image Eingabetyp.

id

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

inputmode

Globaler Wert, gültig für alle Elemente, es bietet einen Hinweis für Browser, welche Art von virtueller Tastaturkonfiguration beim Bearbeiten dieses Elements oder seines Inhalts verwendet werden soll. Zu den Werten gehören none, text, tel, url, email, numeric, decimal und search.

list

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

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

Laut den Spezifikationen wird das list-Attribut von hidden, password, checkbox, radio, file oder einem der Button-Typen nicht unterstützt.

Je nach Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen bekommen, Markierungen entlang eines Bereichs oder sogar eine Eingabe, die sich wie ein <select> öffnet, aber nicht gelistete Werte zulässt. Überprüfen Sie die Tabelle zur Browser-Kompatibilität für die anderen Eingabetypen.

Siehe das <datalist>-Element.

max

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

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (z. B. bei Datumsangaben oder Zeiten), kann der Wert von max niedriger als der Wert von min sein, was darauf hinweist, dass der Bereich sich überschlagen kann; zum Beispiel ermöglicht dies, einen Zeitbereich von 22 Uhr bis 4 Uhr anzugeben.

maxlength

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

Die Eingabe schlägt die Einschränkungsvalidierung fehl, wenn die Länge des Textes im Feld größer als maxlength UTF-16 Code-Einheiten ist. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen als durch das maxlength-Attribut erlaubt eingeben. Die Einschränkungsvalidierung wird nur angewandt, wenn der Wert vom Benutzer geändert wird. Weitere Informationen finden Sie in der Client-seitigen Validierung.

min

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

Dieser Wert muss kleiner oder gleich dem Wert des max-Attributs sein. Wenn das min-Attribut vorhanden, aber nicht angegeben oder ungültig ist, wird kein min-Wert angewandt. Wenn das min-Attribut gültig ist und ein nicht-Nullwert kleiner ist als das Minimum, das das min-Attribut erlaubt, verhindert die Einschränkungsvalidierung die Formularübermittlung. Weitere Informationen finden Sie in der Client-seitigen Validierung.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (z. B. bei Datumsangaben oder Zeiten), kann der Wert von max niedriger als der Wert von min sein, was darauf hinweist, dass der Bereich sich überschlagen kann; zum Beispiel erlaubt dies, einen Zeitbereich von 22 Uhr bis 4 Uhr anzugeben.

minlength

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

Die Eingabe schlägt die Einschränkungsvalidierung fehl, wenn die Länge des Textes im Feld weniger als minlength UTF-16 Code-Einheiten lang ist, was die Formularübermittlung verhindert. Die Einschränkungsvalidierung wird nur angewandt, wenn der Wert vom Benutzer geändert wird. Weitere Informationen finden Sie in der Client-seitigen Validierung.

multiple

Das Boolean-Attribut multiple, falls gesetzt, bedeutet, dass der Benutzer durch Kommata getrennte E-Mail-Adressen im E-Mail-Widget eingeben oder mehr als eine Datei mit dem file-Eingabesteuerung auswählen kann. Siehe die email und file Eingabetypen.

name

Ein String, der einen Namen für das Eingabefeld festlegt. Dieser Name wird zusammen mit dem Wert des Steuerelements beim Senden vom Formulardatensatz übertragen.

Betrachten Sie den name als ein erforderliches Attribut (auch wenn es das nicht ist). Wenn eine Eingabe keinen name-Wert festgelegt oder name leer ist, wird der Wert der Eingabe beim Formularsenden nicht übertragen! (Deaktivierte Steuerelemente, nicht markierte Radio-Buttons, nicht markierte Kontrollkästchen und Zurücksetzen-Buttons werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

1. _charset_ : Wenn es als Name eines <input>-Elements des Typs hidden verwendet wird, wird der value des Eingabeelements automatisch vom User-Agent auf die Zeichenkodierung eingestellt, die zur Übermittlung des Formulars verwendet wird.
2. isindex: Aus historischen Gründen ist der Name isindex nicht erlaubt.

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

Es kann nur ein Radio-Button in einer gleichnamigen Gruppe von Radio-Buttons gleichzeitig ausgewählt sein. Wenn ein Radio-Button dieser Gruppe ausgewählt wird, wird automatisch jeder momentan ausgewählte Radio-Button in derselben Gruppe abgewählt. Der Wert dieses einen ausgewählten Radio-Buttons wird zusammen mit dem Namen gesendet, wenn das Formular gesendet wird.

Beim Tabben durch eine Serie von gleichnamigen Gruppen von Radio-Buttons, wenn einer ausgewählt ist, erhält dieser den Fokus. Wenn sie nicht in der Quellenreihenfolge gruppiert sind und einer der Gruppe ausgewählt ist, beginnt das Tabben der Gruppe, wenn der erste Button in der Gruppe erreicht wird, wobei alle nicht ausgewählten Radio-Buttons in der Gruppe übersprungen werden. Anders ausgedrückt: Wenn einer ausgewählt ist, überspringt das Tabben die nicht gewählten Radio-Buttons in der Gruppe. Wenn keiner ausgewählt ist, erhält die Radio-Button-Gruppe den Fokus, wenn der erste Button in der gleichnamigen Gruppe erreicht wird.

Sobald ein Radio-Button der Gruppe den Fokus erhalten hat, wird beim Verwenden der Pfeiltasten durch alle Radio-Buttons desselben Namens navigiert, selbst wenn die Radio-Buttons nicht zusammengeordnet in der Quellenreihenfolge sind.

Wenn ein Eingsooagelement ein name-Attribut hat, wird dieser Name zu einer Eigenschaft des dazugehörigen HTMLFormElement.elements-Objekts des Formulars. Wenn Sie ein Eingabeelement mit name auf guest gesetzt und ein anderes mit name auf hat-size haben, kann der folgende Code verwendet werden:

Wenn dieser Code ausgeführt wurde, wird guestName das HTMLInputElement für das guest-Feld sein, und hatSize das Objekt für das hat-size-Feld.

pattern

Gültig für text, search, url, tel, email und password, wird das pattern-Attribut verwendet, um einen regulären Ausdruck zu kompilieren, dem der value der Eingabe entsprechen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript-regulärer Ausdruck sein, wie er vom RegExp-Typ verwendet wird und wie in unserer Leitfaden zu regulären Ausdrücken dokumentiert ist. Es sollten keine Schrägstriche um den Mustertext angegeben werden. Beim Kompilieren des regulären Ausdrucks:

1. wird das Muster implizit mit ^(?: und )$ umgeben, sodass die Übereinstimmung gegen den ganzen Eingabewert erforderlich ist, d.h. ^(?:<pattern>)$.
2. Das 'v'-Flag wird angegeben, sodass das Muster als eine Sequenz von Unicode-Codepunkten, anstatt als ASCII behandelt wird.

Wenn das pattern-Attribut vorhanden ist, aber nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut wird komplett ignoriert. Wenn das pattern-Attribut gültig ist und ein nicht-leerer Wert nicht dem Muster entspricht, wird die Einschränkungsvalidierung die Formularübermittlung verhindern. Wenn das multiple vorhanden ist, wird der kompilierte reguläre Ausdruck bei jedem durch Kommas getrennten Wert angewendet.

Weitere Informationen finden Sie in der Client-seitigen Validierung.

placeholder

Gültig für text, search, url, tel, email, password und number, bietet das placeholder-Attribut einen kurzen Hinweis für den Benutzer, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die ein Hinweis auf den erwarteten Datentyp gibt, anstatt eine Erklärung oder Aufforderung. Der Text darf keine Wagenrückläufe oder Zeilenumbruchzeichen enthalten. Beispielsweise, wenn von einem Feld erwartet wird, den Vornamen eines Benutzers zu erfassen, und sein Label Vorname lautet, könnte ein geeigneter Platzhalter z.B. Mustafa sein.

popovertarget

Wandelt ein <input type="button">-Element in einen Popover-Steuerungsbutton um; nimmt die ID des zu steuernden Popover-Elements als seinen Wert. Weitere Details finden Sie auf der Popover-API-Landeseite. Die Verbindung zwischen einem Popover und seinem Auslöser-Button über das popovertarget-Attribut hat zwei weitere nützliche Auswirkungen:

• Der Browser erstellt eine implizite aria-details- und aria-expanded-Verbindung zwischen Popover und Auslöser und platziert das Popover in einer logischen Position in der Tastaturfokus-Navigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover zugänglicher für Tastatur- und Benutzer von unterstützenden Technologien (AT) (siehe auch Popover-Bedienbarkeitsmerkmale).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, wodurch es sehr bequem wird, Popover relativ zu ihren Steuerelementen mit CSS-Ankerpositionierung zu positionieren. Weitere Informationen finden Sie unter Popover-Ankerpositionierung.

popovertargetaction

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

"hide"

Der Button wird ein angezeigtes Popover verstecken. Wenn versucht wird, ein bereits verstecktes Popover zu verbergen, wird keine Aktion ausgeführt.

"show"

Der Button wird ein verstecktes Popover anzeigen. Wenn versucht wird, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion ausgeführt.

"toggle"

Der Button wird ein Popover zwischen anzeigen und verstecken umschalten. Wenn das Popover versteckt ist, wird es sichtbar gemacht; wenn das Popover sichtbar ist, wird es versteckt. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die vom Kontrollbutton ausgeführt wird.

readonly

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

Weitere Informationen finden Sie im HTML-Attribut: readonly.

required

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

Weitere Informationen finden Sie in der Client-seitigen Validierung und das HTML-Attribut: required.

size

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

src

Nur gültig für den image-Button, das src ist ein String, der die URL der Bilddatei angibt, die angezeigt werden soll, um den grafischen Absende-Button darzustellen. Siehe den image Eingabetyp.

step

Gültig für date, month, week, time, datetime-local, number und range, das step-Attribut ist eine Zahl, die die Granularität spezifiziert, der der Wert entsprechen muss. Nur Werte, die eine ganze Zahl von Schritten vom Schritt-Basiswert entfernt sind, sind gültig. Der Schritt-Basiswert ist min, falls angegeben, sonst value, oder 0, wenn keiner angegeben ist (außer für week, welches einen Standard-Schritt-Basiswert von −259.200.000 hat, das dem Anfang der Woche 1970-W01 entspricht).

Wird step nicht explizit angegeben:

• step ist standardmäßig auf 1 für number und range gesetzt.
• Jeder Date/Time-Eingabetyp hat einen eigenen Standardwert für step, der zum Typ passt; siehe die einzelnen Eingabeseiten: date, datetime-local, month, time, und week.

Der Wert muss eine positive Zahl sein—ganz oder gebrochen—oder der spezielle Wert any, welcher bedeutet, dass kein Schritt erforderlich ist, und jeder Wert zulässig ist (andere Einschränkungen wie min und max vorbehalten).

Zum Beispiel: Wenn Sie <input type="number" min="10" step="2"> haben, sind alle gerade Ganzzahlen, 10 oder größer, gültig. Wenn weggelassen, <input type="number">, ist jede Ganzzahl gültig, aber keine gebrochenen (wie 4.2), weil step standardmäßig 1 ist. Damit 4.2 gültig ist, hätte step auf any, 0.1, 0.2 festgesetzt werden müssen, oder der min-Wert hätte mit .2 enden müssen, wie z.B. <input type="number" min="-5.2">.

Weitere Informationen finden Sie in der Client-seitigen Validierung.

switch

Nur gültig für checkbox-Eingabe, switch ist ein Boolean-Attribut, das angibt, ob das Kontrollkästchen als Schalter gerendert werden soll.

tabindex

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, ein ganzzahliges Attribut, das angibt, ob das Element fokussierbar ist, ob es an der sequentiellen Tastaturnavigation teilnehmen soll. Da alle Eingabetypen, außer für den Typ hidden, fokussierbar sind, sollte dieses Attribut nicht auf Formularsteuerelementen verwendet werden, da dies erfordern würde, die Fokusreihenfolge für alle Elemente im Dokument zu verwalten, mit dem Risiko, die Benutzerfreundlichkeit und Barrierefreiheit zu beeinträchtigen, wenn es nicht richtig gemacht wird.

title

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, das einen Text darstellt, der beratende Informationen über das Element enthält, zu dem es gehört. Solche Informationen können typischerweise, aber nicht unbedingt, dem Benutzer als Tooltip präsentiert werden. Der Titel sollte NICHT als primäre Erklärung für den Zweck des Formularsteuerelements verwendet werden. Stattdessen verwenden Sie das <label>-Element mit einem for-Attribut, das auf das id-Attribut des Formularsteuerelements setzt. Siehe Labels unten.

type

Ein String, der die Art der zu rendernenden Steuerung angibt. Zum Beispiel, um eine Checkbox zu erstellen, wird ein Wert von checkbox verwendet. Wenn ausgelassen (oder ein unbekannter Wert angegeben), wird der Eingabetyp text verwendet, wodurch ein Klartext-Eingabefeld erstellt wird.

Erlaubte Werte sind oben in den Eingabetypen aufgelistet.

value

Der Wert der Eingabesteuerung. Bei Angabe im HTML ist dies der Anfangswert, und von da an kann er jederzeit mithilfe von JavaScript abgerufen oder geändert werden, indem auf die value-Eigenschaft des entsprechenden HTMLInputElement-Objekts zugegriffen wird. Das value-Attribut ist immer optional, jedoch sollte es als obligatorisch für checkbox, radio und hidden angesehen werden.

width

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

Nicht-standardisierte Attribute

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

Attribut Beschreibung

incremental	Ob wiederholte [`search`](/de/docs/Web/API/HTMLInputElement/search_event)-Ereignisse gesendet werden sollen, um die Aktualisierung von Live-Suchergebnissen zu ermöglichen, während der Benutzer den Wert des Feldes noch bearbeitet. Nur WebKit und Blink (Safari, Chrome, Opera, etc.).
mozactionhint	Ein String, der angibt, welche Art von Aktion ausgeführt wird, wenn der Benutzer die Eingabe- oder Return-Taste drückt, während er das Feld bearbeitet; dies dient dazu, ein geeignetes Label für diese Taste auf einer virtuellen Tastatur zu bestimmen. Da dieses Attribut veraltet ist, verwenden Sie stattdessen enterkeyhint.
orient	Legt die Ausrichtung des Range-Sliders fest. Nur Firefox..
results	Die maximale Anzahl der Elemente, die in der Drop-down-Liste vorheriger Suchanfragen angezeigt werden sollen. Nur Safari.
webkitdirectory	Ein Boolean, das angibt, ob nur Verzeichnisse (oder Verzeichnisse, wenn multiple ebenfalls vorhanden ist) vom Benutzer ausgewählt werden dürfen.

incremental

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

Wenn incremental nicht angegeben ist, wird das search-Ereignis nur gesendet, wenn der Benutzer explizit eine Suche initiiert (zum Beispiel, indem er die Eingabe- oder Return-Taste während der Bearbeitung des Feldes drückt).

Das search-Ereignis ist ratelimitiert, sodass es nicht häufiger als in einem vom Anbieter definierten Intervall gesendet wird.

orient

Ähnlich wie die nicht-standardisierte CSS-Eigenschaft -moz-orient auf die <progress>- und <meter>-Elemente wirkt, definiert das orient-Attribut die Ausrichtung des Range-Sliders. Werte sind horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wo der Bereich vertikal gerendert wird. Siehe Erstellen vertikaler Formularelemente für einen modernen Ansatz zum Erstellen vertikaler Formularelemente.

results

Das results-Attribut wird nur von Safari unterstützt und ist ein numerischer Wert, der es Ihnen ermöglicht, die maximale Anzahl von Einträgen zu überschreiben, die in der nativ bereitgestellten Drop-down-Liste des <input>-Elements vorheriger Suchanfragen angezeigt werden soll.

Der Wert muss eine nicht-negative Dezimalzahl sein. Wenn er nicht bereitgestellt ist oder ein ungültiger Wert angegeben wird, wird die Standardeinstellung des Browsers für die maximale Anzahl von Einträgen verwendet.

webkitdirectory

Das Boolean-Attribut webkitdirectory, falls vorhanden, gibt an, dass nur Verzeichnisse vom Benutzer im Datei-Auswahldialog ausgewählt werden dürfen. Siehe HTMLInputElement.webkitdirectory für zusätzliche Details und Beispiele.

Obwohl ursprünglich nur für WebKit-basierte Browser implementiert, ist webkitdirectory auch in Microsoft Edge sowie in Firefox 50 und späteren Versionen nutzbar. Obwohl es eine relativ breite Unterstützung hat, ist es immer noch nicht standardisiert und sollte nicht verwendet werden, es sei denn, es gibt keine Alternative.

Methoden

Die folgenden Methoden werden durch die HTMLInputElement-Schnittstelle bereitgestellt, die <input>-Elemente im DOM repräsentiert. Zusätzlich stehen die Methoden zur Verfügung, die von den übergeordneten Schnittstellen HTMLElement, Element, Node und EventTarget spezifiziert sind.

checkValidity()

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

reportValidity()

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

select()

Wählt den gesamten Inhalt des <input>-Elements aus, wenn der Inhalt des Elements auswählbar ist. Bei Elementen ohne auswählbaren Textinhalt (wie z. B. einem visuellen Farbwähler oder einem Kalenderdatumeingabefeld) macht diese Methode nichts.

setCustomValidity()

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

setRangeText()

Legt den Inhalt des angegebenen Zeichensbereichs im Eingabeelement auf eine gegebene Zeichenfolge fest. Ein selectMode-Parameter steht zur Verfügung, um zu steuern, wie der vorhandene Inhalt beeinflusst wird.

setSelectionRange()

Wählt den angegebenen Zeichensbereich innerhalb eines Texteingabeelements aus. Bei Eingaben, die nicht als Texteingabefelder dargestellt werden, wird nichts unternommen.

showPicker()

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

stepDown()

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

stepUp()

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

CSS

Eingaben, als ersetzte Elemente, haben einige Merkmale, die bei Nicht-Formular-Elementen nicht anwendbar sind. Es gibt CSS-Selektoren, die speziell auf Formularsteuerungen basierend auf ihren Benutzeroberflächenmerkmalen, auch bekannt als UI-Pseudoklassen, abzielen können. Das Eingabeelement kann auch nach Typ mit Attributselektoren gezielt angesprochen werden. Es gibt einige Eigenschaften, die besonders nützlich sind.

UI-Pseudoklassen

Pseudoklassen relevant für das <input> Element: Pseudoklasse Beschreibung

:enabled	Jedes derzeit aktivierte Element, das aktiviert (ausgewählt, angeklickt, eingegeben usw.) oder fokussiert werden kann und auch einen deaktivierten Zustand hat, in dem es nicht aktiviert oder fokussiert werden kann.
:disabled	Jedes derzeit deaktivierte Element, das einen aktivierten Zustand hat, was bedeutet, dass es andernfalls aktiviert (ausgewählt, angeklickt, eingegeben usw.) oder fokussiert werden könnte, wenn es nicht deaktiviert wäre.
:read-only	Element, das vom Benutzer nicht bearbeitet werden kann.
:read-write	Element, das vom Benutzer bearbeitet werden kann.
:placeholder-shown	Element, das derzeit Platzhalter-Text anzeigt, einschließlich <input> und <textarea>-Elementen mit dem placeholder-Attribut, das bisher keinen Wert hat.
:default	Formularelemente, die standardmäßig in einer Gruppe von verwandten Elementen sind. Passt zu checkbox und radio Eingabetypen, die bei Seitenladen oder Rendern aktiviert wurden.
:checked	Passt zu checkbox und radio Eingabetypen, die derzeit aktiviert sind (und die <option> in einem <select>, die derzeit ausgewählt sind).
:indeterminate	checkbox-Elemente, deren unbestimmte Eigenschaft von JavaScript auf true gesetzt ist, radio-Elemente, wenn alle Radioknöpfe mit demselben Namenswert im Formular nicht aktiviert sind, und <progress>-Elemente in einem unbestimmten Zustand.
:valid	Formularsteuerungen, auf die Einschränkungsvalidierung angewendet werden kann und die derzeit gültig sind.
:invalid	Formularsteuerungen, auf die Einschränkungsvalidierung angewendet wurde und die derzeit ungültig sind. Passt auf eine Formularsteuerung, deren Wert nicht den durch ihre Attribute festgelegten Einschränkungen entspricht, wie required, pattern, step und max.
:in-range	Eine nicht leere Eingabe, deren aktueller Wert innerhalb der durch die Attribute min und max sowie die step angegebenen Bereichsgrenzen liegt.
:out-of-range	Eine nicht leere Eingabe, deren aktueller Wert NICHT innerhalb der durch die Attribute min und max angegebenen Bereichsgrenzen liegt oder die die step-Einschränkung nicht einhält.
:required	<input>, <select>, oder <textarea>-Element, auf das das required-Attribut angewendet wurde. Passt nur zu Elementen, die erforderlich sein können. Das Attribut, das bei einem nicht erforderlichen Element enthalten ist, führt nicht zu einem Treffer.
:optional	<input>, <select>, oder <textarea>-Element, auf das das required-Attribut nicht angewendet wurde. Passt nicht zu Elementen, die nicht erforderlich sein können.
:blank	<input> und <textarea>-Elemente, die derzeit keinen Wert haben.
:user-invalid	Ähnlich wie :invalid, wird jedoch beim Verlassen aktiviert. Passt zu ungültigen Eingaben, jedoch nur nach Benutzerinteraktionen, wie durch Fokussierung auf die Steuerung, Verlassen der Steuerung oder dem Versuch, das Formular mit der ungültigen Steuerung abzusenden.
:open	<input>-Elemente, die einen Picker anzeigen, aus dem der Benutzer einen Wert auswählen kann (z. B. <input type="color">) - aber nur, wenn das Element im offenen Zustand ist, das heißt, wenn der Picker angezeigt wird.

Pseudoklassen-Beispiel

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

Attributselektoren

Es ist möglich, verschiedene Arten von Formularsteuerungen basierend auf ihrem type mit Attributselektoren zu zielen. CSS-Attributselektoren stimmen mit Elementen basierend entweder nur auf dem Vorhandensein eines Attributs oder dem Wert eines bestimmten Attributs überein.

::placeholder

Standardmäßig erscheint der Platzhaltertext transluzent oder hellgrau. Das ::placeholder-Pseudoelement ist der placeholder Text der Eingabe. Es kann mit einem eingeschränkten Satz von CSS-Eigenschaften gestylt werden.

Nur der Satz von CSS-Eigenschaften, die auf das ::first-line-Pseudoelement angewendet werden können, kann in einer Regel verwendet werden, die ::placeholder in ihrem Selektor verwendet.

caret-color

Eine für Texteingaben spezifische Eigenschaft ist die CSS caret-color-Eigenschaft, mit der Sie die Farbe festlegen können, die zum Zeichnen des Text-Carets verwendet wird:

HTML

CSS

Ergebnis

field-sizing

Die field-sizing-Eigenschaft ermöglicht es Ihnen, das Größenverhalten von Formulareingaben zu steuern (d.h. sie erhalten standardmäßig eine bevorzugte Größe). Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben und Formularelemente so einzustellen, dass sie sich an ihre Inhalte anpassen.

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

object-position und object-fit

In bestimmten Fällen (typischerweise bei nichttextuellen Eingaben und spezialisierten Schnittstellen) ist das <input>-Element ein ersetztes Element. Wenn dies der Fall ist, kann die Position und Größe der Größe des Elements und seiner Positionierung innerhalb seines Rahmens mit den CSS-Eigenschaften object-position und object-fit angepasst werden.

Styling

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

• Farbe auf HTML-Elemente anwenden mit CSS.

Siehe auch:

• HTML-Formulare stylen
• Erweiterte Styling-Optionen für HTML-Formulare

Weitere Funktionen

Labels

Labels sind erforderlich, um unterstützenden Text mit einem <input>-Element zu verknüpfen. Das <label>-Element liefert erklärende Informationen zu einem Formularfeld, die immer angebracht sind (abgesehen von Layout-Bedenken, die Sie haben). Es ist nie eine schlechte Idee, ein <label> zu verwenden, um zu erklären, was in ein <input> oder ein <textarea> eingebracht werden soll.

Zugeordnete Labels

Die semantische Kopplung von <input>- und <label>-Elementen ist nützlich für unterstützende Technologien wie Bildschirmleser. Indem Sie sie mit dem for-Attribut des <label> verbinden, verknüpfen Sie das Label mit der Eingabe auf eine Weise, die es Bildschirmlesern ermöglicht, Eingaben für die Benutzer genauer zu beschreiben.

Es reicht nicht aus, Klartext neben dem <input>-Element zu haben. Vielmehr erfordert Benutzerfreundlichkeit und Barrierefreiheit die Aufnahme entweder impliziter oder expliziter <label>:

Das erste Beispiel ist nicht zugänglich: Es existiert keine Beziehung zwischen der Eingabeaufforderung und dem <input>-Element.

Zusätzlich zu einem zugänglichen Namen bietet das Label eine größere Anklick- und Berührfläche für Maus- und Touchscreen-Benutzer. Indem Sie ein <label> mit einem <input> verbinden, werden durch das Klicken auf eines von beiden den Fokus auf das <input> gesetzt. Wenn Sie einfachen Text verwenden, um Ihre Eingabe zu "kennzeichnen", passiert das nicht. Die Aufnahme der Eingabeaufforderung in den Aktivierungsbereich der Eingabe ist hilfreich für Personen mit motorischen Behinderungen.

Als Webentwickler sollten wir nie davon ausgehen, dass die Menschen alles Wissen, was wir wissen. Die Vielfalt der Menschen, die das Web nutzen – und damit Ihre Website – garantiert praktisch, dass einige Ihrer Besucher Unterschiede in den Denkprozessen und/oder Umständen haben, was dazu führt, dass sie Ihre Formulare sehr unterschiedlich von Ihnen interpretieren, ohne klare und richtig präsentierte Labels.

Platzhalter sind nicht barrierefrei

Das placeholder-Attribut erlaubt es Ihnen, Text anzugeben, der im Inhaltsbereich des <input>-Elements selbst erscheint, wenn es leer ist. Der Platzhalter sollte niemals erforderlich sein, um Ihre Formulare zu verstehen. Er ist kein Label und sollte nicht als solches verwendet werden, weil er es nicht ist. Der Platzhalter wird verwendet, um einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht jedoch als Erklärung oder Eingabeaufforderung.

Der Platzhalter ist nicht nur für Bildschirmleser nicht zugänglich, sondern verschwindet auch, sobald der Benutzer Text in das Formularelement eingibt oder wenn das Formularelement bereits einen Wert hat. Browser mit automatischen Seitentranslationsfunktionen könnten Attribute beim Übersetzen überspringen, was bedeutet, dass der placeholder unter Umständen nicht übersetzt wird.

Client-seitige Validierung

Zusätzlich zur Verwendung von CSS, um Eingaben basierend auf dem aktuellen Zustand jedes Eingabefeldes in den :valid- oder :invalid-UI-Zuständen zu gestalten, stellt der Browser eine client-seitige Validierung bei der (versuchten) Formularübermittlung zur Verfügung. Bei der Formularübermittlung zeigt der Browser, wenn eine Formularsteuerung die Einschränkungsvalidierung nicht besteht, bei unterstützenden Browsern eine Fehlermeldung auf der ersten ungültigen Formularsteuerung an; entweder eine Standardnachricht basierend auf dem Fehlertyp oder eine von Ihnen festgelegte Nachricht.

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

Für die Eingabetypen, deren Domain möglicher Werte periodisch ist (d.h. bei Erreichen des höchsten möglichen Wertes kehren die Werte wieder zum Anfang zurück, anstatt zu enden), ist es möglich, dass die Werte der Eigenschaften max und min vertauscht werden, was darauf hinweist, dass der Bereich der zulässigen Werte bei min beginnt, zum niedrigsten möglichen Wert umschlägt und dann bis max fortgesetzt wird. Dies ist besonders nützlich für Daten und Zeiten, z. B. wenn Sie wollen, dass der Bereich von 20 Uhr bis 8 Uhr morgens reicht:

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

Validiäts-Objektfehler hängen von den <input> Attributen und ihren Werten ab: Attribut Relevante Eigenschaft Beschreibung

max	[`validityState.rangeOverflow`](/de/docs/Web/API/ValidityState/rangeOverflow)	Tritt auf, wenn der Wert größer als der maximale Wert ist, der durch das max Attribut definiert ist.
maxlength	[`validityState.tooLong`](/de/docs/Web/API/ValidityState/tooLong)	Tritt auf, wenn die Anzahl der Zeichen größer ist als die durch die maxlength-Eigenschaft erlaubte Anzahl.
min	[`validityState.rangeUnderflow`](/de/docs/Web/API/ValidityState/rangeUnderflow)	Tritt auf, wenn der Wert kleiner als der durch das min-Attribut definierte minimale Wert ist.
minlength	[`validityState.tooShort`](/de/docs/Web/API/ValidityState/tooShort)	Tritt auf, wenn die Anzahl der Zeichen kleiner ist als die durch die minlength-Eigenschaft erforderliche Anzahl.
pattern	[`validityState.patternMismatch`](/de/docs/Web/API/ValidityState/patternMismatch)	Tritt auf, wenn ein Musterausdruck mit einer gültigen regulären Ausdruck und dem value nicht übereinstimmt.
required	[`validityState.valueMissing`](/de/docs/Web/API/ValidityState/valueMissing)	Tritt auf, wenn das required-Attribut vorhanden ist, der Wert jedoch null ist oder das Radio- oder Kontrollkästchen nicht ausgewählt ist.
step	[`validityState.stepMismatch`](/de/docs/Web/API/ValidityState/stepMismatch)	Der Wert passt nicht zur Schrittweite. Der Schritt-Standardwert ist 1, daher sind nur Ganzzahlen gültig, wenn der type="number" ist und step nicht enthalten ist. step="any" wird diesen Fehler nie auslösen.
type	[`validityState.typeMismatch`](/de/docs/Web/API/ValidityState/typeMismatch)	Tritt auf, wenn der Wert nicht vom richtigen Typ ist, zum Beispiel enthält eine E-Mail kein @ oder eine URL enthält kein Protokoll.

Wenn ein Formularelement nicht das required-Attribut hat, ist kein Wert oder eine leere Zeichenfolge ungültig. Wenn die obigen Attribute vorhanden sind, mit Ausnahme von required, führt eine leere Zeichenfolge nicht zu einem Fehler.

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

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

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

Für jede dieser Booleschen Eigenschaften zeigt ein Wert von true an, dass der angegebene Grund für das Scheitern der Validierung zutreffen könnte, mit Ausnahme der valid-Eigenschaft, die true ist, wenn der Wert des Elements alle Einschränkungen erfüllt.

Wenn ein Fehler auftritt, werden unterstützende Browser sowohl den Benutzer benachrichtigen als auch die Formularübermittlung verhindern. Vorsicht ist geboten: Wenn ein benutzerdefinierte Fehler zu einem wahrheitsgemäßen Wert gesetzt wird (alles außer der leeren Zeichenfolge oder null), wird die Formularübermittlung verhindert. Wenn keine benutzerdefinierte Fehlermeldung angezeigt wird und keine der anderen Eigenschaften true zurückgeben, wird valid true sein und das Formular kann übermittelt werden.

Die letzte Zeile, die die benutzerdefinierte Gültigkeitsnachricht auf die leere Zeichenfolge setzt, ist von entscheidender Bedeutung. Wenn der Benutzer einen Fehler macht und die Gültigkeit gesetzt wird, wird sie nicht gesendet, selbst wenn alle Werte gültig sind, bis die Nachricht null ist.

Beispiel für benutzerdefinierten Validierungsfehler

Wenn Sie eine benutzerdefinierte Fehlermeldung anzeigen möchten, falls ein Feld die Validierung nicht besteht, müssen Sie die auf <input> (und verwandte) Elemente verfügbaren Constraint Validation API verwenden. Nehmen Sie dieses Formular-Beispiel:

Die grundlegenden HTML-Formular-Validierungsfunktionen werden dafür sorgen, dass eine Standardfehlermeldung angezeigt wird, wenn Sie versuchen, das Formular ohne gültige Eingabe zu senden, oder mit einem Wert, der nicht dem pattern entspricht.

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

Das Beispiel wird wie folgt dargestellt:

Kurz zusammengefasst:

• Wir überprüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sich dessen Wert ändert, indem wir die Methode checkValidity() über den input-Ereignishandler aufrufen.
• Wenn der Wert ungültig ist, wird ein invalid-Ereignis ausgelöst und die invalid-Ereignishandler-Funktion ausgeführt. In dieser Funktion arbeiten wir, ob der Wert ungültig ist, weil er leer ist oder weil er nicht dem Muster entspricht, mit einem if ()-Block heraus und setzen eine benutzerdefinierte Gültigkeitsfehlermeldung.
• Infolgedessen wird eine der benutzerdefinierten Fehlermeldungen angezeigt, wenn die Eingabe ungültig ist, wenn der Sende-Button gedrückt wird.
• Wenn sie gültig ist, wird sie wie erwartet gesendet. Damit dies geschieht, muss die benutzerdefinierte Gültigkeit abgebrochen werden, indem setCustomValidity() mit einem leeren Zeichenfolgewert aufgerufen wird. Dies tun wir deshalb, jedes Mal, wenn das input-Ereignis ausgelöst wird. Wenn Sie dies nicht tun und zuvor eine benutzerdefinierte Gültigkeit festgelegt wurde, wird die Eingabeangabe als ungültig registriert, auch wenn sie derzeit bei der Übermittlung einen gültigen Wert enthält.

Lokalisierung

Die erlaubten Eingaben für bestimmte <input>-Typen hängen vom Gebietsschema ab. In einigen Regionen ist 1.000,00 eine gültige Zahl, während in anderen Regionen der gültige Weg, diese Zahl einzugeben, 1.000,00 ist.

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

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

Barrierefreiheit

Labels

Bei der Einbindung von Eingaben ist es eine Barrierefreiheitsanforderung, Labels daneben hinzuzufügen. Dies ist notwendig, damit Menschen, die unterstützende Technologien nutzen, erkennen können, wofür die Eingabe ist. Auch das Klicken oder Berühren eines Labels fokussiert die damit verbundene Formsteuerung des Labels. Dies verbessert die Zugänglichkeit und Benutzerfreundlichkeit für sehende Benutzer, erhöht den Bereich, den ein Benutzer zum Aktivieren der Formsteuerung klicken oder berühren kann. Dies ist besonders nützlich (und sogar erforderlich) für Radioknöpfe und Kontrollkästchen, die winzig sind. Weitere Informationen zu Labels im Allgemeinen finden Sie unter Labels.

Das Folgende ist ein Beispiel dafür, wie man das <label> mit einem <input>-Element im obigen Stil verbinden kann. Sie müssen dem <input> ein id-Attribut zuweisen. Das <label> muss dann ein for-Attribut haben, dessen Wert derselbe wie die id-des Eingabe ist.

Größe

Interaktive Elemente wie Formulareingaben sollten eine ausreichend große Fläche bieten, damit sie leicht zu aktivieren sind. Dies hilft einer Vielzahl von Menschen, einschließlich Personen mit motorischen Einschränkungen und Personen, die ungenauere Eingabeformen wie einen Stift oder Finger verwenden. Eine Mindestinteraktionsgröße von 44×44 CSS-Pixel wird empfohlen.

• Criterion 2.5.5: Target Size verstehen | W3C Understanding WCAG 2.1
• Target Size and 2.5.5 | Adrian Roselli
• Schnelltest: Große Touchziele - Das A11Y-Projekt

Technische Zusammenfassung

Inhaltskategorien Zulässiger Inhalt Tag-Auslassung Zulässige Eltern Implizite ARIA-Rolle Zulässige ARIA-Rollen DOM-Schnittstelle

Flussinhalt, aufgelistet, übermittelbar, zurückstellbares, formularassoziiertes Element, Phraseninhalt. Wenn das type nicht hidden ist, dann kennzeichbares Element, greifbarer Inhalt.

Keiner; es ist ein leeres Element.

Das Start-Tag muss vorhanden sein und das End-Tag darf nicht vorhanden sein.

Jedes Element, das Phraseninhalt aufnimmt.

type=button: button type=checkbox: checkbox type=email ohne list-Attribut: textbox mit list-Attribut: combobox type=image: button type=number: spinbutton type=radio: radio type=range: slider type=reset: button type=search ohne list-Attribut: searchbox mit list-Attribut: combobox type=submit: button type=tel ohne list-Attribut: textbox mit list-Attribut: combobox type=text ohne list-Attribut: textbox mit list-Attribut: combobox type=url ohne list-Attribut: textbox mit list-Attribut: combobox type=color|date|datetime-local|file|hidden|month|password|time|week: keine entsprechende Rolle

type=button: checkbox, combobox, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab type=checkbox: button bei Verwendung mit aria-pressed, menuitemcheckbox, option, switch type=image: link, menuitem, menuitemcheckbox, menuitemradio, radio, switch type=radio: menuitemradio type=text ohne list-Attribut: combobox, searchbox, spinbutton type=color|date|datetime-local|email|file|hidden| month|number|password|range|reset|search|submit|tel|url|week oder text mit list-Attribut: keine role erlaubt

[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)

Spezifikationen

Spezifikation

HTML # the-input-element

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Siehe auch

• CSS appearance-Eigenschaft
• Ihr erstes HTML-Formular
• Wie man ein HTML-Formular strukturiert
• Die nativen Formularelemente
• Formulardaten senden
• Einschränkungsvalidierung von Formularen
• HTML-Formulare stylen