<input>: Das HTML-Eingabeelement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Das <input>-HTML-Element wird verwendet, um interaktive Steuerelemente für webbasierte Formulare zu erstellen, um Daten vom Benutzer zu akzeptieren; eine Vielzahl von Typen von Eingabedaten und Steuerungswidgets steht je nach Gerät und User-Agent zur Verfügung. Das <input>-Element ist eines der leistungsstärksten und komplexesten in ganz HTML aufgrund der schieren Anzahl von Kombinationen von Eingabetypen und Attributen.

Probieren Sie es aus

<input>-Typen

Wie ein <input> funktioniert, variiert erheblich in Abhängigkeit vom Wert seines type-Attributs, daher werden die verschiedenen Typen auf ihren eigenen separaten Referenzseiten behandelt. Ist dieses Attribut nicht angegeben, so wird als Standardtyp text angenommen.

Die verfügbaren Typen sind wie folgt:

Typ Beschreibung Einfache Beispiele
button Eine Drucktaste ohne Standardverhalten, die den Wert des value-Attributs anzeigt, standardmäßig leer.
checkbox Ein Kontrollkästchen, das es ermöglicht, einzelne Werte auszuwählen/abzuwählen.
color Ein Steuerungselement zur Spezifizierung einer Farbe; öffnet einen Farbwähler, wenn es in unterstützenden Browsern aktiv ist.
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, Tag, wenn es in unterstützenden Browsern aktiv ist.
datetime-local Ein Steuerungselement zur Eingabe von Datum und Uhrzeit, ohne Zeitzone. Öffnet einen Datumsauswähler oder numerische Räder für Datums- und Zeitkomponenten, wenn es in unterstützenden Browsern aktiv ist.
email Ein Feld zum Bearbeiten einer E-Mail-Adresse. Sieht aus wie eine text-Eingabe, verfügt aber über Validierungsparameter und relevante Tastatur in unterstützenden Browsern und Geräten mit dynamischen Tastaturen.
file Ein Steuerungselement, das dem Benutzer ermöglicht, eine Datei auszuwählen. Verwenden Sie das accept-Attribut, um die Arten von Dateien zu definieren, die das Steuerungselement auswählen kann.
hidden Ein Steuerungselement, das nicht angezeigt wird, dessen Wert jedoch an den Server übermittelt wird. Es gibt ein Beispiel in der nächsten Spalte, aber es ist versteckt!
image Ein grafischer submit-Button. Zeigt ein Bild an, das durch das src-Attribut definiert wird. Das alt-Attribut wird angezeigt, wenn das Bild src fehlt.
month Ein Steuerungselement zur Eingabe eines Monats und Jahres, ohne Zeitzone.
number Ein Steuerungselement zur Eingabe einer Zahl. Zeigt einen Spinner an und fügt eine Standardvalidierung hinzu. Zeigt ein numerisches Tastenfeld in einigen Geräten mit dynamischen Tastenfeldern an.
password Ein einzeiliges Textfeld, dessen Wert verborgen ist. Warnt den Benutzer, wenn die Seite nicht sicher ist.
radio Ein Optionsfeld, das es ermöglicht, einen einzigen Wert aus mehreren Auswahlmöglichkeiten mit demselben name-Wert auszuwählen.
range Ein Steuerungselement zur Eingabe einer Zahl, deren genauer Wert nicht wichtig ist. Wird als Bereichs-Widget angezeigt, das standardmäßig auf den Mittelwert eingestellt ist. Wird zusammen mit min und max verwendet, um den Bereich der akzeptablen Werte zu definieren.
reset Ein Button, der den Inhalt des Formulars auf Standardwerte zurücksetzt. Nicht empfohlen.
search Ein einzeiliges Textfeld zur Eingabe von Suchbegriffen. Zeilenumbruch wird automatisch aus dem Eingabewert entfernt. Kann ein Löschsymbol in unterstützenden Browsern enthalten, das zum Löschen des Feldes verwendet werden kann. Zeigt ein Suchsymbol anstelle der Eingabetaste auf einigen Geräten mit dynamischen Tastenfeldern an.
submit Ein Button, der das Formular absendet.
tel Ein Steuerungselement zur Eingabe einer Telefonnummer. Zeigt ein Telefon-Tastenfeld in einigen Geräten mit dynamischen Tastaturen an.
text Der Standardwert. Ein einzeiliges Textfeld. Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt.
time Ein Steuerungselement zur Eingabe eines Zeitwerts ohne Zeitzone.
url Ein Feld zur Eingabe einer URL. Sieht aus wie eine text-Eingabe, verfügt jedoch über Validierungsparameter und relevante Tastatur in unterstützenden Browsern und Geräten mit dynamischen Tastaturen.
week Ein Steuerungselement zur Eingabe eines Datums bestehend aus einer Kalenderwochen-Jahreszahl und einer Wochennummer ohne Zeitzone.
Veraltete Werte
datetime Veraltet Ein Steuerungselement zur Eingabe von Datum und Uhrzeit (Stunde, Minute, Sekunde und Bruchteil einer Sekunde) basierend auf der UTC-Zeitzone.

Attribute

Das <input>-Element ist so leistungsstark aufgrund seiner Attribute; das type-Attribut, das mit Beispielen beschrieben ist, ist das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-Schnittstelle basiert, teilen sie technisch gesehen dasselbe Set an Attributen. In der Realität haben jedoch die meisten Attribute nur Auswirkungen auf eine spezifische Untermenge von Eingabetypen. Darüber hinaus beeinflusst die Art und Weise, in der einige Attribute eine Eingabe beeinflussen, die verschiedenen Eingabetypen auf unterschiedliche Weise.

Dieser Abschnitt bietet eine Tabelle, die alle Attribute mit einer kurzen Beschreibung auflistet. Diese Tabelle wird von einer Liste gefolgt, die jedes Attribut ausführlicher beschreibt, zusammen mit den Eingabetypen, mit denen sie in Verbindung stehen. Diejenigen, die bei den meisten oder allen Eingabetypen gemeinsam sind, werden weiter unten ausführlicher definiert. Attribute, die einzigartig für bestimmte Eingabetypen sind - oder Attribute, die für alle Eingabetypen gemeinsam sind, aber ein besonderes Verhalten 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 außerdem:

