<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. |
|
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, dasaccept
-Attribut definiert, welche Dateitypen in einerfile
-Uplodsteuerung auswählbar sind. Siehe den file-Eingabetyp. alt
-
Gültig nur für den
image
-Button, dasalt
-Attribut bietet alternativen Text für das Bild und zeigt den Wert des Attributs an, wenn das Bildsrc
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. Sieheautocomplete
für zulässige Werte.Das
autocomplete
-Attribut ist gültig beihidden
,text
,search
,url
,tel
,email
,date
,month
,week
,time
,datetime-local
,number
,range
,color
undpassword
. Dieses Attribut hat keine Auswirkung auf Eingabetypen, die keine numerischen oder Textdaten zurückgeben, gültig für alle Eingabetypen mit Ausnahme voncheckbox
,radio
,file
oder einen der Button-Typen.Siehe das
autocomplete
-Attribut für weitere Informationen einschließlich Informationen zur Passwortsicherheit und wie sichautocomplete
geringfügig fürhidden
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 dasDOMContentLoaded
-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 Typshidden
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 dascapture
-Attribut, welches Medium—Mikrofon, Video oder Kamera—zum Erfassen einer neuen Datei für das Hochladen mit einerfile
-Upload-Steuerung in unterstützenden Szenarien verwendet werden soll. Siehe den file-Eingabetyp. checked
-
Gültig sowohl für
radio
als auchcheckbox
Typen,checked
ist ein Boolean-Attribut. Wenn es im Typradio
vorhanden ist, gibt es an, dass das Optionsfeld das aktuell ausgewählte in der Gruppe der gleichnamigen Optionsfelder ist. Wenn es im Typcheckbox
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 demHTMLInputElement
'schecked
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, denvalue
cherry
hat und das Kontrollkästchen aktiviert ist, werden im übermittelten Formularfruit=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 iston
. dirname
-
Gültig für
hidden
,text
,search
,url
,tel
undemail
Eingabetypen, ermöglicht dasdirname
-Attribut das Übermitteln der Richtung des Elements. Wenn enthalten, wird die Formularsteuerung mit zwei Name/Wert-Paaren übermittelt: das erste ist dername
undvalue
, und das zweite ist der Wert desdirname
-Attributs als Name, mit einem Wert vonltr
oderrtl
, 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
-Paarfruit=cherry
als auch dasdirname
/Richtung-Paarfruit-dir=ltr
senden. Weitere Informationen finden Sie imdirname
-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 dasautocomplete
-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 derid
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
undsubmit
Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen. formenctype
-
Gültig nur für die
image
undsubmit
Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen. formmethod
-
Gültig nur für die
image
undsubmit
Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen. formnovalidate
-
Gültig nur für die
image
undsubmit
Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen. formtarget
-
Gültig nur für die
image
undsubmit
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
undsearch
. list
-
Der Wert, der dem
list
-Attribut gegeben wird, sollte dieid
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 demtype
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
undcolor
.Nach den Spezifikationen wird das
list
-Attribut nicht vonhidden
,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
undrange
, es definiert den größten Wert im Bereich der erlaubten Werte. Wenn der in das Element eingegebenevalue
diesen Wert überschreitet, schlägt das Element in der Einschränkungsvalidierung fehl. Wenn der Wert desmax
-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 vonmin
, 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
undpassword
, 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 keinemaxlength
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 vonminlength
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 dasmaxlength
-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
, undrange
, es definiert den kleinsten Wert im Bereich der zugelassenen Werte. Wenn der in das Element eingegebenevalue
kleiner ist als dieser, schlägt das Element in der Einschränkungsvalidierung fehl. Wenn der Wert desmin
-Attributs keine Zahl ist, hat das Element keinen Mindestwert.Dieser Wert muss kleiner oder gleich dem Wert des
max
-Attributs sein. Wenn dasmin
-Attribut vorhanden ist, aber nicht spezifiziert oder ungültig ist, wird keinmin
-Wert angewendet. Wenn dasmin
-Attribut gültig ist und ein nicht leerer Wert kleiner ist als das Minimum, das vommin
-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 vonmin
, 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
undpassword
, 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 vonmaxlength
angegebenen Wert ist. Wenn keineminlength
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 demfile
-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 keinenname
angegeben hat odername
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:
_charset_
: Wenn es als der Name eines<input>
-Elements des Typs hidden verwendet wird, wird dervalue
der Eingabe automatisch vom Benutzer-Agent auf die Zeichencodierung gesetzt, die zur Übermittlung des Formulars verwendet wird.isindex
: Aus historischen Gründen ist der Nameisindex
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 desHTMLFormElement.elements
-Eigentum des Formularbesitzers. Wenn Sie eine Eingabe haben, dessenname
aufguest
und ein weiteres dessenname
aufhat-size
gesetzt wurde, kann der folgende Code verwendet werden:jslet form = document.querySelector("form"); let guestName = form.elements.guest; let hatSize = form.elements["hat-size"];
Wenn dieser Code ausgeführt wurde, wird
guestName
dasHTMLInputElement
für dasguest
-Feld sein, undhatSize
das Objekt für dashat-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
undpassword
, wird daspattern
-Attribut verwendet, um einen regulären Ausdruck zu erstellen, mit dem dervalue
der Eingabe übereinstimmen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er vomRegExp
-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:- wird das Muster implizit mit
^(?:
und)$
umschlossen, so dass der Abgleich gegen den gesamten Eingabewert erforderlich ist, d.h.^(?:<pattern>)$
. - 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 dasmultiple
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 eintitle
-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.
- wird das Muster implizit mit
placeholder
-
Gültig für
text
,search
,url
,tel
,email
,password
undnumber
, bietet dasplaceholder
-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 Eingabetypentext
,search
,url
,tel
,email
,date
,month
,week
,time
,datetime-local
,number
undpassword
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. Dasrequired
-Attribut wird von den Eingabetypentext
,search
,url
,tel
,email
,date
,month
,week
,time
,datetime-local
,number
,password
,checkbox
,radio
undfile
unterstützt.Siehe Client-seitige Validierung und das HTML-Attribut:
required
für weitere Informationen. size
-
Gültig für
email
,password
,tel
,url
undtext
, gibt dassize
-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ürpassword
undtext
ist es eine Anzahl von Zeichen (oderem
-Einheiten) mit einem Standardwert von20
, und für andere sind es Pixel (oderpx
-Einheiten). CSS-width
hat Vorrang vor demsize
-Attribut. src
-
Gültig nur für den
image
Eingabeknopf, dassrc
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
, undrange
, dasstep
-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ürnumber
undrange
.- Jeder Datums/Zeit-Eingabetyp hat einen Standardwert für
step
, der dem Typ entspricht; siehe die individuellen Eingabeseiten:date
,datetime-local
,month
,time
, undweek
.
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, wiemin
undmax
).Wenn
any
nicht explizit gesetzt ist, sind gültige Werte für dienumber
, Datums/Zeit-Eingabetypen undrange
Eingabetypen gleich der Basis für die Schritthöhe - demmin
-Wert und den Inkrementen des Schrittwerts bis zummax
-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 (wie4.2
) sind nicht gültig, weilstep
standardmäßig auf1
gesetzt ist. Für4.2
, um gültig zu sein, hättestep
aufany
, 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 einemfor
-Attribut, das auf dasid
-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 dertext
-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 jeweiligenHTMLInputElement
-Objekts zuzugreifen. Dasvalue
-Attribut ist immer optional, sollte jedoch fürcheckbox
,radio
undhidden
als verpflichtend angesehen werden. width
-
Gültig nur für den
image
Eingabeknopf, daswidth
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 |
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-Agentsearch
-Ereignisse an dasHTMLInputElement
-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 dassearch
-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 dasorient
-Attribut die Orientierung des Bereichsschiebers. Werte umfassenhorizontal
, was bedeutet, dass der Bereich horizontal gerendert wird, undvertical
, 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. SieheHTMLInputElement.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 wirdfalse
zurückgegeben und eininvalid
-Ereignis auf dem Element ausgelöst. reportValidity()
-
Gibt
true
zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls wirdfalse
zurückgegeben, eininvalid
-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
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.
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.
/* 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.
::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
<label for="textInput">Note the red caret:</label>
<input id="textInput" class="custom" size="32" />
CSS
input.custom {
caret-color: red;
font:
16px "Helvetica",
"Arial",
"sans-serif";
}
Ergebnis
field-sizing
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>
:
<!-- 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:
<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:
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:
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 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.
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:
<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:
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 deninput
-Ereignishandler ausführen. - Wenn der Wert ungültig ist, wird ein
invalid
-Ereignis ausgelöst und dieinvalid
-Ereignishandlungsfunktion wird ausgeführt. Innerhalb dieser Funktion bestimmen wir mittels einerif ()
-Anweisung, ob der Wert ungültig ist, weil er leer ist oder weil er dempattern
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 dasinput
-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.
<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
- Formulareinschränkung Validierung
- Ihr erstes HTML-Formular
- Wie man ein HTML-Formular strukturiert
- Die nativen Formular-Widgets
- Senden von Formulardaten
- Formulardatenvalidierung
- Wie man benutzerdefinierte Formular-Widgets baut
- HTML-Formulare in älteren Browsern
- Stil von HTML-Formularen
- Erweiterte Stile für HTML-Formulare
- Erstellung von vertikalen Formularsteuerungen