<input>: Das HTML Input-Element
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 Arten von Eingabedaten und Steuerungs-Widgets sind verfügbar, abhängig vom Gerät und dem User-Agent. Das <input>
Element ist eines der mächtigsten und komplexesten in HTML aufgrund der schieren Anzahl an Kombinationen von Eingabetypen und Attributen.
Probieren Sie es aus
<label for="name">Name (4 to 8 characters):</label>
<input
type="text"
id="name"
name="name"
required
minlength="4"
maxlength="8"
size="10" />
label {
display: block;
font:
1rem "Fira Sans",
sans-serif;
}
input,
label {
margin: 0.4rem 0;
}
<input>
Typen
Wie ein <input>
funktioniert, variiert erheblich abhängig vom Wert des type
Attributs, daher werden die verschiedenen Typen in eigenen separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben ist, wird der Standardtyp text
übernommen.
Die verfügbaren Typen sind wie folgt:
Typ | Beschreibung | Grundlegende Beispiele |
---|---|---|
button |
Ein Druckknopf ohne Standardverhalten, der den Wert des value Attributs anzeigt, standardmäßig leer.
|
|
checkbox | Ein Kontrollkästchen, das es erlaubt, einzelne Werte auszuwählen/abzuwählen. |
|
color | Ein Steuerelement zur Angabe einer Farbe; Öffnet einen Farbpicker, wenn es in unterstützenden Browsern aktiv ist. |
|
date | Ein Steuerelement zur Eingabe eines Datums (Jahr, Monat und Tag, ohne Zeit). Öffnet einen Datumspicker oder numerische Räder für Jahr, Monat, Tag, wenn es in unterstützenden Browsern aktiv ist. |
|
datetime-local | Ein Steuerelement zur Eingabe eines Datums und einer Uhrzeit, ohne Zeitzone. Öffnet einen Datumspicker oder numerische Räder für Datum- und Uhrzeit-Komponenten, wenn es in unterstützenden Browsern aktiv ist. |
|
Ein Feld zum Bearbeiten einer E-Mail-Adresse. Sieht aus wie eine
text Eingabe, hat aber Validierungsparameter und relevante
Tastatur in unterstützten Browsern und Geräten mit dynamischen Tastaturen.
|
|
|
file |
Ein Steuerelement, das es dem Benutzer ermöglicht, eine Datei auszuwählen.
Verwenden Sie das accept Attribut, um die Dateitypen festzulegen, die das Steuerelement auswählen kann.
|
|
hidden | Ein Steuerelement, das nicht angezeigt wird, dessen Wert aber an den Server übermittelt wird. Es gibt ein Beispiel in der nächsten Spalte, aber es ist versteckt! | |
image |
Ein grafischer submit Knopf. Zeigt ein Bild an, das durch das src Attribut definiert wird.
Das alt Attribut wird angezeigt, wenn das Bild src fehlt.
|
|
month | Ein Steuerelement zur Eingabe eines Monats und Jahres, ohne Zeitzone. |
|
number | Ein Steuerelement zur Eingabe einer Zahl. Zeigt einen Spinner an und fügt eine Standardvalidierung hinzu. Zeigt eine numerische Tastatur auf einigen Geräten mit dynamischen Tastaturen an. |
|
password | Ein einzeiliges Textfeld, dessen Wert verschleiert ist. Warnt den Benutzer, wenn die Site nicht sicher ist. |
|
radio |
Ein Optionsfeld, das es erlaubt, einen einzelnen Wert aus mehreren mit demselben name Wert auszuwählen.
|
|
range |
Ein Steuerelement zur Eingabe einer Zahl, deren genauer Wert nicht wichtig ist. Wird als Bereichs-Widget angezeigt, der standardmäßig den Mittelwert anzeigt. Wird in Verbindung mit min und max verwendet, um den Bereich der akzeptablen Werte zu definieren.
|
|
reset | Ein Knopf, der den Inhalt des Formulars auf die Standardwerte zurücksetzt. Nicht empfohlen. |
|
search | Ein einzeiliges Textfeld zur Eingabe von Suchbegriffen. Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt. Kann in unterstützten Browsern ein Löschsymbol enthalten, das zum Leeren des Feldes verwendet werden kann. Zeigt statt der Eingabetaste ein Suchsymbol auf einigen Geräten mit dynamischen Tastaturen an. |
|
submit | Ein Knopf, der das Formular absendet. |
|
tel | Ein Steuerelement zur Eingabe einer Telefonnummer. Zeigt eine Telefontastatur auf einigen Geräten mit dynamischen Tastaturen an. |
|
text | Der Standardwert. Ein einzeiliges Textfeld. Zeilenumbrüche werden automatisch aus dem Eingabewert entfernt. |
|
time | Ein Steuerelement zur Eingabe eines Zeitwertes ohne Zeitzone. |
|
url |
Ein Feld zur Eingabe einer URL. Sieht aus wie eine text Eingabe, hat aber Validierungsparameter und relevante Tastatur in unterstützten Browsern und Geräten mit dynamischen Tastaturen.
|
|
week | Ein Steuerelement zur Eingabe eines Datums, das aus einer Kalenderwochennummer und einer Wochennummer ohne Zeitzone besteht. |
|
Veraltete Werte | ||
datetime
Veraltet
|
Ein Steuerelement zur Eingabe eines Datums und einer Uhrzeit (Stunde, Minute, Sekunde und Bruchteil einer Sekunde) basierend auf der UTC-Zeitzone. |
|
Attribute
Das <input>
Element ist so mächtig aufgrund seiner Attribute; das type
Attribut, das oben mit Beispielen beschrieben wurde, ist das wichtigste. Da jedes <input>
Element, unabhängig vom Typ, auf der HTMLInputElement
Schnittstelle basiert, teilen sie technisch das exakt gleiche Set an Attributen. In der Realität haben jedoch die meisten Attribute nur eine Wirkung auf ein bestimmtes Unterset von Eingabetypen. Darüber hinaus hängt die Weise, wie einige Attribute eine Eingabe beeinflussen, vom Eingabetyp ab, und beeinflusst unterschiedliche 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 im Detail beschreibt und mit welchen Eingabetypen sie verbunden sind. Diejenigen, die für die meisten oder alle Eingabetypen üblich sind, werden detaillierter unten definiert. Attribute, die einzigartig für bestimmte Eingabetypen sind—oder Attribute, die zwar für alle Eingabetypen üblich sind, aber besondere Verhaltensweisen haben, wenn sie auf einem bestimmten Eingabetyp verwendet werden—werden stattdessen auf den Seiten dieser Typen dokumentiert.
Zu den Attributen des <input>
Elements gehören die globalen HTML-Attribute und zusätzlich:
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 die automatische Großschreibung im eingegebenen Text. |
autocomplete |
alle außer checkbox , radio , und Schaltflächen |
Hinweis für Formular-Autovervollständigungsfunktion |
capture |
file |
Medieneingabemethode in Datei-Upload-Steuerelementen |
checked |
checkbox , radio |
Ob der Befehl oder das Steuerelement ausgewählt ist |
dirname |
hidden , text , search , url , tel , email |
Name des Formularfeldes zur Übermittlung der Richtung des Elements bei der Formularabsendung |
disabled |
alle | Ob das Formular-Steuerelement deaktiviert ist |
form |
alle | Verbindet das Steuerelement mit einem Formularelement |
formaction |
image , submit |
URL für die Formularabsendung |
formenctype |
image , submit |
Zu verwendender Typ der Formulardatensatz-Kodierung für die Formularabsendung |
formmethod |
image , submit |
HTTP-Methode zur Formularabsendung |
formnovalidate |
image , submit |
Umgeht die Formularsteuerungsvalidierung für die Formularabsendung |
formtarget |
image , submit |
Browsing-Kontext für die Formularabsendung |
height |
image |
Entspricht dem height Attribut für <img> ; vertikale Dimension |
list |
alle außer hidden , password , checkbox , radio , und Schaltflächen |
Wert des id Attributs der <datalist> der Autovervollständigungsoptionen |
max |
date , month , week , time , datetime-local , number , range |
Maximalwert |
maxlength |
text , search , url , tel , email , password |
Maximale Länge (Anzahl der Zeichen) des value |
min |
date , month , week , time , datetime-local , number , range |
Minimalwert |
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 des Formular-Steuerelements. Wird mit dem Formular als Teil eines Name/Wert-Paares übermittelt |
pattern |
text , search , url , tel , email , password |
Muster, dem der value entsprechen muss, um gültig zu sein |
placeholder |
text , search , url , tel , email , password , number |
Text, der im Formular-Steuerelement erscheint, wenn kein Wert gesetzt ist |
popovertarget |
button |
Bestimmt ein <input type="button"> als Steuerelement für ein Popover Element |
popovertargetaction |
button |
Gibt die Aktion an, die ein Popover-Steuerelement ausführen soll |
readonly |
alle außer hidden , range , color , checkbox , radio , und Schaltflächen |
Boolean. Der Wert ist nicht editierbar |
required |
alle außer hidden , range , color , und Schaltflächen |
Boolean. Ein Wert ist erforderlich oder muss markiert werden, damit das Formular übermittelt werden kann |
size |
text , search , url , tel , email , password |
Größe des Steuerelements |
src |
image |
Entspricht dem src Attribut für <img> ; Adresse der Bildressource |
step |
date , month , week , time , datetime-local , number , range |
Inkrementelle Werte, die gültig sind |
type |
alle | Typ des Formular-Steuerelements |
value |
alle außer image |
Der Wert des Steuerelements. Wenn im HTML angegeben, entspricht dies dem Initialwert |
width |
image |
Entspricht dem width Attribut für <img> |
Einige zusätzliche nicht standardisierte Attribute sind nach den Beschreibungen der Standardattribute aufgelistet.
Einzelne Attribute
accept
-
Gültig nur für den
file
Eingabetyp, dasaccept
Attribut definiert, welche Dateitypen in einemfile
Upload-Steuerelement ausgewählt werden können. Siehe den file Eingabetyp. alt
-
Gültig nur für den
image
Knopf, dasalt
Attribut liefert alternativen Text für das Bild, der den Wert des Attributs anzeigt, wenn das Bildsrc
fehlt oder sonst fehlschlägt. Siehe den image Eingabetyp. autocapitalize
-
Steuert, ob eingegebener Text automatisch großgeschrieben wird und wenn ja, auf welche Weise. Siehe die
autocapitalize
globale Attributseite für weitere Informationen. autocomplete
-
(Kein Boolesches Attribut!) Das
autocomplete
Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenfolge an, die beschreibt, welche (falls vorhanden) Art der Autovervollständigungsfunktion die Eingabe bereitstellen soll. Eine typische Implementierung der Autovervollständigung ruft zuvor in demselben Eingabefeld eingegebene Werte ab, aber es können auch komplexere Formen der Autovervollständigung existieren. Zum Beispiel könnte ein Browser in der Lage sein, mit der Kontaktliste eines Geräts zu interagieren, umemail
Adressen in einem E-Mail-Eingabefeld automatisch zu vervollständigen. Sieheautocomplete
für erlaubte Werte.Das
autocomplete
Attribut ist gültig fürhidden
,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, es ist für alle Eingabetypen gültig außercheckbox
,radio
,file
, oder eines der Schaltflächentypen.Siehe das
autocomplete
Attribut für zusätzliche Informationen, einschließlich Informationen zur Passwortsicherheit und wieautocomplete
fürhidden
etwas anders funktioniert als für andere Eingabetypen. autofocus
-
Ein Boolesches Attribut, das, wenn vorhanden, angibt, dass die Eingabe automatisch den Fokus erhalten soll, wenn die Seite vollständig geladen ist (oder wenn das
<dialog>
welches das Element enthält, angezeigt wurde).Hinweis: Ein Element mit dem
autofocus
Attribut kann den Fokus erhalten, bevor dasDOMContentLoaded
Event ausgelöst wird.Nicht mehr als ein Element im Dokument darf das
autofocus
Attribut haben. Wenn es auf mehr als ein Element gesetzt wird, erhält das erste Element mit diesem Attribut den Fokus.Das
autofocus
Attribut kann nicht auf Eingaben des Typshidden
verwendet werden, da versteckte Eingaben nicht fokussierbar sind.Warnung: Automatisches Fokussieren eines Formularsteuerelements kann sehbehinderte Nutzer, die Bildschirmlesetechnologie verwenden, und Menschen mit kognitiven Beeinträchtigungen verwirren. Wenn
autofocus
zugewiesen ist, "teleportieren" Bildschirmleser ihre Benutzer ohne vorherige Warnung zum Formularsteuerelement.Verwenden Sie das
autofocus
Attribut mit Bedacht auf Barrierefreiheit. Das automatische Fokussieren auf ein Steuerelement 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 Label des fokussierten Formularsteuerelements ankündigt, wird der Bildschirmleser nichts vor dem Label ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird den durch den vorhergehenden Inhalt geschaffenen Kontext ebenso verpassen. capture
-
Eingeführt in der HTML Media Capture Spezifikation und nur gültig für den
file
Eingabetyp, dascapture
Attribut definiert, welches Medium—Mikrofon, Video, oder Kamera—zum Aufnehmen einer neuen Datei für den Upload mitfile
Upload-Steuerelementen in unterstützenden Szenarien verwendet werden soll. Siehe den file Eingabetyp. checked
-
Gültig für beide
radio
undcheckbox
Typen,checked
ist ein boolesches Attribut. Wenn es auf einemradio
Typ vorhanden ist, zeigt es an, dass das Optionsfeld das aktuell ausgewählte in der Gruppe der gleichnamigen Optionsfelder ist. Wenn es auf einemcheckbox
Typ vorhanden ist, zeigt es an, dass das Kontrollkästchen standardmäßig markiert ist (wenn die Seite geladen wird). Es zeigt nicht an, ob dieses Kontrollkästchen derzeit markiert ist: wenn sich der Zustand des Kontrollkästchens ändert, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur dasHTMLInputElement
'schecked
IDL Attribut wird aktualisiert.)Hinweis: Im Gegensatz zu anderen Eingabesteuerelementen wird der Wert eines Kontrollkästchens und eines Optionsfeldes nur in die übermittelten Daten aufgenommen, wenn sie derzeit
checked
sind. Wenn dies der Fall ist, werden der Name und die Wert(e) der markierten Steuerelemente übermittelt.Wenn beispielsweise ein Kontrollkästchen, dessen
name
fruit
ist, einenvalue
voncherry
hat und das Kontrollkästchen markiert ist, enthalten die übermittelten Formulardatenfruit=cherry
. Wenn das Kontrollkästchen nicht aktiv ist, wird es überhaupt nicht in den Formulardaten aufgeführt. Der Standardvalue
für Kontrollkästchen und Optionsfelder iston
. dirname
-
Gültig für
hidden
,text
,search
,url
,tel
undemail
Eingabetypen, dasdirname
Attribut ermöglicht die Übermittlung der Richtung des Elements. Wenn es enthalten ist, wird das Formularsteuerelement 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 gesetzt.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, bewirkt die Eingabe sowohl das
name
/value
Paar vonfruit=cherry
als auch dasdirname
/ Richtungs-Paar vonfruit-dir=ltr
. Für weitere Informationen siehe dasdirname
Attribut. disabled
-
Ein boolesches Attribut, das, wenn vorhanden, angibt, dass der Benutzer nicht mit der Eingabe interagieren können sollte. Deaktivierte Eingaben werden typischerweise mit einer gedimmteren Farbe oder durch eine andere Form der Anzeige, dass das Feld nicht verfügbar ist, gerendert.
Insbesondere erhalten deaktivierte Eingaben nicht das
click
Event und deaktivierte Eingaben werden nicht mit dem Formular übermittelt.Hinweis: Obwohl nicht von der Spezifikation vorgeschrieben, wird Firefox standardmäßig den dynamischen deaktivierten Zustand eines
<input>
über Seitenladezeiten hinweg beibehalten. Verwenden Sie dasautocomplete
Attribut, um diese Funktion zu steuern. form
-
Eine Zeichenfolge, die das
<form>
Element angibt, mit dem die Eingabe verknüpft ist (d.h. ihr Formulareigentümer). Der Wert dieser Zeichenfolge, falls vorhanden, muss mit demid
eines<form>
Elements im gleichen Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, wird das<input>
Element dem nächstgelegenen enthaltenen Formular zugeordnet, falls vorhanden.Das
form
Attribut ermöglicht es Ihnen, eine Eingabe irgendwo im Dokument zu platzieren, diese aber mit einem Formular an anderer Stelle im Dokument einzubeziehen.Hinweis: Eine Eingabe kann nur mit einem Formular verknüpft sein.
formaction
-
Nur gültig für die
image
undsubmit
Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen. formenctype
-
Nur gültig für die
image
undsubmit
Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen. formmethod
-
Nur gültig für die
image
undsubmit
Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen. formnovalidate
-
Nur gültig für die
image
undsubmit
Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen. formtarget
-
Nur gültig für die
image
undsubmit
Eingabetypen. Siehe den submit Eingabetyp für weitere Informationen. height
-
Nur gültig für den
image
Eingabetyp,height
ist die Höhe der Bilddatei, die für die Darstellung des grafischen Übermittlungs-Knopfes angezeigt wird. Siehe den image Eingabetyp. id
-
Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, definiert eine eindeutige Kennung (ID), die im gesamten Dokument eindeutig sein muss. Sein Zweck besteht darin, das Element beim Verlinken zu identifizieren. Der Wert wird als Wert des
for
Attributs des<label>
genutzt, um das Label mit der Formularsteuerung zu verlinken. Siehe<label>
. inputmode
-
Globaler Wert, der für alle Elemente gültig ist, bietet einen Hinweis an Browser, welche Art von virtueller Tastaturkonfiguration verwendet werden soll, wenn dieses Element oder dessen Inhalte bearbeitet werden. Werte sind
none
,text
,tel
,url
,email
,numeric
,decimal
undsearch
. list
-
Der für das
list
Attribut gegebene Wert sollte dieid
eines<datalist>
Elements im gleichen Dokument sein. Das<datalist>
bietet eine Liste von vordefinierten Werten zum Vorschlagen für den Benutzer für diese Eingabe. Alle Werte in der Liste, die nicht mit demtype
kompatibel sind, sind nicht in den vorgeschlagenen Optionen enthalten. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.Es ist gültig für
text
,search
,url
,tel
,email
,date
,month
,week
,time
,datetime-local
,number
,range
, undcolor
.Laut den Spezifikationen wird das
list
Attribut nicht vonhidden
,password
,checkbox
,radio
,file
, oder einem der Schaltflächentypen unterstützt.Abhängig vom Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen, Markierungen entlang eines Bereichs oder sogar eine Eingabe sehen, die sich wie ein
<select>
öffnet, aber nicht aufgeführte Werte ermöglicht. Schauen Sie sich die Browser-Kompatibilitätstabelle für die anderen Eingabetypen an.Siehe das
<datalist>
Element. max
-
Gültig für
date
,month
,week
,time
,datetime-local
,number
, undrange
, definiert den größten Wert im Bereich der erlaubten Werte. Wenn der in das Element eingegebenevalue
diesen überschreitet, schlägt das Element Constraint Validierung fehl. Wenn der Wert desmax
Attributs keine Zahl ist, dann hat das Element keinen Maximalwert.Es gibt einen speziellen Fall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der
max
Wert niedriger sein als dermin
Wert, was darauf hinweist, dass dieser Bereich sich umschlagen kann; dies ermöglicht es zum Beispiel, einen Zeitraum von 22:00 bis 04:00 Uhr zu spezifizieren. maxlength
-
Gültig für
text
,search
,url
,tel
,email
, undpassword
, definieren 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 keinmaxlength
angegeben ist oder ein ungültiger Wert angegeben ist, hat das Feld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert vonminlength
sein.Die Eingabe schlägt Constraint Validierung fehl, wenn die Länge des in das Feld eingegebenen Textes länger ist als
maxlength
UTF-16 Codeeinheiten. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als dasmaxlength
Attribut erlaubt. Constraint Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Clientseitige Validierung für weitere Informationen. min
-
Gültig für
date
,month
,week
,time
,datetime-local
,number
, undrange
, definiert den niedrigsten Wert im Bereich der erlaubten Werte. Wenn der in das Element eingegebenevalue
kleiner ist als dieser, schlägt das Element Constraint Validierung fehl. Wenn der Wert desmin
Attributs keine Zahl ist, dann hat das Element keinen Minimalwert.Dieser Wert muss kleiner oder gleich dem Wert des
max
Attributs sein. Wenn dasmin
Attribut vorhanden ist, aber nicht angegeben oder ungültig ist, wird keinmin
Wert angewendet. Wenn dasmin
Attribut gültig ist und ein nicht leerer Wert kleiner ist als das durch dasmin
Attribut erlaubte Minimum, wird die Constraint Validierung die Formularübermittlung verhindern. Siehe Clientseitige Validierung für weitere Informationen.Es gibt einen speziellen Fall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der
max
Wert niedriger sein als dermin
Wert, was darauf hinweist, dass dieser Bereich sich umschlagen kann; dies ermöglicht es zum Beispiel, einen Zeitraum von 22:00 bis 04:00 Uhr zu spezifizieren. minlength
-
Gültig für
text
,search
,url
,tel
,email
undpassword
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, kleiner oder gleich dem durchmaxlength
angegebenen Wert. Wenn keinminlength
angegeben ist oder ein ungültiger Wert angegeben ist, hat die Eingabe keine Mindestlänge.Die Eingabe schlägt Constraint Validierung fehl, wenn die Länge des in das Feld eingegebenen Textes kürzer ist als
minlength
UTF-16 Codeeinheiten und verhindert die Formularübermittlung. Constraint Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Clientseitige Validierung für weitere Informationen. multiple
-
Das boolesche
multiple
Attribut, wenn gesetzt, bedeutet, dass der Benutzer in der E-Mail-Widget komma-getrennte E-Mail-Adressen eingeben kann oder mehr als eine Datei mit derfile
Eingabe wählen kann. Siehe den email und file Eingabetyp. name
-
Eine Zeichenfolge, die einen Namen für die Eingabesteuerung angibt. Dieser Name wird zusammen mit dem Wert der Steuerung übermittelt, wenn die Formulardaten übermittelt werden.
Betrachten Sie das
name
Attribut als obligatorisch (obwohl es nicht ist). Wenn eine Eingabe keinname
angegeben hat odername
leer ist, wird der Wert der Eingabe nicht mit dem Formular übermittelt! (Deaktivierte Steuerungen, nicht markierte Optionsfelder, nicht markierte Kontrollkästchen und Rücksetzknöpfe werden ebenfalls nicht gesendet.)Es gibt zwei Sonderfälle:
_charset_
: Wenn als Name eines<input>
Elements vom Typ hidden verwendet, wird dervalue
der Eingabe automatisch vom User-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 erzeugt ein einzigartiges Verhalten für Optionsfelder.Nur ein Optionsfeld in einer gleichnamigen Gruppe von Optionsfeldern kann auf einmal markiert werden. Wenn eines der Optionsfelder in dieser Gruppe ausgewählt wird, wird automatisch das derzeit ausgewählte Optionsfeld in derselben Gruppe abgewählt. Der Wert dieses “einen markierten Optionsfeldes” wird zusammen mit dem Namen übermittelt, wenn das Formular abgesendet wird.
Wenn Sie in eine Serie gleichnamiger Optionsfelder einsteigen, wenn eines davon markiert ist, wird das markierte den Fokus erhalten. Wenn sie nicht zusammen in der Quellreihenfolge sind, wenn eines der Gruppe markiert ist, beginnt das Einsteigen in die Gruppe, wenn das erste in der Gruppe erreicht wird und alle übersprungen werden, die nicht markiert sind. Anders ausgedrückt: Wenn eines markiert ist, überspringt die Neigung die nicht markierten Optionsfelder in der Gruppe. Wenn keine markiert sind, erhält die Optionsfeldgruppe den Fokus, wenn das erste Optionsfeld in der gleichnamigen Gruppe erreicht wird.
Sobald eines der Optionsfelder in der Gruppe den Fokus hat, wird durch Verwendung der Pfeiltasten durch alle Optionsfelder des gleichen Namens navigiert, selbst wenn die Optionsfelder in der Quellreihenfolge nicht zusammen angeordnet sind.
Wenn ein Eingabeelement einen
name
erhält, wird dieser Name eine Eigenschaft des übergeordneten FormularelementsHTMLFormElement.elements
. Wenn Sie eine Eingabe haben, derenname
aufguest
und eine andere aufhat-size
gesetzt ist, 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 undhatSize
das Objekt für dashat-size
Feld sein.Warnung: Vermeiden Sie es, Formularelementen einen
name
zu geben, der einer integrierten Methode oder Eigenschaft des Formulars entspricht, da Sie dann die vordefinierte Eigenschaft oder Methode mit diesem Verweis auf das entsprechende Eingabefeld überschreiben würden. pattern
-
Gültig für
text
,search
,url
,tel
,email
, undpassword
, daspattern
Attribut wird verwendet, um einen regulären Ausdruck zu erstellen, den dervalue
der Eingabe entsprechen muss, damit der Wert die Constraint Validierung 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. Keine Schrägstriche sollten um den Mustertest herum angegeben werden. Beim Erstellen des regulären Ausdrucks:- wird das Muster implizit mit
^(?:
und)$
umschlossen, sodass das Match gegen den gesamten Eingabewert erforderlich ist, d.h.^(?:<pattern>)$
. - wird das 'v' Flag angegeben, damit das Muster als eine Sequenz von Unicode-Codepunkten interpretiert wird, anstatt als ASCII.
Wenn das
pattern
Attribut vorhanden ist, aber nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut wird vollständig ignoriert. Wenn das Pattern-Attribut gültig ist und ein nicht leerer Wert das Muster nicht trifft, verhindert die Constraint Validierung die Formularübermittlung. Wenn dasmultiple
vorhanden ist, wird der erstellte reguläre Ausdruck mit jedem durch Kommas getrennten Wert verglichen.Hinweis: Wenn das
pattern
Attribut verwendet wird, informieren Sie den Benutzer über das erwartete Format, indem Sie erläuternden Text in der Nähe hinzufügen. Sie können auch eintitle
Attribut hinzufügen, um zu erläutern, welche Anforderungen erfüllt sein müssen, um das Muster zu treffen; die meisten Browser zeigen diesen Titel als Tooltip an. Die sichtbare Erklärung ist erforderlich für Barrierefreiheit. Der Tooltip ist eine Verbesserung.Siehe Clientseitige Validierung für weitere Informationen.
- wird das Muster implizit mit
placeholder
-
Gültig für
text
,search
,url
,tel
,email
,password
undnumber
, dasplaceholder
Attribut liefert einen kurzen Hinweis für den Benutzer, welche Art von Informationen in dem Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf die erwartete Art der Daten gibt, anstatt einer Erklärung oder Aufforderung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten. Beispielsweise könnte bei einem Feld, das den Vornamen eines Benutzers erfassen soll, und dessen Label „Vorname“ lautet, eine geeignete Platzhalterangabe „z.B., Mustafa“ sein.Hinweis: Das
placeholder
Attribut ist nicht so semantisch nützlich wie andere Möglichkeiten, um Ihr Formular zu erklären, und kann unerwartete technische Probleme mit Ihrem Inhalt verursachen. Siehe Labels für weitere Informationen. popovertarget
-
Wandelt ein
<input type="button">
Element in einen Popover-Steuerelement-Knopf um; nimmt die ID des Popover-Elements, das es steuern soll, als Wert. Siehe die Popover API Landing-Seite für weitere Einzelheiten. Die Etablierung einer Beziehung zwischen einem Popover und seinem Aufrufer-Knopf unter Verwendung despopovertarget
Attributs hat zwei weitere nützliche Effekte:- Der Browser erstellt eine implizite
aria-details
undaria-expanded
Beziehung zwischen Popover und Aufrufer und platziert das Popover in einer logischen Position in der Tastatur-Fokusnavigationsreihenfolge, wenn es gezeigt wird. Dies macht das Popover für Tastatur- und Hilfstoolbenutzer (AT) besser zugänglich (siehe auch Popover Barrierefreiheitsmerkmale). - Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, die es sehr bequem macht, Popover relativ zu ihren Steuerungen mit CSS Ankerpositioning zu positionieren. Siehe Popover Ankerpositionierung für weitere Einzelheiten.
- Der Browser erstellt eine implizite
popovertargetaction
-
Gibt die auszuführende Aktion auf einem Popover-Element an, das von einem Steuerungselement
<input type="button">
gesteuert wird. Mögliche Werte sind:"hide"
-
Der Knopf wird ein gezeigtes Popover verbergen. Wenn Sie versuchen, ein bereits verborgenes Popover zu verbergen, wird keine Aktion vorgenommen.
"show"
-
Der Knopf wird ein verborgenes Popover zeigen. Wenn Sie versuchen, ein bereits gezeigtes Popover zu zeigen, wird keine Aktion vorgenommen.
"toggle"
-
Der Knopf wird ein Popover zwischen dem Status „anzeigen“ und „verbergen“ umschalten. Wenn das Popover verborgen ist, wird es gezeigt; wenn das Popover angezeigt wird, wird es verborgen. Wenn
popovertargetaction
weggelassen wird, ist"toggle"
die Standardaktion, die vom Steuerungsknopf ausgeführt wird.
readonly
-
Ein boolesches Attribut, das, wenn vorhanden, angibt, dass der Benutzer den Wert der Eingabe nicht ändern können sollte. 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 boolesches Attribut, das, wenn vorhanden, anzeigt, dass der Benutzer einen Wert für die Eingabe angeben muss, bevor das Besitzformular abgesendet werden kann. Dasrequired
Attribut wird von dentext
,search
,url
,tel
,email
,date
,month
,week
,time
,datetime-local
,number
,password
,checkbox
,radio
, undfile
Eingabetypen unterstützt.Siehe Clientseitige Validierung und das HTML Attribut:
required
für weitere Informationen. size
-
Gültig für
email
,password
,tel
,url
, undtext
, dassize
Attribut gibt an, wie viel der Eingabe angezeigt wird. Grundsätzlich ergibt es dasselbe Ergebnis wie das Setzen der CSSwidth
Eigenschaft mit ein paar 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 ist es Pixel (oderpx
Einheiten). CSSwidth
hat Vorrang vor demsize
Attribut. src
-
Nur gültig für den
image
Eingabeknopf,src
ist eine Zeichenfolge, die die URL der Bilddatei angibt, die angezeigt werden soll, um den grafischen Übermittlungs-Knopf darzustellen. 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, der der Wert entsprechen muss.Wenn nicht explizit enthalten:
step
hat standardmäßig den Wert 1 fürnumber
undrange
.- Jeder Date- oder Zeiteingabetyp hat einen Standardwert für den
step
Wert, der für den Typ geeignet ist; siehe die einzelnen Eingabeseiten:date
,datetime-local
,month
,time
, undweek
.
Der Wert muss eine positive Zahl—ganzzahlig oder Gleitkomme—oder der spezielle Wert
any
sein, was bedeutet, dass kein Schritt impliziert ist und jeder Wert erlaubt ist (abgesehen von anderen Beschränkungen, wiemin
undmax
).Wenn
any
nicht explizit gesetzt ist, sind gültige Werte für dienumber
, date-/Zeiteingabetypen undrange
Eingabetypen gleich dem Basiswert für die Schrittweite—demmin
Wert und Inkrementen desstep
Werts, bis zummax
Wert, wenn angegeben.Zum Beispiel, wenn Sie
<input type="number" min="10" step="2">
haben, dann sind alle geraden ganzen Zahlen,10
oder größer, gültig. Wenn weggelassen,<input type="number">
, sind alle ganzen Zahlen gültig, aber Gleitkomma-Zahlen (wie4.2
) sind nicht gültig, weil derstep
standardmäßig auf1
gesetzt ist. Für4.2
um gültig zu sein, hätte derstep
aufany
, 0.1, 0.2 gesetzt sein müssen, oder dermin
Wert hätte eine Zahl sein müssen, die auf.2
endet, wie<input type="number" min="-5.2">
.Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht der Schrittweitekonfiguration entsprechen, wird der Wert bei der Constraint Validierung als ungültig betrachtet und wird die
:invalid
Pseudoklasse treffen.Siehe Clientseitige Validierung für weitere Informationen.
tabindex
-
Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, ein ganzzahliges Attribut, das angibt, ob das Element den Eingabefokus erhalten kann (fokussierbar ist), ob es an sequentieller Tastaturnavigation teilnehmen sollte. Da alle Eingabetypen außer Eingaben des Typs hidden fokussierbar sind, sollte dieses Attribut nicht auf Formular-Steuerelementen verwendet werden, da dies eine Verwaltung der Fokusreihenfolge für alle Elemente im Dokument erfordern würde, mit dem Risiko, die Benutzerfreundlichkeit und Barrierefreiheit zu beeinträchtigen, wenn es falsch gemacht wird.
title
-
Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, enthält einen Text, der beratende Informationen darstellt, die sich auf das Element beziehen, zu dem es gehört. Solche Informationen können typischerweise, aber nicht notwendig, dem Benutzer als Tooltip präsentiert werden. Der Titel sollte NICHT als die primäre Erklärung des Zwecks der Formularsteuerung verwendet werden. Verwenden Sie stattdessen das
<label>
Element mit einemfor
Attribut, das auf dasid
der Formularsteuerung gesetzt ist. Siehe Labels unten. type
-
Eine Zeichenfolge, die den Typ der Steuerung, die darzustellen ist, angibt. Beispielsweise wird für ein Kontrollkästchen ein Wert von
checkbox
verwendet. Wenn weggelassen (oder ein unbekannter Wert angegeben wird), wird der Eingabetyptext
verwendet, wodurch ein Klartext-Eingabefeld erstellt wird.Die erlaubten Werte sind in Eingabetypen oben aufgeführt.
value
-
Der Wert der Eingabesteuerung. Wenn im HTML angegeben, ist dies der Initialwert, und danach kann er jederzeit mittels JavaScript geändert oder abgerufen werden, indem auf die entsprechende
HTMLInputElement
Objektvalue
Eigenschaft zugegriffen wird. Dasvalue
Attribut ist immer optional, sollte aber als zwingend fürcheckbox
,radio
, undhidden
betrachtet werden. width
-
Nur gültig für den
image
Eingabeknopf,width
ist die Breite der Bilddatei, die angezeigt werden soll, um den grafischen Übermittlungs-Knopf darzustellen. Siehe den image Eingabetyp.
Nicht-Standard-Attribute
Die folgenden nicht-standardisierten Attribute sind auch in einigen Browsern verfügbar. Als allgemeine Regel sollten Sie sie vermeiden, es sei denn, es lässt sich nicht vermeiden.
Attribut | Beschreibung |
---|---|
incremental |
Ob wiederholte [`search`](/de/docs/Web/API/HTMLInputElement/search_event) Events gesendet werden sollen, um Live-Suchergebnisse zu aktualisieren, während der Benutzer den Wert des Feldes noch bearbeitet. Nur WebKit und Blink (Safari, Chrome, Opera, etc.). |
mozactionhint
Veraltet
|
Ein String, der den Typ der Aktion anzeigt, die ausgeführt wird, wenn der Benutzer die Eingabetaste oder Rückstelltaste drückt, während das Feld bearbeitet wird; dies wird verwendet, um eine angemessene Etikettierung für diese Taste auf einer virtuellen Tastatur zu bestimmen. Da dieses Attribut veraltet ist, verwenden Sie |
orient |
Legt die Ausrichtung des Bereichsreglers fest. Nur Firefox. |
results |
Die maximale Anzahl an Elementen, die in der Dropdown-Liste der vorherigen Suchanfragen angezeigt werden soll. Nur Safari. |
webkitdirectory
|
Ein Boolean, der angibt, ob nur Verzeichnisse zur Auswahl durch den Benutzer zugelassen werden sollen (oder Verzeichnisse, wenn multiple ebenfalls vorhanden ist).
|
incremental
Nicht standardisiert-
Das Boolesche Attribut
incremental
ist eine WebKit und Blink Erweiterung (daher unterstützt von Safari, Opera, Chrome, etc.), die, wenn vorhanden, den User-Agent anweist, die Eingabe als Live-Suche zu verarbeiten. Während der Benutzer den Wert des Feldes bearbeitet, sendet der User-Agentsearch
Events an dasHTMLInputElement
Objekt, das das Suchfeld repräsentiert. Dies erlaubt Ihrem Code, die Suchergebnisse in Echtzeit zu aktualisieren, während der Benutzer die Suche bearbeitet.Wenn
incremental
nicht spezifiziert ist, wird dassearch
Event nur gesendet, wenn der Benutzer explizit eine Suche initiiert (z.B. durch Drücken der Eingabetaste oder Rückstelltaste, während das Feld bearbeitet wird).Das
search
Event ist ratengesteuert, so dass es nicht häufiger als in einem von der Implementierung definierten Intervall gesendet wird. orient
Nicht standardisiert-
Ähnlich dem -moz-orient nicht-standard CSS Attribut, das die
<progress>
und<meter>
Elemente betrifft, definiert dasorient
Attribut die Orientierung des Bereichsreglers. Werte sindhorizontal
, was bedeutet, dass der Bereich horizontal gerendert wird, undvertical
, bei dem der Bereich vertikal gerendert wird. Siehe Erstellen von vertikalen Steuerelementen für einen modernen Ansatz zur Erstellung von vertikalen Steuerelementen. results
Nicht standardisiert-
Das
results
Attribut—nur von Safari unterstützt—ist ein numerischer Wert, der Ihnen erlaubt, die maximale Anzahl von Einträgen, die im [Eingabe]-Element nativ bereitgestellten Dropdown-Menü von vorherigen Suchanfragen angezeigt werden, zu überschreiben.Der Wert muss eine nicht-negative Dezimalzahl sein. Wenn nicht gegeben, oder ein ungültiger Wert gegeben wird, wird die Standardmaximalzahl der Einträge des Browsers verwendet.
webkitdirectory
Nicht standardisiert-
Das Boolean
webkitdirectory
Attribut, wenn vorhanden, gibt an, dass nur Verzeichnisse im Dateiauswahlinteface zur Auswahl für den Benutzer verfügbar sein sollen. SieheHTMLInputElement.webkitdirectory
für weitere Details und Beispiele.Obwohl ursprünglich nur für WebKit-basierte Browser implementiert, ist
webkitdirectory
auch verwendbar in Microsoft Edge sowie in Firefox-Versionen 50 und später. Allerdings, obwohl es relativ breite Unterstützung hat, ist es immer noch nicht standardisiert und sollte nicht verwendet werden, es sei denn, es gibt keine alternative Möglichkeit.
Methoden
Die folgenden Methoden werden von der HTMLInputElement
Schnittstelle bereitgestellt, die die <input>
Elemente im DOM repräsentiert. Außerdem sind die von den übergeordneten Schnittstellen spezifizierten Methoden verfügbar, HTMLElement
, Element
, Node
, und EventTarget
.
checkValidity()
-
Gibt
true
zurück, wenn der Wert des Elements alle Gültigkeitsprüfungen besteht; andernfalls wirdfalse
zurückgegeben und eininvalid
Event am Element ausgelöst. reportValidity()
-
Gibt
true
zurück, wenn der Wert des Elements alle Gültigkeitsprüfungen besteht; andernfalls wirdfalse
zurückgegeben, eininvalid
Event am Element ausgelöst, und (wenn das Event nicht abgesagt wird) dem Benutzer das Problem gemeldet. select()
-
Wählt den gesamten Inhalt des
<input>
Elements aus, wenn der Inhalt des Elements auswählbar ist. Für Elemente mit nicht auswählbarem Textinhalt (wie ein visueller Farbwähler oder ein Kalenderdatei-Eingabefeld) macht diese Methode nichts. setCustomValidity()
-
Legt eine benutzerdefinierte Meldung fest, die angezeigt wird, wenn der Wert des Eingabeelements ungültig ist.
setRangeText()
-
Legt den Inhalt 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()
-
Wählt den angegebenen Bereich von Zeichen in einem Texteingabeelement aus. Macht nichts für Eingaben, die nicht als Texteingabefelder dargestellt werden.
showPicker()
-
Zeigt den Browser-Auswahldialog für das Eingabeelement, der normalerweise angezeigt werden würde, wenn das Element ausgewählt ist, jedoch durch einen Knopfdruck oder eine andere Benutzerinteraktion ausgelöst.
stepDown()
-
Dekrementiert den Wert einer numerischen Eingabe standardmäßig um eins oder um die angegebene Anzahl von Einheiten.
stepUp()
-
Inkrementiert den Wert einer numerischen Eingabe um eins oder um die angegebene Anzahl von Einheiten.
CSS
Inputs, die ersetzte Elemente sind, haben einige Merkmale, die nicht für Nicht-Formularelemente anwendbar sind. Es gibt CSS-Selektoren, die gezielt auf Formularelemente basieren auf ihren UI-Merkmalen abzielen können, auch bekannt als UI-Pseudoklassen. Das Eingabeelement 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, eingetippt usw.) oder den Fokus annehmen kann und ebenfalls einen deaktivierten Zustand hat, in dem es nicht aktiviert werden kann oder den Fokus nicht annehmen kann. |
:disabled |
Jedes derzeit deaktivierte Element, das einen aktivierten Zustand hat, das ansonsten aktiviert werden könnte (ausgewählt, angeklickt, eingetippt usw.) oder den Fokus annehmen 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 vorhanden ist und noch keinen Wert hat.
|
:default |
Formularelemente, die in einer Gruppe von verwandten Elementen das Standardelement sind. Passt checkbox- und radio-Eingabetypen, die beim Laden oder Rendern der Seite überprüft wurden. |
:checked |
Passt checkbox- und radio-Eingabetypen, die derzeit überprüft sind (und die <option> in einem <select> , die derzeit ausgewählt sind).
|
:indeterminate |
checkbox-Elemente, deren indeterminate-Eigenschaft durch JavaScript auf „wahr“ gesetzt ist, radio-Elemente, wenn alle Radiobuttons mit dem gleichen Namenwert im Formular nicht ausgewählt sind, und <progress> -Elemente in einem unbestimmten Zustand
|
:valid |
Formularsteuerungen, auf die die Validierung von Einschränkungen angewendet werden kann und die derzeit gültig sind. |
:invalid |
Formularsteuerungen, auf die die Validierung von Einschränkungen angewendet wird und die derzeit nicht gültig sind. Passt ein Formularsteuerungselement, dessen Wert nicht mit den durch seine Attribute festgelegten Einschränkungen übereinstimmt, wie required , pattern , step und max .
|
:in-range |
Eine nicht leere Eingabe, deren aktueller Wert innerhalb der durch die Attribute min und max sowie step angegebenen Bereichsgrenzen liegt.
|
:out-of-range |
Eine nicht leere Eingabe, deren aktueller Wert NICHT innerhalb der durch die Attribute min und max angegebenen Bereichsgrenzen liegt oder nicht die step -Vorgabe einhält.
|
:required |
<input> , <select> , oder <textarea> -Element, das das required -Attribut gesetzt hat. Passt nur zu Elementen, die erforderlich sein können. Das Attribut bei einem nicht erforderlichen Element wird kein Übereinstimmung ergeben.
|
:optional |
<input> , <select> , oder <textarea> -Element, das NICHT das required -Attribut gesetzt hat. Passt nicht zu Elementen, die nicht erforderlich sein können.
|
:blank |
<input> und <textarea> -Elemente, die derzeit keinen Wert haben.
|
:user-invalid |
Ähnlich wie :invalid , wird jedoch beim Verlassen des Feldes aktiviert. Passt auf ungültige Eingaben, jedoch nur nach der Benutzerinteraktion, z.B. durch Fokussieren auf die Steuerung, Verlassen der Steuerung oder Versuch, das Formular mit der ungültigen Steuerung abzusenden.
|
:open |
<input> -Elemente, die eine Auswahlmöglichkeit für den Benutzer anzeigen (zum Beispiel <input type="color"> ) — jedoch nur, wenn das Element im offenen Zustand ist, also wenn die Auswahl angezeigt wird.
|
Pseudoklassen-Beispiel
Wir können ein Checkbox-Label 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 einer aktivierten Eingabe kommt. Wir haben keine Stile angewendet, wenn die input
nicht aktiviert ist.
input:checked + label {
color: red;
font-weight: bold;
}
Attributselektoren
Es ist möglich, verschiedene Arten von Formsteuerungen basierend auf ihrem type
mit Attributselektoren anzusprechen. CSS-Attributselektoren passen zu Elementen basierend entweder nur auf das Vorhandensein eines Attributs oder den 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 Platzhaltertext als durchscheinend oder hellgrau. Das ::placeholder
Pseudo-Element ist der placeholder
Text der Eingabe. Es kann mit einem begrenzten Satz von CSS-Eigenschaften gestylt werden.
::placeholder {
color: blue;
}
Nur der Teil der CSS-Eigenschaften, der auf das ::first-line
Pseudo-Element angewendet werden kann, kann in einer Regel verwendet werden, die ::placeholder
in ihrem Selektor verwendet.
appearance
Die appearance
-Eigenschaft ermöglicht das Darstellen von (fast) jedem Element im plattform-nativen Stil basierend auf dem Thema des Betriebssystems sowie die Entfernung jeder plattform-nativen Gestaltung mit dem Wert none
.
Sie könnten 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 plattform-native Rahmen, aber nicht die Funktionalität.
caret-color
Eine speziell für Text-Eingabebezogene Elemente spezifische Eigenschaft ist die CSS caret-color
-Eigenschaft, mit der Sie die Farbe festlegen können, die zum Zeichnen des Texteingabe-Cursors verwendet wird:
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 es Ihnen, das Größenverhalten von Formulareingaben zu kontrollieren (d.h. sie erhalten standardmäßig eine vorgesehene Größe). Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben, damit sich Formsteuerungen in ihrer Größe anpassen, um ihren Inhalt anzupassen.
Diese Eigenschaft wird typischerweise verwendet, um Eingabefelder zu erstellen, die ihren Inhalt umschließen 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 Schnittstellen) ist das <input>
-Element ein ersetztes Element. Wenn dies der Fall ist, können die Position und Größe des Elements und seine Positionierung innerhalb seines Rahmens mit den CSS-Eigenschaften object-position
und object-fit
angepasst werden.
Styling
Für weitere Informationen über das Hinzufügen von Farben zu Elementen in HTML, siehe:
Siehe auch:
Zusätzliche Merkmale
Labels
Labels sind erforderlich, um erläuternden Text mit einem <input>
zu verknüpfen. Das <label>
-Element liefert erklärende Informationen über ein Formularfeld, das immer angemessen ist (abgesehen von Layout-Bedenken, die Sie haben könnten). Es ist nie eine schlechte Idee, ein <label>
zu verwenden, um zu erklären, was in ein <input>
oder ein <textarea>
eingegeben werden soll.
Zugehörige Labels
Die semantische Paarung von <input>
- und <label>
-Elementen ist nützlich für unterstützende Technologien wie Bildschirmleseprogramme. Indem sie mit dem for
-Attribut des <label>
gepaart werden, verknüpfen Sie das Label mit der Eingabe in einer Art und Weise, die es Bildschirmleseprogrammen ermöglicht, Eingaben genauer zu beschreiben.
Es reicht nicht aus, einfachen Text neben dem <input>
-Element zu haben. Vielmehr erfordern Benutzerfreundlichkeit und Barrierefreiheit die Einbeziehung entweder eines 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 barrierefrei: Es gibt keine Beziehung zwischen der Eingabeaufforderung und dem <input>
-Element.
Zusätzlich zu einem zugänglichen Namen bietet das Label eine größere „Trefferfläche“ für Maus- und Touchscreen-Nutzer, auf die sie klicken oder tippen können. Indem ein <label>
mit einem <input>
verbunden wird, fokussiert das Klicken auf eines der beiden die Eingabe. Wenn Sie einfachen Text verwenden, um Ihre Eingabe zu beschriften, wird dies nicht geschehen. Das Teil der Aktivierungsfläche für die Eingabe beeinträchtigt Menschen mit motorischen Störungen positiv.
Als Webentwickler ist es wichtig, dass wir niemals davon ausgehen, dass Menschen alle Dinge wissen, die wir wissen. Die Vielfalt der Menschen, die das Web nutzen – und daher auch Ihre Website – garantiert praktisch, dass einige Besucher Ihrer Website einige Variationen in Denkprozessen und/oder Umständen haben, die sie dazu führen, Ihre Formulare anders zu interpretieren als Sie, ohne klare und korrekt präsentierte Labels.
Platzhalter sind nicht barrierefrei
Das placeholder
-Attribut ermöglicht es Ihnen, Text anzugeben, der innerhalb des Inhaltsbereichs des <input>
-Elements erscheint, wenn dieser leer ist. Der Platzhalter sollte niemals erforderlich sein, um Ihre Formulare zu verstehen. Es ist kein Label und sollte nicht als Ersatz verwendet werden, weil es keins ist. Der Platzhalter wird dazu verwendet, einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht als Erklärung oder Aufforderung.
Der Platzhalter ist nicht nur für Bildschirmleseprogramme unzugänglich, sondern verschwindet auch, sobald der Benutzer Text in die Formularsteuerung eingibt oder die Formularsteuerung bereits einen Wert hat. Browser mit automatischen Seitenübersetzungsfunktionen können Attribute beim Übersetzen ignorieren, was bedeutet, dass der placeholder
möglicherweise nicht übersetzt wird.
Hinweis:
Verwenden Sie das placeholder
-Attribut nicht, wenn Sie es vermeiden können. Wenn Sie ein <input>
-Element beschriften müssen, verwenden Sie das <label>
-Element.
Client-seitige Validierung
Warnung:
Client-seitige Validierung ist nützlich, garantiert jedoch nicht, dass der Server gültige Daten empfängt. Wenn die Daten in einem bestimmten Format vorliegen müssen, verifiziert es immer auch auf der Serverseite und gibt eine 400
HTTP-Antwort zurück, wenn das Format ungültig ist.
Neben der Verwendung von CSS, um Eingaben basierend auf dem aktuellen Zustand der :valid
- oder :invalid
-UI-Zustände zu gestalten, wie im Abschnitt UI-Pseudoklassen oben erwähnt, bietet der Browser eine Client-seitige Validierung bei (beabsichtigter) Formularübermittlung. Bei der Formularübermittlung, falls eine Formularsteuerung die Validierungseinschränkungen nicht besteht, zeigt der unterstützende Browser eine Fehlermeldung auf der ersten ungültigen Formularsteuerung an; entweder wird eine Standardfehlermeldung basierend auf dem Fehlertyp angezeigt oder eine durch Sie festgelegte Nachricht.
Einige Eingabetypen und andere Attribute legen Einschränkungen fest, welche Werte für eine bestimmte Eingabe gültig sind. Zum Beispiel bedeutet <input type="number" min="2" max="10" step="2">
nur die Zahlen 2, 4, 6, 8 oder 10 sind gültig. Mehrere Fehler können auftreten, wie z.B. ein rangeUnderflow
-Fehler, wenn der Wert kleiner als 2 ist, rangeOverflow
, wenn er größer als 10 ist, stepMismatch
, falls der Wert eine Zahl zwischen 2 und 10 ist, jedoch keine gerade ganze Zahl (entspricht nicht den Anforderungen des step
-Attributs), oder typeMismatch
, wenn der Wert keine Zahl ist.
Für die Eingabetypen, deren Wertebereich periodisch ist (d.h. bei einem maximalen möglichen Wert die Werte wieder am Anfang beginnen, anstatt zu enden), ist es möglich, dass die Werte der max
- und min
-Eigenschaften umgekehrt werden, was darauf hinweist, dass der Bereich der erlaubten Werte bei min
beginnt, auf den niedrigsten möglichen Wert zurückgeht und dann weiter fortsetzt, bis max
erreicht ist. Dies ist besonders nützlich für Datumsangaben und Zeiten, z.B. wenn man den Bereich von 20:00 bis 8:00 Uhr zulassen möchte:
<input type="time" min="20:00" max="08:00" name="overnight" />
Spezifische Attribute und deren Werte können zu einem bestimmten 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 Maximalwert, 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 durch die maxlength -Eigenschaft erlaubt
|
min |
[`validityState.rangeUnderflow`](/de/docs/Web/API/ValidityState/rangeUnderflow) |
Tritt auf, wenn der Wert kleiner ist als der Minimalwert, 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 durch die minlength -Eigenschaft erforderlich
|
pattern |
[`validityState.patternMismatch`](/de/docs/Web/API/ValidityState/patternMismatch) |
Tritt auf, wenn ein Musterattribut mit einem gültigen regulären Ausdruck enthalten ist und der value nicht damit übereinstimmt.
|
required |
[`validityState.valueMissing`](/de/docs/Web/API/ValidityState/valueMissing) |
Tritt auf, wenn das required -Attribut vorhanden ist, aber der Wert null oder ein Radio oder eine Checkbox nicht ausgewählt ist.
|
step |
[`validityState.stepMismatch`](/de/docs/Web/API/ValidityState/stepMismatch) |
Der Wert entspricht nicht dem Schritt-Inkrement. Der Standardinkrement beträgt 1 , daher sind nur ganze Zahlen bei type="number" gültig, wenn step nicht enthalten ist. step="any" wird diesen Fehler nie werfen.
|
type |
[`validityState.typeMismatch`](/de/docs/Web/API/ValidityState/typeMismatch) |
Tritt auf, wenn der Wert nicht vom richtigen Typ ist, zum Beispiel eine E-Mail, die kein @ enthält, oder eine URL, die kein Protokoll enthält.
|
Wenn eine Formularsteuerung nicht das required
-Attribut hat, sind kein Wert oder ein leerer String nicht ungültig. Selbst wenn die oben genannten Attribute vorhanden sind, mit Ausnahme von required
, wird ein leerer String nicht zu einem Fehler führen.
Wir können Grenzen festlegen, was wir akzeptieren, und unterstützende Browser validieren diese Formularwerte nativ und benachrichtigen den Benutzer über einen Fehler, wenn das Formular abgesendet wird.
Zusätzlich zu den in der Tabelle oben beschriebenen Fehlern enthält das validityState
-Interface die booleschen schreibgeschützten Eigenschaften badInput
, valid
und customError
. Das Gültigkeitsobjekt umfasst:
validityState.valueMissing
validityState.typeMismatch
validityState.patternMismatch
validityState.tooLong
validityState.tooShort
validityState.rangeUnderflow
validityState.rangeOverflow
validityState.stepMismatch
validityState.badInput
validityState.valid
validityState.customError
Für jede dieser booleschen Eigenschaften gibt ein Wert von true
an, dass der angegebene Grund für das Scheitern der Validierung wahr ist, mit Ausnahme der valid
-Eigenschaft, die true
ist, wenn der Wert des Elements allen Einschränkungen gehorcht.
Wenn ein Fehler vorliegt, warnen unterstützende Browser den Benutzer und verhindern die Übermittlung des Formulars. Ein Wort der Vorsicht: Wenn ein benutzerdefinierter Fehler auf einen wahrheitsgemäßen Wert gesetzt ist (etwas anderes als der leere String oder null
), wird das Absenden des Formulars verhindert. Wenn es keine benutzerdefinierte Fehlermeldung gibt und keine der anderen Eigenschaften true zurückgeben, wird valid
true sein und das Formular kann abgesendet 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 Gültigkeitsmeldung auf den leeren String setzt, ist von entscheidender Bedeutung. Wenn der Benutzer einen Fehler macht und die Gültigkeit festgelegt ist, wird es sich nicht senden lassen, 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 Eingabe oder einem Wert abzusenden, der nicht dem pattern
entspricht.
Wenn Sie stattdessen benutzerdefinierte Fehlermeldungen anzeigen möchten, könnten Sie JavaScript wie folgt verwenden:
const nameInput = document.querySelector("input");
nameInput.addEventListener("input", () => {
nameInput.setCustomValidity("");
nameInput.checkValidity();
});
nameInput.addEventListener("invalid", () => {
if (nameInput.value === "") {
nameInput.setCustomValidity("Enter your username!");
} else {
nameInput.setCustomValidity(
"Usernames can only contain upper and lowercase letters. Try again!",
);
}
});
Das Beispiel wird so gerendert:
Kurz gesagt:
- Wir überprüfen den gültigen Zustand des Eingabeelements, jedes Mal, wenn sich sein Wert ä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
-Ereignishandlerfunktion wird ausgeführt. In dieser Funktion ermitteln wir, ob der Wert ungültig ist, weil er leer ist, oder weil er das Muster nicht erfüllt, indem wir einenif ()
-Block verwenden und eine benutzerdefinierte Gültigkeitsfehlermeldung setzen. - Dadurch wird, wenn der Eingabewert ungültig ist, wenn die Sende-Taste gedrückt wird, eine der benutzerdefinierten Fehlermeldungen angezeigt.
- Wenn er gültig ist, wird er so gesendet, wie Sie es erwarten. Dazu muss die benutzerdefinierte Gültigkeit abgebrochen werden, indem
setCustomValidity()
mit einem leeren String-Wert aufgerufen wird. Wir machen das daher jedes Mal, wenn dasinput
-Ereignis ausgelöst wird. Wenn Sie das nicht tun und vorher eine benutzerdefinierte Gültigkeit festgelegt wurde, wird die Eingabe als ungültig registriert, auch wenn sie bei der Übermittlung derzeit einen gültigen Wert enthält.
Hinweis: Überprüfen Sie immer die Eingabebeschränkungen sowohl auf der Client-Seite als auch auf der Server-Seite. Die Validierung von Einschränkungen entfernt nicht den Bedarf an Validierung auf der Server-Seite. Ungültige Werte können immer noch von älteren Browsern oder durch böswillige Akteure gesendet werden.
Hinweis:
Firefox unterstützte für viele Versionen ein proprietäres Fehlerattribut — x-moz-errormessage
—, das es Ihnen ermöglichte, benutzerdefinierte Fehlermeldungen auf ähnliche Weise festzulegen. Dies wurde ab Version 66 entfernt (siehe Firefox-Bug 1513890).
Lokalisierung
Die zulässigen Eingaben für bestimmte <input>
-Typen hängen von der Spracheinstellung ab. In einigen Regionen ist 1.000,00 eine gültige Zahl, während in anderen Regionen die gültige Möglichkeit, diese Zahl einzugeben, 1.000,00 ist.
Firefox verwendet die folgenden Heuristiken, um die Sprache zur Validierung der Benutzereingabe zu bestimmen (zumindest für type="number"
):
- Versuchen Sie die Sprache, die durch ein
lang
/xml:lang
-Attribut auf dem Element oder einem übergeordneten Element angegeben wird. - Versuchen Sie die Sprache, die durch einen
Content-Language
HTTP-Header angegeben wird. Oder, - Wenn keine angegeben ist, verwenden Sie die Spracheinstellung des Browsers.
Barrierefreiheit
Labels
Beim Einfügen von Eingaben ist es erforderlich, Labels hinzuzufügen. Dies ist notwendig, damit Nutzer, die unterstützende Technologien verwenden, wissen, wofür die Eingabe ist. Außerdem gibt das Klicken oder Berühren eines Labels dem Label zugeordneten Formularelement den Fokus. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für sehende Benutzer, erhöht den Bereich, den ein Benutzer klicken oder berühren kann, um das Formularelement zu aktivieren. Dies ist besonders nützlich (und sogar notwendig) für Radiobuttons und Checkboxen, die winzig sind. Weitere Informationen zu Labels im Allgemeinen finden Sie unter Labels.
Das Folgende ist ein Beispiel dafür, wie Sie das <label>
mit einem <input>
-Element in dem oben genannten Stil verknüpfen. Sie müssen dem <input>
ein id
-Attribut geben. Das <label>
benötigt dann ein for
-Attribut, dessen Wert der gleiche ist wie der id
des Eingabefeldes.
<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas" />
Größe
Interaktive Elemente wie Formulareingaben sollten einen ausreichend großen Bereich bieten, damit sie leicht aktiviert werden können. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Kontrollproblemen und Menschen, die ungenaue Formen der Eingabe verwenden, wie einen Stift oder Finger. Eine Mindestinteraktivgröße von 44×44 [CSS-Pixel]((https://w3c.github.io/wcag/guidelines/22/#dfn-css-pixels) wird empfohlen.
Technische Zusammenfassung
Inhaltskategorien |
Fließender Inhalt, aufgelistet, versendbarer, zurücksetzbarer, formularassoziiertes Element, phrasierter Inhalt. If the type is not hidden , then labelable element, palpable content.
|
---|---|
Erlaubter Inhalt | Kein; es ist ein void element. |
Tag-Auslassung | Muss ein Start-Tag haben und darf kein End-Tag haben. |
Erlaubte Eltern | Jedes Element, das phrasierter Inhalt akzeptiert. |
Implizite ARIA-Rolle |
|
Erlaubte ARIA-Rollen |
|
DOM-Interface | [`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement) |
Spezifikationen
Specification |
---|
HTML # the-input-element |
Browser-Kompatibilität
Siehe auch
- Formularbeschränkungsvalidierung
- Ihr erstes HTML-Formular
- Anleitung zur Strukturierung eines HTML-Formulars
- Die nativen Formular-Widgets
- Formulardaten senden
- Formulardatenvalidierung
- Anleitung zum Erstellen benutzerdefinierter Formular-Widgets
- HTML-Formulare in älteren Browsern
- Styling von HTML-Formularen
- Fortgeschrittenes Styling für HTML-Formulare
- Erstellen Vertikaler Formsteuerungen