Attribut Typ(en) Beschreibung
accept file Hinweis für erwarteten Dateityp in Datei-Upload-Steuerelementen
alt image alt-Attribut für den Bildtyp. Erforderlich für Barrierefreiheit
autocapitalize alle außer url, email und password Steuert automatische Großschreibung im eingegebenen Text.
autocomplete alle außer checkbox, radio und Buttons Hinweis für die Auto-Ausfüllfunktion des Formulars
capture file Eingabemethode für Medienaufnahme in Datei-Upload-Steuerelementen
checked checkbox, radio Ob der Befehl oder das Steuerelement aktiviert ist
dirname hidden, text, search, url, tel, email Name des Formularfeldes zur Übermittlung der Richtung des Elements im Formular
disabled alle Ob das Formularsteuerelement deaktiviert ist
form alle Verknüpft das Steuerelement mit einem Formularelement
formaction image, submit URL zur Verwendung für das Absenden des Formulars
formenctype image, submit Kodierungstyp des Datensatzes zur Verwendung für das Absenden des Formulars
formmethod image, submit HTTP-Methode zur Verwendung für das Absenden des Formulars
formnovalidate image, submit Umgehen der Formularsteuerungsvalidierung für das Absenden des Formulars
formtarget image, submit Browsing-Kontext für das Absenden des Formulars
height image Entspricht dem height-Attribut von <img>; vertikale Dimension
list alle außer hidden, password, checkbox, radio und Buttons Wert des id-Attributs der <datalist> der Autovervollständigungsoptionen
max date, month, week, time, datetime-local, number, range Maximaler Wert
maxlength text, search, url, tel, email, password Maximale Länge (Anzahl der Zeichen) des value
min date, month, week, time, datetime-local, number, range Minimaler Wert
minlength text, search, url, tel, email, password Minimale Länge (Anzahl der Zeichen) des value
multiple email, file Boolean. Ob mehrere Werte erlaubt sind
name alle Name der Formularsteuerung. Wird als Teil eines Name/Wert-Paares mit dem Formular eingereicht
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 Formularsteuerelement erscheint, wenn kein Wert gesetzt ist
popovertarget button Bezeichnet ein <input type="button"> als Steuerung für ein Popover-Element
popovertargetaction button Gibt die Aktion an, die von einer Popover-Steuerung ausgeführt werden 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 aktiviert sein, damit das Formular abgeschickt werden kann
size text, search, url, tel, email, password Größe des Steuerelements
src image Entspricht dem src-Attribut von <img>; Adresse der Bildressource
step date, month, week, time, datetime-local, number, range Inkrementelle Werte, die gültig sind
type alle Typ der Formularsteuerung
value alle außer image Der Wert der Steuerung. Bei Angabe im HTML entspricht dies dem Anfangswert
width image Entspricht dem width-Attribut von <img>

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

Individuelle Attribute

accept

Gültig nur für den file-Eingabetyp, das accept-Attribut definiert, welche Dateitypen in einer file-Uplodsteuerung auswählbar sind. Siehe den file-Eingabetyp.

alt

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

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und, falls ja, in welcher Weise. Weitere Informationen finden Sie auf der Seite über das autocapitalize-globale Attribut.

autocomplete

(Kein Boolean-Attribut!) Das autocomplete-Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenfolge, die beschreibt, welche, falls überhaupt, Art von Autovervollständigungsfunktion die Eingabe bereitstellen soll. Eine typische Implementierung von Autovervollständigung ruft vorher eingegebene Werte in dasselbe Eingabefeld ab, aber es können komplexere Formen der Autovervollständigung existieren. Beispielsweise könnte ein Browser auf die Kontaktliste eines Geräts zugreifen, um E-Mail-Adressen in einem E-Mail-Eingabefeld automatisch zu vervollständigen. Siehe autocomplete für zulässige Werte.

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 Auswirkung auf Eingabetypen, die keine numerischen oder Textdaten zurückgeben, gültig für alle Eingabetypen mit Ausnahme von checkbox, radio, file oder einen der Button-Typen.

Siehe das autocomplete-Attribut für weitere Informationen einschließlich Informationen zur Passwortsicherheit und wie sich autocomplete geringfügig für hidden von anderen Eingabetypen unterscheidet.

autofocus

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

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

Im Dokument darf höchstens ein Element das autofocus-Attribut besitzen. Wenn es auf mehr als einem Element gesetzt wird, erhält das erste Element mit dem Attribut den Fokus.

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

Warnung: Ein Formularsteuerelement automatisch zu fokussieren, kann für sehbehinderte Personen, die Bildschirmlesetechnologie verwenden, und Personen mit kognitiven Beeinträchtigungen verwirrend sein. Wenn autofocus zugewiesen wird, "teleportieren" Bildschirmleser ihre Benutzer ohne Vorwarnung zum Formularsteuerelement.

Verwenden Sie diese Funktion mit Bedacht auf Barrierefreiheit, wenn Sie das autofocus-Attribut anwenden. Ein automatisches Fokussieren auf eine Steuerung kann bewirken, dass die Seite beim Laden scrollt. Der Fokus kann auch dazu führen, dass auf einigen Touch-Geräten dynamische Tastaturen angezeigt werden. Während ein Bildschirmleser das Etikett des Formularsteuerelements ankündigen wird, das den Fokus erhält, wird der Bildschirmleser nichts vor dem Etikett ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird gleichermaßen den Kontext verpassen, der durch den vorherigen Inhalt erstellt wird.

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 das Hochladen mit einer file-Upload-Steuerung in unterstützenden Szenarien verwendet werden soll. Siehe den file-Eingabetyp.

checked

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

Hinweis: Im Gegensatz zu anderen Eingabesteuerungen wird der Wert eines Kontrollkästchens und eines Optionsfeldes nur dann in den übermittelten Daten enthalten, wenn sie derzeit checked sind. Wenn sie es sind, werden der Name und die Werte der aktivierten Steuerungen gesendet.

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

dirname

