<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 Eingabedatentypen und Steuerwidgets stehen zur Verfügung, abhängig vom Gerät und dem Benutzeragenten. Das <input>
-Element ist eines der mächtigsten und komplexesten in HTML aufgrund der großen Anzahl von 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 je nach Wert seines type
-Attributs, daher werden die verschiedenen Typen auf ihren eigenen separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben ist, wird standardmäßig der Typ text
verwendet.
Die verfügbaren Typen sind wie folgt:
Typ | Beschreibung | Einfache Beispiele |
---|---|---|
button |
Eine Schaltfläche ohne Standardverhalten, die den Wert des value -Attributs anzeigt, standardmäßig leer.
|
|
checkbox | Ein Kontrollkästchen, das einzelne Werte ausgewählt oder deselektiert werden lässt. |
|
color | Ein Steuerungselement zur Auswahl einer Farbe; öffnet einen Farbwähler in unterstützenden Browsern. |
|
date | Ein Steuerelement zum Eingeben eines Datums (Jahr, Monat und Tag, ohne Zeit). Öffnet einen Datumsauswähler oder numerische Räder für Jahr, Monat und Tag in unterstützenden Browsern. |
|
datetime-local | Ein Steuerelement zum Eingeben von Datum und Uhrzeit, ohne Zeitzone. Öffnet einen Datumsauswähler oder numerische Räder für Datums- und Zeitkomponenten in unterstützenden Browsern. |
|
Ein Feld zum Bearbeiten einer E-Mail-Adresse. Sieht aus wie ein
text -Eingabefeld, hat aber Validierungsparameter und relevante
Tastaturen in unterstützenden Browsern und Geräten mit dynamischen Tastaturen.
|
|
|
file |
Ein Steuerelement, das dem Benutzer ermöglicht, eine Datei auszuwählen.
Verwenden Sie das accept -Attribut, um die Dateitypen zu definieren, die das Steuerelement auswählen kann.
|
|
hidden | Ein Steuerelement, das nicht angezeigt wird, dessen Wert jedoch an den Server übermittelt wird. Es gibt ein verstecktes Beispiel in der nächsten Spalte! | |
image |
Eine grafische submit -Schaltfläche. Zeigt ein Bild an, das durch das src -Attribut definiert ist.
Das alt -Attribut wird angezeigt, wenn das Bild src fehlt.
|
|
month | Ein Steuerelement zur Eingabe von Monat und Jahr, ohne Zeitzone. |
|
number | Ein Steuerelement zur Eingabe einer Zahl. Deaktiviert einen Spinner und fügt eine Standardvalidierung hinzu. Zeigt ein numerisches Tastenfeld auf einigen Geräten mit dynamischen Tastaturen an. |
|
password | Ein einzeiliges Textfeld, dessen Wert ausgeblendet ist. Warnt den Benutzer, wenn die Website nicht sicher ist. |
|
radio |
Ein Auswahlknopf, der eine Auswahl unter mehreren Optionen ermöglicht, die denselben name -Wert haben.
|
|
range |
Ein Steuerelement 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 | Eine Schaltfläche, die die Inhalte des Formulars auf Standardwerte zurücksetzt. Nicht empfohlen. |
|
search | Ein einzeiliges Textfeld zur Eingabe von Suchbegriffen. Zeilenumbrüche werden beim Eingabewert automatisch entfernt. Kann in unterstützenden Browsern ein Löschsymbol enthalten, das zum Leeren des Feldes verwendet werden kann. Zeigt auf einigen Geräten mit dynamischen Tastaturen ein Suchsymbol anstelle der Eingabetaste an. |
|
submit | Eine Schaltfläche, die das Formular übermittelt. |
|
tel | Ein Steuerelement zur Eingabe einer Telefonnummer. Zeigt ein Telefontastenfeld auf einigen Geräten mit dynamischen Tastaturen an. |
|
text | Der Standardwert. Ein einzeiliges Textfeld. Zeilenumbrüche werden beim Eingabewert automatisch entfernt. |
|
time | Ein Steuerelement zur Eingabe eines Zeitwerts ohne Zeitzone. |
|
url |
Ein Feld zur Eingabe einer URL. Sieht aus wie ein text -Eingabefeld, hat aber Validierungsparameter und relevante Tastaturen in unterstützenden Browsern und Geräten mit dynamischen Tastaturen.
|
|
week | Ein Steuerelement zur Eingabe eines Datums, das aus einer Jahr-Woche-Nummer und einer Wochen-Nummer besteht, ohne Zeitzone. |
|
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 mit Beispielen oben beschrieben wird, ist das wichtigste. Da jedes <input>
-Element, unabhängig vom Typ, auf der HTMLInputElement
-Schnittstelle basiert, teilen sie technisch das exakt gleiche Set von Attributen. In der Realität haben die meisten Attribute jedoch nur eine Wirkung auf einen bestimmten Untertyp von Eingabetypen. Zudem hängt die Wirkung einiger Attribute auf einem Eingabeelement vom Eingabetyp ab, indem sie verschiedene Eingabetypen auf unterschiedliche Weise beeinflusst.
Dieser Abschnitt bietet eine Tabelle, die alle Attribute mit einer kurzen Beschreibung auflistet. Diese Tabelle wird durch eine Liste ergänzt, die jedes Attribut ausführlicher beschreibt und angibt, mit welchen Eingabetypen sie verbunden sind. Attribute, die auf die meisten oder alle Eingabetypen zutreffen, werden weiter unten ausführlicher definiert. Attribute, die spezifisch für bestimmte Eingabetypen sind oder die bei bestimmten Eingabetypen spezielle Verhaltensweisen haben, werden stattdessen auf den Seiten dieser Typen dokumentiert.
Attribute für das <input>
-Element umfassen die globalen HTML-Attribute und zusätzlich:
Attribut | Typ(en) | Beschreibung |
---|---|---|
accept |
file |
Hinweis 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 die automatische Formularvervollständigungsfunktion |
capture |
file |
Medienaufnahme-Eingabemethode 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 Formularfelds zum Senden der Richtung des Elements bei der Formularübertragung |
disabled |
alle | Ob das Formular-Steuerelement deaktiviert ist |
form |
alle | Verknüpft das Steuerelement mit einem Formularelement |
formaction |
image , submit |
URL für die Formularübertragung |
formenctype |
image , submit |
Formular-Datensatz-Codierungstyp für die Formularübertragung |
formmethod |
image , submit |
HTTP-Methode für die Formularübertragung |
formnovalidate |
image , submit |
Umgeht die Formularsteuerungsvalidierung für die Formularübertragung |
formtarget |
image , submit |
Browsing-Kontext für die Formularübertragung |
height |
image |
Wie das Höhenattribut für <img> ; vertikale Dimension |
list |
alle außer hidden , password , checkbox , radio , und Schaltflächen |
Wert des IDs-Attributs der {{htmlelement('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) von value |
min |
date , month , week , time , datetime-local , number , range |
Minimalwert |
minlength |
text , search , url , tel , email , password |
Minimale Länge (Anzahl der Zeichen) von value |
multiple |
email , file |
Boolean. Ob mehrere Werte erlaubt sind |
name |
alle | Name des Formular-Steuerelements. Wird mit dem Formular als Teil eines Namen/Wert-Paares übertragen |
pattern |
text , search , url , tel , email , password |
Muster, das value erfüllen muss, um gültig zu sein |
placeholder |
text , search , url , tel , email , password , number |
Text, der im Formular-Steuerelement erscheint, wenn es keinen Wert hat |
popovertarget |
button |
Bestimmt ein <input type="button"> als Steuerungselement 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 bearbeitbar |
required |
alle außer hidden , range , color , und Schaltflächen |
Boolean. Ein Wert ist erforderlich oder muss geprüft werden, damit das Formular übermittelt werden kann |
size |
text , search , url , tel , email , password |
Größe des Steuerelements |
src |
image |
Wie das 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-Stuerelements |
value |
alle außer image |
Der Wert des Steuerelements. Wenn im HTML angegeben, entspricht dies dem Anfangswert |
width |
image |
Wie das width -Attribut für <img> |
Einige zusätzliche nicht standardisierte Attribute werden 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 auswählbar sind. Siehe den file-Eingabetyp. alt
-
Gültig nur für den
image
-Button, gibt dasalt
-Attribut alternativen Text für das Bild an, das den Wert des Attributs anzeigt, falls 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 für das globale Attribut
autocapitalize
. autocomplete
-
(Kein boolesches Attribut!) Das Attribut
autocomplete
nimmt als Wert einen durch Leerzeichen getrennten String an, der beschreibt, welche, falls vorhanden, Art von Autovervollständigungsfunktionalität der Eingabe bereitgestellt werden soll. Eine typische Implementierung der Autovervollständigung erinnert sich an zuvor eingegebene Werte im selben Eingabefeld, aber es können auch komplexere Formen der Autovervollständigung existieren. Beispielsweise könnte ein Browser mit der Kontaktliste eines Geräts interagieren, umemail
-Adressen in einem E-Mail-Eingabefeld automatisch zu vervollständigen. Weitere Informationen zu erlaubten Werten finden Sie unterautocomplete
.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 Wirkung auf Eingaben, die keine numerischen oder Textdaten zurückgeben, und ist für alle Eingabetypen außercheckbox
,radio
,file
oder einen der Button-Typen gültig.Siehe das Attribut
autocomplete
für zusätzliche Informationen, einschließlich Informationen zur Passwortsicherheit und wieautocomplete
beihidden
leicht anders ist als für andere Eingabetypen. autofocus
-
Ein boolesches Attribut, das, wenn es vorhanden ist, angibt, dass diese Eingabe beim Laden der Seite automatisch den Fokus erhalten soll (oder wenn das
<dialog>
, das das Element enthält, angezeigt wurde).Hinweis: Ein Element mit dem
autofocus
-Attribut kann den Fokus erhalten, bevor dasDOMContentLoaded
-Ereignis ausgelöst wird.Kein weiteres Element im Dokument darf das
autofocus
-Attribut haben. Wenn es bei mehr als einem Element gesetzt ist, erhält das erste Element mit diesem Attribut den Fokus.Das
autofocus
-Attribut kann nicht aufhidden
-Inputs verwendet werden, da versteckte Eingaben nicht fokussiert werden können.Warnung: Ein Formular-Steuerelement automatisch zu fokussieren, kann sehbehinderte Menschen, die Bildschirmlesetechnologien verwenden, sowie Menschen mit kognitiven Beeinträchtigungen verwirren. Wenn
autofocus
zugewiesen wird, wird der Benutzer von Screenreadern "teleportiert" zum Formular-Steuerelement, ohne ihn vorher zu warnen.Verwenden Sie sorgfältige Überlegungen für die Barrierefreiheit, wenn Sie das
autofocus
-Attribut anwenden. Das automatische Fokussieren auf ein Steuerelement kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann auch dazu führen, dass dynamische Tastaturen auf einigen Touch-Geräten angezeigt werden. Während ein Screenreader das Label des Formular-Steuerelements beim Empfang des Fokus ankündigt, wird der Screenreader nichts vor dem Label ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird ebenso den durch den vorhergehenden Inhalt geschaffenen Kontext vermissen. capture
-
Eingeführt in der HTML Media Capture-Spezifikation und gültig nur für den
file
-Eingabetyp, definiert dascapture
-Attribut, welche Medien - Mikrofon, Video oder Kamera - verwendet werden sollen, um eine neue Datei zur Upload-Steuerung in unterstützten Szenarien zu erfassen. Sehen Sie sich den file-Eingabetyp an. checked
-
Gültig für sowohl
radio
- als auchcheckbox
-Typen, istchecked
ein boolesches Attribut. Wenn es bei einemradio
-Typ vorhanden ist, zeigt es an, dass der Auswahlknopf der aktuell ausgewählte in der Gruppe von gleichnamigen Auswahlknöpfen ist. Wenn es bei einemcheckbox
-Typ vorhanden ist, bedeutet es, dass das Kontrollkästchen standardmäßig (bei Seitenladen) aktiviert ist. Es zeigt nicht an, ob das Kontrollkästchen derzeit aktiviert ist: Wenn der Zustand des Kontrollkästchens geändert wird, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur daschecked
-IDL-Attribut derHTMLInputElement
wird aktualisiert.)Hinweis: Anders als bei anderen Eingabe-Steuerelementen werden Checkboxen und Radio-Button-Werte nur in die übertragenen Daten aufgenommen, wenn sie derzeit
checked
sind. Falls sie das sind, werden der Name und die Wert(e) der aktivierten Steuerelemente übertragen.Zum Beispiel, wenn ein Kontrollkästchen mit dem
name
fruit
denvalue
cherry
hat und das Kontrollkästchen aktiviert ist, werden die Formulardatenfruit=cherry
enthalten. Wenn das Kontrollkästchen nicht aktiv ist, wird es überhaupt nicht in den Formulardaten aufgeführt. Der Standardwert fürcheckbox
undradio
iston
. dirname
-
Gültig für
hidden
,text
,search
,url
,tel
undemail
-Eingabetypen, ermöglicht dasdirname
-Attribut die Übertragung der Leserichtung des Elements. Wenn es enthalten ist, sendet das Formular-Steuerelement zwei Namen/Wert-Paare: das erste ist dername
undvalue
, und das zweite ist der Wert desdirname
-Attributs als Namen, mit einem Wert vonltr
oderrtl
, wie er vom Browser gesetzt wurde.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, sendet das Eingabefeld sowohl das
name
/value
-Paar vonfruit=cherry
als auch dasdirname
/ Richtungs-Paar vonfruit-dir=ltr
. Weitere Informationen finden Sie im Attributdirname
. disabled
-
Ein boolesches Attribut, das, wenn es vorhanden ist, angibt, dass der Benutzer nicht mit der Eingabe interagieren soll. Deaktivierte Eingaben werden typischerweise mit einer dunkleren Farbe oder durch eine andere Form der Anzeige dargestellt, dass das Feld nicht zur Nutzung verfügbar ist.
Insbesondere erhalten deaktivierte Eingaben nicht das
click
-Ereignis, und deaktivierte Eingaben werden nicht mit dem Formular übermittelt.Hinweis: Obwohl es nicht von der Spezifikation erforderlich ist, behält Firefox standardmäßig den dynamischen deaktivierten Zustand eines
<input>
über Seitenladungen hinweg bei. Verwenden Sie dasautocomplete
-Attribut, um dieses Feature zu steuern. form
-
Eine Zeichenfolge, die das
<form>
-Element angibt, mit dem die Eingabe verknüpft ist (d.h. ihren Formulareigentümer). Der Wert dieser Zeichenfolge, falls vorhanden, muss demid
eines<form>
-Elements im selben Dokument entsprechen. Wenn dieses Attribut nicht angegeben ist, ist das<input>
-Element mit dem nächstgelegenen umschließenden Formular verbunden, falls vorhanden.Das
form
-Attribut ermöglicht es Ihnen, eine Eingabe irgendwo im Dokument zu platzieren, aber sie in einem Formular an anderer Stelle im Dokument einzubinden.Hinweis: Eine Eingabe kann nur mit einem Formular verknüpft werden.
formaction
-
Gültig nur für die
image
- undsubmit
-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp. formenctype
-
Gültig nur für die
image
- undsubmit
-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp. formmethod
-
Gültig nur für die
image
- undsubmit
-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp. formnovalidate
-
Gültig nur für die
image
- undsubmit
-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp. formtarget
-
Gültig nur für die
image
- undsubmit
-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp. height
-
Gültig nur für den
image
-Button, ist dieheight
die Höhe der Bilddatei, die angezeigt wird, um die grafische Submit-Schaltfläche darzustellen. Siehe den image-Eingabetyp. id
-
Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen. Es definiert eine einzigartige Kennung (ID), die im gesamten Dokument eindeutig sein muss. Sein Zweck ist es, das Element bei der Verlinkung zu identifizieren. Der Wert wird als Wert des
for
-Attributs des<label>
verwendet, um das Label mit dem Formular-Steuerelement zu verknüpfen. Siehe<label>
. inputmode
-
Globale Einstellung, gültig für alle Elemente. Es gibt einen Hinweis an Browser, welche Art von virtueller Tastaturkonfiguration für dieses Element oder seine Inhalte verwendet werden soll. Werte umfassen
none
,text
,tel
,url
,email
,numeric
,decimal
undsearch
. list
-
Der Wert des
list
-Attributs sollte derid
eines<datalist>
-Elements im selben Dokument sein. Das<datalist>
bietet eine Liste vordefinierter Werte, um sie dem Benutzer für diese Eingabe vorzuschlagen. Alle in der Liste enthaltenen Werte, die nicht mit demtype
kompatibel sind, werden nicht in den vorgeschlagenen Optionen aufgenommen. Die angegebenen Werte sind Vorschläge, keine Voraussetzungen: 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 der 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 vorgeschlagene benutzerdefinierte Farbpalette, Tick-Zeichen entlang eines Bereichs oder sogar eine Eingabe, die sich wie ein
<select>
öffnet, sehen, jedoch nicht gelistete Werte erlaubt. Schauen Sie auf 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
, definiert es den größten Wert im Bereich der zulässigen Werte. Wenn der in das Element eingegebenevalue
diesen überschreitet, schlägt das Element die 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 Datum oder Zeiten), kann der Wert von
max
niedriger sein als der Wert vonmin
, was bedeutet, dass der Bereich möglicherweise den Wert umfassen kann, beispielsweise kann so ein Zeitbereich von 22 Uhr bis 4 Uhr angegeben werden. maxlength
-
Gültig für
text
,search
,url
,tel
,email
undpassword
, definiert es die maximale Zeichenlänge (gemessen in UTF-16 Code-Einheiten), die der Benutzer in das Feld eingeben kann. Dies muss ein Integer-Wert von 0 oder höher sein. Wennmaxlength
nicht 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 die Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Textes länger ist als
maxlength
UTF-16 Code-Einheiten lang. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als durch dasmaxlength
-Attribut erlaubt. Einschränkungsvalidierung 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 es den kleinsten Wert im Bereich der zulässigen Werte. Wenn der in das Element eingegebenevalue
weniger als dieser ist, schlägt das Element die Einschränkungsvalidierung fehl. Wenn der Wert desmin
-Attributs keine Zahl ist, hat das Element keinen Minimalwert.Dieser Wert muss kleiner oder gleich dem Wert des
max
-Attributs sein. Wenn dasmin
-Attribut vorhanden, aber nicht angegeben oder ungültig ist, wird keinmin
-Wert angewendet. Wenn dasmin
-Attribut gültig ist und ein nicht leerer Wert unter dem Mindestwert liegt, der durch dasmin
-Attribut erlaubt ist, verhindert die Einschränkungsvalidierung die Formularübermittlung. Siehe clientseitige Validierung für weitere Informationen.Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Datum oder Zeiten), kann der Wert von
max
niedriger sein als der Wert vonmin
, was bedeutet, dass der Bereich möglicherweise den Wert umfasst; beispielsweise kann so ein Zeitbereich von 22 Uhr bis 4 Uhr angegeben werden. minlength
-
Gültig für
text
,search
,url
,tel
,email
undpassword
, definiert es die minimale Zeichenlänge (gemessen in UTF-16 Code-Einheiten), die der Benutzer in das Eingabefeld eingeben kann. Dies muss ein nicht-negativer Integer-Wert sein, der kleiner oder gleich dem durchmaxlength
spezifizierten Wert ist. Wennminlength
nicht angegeben ist oder ein ungültiger Wert angegeben ist, hat die Eingabe keine Minimallänge.Die Eingabe schlägt die Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Textes weniger als
minlength
UTF-16 Code-Einheiten lang ist, was die Formularübermittlung verhindert. Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen. multiple
-
Das boolesche
multiple
-Attribut, sofern gesetzt, bedeutet, dass der Benutzer mit dem E-Mail-Widget kommagetrennte E-Mail-Adressen eingeben oder mit demfile
-Input mehr als eine Datei auswählen kann. Siehe den email- und file-Eingabetyp. name
-
Eine Zeichenfolge, die einen Namen für das Eingabesteuerelement angibt. Dieser Name wird mit dem Wert des Steuerelements übertragen, wenn die Formulardaten übertragen werden.
Betrachten Sie den
name
als erforderliches Attribut (auch wenn es nicht so ist). Wenn eine Eingabe keinenname
angegeben hat odername
leer ist, wird der Eingabewert nicht mit dem Formular übermittelt! (Deaktivierte Steuerelemente, nicht aktivierte Radio-Schaltflächen, nicht aktivierte Kontrollkästchen und Zurücksetzen-Schaltflächen werden ebenfalls nicht gesendet.)Es gibt zwei Sonderfälle:
_charset_
: Wenn als Name eines<input>
-Elements des Typs hidden verwendet, wird dervalue
der Eingabe automatisch vom Benutzeragenten auf die Kodierung des Zeichensatzes gesetzt, der 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 Radio-Schaltflächen.Nur eine Radio-Schaltfläche in einer Gruppe mit demselben Namen kann gleichzeitig aktiviert sein. Durch die Auswahl einer beliebigen Schaltfläche in dieser Gruppe wird automatisch jede derzeit angewählte Schaltfläche in derselben Gruppe deaktiviert. Der Wert dieser einen aktivierten Radio-Schaltfläche wird zusammen mit dem Namen übertragen, wenn das Formular übermittelt wird,
Wenn Sie sich durch eine Serie von gleichnamigen Radio-Schaltflächen bewegen, wird, falls eine aktiviert ist, diese den Fokus erhalten. Wenn sie nicht in der Quellreihenfolge gruppiert sind, wird, falls eine der Gruppen aktiviert ist, das Tabbing in der Gruppe starten, sobald die erste in der Gruppe erreicht wird, wobei alle, die nicht aktiviert sind, übersprungen werden. Mit anderen Worten, wenn eine aktiviert ist, überspringt das Tabbing die nicht aktivierten Radio-Schaltflächen in der Gruppe. Wenn keine aktiviert ist, erhält die Radio-Schaltfläche-Gruppe den Fokus, wenn die erste Schaltfläche in der gleichnamigen Gruppe erreicht wird.
Sobald eine der Radio-Schaltflächen in einer Gruppe den Fokus hat, können Sie mithilfe der Pfeiltasten alle Radio-Schaltflächen desselben Namens durchlaufen, auch wenn die Radio-Schaltflächen nicht in der Quellreihenfolge gruppiert sind.
Wenn ein Eingabeelement einen
name
erhält, wird dieser Name zu einer Eigenschaft derHTMLFormElement.elements
-Eigenschaft des besitzenden Formularelements. Wenn Sie eine Eingabe haben, derenname
aufguest
gesetzt ist und eine andere, derenname
hat-size
ist, kann der folgende Code verwendet werden:jslet form = document.querySelector("form"); let guestName = form.elements.guest; let hatSize = form.elements["hat-size"];
Nachdem dieser Code ausgeführt wurde, wird
guestName
dasHTMLInputElement
für dasguest
Feld sein, undhatSize
das Objekt für dashat-size
Feld.Warnung: Vermeiden Sie, den Formular-Elementen einen
name
zu geben, der einem eingebauten Eigenschaft des Formulars entspricht, da Sie dann die vordefinierte Eigenschaft oder Methode mit diesem Verweis auf die entsprechende Eingabe überschreiben. pattern
-
Gültig für
text
,search
,url
,tel
,email
, undpassword
, wird daspattern
-Attribut verwendet, um einen regulären Ausdruck zu kompilieren, den der Eingabewert erfüllen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger regulärer Ausdruck in JavaScript sein, wie er vomRegExp
-Typ verwendet und in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist. Keine Schrägstriche sollten um den Mustertext spezifiziert werden. Beim Kompilieren des regulären Ausdrucks:- Das Muster wird implizit mit
^(?:
und)$
umschlossen, sodass die Übereinstimmung gegen den gesamten Eingabewert erforderlich ist, d. h.^(?:<pattern>)$
. - Das
'v'
-Flag wird spezifiziert, sodass das Muster als Folge von Unicode-Codepunkten anstelle von ASCII behandelt wird.
Wenn das
pattern
-Attribut vorhanden, aber nicht spezifiziert oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut vollständig ignoriert. Wenn daspattern
-Attribut gültig ist und ein nicht-leerer Wert nicht dem Muster entspricht, wird die Einschränkungsvalidierung die Formularübermittlung verhindern. Wenn dasmultiple
vorhanden ist, wird der kompilierte reguläre Ausdruck gegen jeden durch Komma getrennten Wert abgeglichen.Hinweis: Wenn Sie das
pattern
-Attribut verwenden, informieren Sie den Benutzer über das erwartete Format, indem Sie erläuternden Text in der Nähe einfügen. Sie können auch eintitle
-Attribut einschließen, um zu erklären, was die Anforderungen sind, um dem Muster zu entsprechen; die meisten Browser zeigen diesen Titel als Tooltip an. Die sichtbare Erklärung ist für die Barrierefreiheit erforderlich. Der Tooltip ist eine Verbesserung.Siehe Client-seitige Validierung für weitere Informationen.
- Das Muster wird implizit mit
placeholder
-
Gültig für
text
,search
,url
,tel
,email
,password
, undnumber
, bietet dasplaceholder
-Attribut einen kurzen Hinweis an den Benutzer, 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, anstatt einer Erklärung oder Aufforderung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten. Angenommen, in einem Feld wird erwartet, dass der Vorname eines Benutzers erfasst wird und sein Label ist "Vorname", könnte ein geeigneter Platzhalter "z.B. Mustafa" sein.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 verursachen. Siehe Labels für weitere Informationen. popovertarget
-
Wandelt ein
<input type="button">
-Element in eine Popover-Steuerungstaste um; nimmt die ID des zu steuernden Popover-Elements als Wert. Weitere Details finden Sie auf der Popover API-Startseite. Die Einrichtung einer Beziehung zwischen einem Popover und seiner aufrufenden Schaltfläche mit dempopovertarget
-Attribut hat zwei zusätzliche 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 Tastaturnavigation, wenn es angezeigt wird. Das macht das Popover zugänglicher für Tastatur- und Hilfstechnologie (AT)-Benutzer (siehe auch Popover-Zugänglichkeitsfunktionen). - Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr praktisch macht, Popovers relativ zu ihren Steuerelementen mit der CSS-Ankerpositionierung zu positionieren. Weitere Details finden Sie unter Popover-Ankerpositionierung.
- Der Browser erstellt eine implizite
popovertargetaction
-
Gibt die auszuführende Aktion auf einem durch ein Steuerungs-
<input type="button">
kontrollierten Popover-Element an. Mögliche Werte sind:"hide"
-
Die Schaltfläche wird ein angezeigtes Popover ausblenden. Wenn Sie versuchen, ein bereits verstecktes Popover auszublenden, wird keine Aktion durchgeführt.
"show"
-
Die Schaltfläche wird ein verstecktes Popover anzeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion durchgeführt.
"toggle"
-
Die Schaltfläche wird ein Popover zwischen sichtbar und verborgen umschalten. Wenn das Popover verborgen ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Wenn
popovertargetaction
fehlt, ist"toggle"
die Standardaktion, die von der Steuertaste ausgeführt wird.
readonly
-
Ein boolesches Attribut, das, wenn es vorhanden ist, angibt, dass der Benutzer den Wert der Eingabe nicht bearbeiten soll. 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 es vorhanden ist, angibt, dass der Benutzer einen Wert für die Eingabe angeben muss, bevor das übergeordnete Formular übermittelt werden kann. Dasrequired
-Attribut wird vontext
,search
,url
,tel
,email
,date
,month
,week
,time
,datetime-local
,number
,password
,checkbox
,radio
, undfile
-Eingaben 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
, spezifiziert dassize
-Attribut, wieviel von der Eingabe angezeigt wird. Im Grunde erzeugt es dasselbe Ergebnis wie das Einstellen 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
-Button, istsrc
eine Zeichenfolge, die die URL der Bilddatei spezifiziert, um die grafische Submit-Schaltfläche darzustellen. Siehe den image-Eingabetyp. step
-
Gültig für
date
,month
,week
,time
,datetime-local
,number
, undrange
, ist dasstep
-Attribut eine Zahl, die die Granularität spezifiziert, an die sich der Wert halten muss.Wenn nicht explizit enthalten:
step
ist standardmäßig 1 fürnumber
undrange
.- Jeder Datum/Uhrzeit-Eingabetyp hat einen Standardwert für
step
, der für den Typ geeignet ist; siehe die individuellen Eingabeseiten:date
,datetime-local
,month
,time
undweek
.
Der Wert muss eine positive Zahl sein - ganz oder dezimal - oder der spezielle Wert
any
, was bedeutet, dass kein Schritt angedeutet wird und jeder Wert (unter Berücksichtigung anderer Einschränkungen wiemin
undmax
) erlaubt ist.Wenn
any
nicht explizit gesetzt ist, sind gültige Werte für dienumber
, Datum/Uhrzeit-Eingabetypen, undrange
-Eingabetypen gleich dem Basiswert für das Schrittverfahren - dermin
-Wert und Inkremente des Schrittwerts bis zummax
-Wert, falls spezifiziert.Zum Beispiel, wenn Sie
<input type="number" min="10" step="2">
haben, dann ist jede gerade ganze Zahl,10
oder größer, gültig. Wenn weggelassen,<input type="number">
, ist jede ganze Zahl gültig, aber Fließkommazahlen (wie4.2
) sind nicht gültig, dastep
standardmäßig1
ist. Damit4.2
gültig ist, hättestep
aufany
, 0.1, 0.2 oder eine Mindesteingabe, die mit.2
endet, gesetzt werden müssen, wie<input type="number" min="-5.2">
Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht den Schritt-Einstellungen entsprechen, wird der Wert bei der Einschränkungsvalidierung als ungültig angesehen und passt zur
:invalid
-Pseudoklasse.Siehe Client-seitige Validierung für weitere Informationen.
tabindex
-
Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, ein ganzzahliges Attribut, das angibt, ob das Element den Eingabefokus erhalten kann (fokussierbar ist), ob es an der sequentiellen Tastaturnavigation teilnehmen soll. Da alle Eingabetypen außer den
hidden
Inputs fokussierbar sind, sollte dieses Attribut nicht auf Formularelementen verwendet werden, da dies die Verwaltung der Fokus-Reihenfolge für alle Elemente im Dokument erfordern würde, mit dem Risiko, die Benutzerfreundlichkeit und Zugänglichkeit zu beeinträchtigen, wenn dies falsch gemacht wird. title
-
Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, mit einem Text, der beratende Informationen darstellt, die sich auf das Element beziehen, zu dem es gehört. Solche Informationen können normalerweise, aber nicht notwendigerweise, dem Benutzer als Tooltip präsentiert werden. Der Titel sollte NICHT als primäre Erklärung für den Zweck der Formularkontrolle verwendet werden. Stattdessen verwenden Sie das
<label>
-Element mit einemfor
-Attribut, das auf dasid
-Attribut der Formularkontrolle gesetzt ist. Siehe Labels unten. type
-
Eine Zeichenfolge, die den Typ des darzustellenden Steuerelements angibt. Um beispielsweise ein Kontrollkästchen zu erstellen, wird ein Wert von
checkbox
verwendet. Wenn weggelassen (oder ein unbekannter Wert angegeben ist), wird der Eingabetyptext
verwendet, womit ein Klartext-Eingabefeld erstellt wird.Zulässige Werte sind in den Eingabetypen oben aufgeführt.
value
-
Der Wert des Eingabesteuerelements. Wenn im HTML angegeben, ist dies der Anfangswert, und ab diesem Zeitpunkt kann er jederzeit mithilfe von JavaScript, um die jeweilige
HTMLInputElement
-Objekteigenschaftvalue
zuzugreifen, geändert oder abgerufen werden. Dasvalue
-Attribut ist immer optional, sollte jedoch als obligatorisch fürcheckbox
,radio
, undhidden
betrachtet werden. width
-
Gültig nur für den
image
-Button, wird diewidth
spezifiziert, um die Breite der Bilddatei anzugeben, um die grafische Submit-Schaltfläche darzustellen. Siehe den image-Eingabetyp.
Nicht standardisierte Attribute
Die folgenden nicht standardisierten Attribute sind auch in einigen Browsern verfügbar. Als allgemeine Regel sollten Sie sie vermeiden, es sei denn, es lässt sich nicht vermeiden.
Attribut | Beschreibung |
---|---|
incremental |
Ob wiederholte [`search`](/de/docs/Web/API/HTMLInputElement/search_event)-Ereignisse gesendet werden sollen, um die Live-Suchergebnisse zu aktualisieren, während der Benutzer weiterhin den Wert des Felds bearbeitet. Nur WebKit und Blink (Safari, Chrome, Opera usw.). |
mozactionhint
Veraltet
|
Eine Zeichenfolge, die die Art der Aktion angibt, die ausgeführt wird, wenn der Benutzer die Enter- oder Return-Taste während der Bearbeitung des Felds drückt; dies wird verwendet, um ein geeignetes Label für diese Taste auf einer virtuellen Tastatur zu ermitteln. Da dieses Attribut veraltet ist, verwenden Sie |
orient |
Legt die Ausrichtung des Bereichsschiebers fest. Nur Firefox.. |
results |
Die maximale Anzahl von Elementen, die in der Dropdown-Liste früherer Suchanfragen angezeigt werden sollen. Nur Safari. |
webkitdirectory
|
Ein Boolean, der angibt, ob nur das Auswählen eines Verzeichnisses (oder von Verzeichnissen, wenn multiple ebenfalls vorhanden ist) zulässig ist
|
incremental
Nicht standardisiert-
Das boolesche Attribut
incremental
ist eine WebKit- und Blink-Erweiterung (daher unterstützt von Safari, Opera, Chrome, usw.), die, wenn vorhanden, den Benutzeragenten anweist, die Eingabe als Live-Suche zu verarbeiten. Während der Benutzer den Wert des Feldes bearbeitet, sendet der Benutzeragentsearch
-Ereignisse an dasHTMLInputElement
-Objekt, das das Suchfeld darstellt. Dadurch kann Ihr Code die Suchergebnisse in Echtzeit aktualisieren, während der Benutzer die Suche bearbeitet.Wenn
incremental
nicht spezifiziert ist, wird dassearch
-Ereignis nur gesendet, wenn der Benutzer explizit eine Suche initiiert (wie durch Drücken der Enter- oder Return-Taste während der Bearbeitung des Feldes).Das
search
-Ereignis ist so begrenzt, dass es nicht häufiger als in einem implementierungsdefinierten Intervall gesendet wird. orient
Nicht standardisiert-
Ähnlich der nicht standardisierten CSS-Eigenschaft -moz-orient, die die
<progress>
und<meter>
-Elemente beeinflusst, definiert dasorient
-Attribut die Ausrichtung des Bereichsschiebers. Werte umfassenhorizontal
, was bedeutet, dass der Bereich horizontal gerendert wird, undvertical
, wo der Bereich vertikal gerendert wird. Siehe Erstellen von vertikalen Formularelementen für einen modernen Ansatz zur Erstellung vertikaler Formularelemente. 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 im Nativ bereitgestellten Dropdown-Menü des<input>
-Elements mit vorherigen Suchanfragen angezeigt werden sollen.Der Wert muss eine nicht-negative Dezimalzahl sein. Wenn nicht bereitgestellt oder ein ungültiger Wert angegeben wird, wird die standardmäßige maximale Anzahl von Einträgen des Browsers verwendet.
webkitdirectory
Nicht standardisiert-
Das boolesche
webkitdirectory
-Attribut, falls vorhanden, gibt an, dass im Dateiauswahl-Interface nur Verzeichnisse für die Auswahl durch den Benutzer verfügbar sein sollten. Weitere Details und Beispiele finden Sie unterHTMLInputElement.webkitdirectory
.Obwohl ursprünglich nur für WebKit-basierte Browser implementiert, ist
webkitdirectory
auch in Microsoft Edge sowie Firefox 50 und später verwendbar. Allerdings ist es trotz der relativ breiten Unterstützung immer noch nicht standardisiert und sollte nicht verwendet werden, es sei denn, Sie haben keine Alternative.
Methoden
Die folgenden Methoden werden durch die HTMLInputElement
-Schnittstelle bereitgestellt, die <input>
-Elemente im DOM darstellt. Auch verfügbar sind diejenigen Methoden, die durch die übergeordneten Schnittstellen spezifiziert werden, nämlich HTMLElement
, Element
, Node
und EventTarget
.
checkValidity()
-
Gibt
true
zurück, wenn der Wert des Elements die Validierungsprüfungen besteht; ansonsten gibt esfalse
zurück und löst eininvalid
-Ereignis am Element aus. reportValidity()
-
Gibt
true
zurück, wenn der Wert des Elements die Validierungsprüfungen besteht; andernfalls gibt esfalse
zurück, löst eininvalid
-Ereignis am Element aus und meldet (wenn das Ereignis nicht abgebrochen wird) das Problem dem Benutzer. select()
-
Wählt den gesamten Inhalt des
<input>
-Elements aus, wenn der Inhalt des Elements auswählbar ist. Für Elemente ohne auswählbaren Textinhalt (wie ein visueller Farbwähler oder Kalenderdatumseingabe) macht diese Methode nichts. setCustomValidity()
-
Setzt eine benutzerdefinierte Nachricht, die angezeigt werden soll, wenn der Wert des Eingabeelements nicht gültig ist.
setRangeText()
-
Setzt den Inhalt des angegebenen Zeichenbereichs im Eingabeelement auf eine bestimmte Zeichenfolge. Ein
selectMode
-Parameter steht zur Verfügung, um zu steuern, wie die vorhandenen Inhalte betroffen sind. setSelectionRange()
-
Wählt den angegebenen Bereich von Zeichen innerhalb eines Texteingabeelements aus. Macht nichts für Eingaben, die nicht als Text-Eingabefelder dargestellt werden.
showPicker()
-
Zeigt den Browserauswähler für das Eingabeelement an, der normalerweise angezeigt würde, wenn das Element ausgewählt wäre, aber von einem Tastendruck oder einer anderen Benutzerinteraktion ausgelöst wird.
stepDown()
-
Verringert den Wert eines numerischen Eingabefelds standardmäßig um eins oder um die angegebene Anzahl von Einheiten.
stepUp()
-
Erhöht den Wert eines numerischen Eingabefelds um eins oder um die angegebene Anzahl von Einheiten.
CSS
Inputs, als ersetzte Elemente, haben einige Funktionen, die auf nicht-Formularelemente nicht anwendbar sind. Es gibt CSS-Selektoren, die gezielt Formularelemente basierend auf ihren UI-Funktionen ansprechen können, auch bekannt als UI-Pseudoklassen. Das input
-Element kann auch nach Typ mit Attributselektoren angesprochen werden. Es gibt einige Eigenschaften, die besonders nützlich sind.
UI-Pseudoklassen
Pseudoklasse | Beschreibung |
---|---|
:enabled |
Jedes derzeit aktivierte Element, das aktiviert werden kann (ausgewählt, angeklickt, eingegeben, etc.) oder den Fokus erhalten kann und auch einen deaktivierten Zustand hat, in dem es nicht aktiviert werden kann oder keinen Fokus erhalten kann. |
:disabled |
Jedes derzeit deaktivierte Element, das einen aktivierten Zustand hat, was bedeutet, dass es ansonsten aktiviert werden könnte (ausgewählt, angeklickt, eingegeben, etc.) oder den Fokus erhalten könnte, wenn es nicht deaktiviert wäre. |
:read-only |
Element, das durch den 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 noch keinen Wert hat.
|
:default |
Formularelemente, die der Standard in einer Gruppe verwandter Elemente sind. Übereinstimmung mit checkbox und radio-Eingabetypen, die beim Laden oder Rendern der Seite markiert waren. |
:checked |
Übereinstimmung mit checkbox und radio-Eingabetypen, die derzeit markiert sind (und die (<option> in einem <select> , die derzeit ausgewählt ist).
|
:indeterminate |
checkbox-Elemente, deren indeterminate-Eigenschaft von JavaScript auf true gesetzt wurde, radio-Elemente, wenn alle Radiobuttons mit demselben Namenswert im Formular nicht markiert sind, und <progress> -Elemente in einem unbestimmten Zustand.
|
:valid |
Formularelemente, die eine Einschränkungsvalidierung aufweisen können und derzeit gültig sind. |
:invalid |
Formularelemente, die eine Einschränkungsvalidierung aufweisen und derzeit ungültig sind. Übereinstimmung mit einem Formularelement, dessen Wert die durch seine Attribute festgelegten Einschränkungen nicht erfüllt, wie z.B. required , pattern , step und max .
|
:in-range |
Ein nicht leeres `input`, dessen aktueller Wert innerhalb der durch die Attribute min und max und den step festgelegten Bereichsgrenzen liegt.
|
:out-of-range |
Ein nicht leeres `input`, dessen aktueller Wert NICHT innerhalb der durch die Attribute min und max festgelegten Bereichsgrenzen liegt oder nicht den step -Einschränkungen entspricht.
|
:required |
<input> , <select> oder <textarea> -Element, das das required -Attribut gesetzt hat. Es werden nur Elemente erfasst, die erforderlich sein können. Das Attribut auf einem nicht erforderlichen Element wird keine Übereinstimmung erzeugen.
|
:optional |
<input> , <select> oder <textarea> -Element, das das required -Attribut NICHT gesetzt hat. Es werden keine Elemente erfasst, die nicht erforderlich sein können.
|
:blank |
<input> und <textarea> -Elemente, die derzeit keinen Wert haben.
|
:user-invalid |
Ähnlich wie :invalid , wird jedoch bei der Leerung aktiviert. Übereinstimmung mit ungültigem `input`, aber nur nach Benutzerinteraktion, z.B. durch Fokus auf das Steuerelement, Verlassen des Steuerelements oder Versuch der Übermittlung des Formulars mit dem ungültigen Steuerelement.
|
:open |
<input> -Elemente, die dem Benutzer ermöglichen, einen Wert auszuwählen (zum Beispiel <input type="color"> ) — aber nur, wenn das Element im geöffneten Zustand ist, d.h. wenn der Auswahlmechanismus angezeigt wird.
|
Pseudoklassen Beispiel
Wir können ein Checkbox-Label basierend darauf stylen, ob die Checkbox markiert ist oder nicht. In diesem Beispiel stylen wir die color
und das font-weight
des <label>
, das unmittelbar nach einem markierten Input kommt. Wir haben keine Stile angewendet, wenn das input
nicht markiert ist.
input:checked + label {
color: red;
font-weight: bold;
}
Attributselektoren
Es ist möglich, verschiedene Typen von Formkontrollen basierend auf ihrem type
mit Attributselektoren anzusprechen. CSS-Attributselektoren stimmen mit Elementen, die entweder nur durch die Präsenz eines Attributs oder den Wert eines bestimmten Attributs überein.
/* 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 als durchscheinend oder hellgrau. Das ::placeholder
Pseudo-Element ist der placeholder
text des Eingabefeldes. Es kann mit einem eingeschränkten Satz von CSS-Eigenschaften gestylt werden.
::placeholder {
color: blue;
}
Nur der Teil der CSS-Eigenschaften, die auf das ::first-line
Pseudo-Element anwendbar sind, kann in einer Regel verwendet werden, die ::placeholder
in ihrem Selektor verwendet.
appearance
Die appearance
-Eigenschaft ermöglicht die Anzeige von (fast) jedem Element im Stil eines nativen Plattform-Stils basierend auf dem Betriebssystemthema sowie die Entfernung jeglicher nativer Plattform-Stile mit dem Wert none
.
Sie könnten ein <div>
aussehen lassen wie einen Radiobutton mit div {appearance: radio;}
oder ein Radio aussieht wie ein Checkbox mit [type="radio"] {appearance: checkbox;}
, aber tun Sie das nicht.
appearance: none
entfernt native Plattformrahmen, jedoch nicht die Funktionalität.
caret-color
Eine spezifische Eigenschaft für textbezogene Eingabeelemente ist die CSS-caret-color
-Eigenschaft, die es ermöglicht, die Farbe des Texteingabe-Cursors festzulegen:
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 steuern (d. h. sie erhalten standardmäßig eine bevorzugte Größe). Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben und zu erlauben, dass sich Formularelemente in ihrer Größe anpassen, um ihren Inhalt aufzunehmen.
Diese Eigenschaft wird typischerweise verwendet, um Formularfelder zu erstellen, die ihren Inhalt anpassen und wachsen, sobald mehr Text eingegeben wird. Dies funktioniert mit Eingabefeldern, die direkte Texteingaben akzeptieren (z. B. text
und url
), Eingabetyp file
und <textarea>
-Elemente.
object-position und object-fit
In bestimmten Fällen (typischerweise bei nicht textbezogenen Eingaben und spezialisierten Schnittstellen) ist das <input>
-Element ein ersetztes Element. Wenn es so 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 zum Hinzufügen von Farbe zu Elementen in HTML, siehe:
Siehe auch:
Zusätzliche Funktionen
Labels
Labels sind notwendig, um erklärenden Text mit einem <input>
zu verknüpfen. Das <label>
-Element liefert erklärende Informationen über ein Formularfeld, die immer angemessen sind (abgesehen von Layoutfragen). Es ist nie eine schlechte Idee, ein <label>
zu verwenden, um zu erklären, was in ein <input>
oder <textarea>
eingegeben werden soll.
Zugehörige Labels
Die semantische Paarung von <input>
- und <label>
-Elementen ist nützlich für unterstützende Technologien wie Screenreader. Durch das Paaren mit dem for
-Attribut des <label>
, binden Sie das Label an die Eingabe in einer Weise, die es Screenreadern ermöglicht, Eingaben präziser zu beschreiben.
Es genügt nicht, einfachen Text neben das <input>
-Element zu stellen. Vielmehr erfordert die Benutzerfreundlichkeit und Zugänglichkeit die Einbeziehung eines 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 besteht keine Beziehung zwischen dem Hinweis und dem <input>
-Element.
Neben einem zugänglichen Namen bietet das Label eine größere "Treffer"-Fläche für Maus- und Touchscreen-Benutzer zum Klicken oder Berühren. Durch das Paaren eines <label>
mit einem <input>
, wird durch das Klicken auf eines von beiden das <input>
fokussiert. Wenn Sie einfachen Text verwenden, um Ihre Eingabe zu "beschriften", wird dies nicht passieren. Den Hinweis als Teil des Aktivierungsbereichs für die Eingabe zu haben, ist hilfreich für Menschen mit motorischen Einschränkungen.
Als Webentwickler ist es wichtig, dass wir nie davon ausgehen, dass Menschen all die Dinge wissen, die wir wissen. Die Vielfalt der Menschen, die das Web nutzen – und somit Ihre Website – garantiert praktisch, dass einige Besucher Ihrer Website eine andere Interpretation Ihrer Formulare haben, die sich ohne klare und ordnungsgemäß präsentierte Labels von Ihrer unterscheidet.
Platzhalter sind nicht zugänglich
Das placeholder
-Attribut ermöglicht es, Text anzugeben, der im Inhaltsbereich des <input>
-Elements selbst erscheint, wenn es leer ist. Der Platzhalter sollte niemals erforderlich sein, um Ihre Formulare zu verstehen. Er ist kein Label und sollte nicht als Ersatz verwendet werden, weil er es nicht ist. Der Platzhalter wird verwendet, um einen Hinweis darauf zu geben, wie ein eingegebenes Ergebnis aussehen sollte, nicht als Erklärung oder Aufforderung.
Nicht nur ist der Platzhalter nicht für Screenreader zugänglich, sondern wenn der Benutzer Text in die Steuerung eingibt oder die Steuerung bereits einen Wert hat, verschwindet der Platzhalter. Browser mit automatischen Übersetzungsfunktionen auf Seite könnten Attribute beim Übersetzen überspringen, 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 kennzeichnen müssen, verwenden Sie das <label>
-Element.
Clientseitige Validierung
Warnung:
Clientseitige Validierung ist nützlich, aber sie garantiert nicht, dass der Server gültige Daten erhält. Wenn die Daten in einem bestimmten Format vorliegen müssen, überprüfen Sie sie 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 jedes Eingabefeldes zu stylen, stellt der Browser auch bei dem (versuchten) Absenden des Formulars die clientseitige Validierung bereit. Wenn es beim Absenden des Formulars eine Steuerung gibt, die die Einschränkungsvalidierung nicht besteht, zeigen unterstützende Browser eine Fehlermeldung an der ersten ungültigen Formsteuerung an; entweder eine Standardnachricht basierend auf dem Fehler oder eine von Ihnen festgelegte Nachricht.
Einige Eingabetypen und andere Attribute setzen Grenzen dafür, welche Werte für eine gegebene 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. Mehrere Fehler könnten auftreten, einschließlich eines rangeUnderflow
-Fehlers, wenn der Wert kleiner als 2 ist, rangeOverflow
, wenn er größer als 10 ist, stepMismatch
, wenn der Wert eine Zahl zwischen 2 und 10 ist, aber keine gerade ganze Zahl (entspricht nicht den Anforderungen des step
-Attributs), oder typeMismatch
, wenn der Wert keine Zahl ist.
Für die Eingabetypen, deren Bereich periodisch ist (d.h. bei dem höchsten möglichen Wert gehen die Werte zurück zum Anfang, anstatt zu enden), ist es möglich, dass die Werte der Eigenschaften max
und min
umgekehrt sind, was anzeigt, dass der Bereich der erlaubten Werte bei min
beginnt, zum niedrigsten möglichen Wert zurückrollt und dann weitergeht, bis max
erreicht ist. Das ist besonders nützlich für Datums- und Zeit-Angaben, z.B. wenn Sie den Bereich von 20:00 Uhr bis 8:00 Uhr erlauben wollen:
<input type="time" min="20:00" max="08:00" name="overnight" />
Bestimmte Attribute und ihre Werte können zu einem bestimmten Fehler ValidityState
führen:
Attribut | Relevante Eigenschaft | Beschreibung |
---|---|---|
max |
[`validityState.rangeOverflow`](/de/docs/Web/API/ValidityState/rangeOverflow) |
Tritt auf, wenn der Wert größer als der maximale Wert ist, wie vom max -Attribut definiert.
|
maxlength |
[`validityState.tooLong`](/de/docs/Web/API/ValidityState/tooLong) |
Tritt auf, wenn die Anzahl der Zeichen größer ist als die Anzahl, die durch die maxlength -Eigenschaft erlaubt ist.
|
min |
[`validityState.rangeUnderflow`](/de/docs/Web/API/ValidityState/rangeUnderflow) |
Tritt auf, wenn der Wert kleiner ist als der minimale Wert, wie vom min -Attribut definiert.
|
minlength |
[`validityState.tooShort`](/de/docs/Web/API/ValidityState/tooShort) |
Tritt auf, wenn die Anzahl der Zeichen geringer ist als die durch die minlength -Eigenschaft erforderliche Zahl.
|
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 dazu passt.
|
required |
[`validityState.valueMissing`](/de/docs/Web/API/ValidityState/valueMissing) |
Tritt auf, wenn das required -Attribut vorhanden ist, aber der Wert null ist oder das Radio oder die Checkbox nicht markiert ist.
|
step |
[`validityState.stepMismatch`](/de/docs/Web/API/ValidityState/stepMismatch) |
Der Wert stimmt nicht mit dem Schrittinkrement überein. Das Standardinkrement ist 1 , sodass nur ganze Zahlen gültig sind, wenn type="number" ist, wenn der Schritt nicht enthalten ist. step="any" wirft diesen Fehler nie.
|
type |
[`validityState.typeMismatch`](/de/docs/Web/API/ValidityState/typeMismatch) |
Tritt auf, wenn der Wert nicht vom richtigen Typ ist, zum Beispiel enthält eine E-Mail kein @ oder eine URL kein Protokoll.
|
Wenn ein Formularelement das required
-Attribut nicht hat, ist kein Wert oder ein leerer String nicht ungültig. Selbst wenn die oben genannten Attribute vorhanden sind, wird ein leerer String nicht zu einem Fehler führen, mit Ausnahme von required
.
Wir können Grenzen setzen, welche Werte wir akzeptieren, und die unterstützenden Browser werden diese Formularwerte nativ validieren und den Benutzer warnen, wenn bei der Formularübermittlung ein Fehler vorliegt.
Zusätzlich zu den in der Tabelle oben beschriebenen Fehlern enthält die validityState
-Schnittstelle die booleschen Nur-Lese-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
, dass der angegebene Grund der Validierung, die möglicherweise fehlgeschlagen ist, wahr ist, mit Ausnahme der valid
-Eigenschaft, die wahr ist, wenn der Wert des Elements allen Einschränkungen gehorcht.
Wenn ein Fehler vorliegt, werden unterstützende Browser sowohl den Benutzer warnen als auch die Formularübermittlung verhindern. Eine Warnung: Wenn ein benutzerdefinierter Fehler auf einen wahrhaftigen Wert gesetzt ist (alles andere als den leeren String oder null
), wird die Übermittlung des Formulars verhindert. Wenn keine benutzerdefinierte Fehlermeldung vorliegt und keine der anderen Eigenschaften wahr ist, ist valid
wahr 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 entscheidend. Wenn der Benutzer einen Fehler macht und die Validität gesetzt ist, wird das Formular 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 folgendes Formular:
<form>
<label for="name">Enter username (upper and lowercase letters): </label>
<input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
<button>Submit</button>
</form>
Die grundlegenden HTML-Formular-Validierungsfunktionen erzeugen eine Standardfehlermeldung, wenn Sie versuchen, das Formular ohne gültige Eingaben oder mit einem Wert, der nicht mit dem pattern
übereinstimmt, zu übermitteln.
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 rendert wie folgt:
Kurz gefasst:
- Wir prüfen den gültigen Status des Eingabeelements jedes Mal, wenn sich sein Wert ändert, indem wir die
checkValidity()
-Methode über deninput
-Event-Handler ausführen. - Wenn der Wert ungültig ist, wird ein
invalid
-Event ausgelöst und dieinvalid
-Event-Handler-Funktion wird ausgeführt. Innerhalb dieser Funktion stellen wir fest, ob der Wert ungültig ist, weil er leer ist, oder weil er nicht dem Muster entspricht, indem wir einenif ()
-Block nutzen, und setzen eine benutzerdefinierte Validitätsfehlermeldung. - Infolgedessen wird, wenn der Eingabewert ungültig ist, wenn die Absende-Schaltfläche gedrückt wird, eine der benutzerdefinierten Fehlermeldungen angezeigt.
- Wenn er gültig ist, wird er wie erwartet übermittelt. Damit dies geschieht, muss die benutzerdefinierte Validität aufgehoben werden, indem
setCustomValidity()
mit einem leeren String aufgerufen wird. Deshalb tun wir dies jedes Mal, wenn dasinput
-Event ausgelöst wird. Wenn Sie dies nicht tun und zuvor eine benutzerdefinierte Validität gesetzt wurde, wird die Eingabe als ungültig registriert, selbst wenn sie derzeit einen gültigen Wert bei der Übermittlung enthält.
Hinweis: Validieren Sie immer Eingabebeschränkungen sowohl auf der Client- als auch auf der Serverseite. Einschränkungsvalidierung ersetzt nicht die Notwendigkeit der Validierung auf der Server-Seite. Ungültige Werte können immer noch durch ältere Browser oder durch bösartige Akteure gesendet werden.
Hinweis:
Firefox unterstützte viele Versionen lang ein proprietäres Fehlerattribut – x-moz-errormessage
–, das es Ihnen ermöglichte, benutzerdefinierte Fehlermeldungen auf ähnliche Weise zu setzen. Dies wurde in Version 66 entfernt (siehe Firefox-Bug 1513890).
Lokalisierung
Die erlaubten Eingaben für bestimmte <input>
-Typen hängen vom Gebietsschema ab. In einigen Ländern ist 1.000,00 eine gültige Zahl, während in anderen Ländern die gültige Eingabeweise dieser Zahl 1.000,00 ist.
Firefox verwendet folgende Heuristiken, um das Gebietsschema 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 seiner Elternteile angegeben ist. - Versuchen Sie die Sprache, die durch das
Content-Language
-HTTP-Header angegeben wird. Oder, - Wenn keine angegeben ist, verwenden Sie das Gebietsschema des Browsers.
Barrierefreiheit
Labels
Beim Einbeziehen von Eingaben ist es eine Anforderung der Barrierefreiheit, Labels hinzuzufügen. Dies ist notwendig, damit diejenigen, die unterstützende Technologien verwenden, wissen, wofür die Eingabe ist. Außerdem gibt das Klicken oder Berühren eines Labels dem zugehörigen Formularsteuerelement den Fokus. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für sehende Benutzer, da es den Bereich vergrößert, den ein Benutzer klicken oder berühren kann, um die Steuerung zu aktivieren. Dies ist besonders nützlich (und sogar notwendig) für Radiobuttons und Checkboxes, die winzig sind. Für weitere Informationen über Labels im Allgemeinen, siehe Labels.
Das folgende Beispiel zeigt, wie Sie das <label>
mit einem <input>
-Element im obigen Stil verknüpfen. Sie müssen dem <input>
ein id
-Attribut geben. Das <label>
benötigt dann ein for
-Attribut, dessen Wert derselbe ist wie die id
des Eingabefelds.
<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas" />
Größe
Interaktive Elemente wie Formulareingaben sollten einen Bereich bieten, der groß genug ist, um sie leicht zu aktivieren. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Problemen und Menschen, die nicht-präzise Formen der Eingabe wie einen Stift oder Finger verwenden. Eine Mindestinteraktivgröße von 44×44 [CSS-Pixel] (https://www.w3.org/TR/WCAG21/#dfn-css-pixels) wird empfohlen.
Technische Zusammenfassung
Inhaltskategorien |
Fließender Inhalt, aufgelistet, einreichbar, zurücksetzbar, formularassoziiertes Element,
Phrasierung Inhalt. Wenn das type nicht
hidden ist, dann labelbares Element, tastbarer Inhalt.
|
---|---|
Erlaubter Inhalt | Keiner; es ist ein leeres Element. |
Tag-Auslassung | Muss ein Start-Tag haben und darf keinen End-Tag haben. |
Erlaubte Eltern | Jedes Element, das Phrasierungsinhalt akzeptiert. |
Implizite ARIA-Rolle |
|
Erlaubte ARIA-Rollen |
|
DOM-Schnittstelle | [`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement) |
Spezifikationen
Specification |
---|
HTML # the-input-element |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
input | ||||||||||||
accept | ||||||||||||
align | ||||||||||||
alpha | ||||||||||||
alt | ||||||||||||
autocomplete | ||||||||||||
capture | ||||||||||||
checked | ||||||||||||
colorspace | ||||||||||||
dirname | ||||||||||||
disabled | ||||||||||||
form | ||||||||||||
formaction | ||||||||||||
formenctype | ||||||||||||
formmethod | ||||||||||||
formnovalidate | ||||||||||||
formtarget | ||||||||||||
list | ||||||||||||
max | ||||||||||||
maxlength | ||||||||||||
min | ||||||||||||
minlength | ||||||||||||
mozactionhint | ||||||||||||
multiple | ||||||||||||
name | ||||||||||||
pattern | ||||||||||||
placeholder | ||||||||||||
popovertarget | ||||||||||||
Implicit anchor reference via popovertarget | ||||||||||||
popovertargetaction | ||||||||||||
readonly | ||||||||||||
required | ||||||||||||
size | ||||||||||||
src | ||||||||||||
step | ||||||||||||
type="button" | ||||||||||||
type="checkbox" | ||||||||||||
type="color" | ||||||||||||
type="date" | ||||||||||||
type="datetime-local" | ||||||||||||
type="email" | ||||||||||||
type="file" | ||||||||||||
type="hidden" | ||||||||||||
type="image" | ||||||||||||
type="month" | ||||||||||||
type="number" | ||||||||||||
type="password" | ||||||||||||
Special handling of password inputs in insecure login pages | ||||||||||||
type="radio" | ||||||||||||
type="range" | ||||||||||||
Tick mark support | ||||||||||||
Vertically-oriented range sliders | ||||||||||||
type="reset" | ||||||||||||
type="search" | ||||||||||||
type="submit" | ||||||||||||
type="tel" | ||||||||||||
type="text" | ||||||||||||
type="time" | ||||||||||||
type="url" | ||||||||||||
type="week" | ||||||||||||
usemap | ||||||||||||
webkitdirectory |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Non-standard. Check cross-browser support before using.
- Deprecated. Not for use in new websites.
- See implementation notes.
- Has more compatibility info.
Siehe auch
- Formular-Einschränkungsvalidierung
- Ihr erstes HTML-Formular
- Wie man ein HTML-Formular strukturiert
- Die nativen Formular-Widgets
- Formulardaten senden
- Formulardatenvalidierung
- Wie man benutzerdefinierte Formular-Widgets baut
- HTML-Formulare in Legacy-Browsern
- Styling von HTML-Formularen
- Erweitertes Styling von HTML-Formularen
- Erstellen vertikaler Formularsteuerungen