Gültig für hidden, text, search, url, tel und email Eingabetypen, ermöglicht das dirname-Attribut das Übermitteln der Richtung des Elements. Wenn enthalten, wird die Formularsteuerung mit zwei Name/Wert-Paaren übermittelt: 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.

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

Wenn das obige Formular übermittelt wird, wird die Eingabe sowohl das name / value-Paar fruit=cherry als auch das dirname/Richtung-Paar fruit-dir=ltr senden. Weitere Informationen finden Sie im dirname-Attribut.

disabled

Ein Boolean-Attribut, das, falls vorhanden, angibt, dass der Benutzer nicht mit der Eingabe interagieren können sollte. Deaktivierte Eingaben werden typischerweise mit einer gedimmten Farbe oder durch eine andere Form der Anzeige dargestellt, dass das Feld nicht verfügbar ist.

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

Hinweis: Obwohl nicht von der Spezifikation gefordert, wird Firefox standardmäßig den dynamischen deaktivierten Zustand eines <input> über Seitenladezyklen hinweg beibehalten. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

form

Ein String, der das <form>-Element angibt, mit dem die Eingabe verknüpft ist (das heißt, ihr Formularbesitzer). Der Wert dieses Strings, falls vorhanden, muss mit der id eines <form>-Elements im selben Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, ist das <input>-Element mit dem nächstgelegenen enthaltenen Formular verknüpft, falls vorhanden.

Das form-Attribut ermöglicht es Ihnen, eine Eingabe an einer beliebigen Stelle im Dokument zu platzieren, jedoch mit einem Formular woanders im Dokument zu verknüpfen.

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

formaction

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

formenctype

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

formmethod

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

formnovalidate

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

formtarget

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

height

Gültig nur für den image Eingabeknopf, height ist die Höhe der Bilddatei, die zur Repräsentation des grafischen Absende-Buttons angezeigt werden soll. Siehe den image Eingabetyp.

id

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

inputmode

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

list

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

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

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

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

Siehe das <datalist>-Element.

max

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

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was anzeigt, dass der Bereich umschlagen kann; zum Beispiel ermöglicht dies Ihnen, einen Zeitbereich von 22:00 bis 04:00 Uhr zu spezifizieren.

maxlength

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

Die Eingabe schlägt in der Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Texts mehr als maxlength UTF-16-Codeeinheiten beträgt. Standardmäßig verhindern Browser das Eingeben von mehr Zeichen, als durch das maxlength-Attribut erlaubt sind. Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen.

min

Gültig für date, month, week, time, datetime-local, number, und range, es definiert den kleinsten Wert im Bereich der zugelassenen Werte. Wenn der in das Element eingegebene value kleiner ist als dieser, schlägt das Element in der Einschränkungsvalidierung fehl. Wenn der Wert des min-Attributs keine Zahl ist, hat das Element keinen Mindestwert.

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

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was anzeigt, dass der Bereich umschlagen kann; zum Beispiel ermöglicht dies Ihnen, einen Zeitbereich von 22:00 bis 04:00 Uhr zu spezifizieren.

minlength

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

Die Eingabe schlägt in der Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Texts weniger als minlength UTF-16-Codeeinheiten beträgt, was das Absenden des Formulars verhindert. Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen.

multiple

Das Boolean-Attribut multiple, falls gesetzt, bedeutet, dass der Benutzer in der E-Mail-Steuerung durch Kommas getrennte E-Mail-Adressen eingeben kann oder mit dem file-Eingabefeld mehr als eine Datei auswählen kann. Siehe den email und file Eingabetyp.

name

Ein String, der einen Namen für das Eingabefeld angibt. Dieser Name wird zusammen mit dem Wert der Steuerung, wenn die Formulardaten übermittelt werden, gesendet.

Betrachten Sie name-Attribut als erforderlich (auch wenn es nicht ist). Wenn eine Eingabe keinen name angegeben hat oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular gesendet! (Deaktivierte Steuerungen, nicht aktivierte Optionsfelder, nicht aktivierte Kontrollkästchen und Reset-Buttons werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

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

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

Nur ein Optionsfeld in einer gleichnamigen Gruppe von Optionsfeldern kann gleichzeitig aktiviert sein. Das Auswählen eines beliebigen Optionsfeldes in dieser Gruppe deaktiviert automatisch jedes aktuell ausgewählte Optionsfeld in derselben Gruppe. Der Wert dieses einen aktivierten Optionsfeldes wird zusammen mit dem Namen gesendet, wenn das Formular gesendet wird.

Wenn man in eine Gruppe von gleichnamigen Optionsfeldern eintabbed, erhält, wenn eines davon aktiviert ist, dieser den Fokus. Wenn sie nicht zusammen in der Quellreihenfolge gruppiert sind, beginnt das Eintabben, wenn eines der Gruppe aktiviert ist, bei dem ersten in der Gruppe, wobei alle, die nicht aktiviert sind, übersprungen werden. Mit anderen Worten, wenn eines aktiviert ist, überspringt das Eintabben die nicht aktiven Optionsfelder in der Gruppe. Wenn keines aktiviert ist, erhält das Optionsfeldgruppe den Fokus, wenn der erste Button in der gleichnamigen Gruppe erreicht ist.

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

Wenn einem Eingabe-Element ein name zugewiesen wurde, wird dieser Name zu einer Eigenschaft des HTMLFormElement.elements-Eigentum des Formularbesitzers. Wenn Sie eine Eingabe haben, dessen name auf guest und ein weiteres dessen name auf hat-size gesetzt wurde, kann der folgende Code verwendet werden:

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

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

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

Warnung: Vermeiden Sie es Formularelementen einen name zu geben, der einem eingebauten Eigenschaft des Formulars entspricht, da Sie ansonsten die vordefinierte Eigenschaft oder Methode mit dieser Referenz auf das entsprechende Eingabeelement überschreiben würden.

pattern

Gültig für text, search, url, tel, email und password, wird das pattern-Attribut verwendet, um einen regulären Ausdruck zu erstellen, mit dem der value der Eingabe übereinstimmen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er vom RegExp-Typ verwendet wird und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist. Keine Schrägstriche sollten um den Musterntext angegeben werden. Beim Erstellen des regulären Ausdrucks:

  1. wird das Muster implizit mit ^(?: und )$ umschlossen, so dass der Abgleich gegen den gesamten Eingabewert erforderlich ist, d.h. ^(?:<pattern>)$.
  2. wird das 'v'-Flag angegeben, so dass das Muster als Sequenz von Unicode-Codepunkten und nicht as ASCII behandelt wird.

Wenn das pattern-Attribut vorhanden ist, aber nicht spezifiziert oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut wird vollständig ignoriert. Wenn das Musterattribut gültig ist und ein nicht leerer Wert das Muster nicht erfüllt, verhindert die Einschränkungsvalidierung das Absenden des Formulars. Wenn das multiple vorhanden ist, wird der kompilierte reguläre Ausdruck mit jedem durch Kommas getrennten Wert abgeglichen.

Hinweis: Wenn Sie das pattern-Attribut verwenden, informieren Sie den Benutzer über das erwartete Format, indem Sie erklärenden Text in der Nähe einschließen. Sie können auch ein title-Attribut hinzufügen, um zu erklären, welche Anforderungen an die Übereinstimmung mit dem Muster gestellt werden; die meisten Browser zeigen diesen Titel als Tooltip an. Die sichtbare Erklärung ist erforderlich für die Barrierefreiheit. Der Tooltip ist eine Verbesserung.

Siehe Client-seitige Validierung für weitere Informationen.

placeholder

Gültig für text, search, url, tel, email, password und number, bietet das placeholder-Attribut einen kurzen Hinweis für den Benutzer darauf, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf die erwartete Art von Daten gibt, eher als eine Erklärung oder Aufforderung. Der Text darf keine Zeilenumbrüche oder Zeilenwechsel umfassen. Wenn beispielsweise erwartet wird, dass ein Feld den Vornamen eines Benutzers erfasst und sein Etikett "Vorname" lautet, könnte ein geeigneter Platzhalter "z. B. Mustafa" lauten.

Hinweis: Das placeholder-Attribut ist nicht so semantisch nützlich wie andere Möglichkeiten, Ihr Formular zu erklären, und kann unerwartete technische Probleme mit Ihrem Inhalt hervorrufen. Siehe Labels für weitere Informationen.

popovertarget

Wandelt ein <input type="button">-Element in einen Popover-Steuerungsbutton um; nimmt die ID des zu steuernden Popover-Elements als seinen Wert an. Siehe die Popover-API-Landing-Page für weitere Details.

popovertargetaction

Gibt die Aktion an, die auf ein von einer Steuerung <input type="button"> gesteuertes Popover-Element angewendet werden soll. Mögliche Werte sind:

"hide"

Der Button wird ein bereits gezeigtes Popover ausblenden. Wenn Sie versuchen, ein bereits verstecktes Popover auszublenden, wird keine Aktion unternommen.

"show"

Der Button wird ein verstecktes Popover zeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover zu zeigen, wird keine Aktion unternommen.

"toggle"

Der Button wird zwischen angezeigtem und verstecktem Popover wechseln. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die von der Steuerungstaste ausgeführt wird.

readonly

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

Siehe das HTML-Attribut: readonly für weitere Informationen.

required

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

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

size

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

src

Gültig nur für den image Eingabeknopf, das src ist ein String, der die URL der Bilddatei angibt, die zur Darstellung des grafischen Absende-Buttons angezeigt werden soll. 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 angibt, an die sich der Wert halten muss.

Wenn nicht explizit enthalten:

  • step standardmäßig auf 1 für number und range.
  • Jeder Datums/Zeit-Eingabetyp hat einen Standardwert für step, der dem Typ entspricht; siehe die individuellen Eingabeseiten: date, datetime-local, month, time, und week.

Der Wert muss eine positive Zahl sein - ganzzahlig oder dezimal - oder der spezielle Wert any, was bedeutet, dass keine Stufe impliziert wird und jeder Wert erlaubt ist (unter Ausschluss anderer Einschränkungen, wie min und max).

Wenn any nicht explizit gesetzt ist, sind gültige Werte für die number, Datums/Zeit-Eingabetypen und range Eingabetypen gleich der Basis für die Schritthöhe - dem min-Wert und den Inkrementen des Schrittwerts bis zum max-Wert, wenn vorhanden.

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

Hinweis: Wenn die eingegebenen Daten des Benutzers sich nicht an die Schritt-Konfiguration halten, wird der Wert in der Einschränkungsvalidierung als ungültig betrachtet und wird die :invalid-Pseudo-Klasse entsprechen.

Siehe Client-seitige Validierung für weitere Informationen.

tabindex

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, ein integer-Attribut, das angibt, ob das Element den Eingabefokus erhalten kann (fokussierbar ist), ob es an der sequentiellen Tastaturnavigation teilnehmen soll. Da alle Eingabetypen mit Ausnahme von Eingaben des Typs hidden fokussierbar sind, sollte dieses Attribut nicht auf Formularsteuerungen verwendet werden, da dies die Verwaltung der Fokusreihenfolge für alle im Dokument enthaltenen Elemente erfordern würde mit dem Risiko schlechter Benutzerfreundlichkeit und Barrierefreiheit bei inkorrekter Umsetzung.

title

Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, das einen Text enthält, der als Zusatzinformation zu dem Element gehört, dem es angehört. Solche Informationen können typischerweise, aber nicht zwingend, dem Benutzer als Tooltip präsentiert werden. Der Titel sollte NICHT als primäre Erklärung des Zwecks der Formulareingabe verwendet werden. Stattdessen verwenden sie das <label>-Element mit einem for-Attribut, das auf das id-Attribut der Formulareingabe festgelegt ist. Siehe Labels unten.

type

Ein String, der den zu rendernden Steuerungstyp angibt. Um beispielsweise ein Kontrollkästchen zu erstellen, wird ein Wert von checkbox verwendet. Wenn weggelassen (oder ein unbekannter Wert angegeben ist) wird der text-Eingabetyp verwendet, wodurch ein Klartext-Eingabefeld erstellt wird.

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

value

Der Wert der Eingabesteuerung. Bei Angabe im HTML entspricht dies dem Anfangswert, und von da an kann es jederzeit mit JavaScript geändert oder abgerufen werden, um auf die value-Eigenschaft des jeweiligen HTMLInputElement-Objekts zuzugreifen. Das value-Attribut ist immer optional, sollte jedoch für checkbox, radio und hidden als verpflichtend angesehen werden.

width

Gültig nur für den image Eingabeknopf, das width ist die Breite der Bilddatei, die zur Darstellung des grafischen Absende-Buttons angezeigt werden soll. Siehe den image Eingabetyp.

Nicht-standardmäßige Attribute

Die folgenden nicht-standardmäßigen Attribute sind ebenfalls auf einigen Browsern verfügbar. Als allgemeine Regel sollten Sie deren Verwendung vermeiden, es sei denn, es lässt sich nicht anders machen.

Attribut Beschreibung
incremental Ob wiederholte [`search`](/de/docs/Web/API/HTMLInputElement/search_event)-Ereignisse gesendet werden sollen, um Live-Suchergebnisse zu aktualisieren, während der Benutzer noch den Wert des Feldes bearbeitet. Nur WebKit und Blink (Safari, Chrome, Opera, etc.).
mozactionhint Veraltet

Ein String, der die Art der Aktion angibt, die ausgeführt wird, wenn der Benutzer die Taste Enter oder Return drückt, während er das Feld bearbeitet; dies wird verwendet, um ein geeignetes Etikett für diese Taste auf einer virtuellen Tastatur zu ermitteln. Da dieses Attribut veraltet ist, verwenden Sie enterkeyhint stattdessen.

orient Setzt die Orientierung des Bereichsschiebers. Nur Firefox..
results Die maximale Anzahl von Elementen, die in der Dropdown-Liste vorheriger Suchabfragen angezeigt werden sollen. Nur Safari.
webkitdirectory Ein Boolean, der angibt, ob nur Verzeichnisse vom Benutzer ausgewählt werden dürfen (oder Verzeichnisse, wenn multiple ebenfalls präsent ist)
incremental Nicht standardisiert

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

Wenn incremental nicht angegeben ist, wird das search-Ereignis nur gesendet, wenn der Benutzer explizit eine Suche startet (z. B. indem er die Enter oder Return-Taste drückt, während er das Feld bearbeitet).

Das search-Ereignis ist so rate-limitiert, dass es nicht öfter gesendet wird als ein implementierungsdefiniertes Intervall.

orient Nicht standardisiert

Ähnlich wie die nicht-standard CSS-Eigenschaft -moz-orient, die die <progress>- und <meter>-Elemente betrifft, definiert das orient-Attribut die Orientierung des Bereichsschiebers. Werte umfassen horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wo der Bereich vertikal gerendert wird. Siehe Erstellen von vertikalen Formularsteuerungen für einen modernen Ansatz, um vertikale Formularsteuerungen zu erstellen.

results Nicht standardisiert

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

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

webkitdirectory Nicht standardisiert

Das Boolean-Attribut webkitdirectory, falls vorhanden, gibt an, dass nur Verzeichnisse vom Benutzer im Datei-Auswahl-Interface auswählbar sein sollen. 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 Firefox 50 und höher verwendbar. Obwohl es relativ breite Unterstützung hat, ist es immer noch nicht standardisiert und sollte nicht verwendet werden, es sei denn, Sie haben keine Alternative.

Methoden

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

checkValidity()

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

reportValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls wird false zurückgegeben, ein invalid-Ereignis auf dem Element ausgelöst und (wenn das Ereignis nicht abgebrochen wird) das Problem dem Benutzer gemeldet.

select()

Markiert den gesamten Inhalt des <input>-Elements, wenn der Inhalt des Elements ausgewählt werden kann. Bei Elementen ohne auswählbaren Textinhalt (wie ein visueller Farbwähler oder Kalendereingabedatum) hat diese Methode keine Wirkung.

setCustomValidity()

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

setRangeText()

Legt die Inhalte des angegebenen Zeichenbereichs im Eingabeelement auf eine gegebene Zeichenfolge fest. Ein selectMode-Parameter ist verfügbar, um zu steuern, wie der vorhandene Inhalt betroffen ist.

setSelectionRange()

Markiert den angegebenen Bereich von Zeichen innerhalb eines textuellen Eingabeelements. Tut nichts bei Eingaben, die nicht als Texteingabefelder dargestellt sind.

showPicker()

Zeigt den Browser-Picker für das Eingabeelement an, der normalerweise angezeigt wird, wenn das Element ausgewählt wird, jedoch von einem Button-Druck oder einer anderen 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

Eingabefelder, als ersetzte Elemente, haben einige Funktionen, die für Nicht-Formularelemente nicht zutreffen. Es gibt CSS-Selektoren, die speziell Formularsteuerungen basierend auf ihren UI-Funktionen, auch bekannt als UI-Pseudoklassen, ansprechen können. Das Input-Element kann auch nach Typ mit Attributselektoren gezielt angesprochen werden. Es gibt einige Eigenschaften, die ebenfalls besonders nützlich sind.

UI-Pseudoklassen

Pseudoklassen, die für das <input>-Element relevant sind:
Pseudoklasse Beschreibung
:enabled Jedes derzeit aktivierte Element, das aktiviert werden kann (ausgewählt, angeklickt, beschriftet etc.) oder den Fokus akzeptieren kann und ebenfalls einen deaktivierten Zustand hat, in dem es nicht aktiviert werden kann oder den Fokus nicht akzeptieren kann.
:disabled Jedes derzeit deaktivierte Element, das einen aktiven Zustand hat, was bedeutet, dass es sonst aktiviert werden könnte (ausgewählt, angeklickt, beschriftet etc.) oder den Fokus akzeptieren könnte, wäre es nicht deaktiviert.
:read-only Element, das vom Benutzer nicht bearbeitet werden kann
:read-write Element, das vom Benutzer bearbeitet werden kann.
:placeholder-shown Element, das derzeit placeholder-Text anzeigt, einschließlich <input> und <textarea>-Elemente mit dem placeholder-Attribut, das bisher noch keinen Wert hat.
:default Formularelemente, die die Standardeinstellung in einer Gruppe von verwandten Elementen sind. Entsprechende checkbox und radio Eingabetypen, die beim Laden oder Rendern der Seite aktiviert waren.
:checked Entsprechende checkbox und radio Eingabetypen, die aktuell aktiviert sind (außerdem <option> in einem <select>, das derzeit ausgewählt ist).
:indeterminate checkbox-Elemente, deren indeterminate-Eigenschaft durch JavaScript auf true gesetzt ist, radio-Elemente, wenn alle Radiobuttons mit demselben Namenwert im Formular deaktiviert 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 nicht gültig sind. Entspricht einer Formularsteuerung, deren Wert die durch ihre Attribute festgelegten Einschränkungen nicht erfüllt, wie z.B. required, pattern, step und max.
:in-range Ein nicht leeres Eingabefeld, dessen aktueller Wert innerhalb der durch die min und max Attribute und die step vorgegebenen Bereichsgrenzen liegt.
:out-of-range Ein nicht leeres Eingabefeld, dessen aktueller Wert NICHT innerhalb der durch die min und max Attribute vorgegebenen Bereichsgrenzen liegt oder nicht dem step-Einschränkung entspricht.
:required <input>, <select>, oder <textarea>-Element, das das required-Attribut gesetzt hat. Entspricht nur Elementen, die erforderlich sein können. Das Attribut auf einem nicht erforderlichen Element führt nicht zu einer Übereinstimmung.
:optional <input>, <select>, oder <textarea>-Element, das das required-Attribut nicht gesetzt hat. Entspricht nicht Elementen, die nicht erforderlich sein können.
:blank <input> und <textarea>-Elemente, die derzeit keinen Wert haben.
:user-invalid Ähnlich wie :invalid, wird aber beim Verlassen des Fokus aktiviert. Entspricht ungültigen Eingaben, jedoch erst nach der Benutzerinteraktion, wie z.B. durch Fokussierung auf das Steuerungselement, Verlassen des Steuerungselements oder Versuch, das Formular mit dem ungültigen Steuerungselement zu übermitteln.
:open <input>-Elemente, die dem Benutzer ein Auswahlmenü zum Auswählen eines Wertes anzeigen (zum Beispiel <input type="color">) — aber nur, wenn das Element im offenen Zustand ist, d.h. wenn das Auswahlmenü angezeigt wird.

Beispiel für Pseudoklassen

Wir können das Label einer Checkbox basierend darauf stylen, ob die Checkbox aktiviert ist oder nicht. In diesem Beispiel stylen wir die color und font-weight des <label>, das direkt nach einem aktivierten Input folgt. Wir haben keine Stile angewendet, wenn das input nicht aktiviert ist.

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

Attributselektoren

Es ist möglich, verschiedene Arten von Formularsteuerungen basierend auf ihrem type mit Attributselektoren anzusteuern. CSS-Attributselektoren entsprechen Elementen basierend entweder nur auf der Anwesenheit eines Attributs oder dem Wert eines bestimmten Attributs.

css
/* 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 der Text des Platzhalters in einem durchsichtigen oder hellgrauen Ton. Das ::placeholder Pseudoelement ist der placeholder Text des Inputs. Es kann mit einem begrenzten Satz von CSS-Eigenschaften gestylt werden.

css
::placeholder {
  color: blue;
}

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

appearance

Die appearance Eigenschaft ermöglicht es, (fast) jedes Element als plattformspezifischen Stil basierend auf dem Theme des Betriebssystems anzuzeigen sowie das Entfernen jeglicher plattformspezifischer Stile mit dem Wert none.

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

Das Setzen von appearance: none entfernt plattformspezifische Ränder, aber nicht die Funktionalität.

caret-color

Eine Eigenschaft, die speziell für textbezogene Elemente ist, ist die CSS caret-color Eigenschaft, die es Ihnen ermöglicht, die Farbe des Texteingabe-Cursors zu setzen:

HTML

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

CSS

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

Ergebnis

field-sizing

Die field-sizing-Eigenschaft ermöglicht Ihnen die Kontrolle über das Größenverhalten von Formulareingaben (d.h. sie erhalten standardmäßig eine bevorzugte Größe). Diese Eigenschaft ermöglicht Ihnen das Überschreiben des Standardverhaltens und erlaubt es Formularsteuerungen, ihre Größe anzupassen, um ihrem Inhalt zu entsprechen.

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

object-position und object-fit

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

Styling

Für weitere Informationen zum Hinzufügen von Farbe zu Elementen in HTML siehe:

Siehe auch:

Zusätzliche Funktionen

Labels

Labels sind erforderlich, um Assistenztexte mit einem <input> zu verknüpfen. Das <label>-Element liefert erläuternde Informationen über ein Formularfeld, das immer angemessen ist (abgesehen von den Layoutüberlegungen, die Sie haben). Es ist nie eine schlechte Idee, ein <label> zu verwenden, um zu erklären, was in ein <input> oder <textarea> eingegeben werden soll.

Zugeordnete Labels

Das semantische Paaren von <input> und <label>-Elementen ist nützlich für unterstützende Technologien wie Bildschirmlesegeräte. Durch das Paaren mit dem for-Attribut des <label>, verbinden Sie das Label mit dem Input, sodass Bildschirmleser Eingaben den Benutzern genauer beschreiben können.

Es genügt nicht, nur einfachen Text neben dem <input>-Element zu haben. Vielmehr erfordert die Benutzerfreundlichkeit und Zugänglichkeit die Aufnahme von entweder impliziten oder expliziten <label>:

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

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

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

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

Zusätzlich zu einem zugänglichen Namen bietet das Label eine größere 'Treffer'-Fläche für Maus- und Touchscreen-Nutzer, um darauf zu klicken oder zu tippen. Durch das Paaren eines <label> mit einem <input>, fokussiert ein Klick auf eines von beiden das <input>. Wenn Sie einfachen Text verwenden, um Ihr Input zu "labeln", wird dies nicht passieren. Dass der Prompt Teil des Aktivierungsbereichs für die Eingabe ist, hilft Menschen mit motorischen Kontrollproblemen.

Als Webentwickler ist es wichtig, dass wir nie annehmen, dass Menschen all das wissen, was wir wissen. Die Vielfalt der Menschen, die das Internet nutzen—und damit Ihre Webseite—garantiert praktisch, dass einige Besucher Ihrer Website einige Unterschiede in Denkprozessen und/oder Umständen haben werden, die sie dazu führen, Ihre Formulare sehr unterschiedlich zu interpretieren, wenn sie keine klaren und ordnungsgemäß präsentierten Labels haben.

Platzhalter sind nicht zugänglich

Das placeholder-Attribut erlaubt es Ihnen, Text zu spezifizieren, der innerhalb des <input>-Elements Inhalt angezeigt wird, wenn es leer ist. Der Platzhalter sollte niemals erforderlich sein, um Ihre Formulare zu verstehen. Er ist kein Label und sollte nicht als Ersatz verwendet werden, weil er es nicht ist. Der Platzhalter wird verwendet, um einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht als Erklärung oder Aufforderung.

Nicht nur ist der Platzhalter für Bildschirmleser nicht zugänglich, sondern er verschwindet auch, sobald der Benutzer irgendeinen Text in das Steuerungselement eingegeben hat, oder wenn das Steuerungselement bereits einen Wert hat. Browser mit automatischen Seitenübersetzungsfunktionen könnten Attribute beim Übersetzen überspringen, was bedeutet, dass der placeholder möglicherweise nicht übersetzt wird.

Hinweis: Vermeiden Sie es, das placeholder-Attribut zu verwenden, wenn Sie es vermeiden können. Wenn Sie ein <input>-Element labeln müssen, verwenden Sie das <label>-Element.

Client-seitige Validierung

Warnung: Die Client-seitige Validierung ist nützlich, garantiert aber nicht, dass der Server gültige Daten erhält. Wenn die Daten in einem bestimmten Format vorliegen müssen, verifizieren Sie dies immer auch auf der Serverseite und geben Sie eine 400 HTTP-Antwort zurück, wenn das Format ungültig ist.

Zusätzlich zur Verwendung von CSS, um Eingaben basierend auf den :valid oder :invalid UI-Zuständen basierend auf dem aktuellen Zustand jeder Eingabe zu stylen, wie im Abschnitt über UI-Pseudoklassen oben erwähnt, bietet der Browser eine Client-seitige Validierung bei (versuchter) Formularübermittlung. Bei der Übermittlung des Formulars, wenn es ein Formularsteuerungselement gibt, das die Einschränkungsvalidierung nicht besteht, zeigt der unterstützende Browser eine Fehlermeldung bei dem ersten ungültigen Formularsteuerelement an; entweder eine Standardmeldung basierend auf dem Fehlerart oder eine von Ihnen gesetzte Nachricht.

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

Für die Eingabetypen, deren Bereich an möglichen Werten periodisch ist (d.h. dass die Werte bei dem größten möglichen Wert zurück zum Anfang und nicht enden), ist es möglich, dass die Werte der max und min Eigenschaften umgekehrt werden, was darauf hinweist, dass der Bereich der zulässigen Werte bei min beginnt, sich um den kleinsten möglichen Wert erweitert und dann weitergeht bis max erreicht ist. Dies ist besonders nützlich für Datum- und Uhrzeiten, wie zum Beispiel, wenn Sie möchten, dass der Bereich von 20:00 Uhr bis 8:00 Uhr reicht:

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

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

Validity-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 ist als der maximale Wert, wie durch das max-Attribut definiert.
maxlength [`validityState.tooLong`](/de/docs/Web/API/ValidityState/tooLong) Tritt auf, wenn die Anzahl der Zeichen größer ist als die Zahl, die durch die maxlength-Eigenschaft erlaubt wird.
min [`validityState.rangeUnderflow`](/de/docs/Web/API/ValidityState/rangeUnderflow) Tritt auf, wenn der Wert kleiner ist als der minimale Wert, wie durch das min-Attribut definiert.
minlength [`validityState.tooShort`](/de/docs/Web/API/ValidityState/tooShort) Tritt auf, wenn die Anzahl der Zeichen kleiner ist als die Anzahl, die von der minlength-Eigenschaft gefordert wird.
pattern [`validityState.patternMismatch`](/de/docs/Web/API/ValidityState/patternMismatch) Tritt auf, wenn ein pattern-Attribut mit einem gültigen regulären Ausdruck enthalten ist und der value nicht mit ihm übereinstimmt.
required [`validityState.valueMissing`](/de/docs/Web/API/ValidityState/valueMissing) Tritt auf, wenn das required-Attribut vorhanden ist, der Wert jedoch null ist oder ein Radio- oder Kontrollkästchen nicht aktiviert ist.
step [`validityState.stepMismatch`](/de/docs/Web/API/ValidityState/stepMismatch) Der Wert entspricht nicht dem Schrittinkrement. Der Standardinkrement ist 1, daher sind nur ganze Zahlen auf type="number" gültig, wenn step nicht enthalten ist. step="any" wird diesen Fehler niemals auslösen.
type [`validityState.typeMismatch`](/de/docs/Web/API/ValidityState/typeMismatch) Tritt auf, wenn der Wert nicht der richtige Typ ist, beispielsweise wenn eine Email kein @ enthält oder eine URL kein Protokoll.

Wenn eine Formularsteuerung nicht das required-Attribut hat, kein Wert oder ein leerer String, ist dies nicht ungültig. Selbst wenn die oben genannten Attribute vorhanden sind, mit Ausnahme von required, führt ein leerer String nicht zu einem Fehler.

Wir können Grenzen für akzeptierte Werte festlegen, und unterstützende Browser werden diese Formularwerte nativ validieren und den Benutzer alarmieren, wenn beim Übermitteln des Formulars ein Fehler vorliegt.

Zusätzlich zu den in der Tabelle oben beschriebenen Fehlern enthält das validityState-Interface die booleschen, nur lesbaren Eigenschaften badInput, valid, und customError. Das Validitätsobjekt enthält:

Für jede dieser booleschen Eigenschaften zeigt ein Wert von true an, dass der angegebene Grund für das mögliches Validierungsversagen zutrifft, mit Ausnahme der valid-Eigenschaft, die true ist, wenn der Wert des Elements alle Einschränkungen einhält.

Wenn es einen Fehler gibt, alarmieren unterstützende Browser sowohl den Benutzer als auch verhindern, dass das Formular übermittelt wird. Ein Wort der Vorsicht: Wenn ein benutzerdefinierter Fehler auf einen truthy-Wert gesetzt wird (alles andere als der leere String oder null), wird das Formular nicht abgeschickt. Wenn es keine benutzerdefinierte Fehlermeldung gibt, und keine der anderen Eigenschaften true zurückgibt, wird valid true sein, und das Formular kann übermittelt werden.

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

Die letzte Zeile, die die benutzerdefinierte Validitätsmeldung auf den leeren String setzt, ist wichtig. Wenn der Benutzer einen Fehler macht und die Validität gesetzt ist, wird es nicht übermittelt, selbst wenn alle Werte gültig sind, bis die Nachricht null ist.

Beispiel für benutzerdefinierte Validierungsfehler

Wenn Sie eine benutzerdefinierte Fehlermeldung anzeigen möchten, wenn ein Feld die Validierung nicht besteht, müssen Sie die Constraint Validation API verwenden, die auf <input> (und verwandten) Elementen verfügbar ist. Nehmen Sie das folgende Formular:

html
<form>
  <label for="name">Enter username (upper and lowercase letters): </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
  <button>Submit</button>
</form>

Die grundlegenden HTML-Formularvalidierungsfunktionen führen dazu, dass dies eine Standardfehlermeldung erzeugt, wenn Sie versuchen, das Formular mit entweder keinem gültigen ausgefüllten Feld oder einem Wert, der nicht dem pattern entspricht, abzusenden.

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

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

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

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

Das Beispiel wird wie folgt dargestellt:

Kurz gesagt:

  • Wir überprüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sein Wert sich ändert, indem wir die checkValidity()-Methode über den input-Ereignishandler ausführen.
  • Wenn der Wert ungültig ist, wird ein invalid-Ereignis ausgelöst und die invalid-Ereignishandlungsfunktion wird ausgeführt. Innerhalb dieser Funktion bestimmen wir mittels einer if ()-Anweisung, ob der Wert ungültig ist, weil er leer ist oder weil er dem pattern nicht entspricht, und setzen eine benutzerdefinierte Validitätsfehlermeldung.
  • Infolgedessen wird beim Drücken des Absende-Buttons, falls der Eingabewert ungültig ist, eine der benutzerdefinierten Fehlermeldungen angezeigt.
  • Wenn er gültig ist, wird er wie erwartet übermittelt. Damit dies geschehen kann, muss die benutzerdefinierte Validierung aufgehoben werden, indem setCustomValidity() mit einem leeren Zeichenkettenwert aufgerufen wird. Deshalb tun wir dies jedes Mal, wenn das input-Ereignis ausgelöst wird. Wenn Sie dies nicht tun und eine benutzerdefinierte Validität vorher gesetzt wurde, wird die Eingabe als ungültig registriert, auch wenn sie bei der Übermittlung einen gültigen Wert enthält.

Hinweis: Validieren Sie immer Eingabebeschränkungen sowohl auf Client- als auch auf Serverseite. Die Einschränkungsvalidierung entfernt nicht die Notwendigkeit der Validierung auf der Serverseite. Ungültige Werte können immer noch von älteren Browsern oder von Angreifern gesendet werden.

Hinweis: Firefox unterstützte ein proprietäres Fehlerattribut — x-moz-errormessage — über viele Versionen hinweg, das es Ihnen ermöglichte, benutzerdefinierte Fehlermeldungen auf ähnliche Weise zu setzen. Dies wurde ab Version 66 entfernt (siehe Firefox-Fehler 1513890).

Lokalisation

Die erlaubten Eingaben für bestimmte <input>-Typen hängen von der Lokale ab. In einigen Lokalen ist 1,000.00 eine gültige Zahl, während in anderen Lokalen die gültige Art, diese Zahl einzugeben, 1.000,00 ist.

Firefox verwendet die folgenden Heuristiken, um die Lokale zu bestimmen, um die Eingabe des Benutzers zu validieren (zumindest für type="number"):

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

Zugänglichkeit

Labels

Beim Hinzufügen von Eingaben ist es eine Zugänglichkeitsanforderung, Labels hinzuzufügen. Dies ist erforderlich, damit diejenigen, die unterstützende Technologien verwenden, wissen, wofür die Eingabe bestimmt ist. Auch das Klicken oder Antippen eines Labels fokussiert das damit verbundene Formulareingabeelement. Dies verbessert die Zugänglichkeit und Benutzerfreundlichkeit für sehende Benutzer, da es den Bereich vergrößert, den ein Benutzer anklicken oder antippen kann, um das Formulareingabeelement zu aktivieren. Dies ist besonders nützlich (und sogar erforderlich) für Radiobuttons und Kontrollkästchen, die sehr klein sind. Für weitere Informationen zu Labels im Allgemeinen, siehe Labels.

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

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

Größe

Interaktive Elemente wie Formulareingaben sollten einen Bereich bieten, der groß genug ist, um leicht aktiviert zu werden. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Kontrollproblemen und Menschen, die unpräzise Eingabemethoden wie einen Stift oder Finger verwenden. Eine Mindestinteraktionsgröße von 44×44 CSS-Pixeln wird empfohlen.

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, aufgelistet, absendbar, zurücksetzbar, mit Formular verbundenes Element, Phraseninhalte. Wenn type nicht hidden ist, dann labelbares Element, auffindbarer Inhalt.
Erlaubter Inhalt Keiner; es ist ein leeres Element.
Tag-Auslassung Muss ein Start-Tag haben und darf kein End-Tag haben.
Erlaubte Eltern Jedes Element, das Phraseninhalte akzeptiert.
Implizierte ARIA-Rolle
Zugelassene ARIA-Rollen
DOM-Schnittstelle [`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)

Spezifikationen

Specification
HTML
# the-input-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch