<input> HTML-Input-Element

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

Die Funktionsweise eines <input> variiert erheblich, je nachdem, welchen Wert das type-Attribut hat. Daher werden die verschiedenen Typen auf eigenen separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben ist, wird der Standardtyp text angenommen.

Die verfgbaren Typen sind wie folgt:

<input type="button" name="button" value="Button" />

<input type="checkbox" name="checkbox"/>

<input type="color" name="color"/>

<input type="date" name="date"/>

<input type="datetime-local" name="datetime-local"/>

<input type="email" name="email"/>

<input type="file" accept="image/*, text/*" name="file"/>

<input id="userId" name="userId" type="hidden" value="abc123" />

<input type="image" name="image" src="" alt="image input"/>

<input type="month" name="month"/>

<input type="number" name="number"/>

<input type="password" name="password"/>

<input type="radio" name="radio"/>

<input type="range" name="range" min="0" max="25"/>

<input type="reset" name="reset"/>

<input type="search" name="search"/>

<input type="submit" name="submit"/>

<input type="tel" name="tel"/>

<input type="text" name="text"/>

<input type="time" name="time"/>

<input type="url" name="url"/>

<input type="week" name="week"/>

<input type="datetime" name="datetime"/>

Attribute

Das <input>-Element ist so leistungsfhig aufgrund seiner Attribute; das type-Attribut, wie oben mit Beispielen beschrieben, ist das wichtigste. Da jedes <input>-Element, unabhngig von seinem Typ, auf der HTMLInputElement-Schnittstelle basiert, teilen sie technisch dasselbe Set von Attributen. In Wirklichkeit haben jedoch die meisten Attribute nur auf einen bestimmten Teilbereich von Eingabetypen Einfluss. Auerdem beeinflussen einige Attribute ein Eingabefeld unterschiedlich, je nach Eingabetyp, und wirken sich auf verschiedene Eingabetypen unterschiedlich aus.

Dieser Abschnitt bietet eine Tabelle, die alle Attribute mit einer kurzen Beschreibung auflistet. Diese Tabelle wird von einer Liste gefolgt, die jedes Attribut detaillierter beschreibt, zusammen mit den Eingabetypen, mit denen sie assoziiert sind. Diejenigen, die fr die meisten oder alle Eingabetypen gemeinsam sind, werden im Folgenden ausfhrlicher definiert. Attribute, die einzigartig fr bestimmte Eingabetypen sind - oder Attribute, die bei allen Eingabetypen, aber mit besonderen Verhalten bei einem bestimmten Eingabetyp, allgemein sind - werden stattdessen auf den Seiten dieser Typen dokumentiert.

Attribute fr das <input>-Element umfassen die globalen HTML-Attribute und zustzlich:

Einige zustzliche, nicht-standardisierte Attribute sind nach den Beschreibungen der Standardattribute aufgelistet.

Einzelne Attribute

accept

Gltig nur fr den file-Eingabetyp, definiert das accept-Attribut, welche Dateitypen in einem file-Upload-Steuerelement whlbar sind. Siehe den file Eingabetyp.

alpha

Gltig nur fr den color-Eingabetyp, bietet das alpha-Attribut dem Endbenutzer die Mglichkeit, die Opazitt der ausgewhlten Farbe einzustellen.

alt

Gltig nur fr den image-Button, bietet das alt-Attribut alternativen Text fr das Bild, der den Wert des Attributs anzeigt, wenn das Bild src fehlt oder aus irgendeinem Grund nicht geladen wird. Siehe den image Eingabetyp.

autocapitalize

Kontrolliert, ob eingegebener Text automatisch grogeschrieben wird, und falls ja, auf welche Weise. Siehe die Seite zum autocapitalize-globalen Attribut fr weitere Informationen.

autocomplete

(Kein Boolean-Attribut!) Das autocomplete-Attribut nimmt als Wert einen durch Leerzeichen getrennten String an, der beschreibt, welche, wenn vorhanden, Art der Autovervollstndigungsfunktionalitt das Eingabefeld bereitstellen soll. Eine typische Implementierung von Autovervollstndigung erinnert sich an vorherige Werte, die in demselben Eingabefeld eingegeben wurden, aber komplexere Formen der Autovervollstndigung knnen existieren. Ein Browser knnte zum Beispiel mit der Kontaktliste eines Gerts integrieren, um email-Adressen in einem E-Mail-Eingabefeld autovervollstndigen. Siehe autocomplete fr zulssige Werte.

Das autocomplete-Attribut ist gltig fr hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color und password. Dieses Attribut hat keine Wirkung auf Eingabetypen, die keine numerischen oder Textdaten zurckgeben, und ist fr alle Eingabetypen gltig auer checkbox, radio, file oder eine der Schaltflchentypen.

Siehe das autocomplete-Attribut fr zustzliche Informationen, einschlielich Informationen zur Passwortsicherheit und wie autocomplete bei hidden geringfgig anders ist als bei anderen Eingabetypen.

autofocus

Ein Boolean-Attribut, das, wenn vorhanden, darauf hinweist, dass die Eingabe automatisch den Fokus haben soll, wenn die Seite fertig geladen hat (oder wenn das <dialog>, das das Element enthlt, angezeigt wird).

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

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

Das autofocus-Attribut kann nicht auf Eingaben vom Typ hidden verwendet werden, da versteckte Eingaben nicht fokussiert werden knnen.

Warnung: Das automatische Fokussieren eines Formularelements kann visuell beeintrchtigte Menschen, die Bildschirmlesetechnologie verwenden, und Menschen mit kognitiven Beeintrchtigungen verwirren. Wenn autofocus zugewiesen wird, "teleportieren" Bildschirmleser ihren Benutzer zum Formularelement, ohne sie vorher zu warnen.

Verwenden Sie sorgfltige berlegungen zur Barrierefreiheit, wenn Sie das autofocus-Attribut anwenden. Automatisches Fokussieren auf ein Steuerelement kann dazu fhren, dass die Seite beim Laden scrollt. Der Fokus kann auch dazu fhren, dass dynamische Tastaturen auf einigen Touch-Gerten angezeigt werden. Whrend ein Bildschirmleser das Label des Formularelements, das den Fokus erhlt, ankndigt, wird der Bildschirmleser nichts vor dem Label ankndigen, und der sehende Benutzer auf einem kleinen Gert wird gleichermaen den durch den vorhergehenden Inhalt geschaffenen Kontext verpassen.

capture

Eingefhrt in der HTML Media Capture-Spezifikation und nur fr den file-Eingabetyp gltig, definiert das capture-Attribut, welche Medien - Mikrofon, Video oder Kamera - verwendet werden sollen, um eine neue Datei fr einen Upload mit einem file-Upload-Steuerelement in untersttzenden Szenarien zu erfassen. Siehe den file Eingabetyp.

checked

Gltig fr sowohl radio als auch checkbox Typen, ist checked ein Boolean-Attribut. Wenn es auf einem radio-Typ vorhanden ist, zeigt es an, dass die Optionsschaltflche die derzeit ausgewhlte in der Gruppe von gleichnamigen Optionsschaltflchen ist. Wenn es auf einem checkbox-Typ vorhanden ist, zeigt es an, dass das Kontrollkstchen standardmig aktiv ist (wenn die Seite geladen wird). Es zeigt nicht an, ob dieses Kontrollkstchen derzeit aktiviert ist: Wenn der Status des Kontrollkstchens gendert wird, spiegelt dieses Inhaltsattribut die nderung nicht wider. (Nur das HTMLInputElement's checked IDL-Attribut wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabesteuerelementen werden der Name und die Werte der aktivierten Kontrollkstchen und Optionsschaltflchen nur dann in die bermittelten Daten einbezogen, wenn sie derzeit aktiviert sind. Wenn sie es sind, werden der Name und der Wert/die Werte der aktivierten Steuerelemente bermittelt.

Wenn beispielsweise ein Kontrollkstchen, dessen name fruit lautet, einen value von cherry hat und das Kontrollkstchen aktiviert ist, werden die bermittelten Formulardaten fruit=cherry enthalten. Wenn das Kontrollkstchen nicht aktiv ist, wird es berhaupt nicht in den Formulardaten aufgefhrt. Der Standard-value fr Kontrollkstchen und Optionsschaltflchen ist on.

colorspace

Gltig nur fr den color-Eingabetyp, gibt das colorspace-Attribut den Farbraum an, der vom type="color"-Eingabefeld verwendet wird. Mgliche enumerierte Werte sind:

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

dirname

Gltig fr die Eingabetypen hidden, text, search, url, tel und email, ermglicht das dirname-Attribut die bermittlung der Richtung des Elements. Wenn enthalten, wird das Formularelement mit zwei Namens-/Wertepaaren bermittelt: das erste ist der name und value, und das zweite ist der Wert des dirname-Attributs als Name, mit einem Wert von ltr oder rtl, je nachdem, wie vom Browser festgelegt.

html

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

Wenn das oben gezeigte Formular bermittelt wird, bewirkt die Eingabe, dass sowohl das name / value-Paar von fruit=cherry als auch das dirname / Richtungs-Paar von fruit-dir=ltr gesendet wird. Fr weitere Informationen, siehe das dirname-Attribut.

disabled

Ein Boolean-Attribut, das, wenn vorhanden, darauf hinweist, dass der Benutzer nicht in der Lage sein sollte, mit der Eingabe zu interagieren. Deaktivierte Eingaben werden typischerweise in einer verblassenen Farbe oder in anderer Weise angezeigt, um anzuzeigen, dass das Feld nicht verfgbar ist.

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

Hinweis: Obwohl dies nicht von der Spezifikation gefordert wird, wird Firefox standardmig den dynamischen deaktivierten Status eines <input> ber Seitenladevorgnge hinweg beibehalten. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

form

Ein String, der das <form>-Element spezifiziert, mit dem die Eingabe verknpft ist (also, dessen Formularbesitzer sie ist). Der Wert dieses Strings, falls vorhanden, muss mit dem id eines <form>-Elements im selben Dokument bereinstimmen. Wenn dieses Attribut nicht angegeben ist, wird das <input>-Element mit dem nchsten enthaltenen Formular verknpft, falls vorhanden.

Mit dem form-Attribut knnen Sie eine Eingabe berall im Dokument platzieren, jedoch mit einem Formular anderswo im Dokument einfgen.

Hinweis: Eine Eingabe kann nur mit einem Formular verknpft werden.

formaction

Nur gltig fr die Eingabetypen image und submit. Siehe den submit Eingabetyp fr mehr Informationen.

formenctype

Nur gltig fr die Eingabetypen image und submit. Siehe den submit Eingabetyp fr mehr Informationen.

formmethod

Nur gltig fr die Eingabetypen image und submit. Siehe den submit Eingabetyp fr mehr Informationen.

formnovalidate

Nur gltig fr die Eingabetypen image und submit. Siehe den submit Eingabetyp fr mehr Informationen.

formtarget

Nur gltig fr die Eingabetypen image und submit. Siehe den submit Eingabetyp fr mehr Informationen.

height

Nur gltig fr den image-Eingabeknopf, ist height die Hhe der Bilddatei, die angezeigt werden soll, um die grafische Schaltflche darzustellen. Siehe den image Eingabetyp.

id

Globales Attribut, das fr alle Elemente gltig ist, einschlielich aller Eingabetypen, es definiert einen eindeutigen Bezeichner (ID), der im gesamten Dokument eindeutig sein muss. Zweck ist es, das Element beim Verlinken zu identifizieren. Der Wert wird als Wert des for-Attributs des <label> verwendet, um die Beschriftung mit der Formulareingabe zu verknpfen. Siehe <label>.

inputmode

Globaler Wert, der fr alle Elemente gltig ist, er gibt Browsers einen Hinweis auf den Typ der virtuellen Tastaturkonfiguration, die beim Bearbeiten dieses Elements oder seines Inhalts verwendet werden soll. Werte schlieen none, text, tel, url, email, numeric, decimal und search ein.

list

Der dem list-Attribut gegebene Wert sollte die id eines <datalist>-Elements sein, das sich im selben Dokument befindet. Die <datalist> bietet eine Liste von vordefinierten Werten, die dem Benutzer fr diese Eingabe vorgeschlagen werden sollen. Alle Werte in der Liste, die mit dem type inkompatibel sind, werden nicht in den vorgeschlagenen Optionen eingeschlossen. Die bereitgestellten Werte sind Vorschlge, keine Anforderungen: Benutzer knnen aus dieser vordefinierten Liste auswhlen oder einen anderen Wert angeben.

Es ist gltig in text, search, url, tel, email, date, month, week, time, datetime-local, number, range und color.

Gem der Spezifikationen wird das list-Attribut nicht von hidden, password, checkbox, radio, file oder einer der Schaltflchentypen untersttzt.

Abhngig vom Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen bekommen, Lngenmarken entlang eines Bereichs oder sogar eine Eingabe, die sich wie ein <select> ffnet, aber nicht gelistete Werte erlaubt. Schauen Sie sich die Browser-Kompatibilittstabelle fr die anderen Eingabearten an.

Siehe das <datalist>-Element.

max

Gltig fr date, month, week, time, datetime-local, number und range, definiert es den grten Wert im Bereich der zulssigen Werte. Wenn der in das Element eingegebene value diesen berschreitet, schlgt das Element bei der Einschrnkungsvalidierung fehl. Wenn der Wert des max-Attributs keine Zahl ist, dann hat das Element keinen Hchstwert.

Es gibt einen Spezialfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max niedriger als der Wert von min sein, was darauf hinweist, dass der Bereich entfernt sein kann; zum Beispiel erlaubt dies, einen Zeitbereich von 22:00 Uhr bis 04:00 Uhr anzugeben.

maxlength

Gltig fr text, search, url, tel, email und password, es definiert die maximale Zeichenlnge (gemessen in UTF-16 Codeeinheiten), die der Benutzer in das Feld eingeben kann. Dies muss ein Integerwert von 0 oder hher sein. Wenn kein maxlength angegeben ist oder ein ungltiger Wert angegeben ist, hat das Feld keine Maximallnge. Dieser Wert muss auch grer oder gleich dem Wert von minlength sein.

Die Eingabe schlgt bei der Einschrnkungsvalidierung fehl, wenn die Lnge des in das Feld eingegebenen Textes lnger ist als maxlength UTF-16 Codeeinheiten. Standardmig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als durch das maxlength-Attribut erlaubt sind. Einschrnkungsvalidierung wird nur angewandt, wenn der Wert vom Benutzer gendert wird. Siehe Client-seitige Validierung fr weitere Informationen.

min

Gltig fr date, month, week, time, datetime-local, number und range, es definiert den kleinsten Wert im Bereich der zulssigen Werte. Wenn der in das Element eingegebene value kleiner als dieser ist, schlgt das Element bei der Einschrnkungsvalidierung fehl. Wenn der Wert des min-Attributs keine Zahl ist, dann hat das Element keinen Mindestwert.

Dieser Wert muss kleiner oder gleich dem Wert des max-Attributs sein. Wenn das min-Attribut vorhanden, aber nicht angegeben oder ungltig ist, wird kein min-Wert angewendet. Wenn das min-Attribut gltig ist und ein nicht-leerer Wert kleiner als das Mindestma ist, das durch das min-Attribut erlaubt ist, verhindert die Einschrnkungsvalidierung die Formularbermittlung. Siehe Client-seitige Validierung fr weitere Informationen.

Es gibt einen Spezialfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max niedriger als der Wert von min sein, was darauf hinweist, dass der Bereich entfernt sein kann; zum Beispiel erlaubt dies, einen Zeitbereich von 22:00 Uhr bis 04:00 Uhr anzugeben.

minlength

Gltig fr text, search, url, tel, email und password, es definiert die Mindestzeichenlnge (gemessen in UTF-16 Codeeinheiten), die der Benutzer in das Eingabefeld eingeben kann. Dies muss ein nicht-negativer Integerwert sein, der kleiner oder gleich dem durch maxlength festgelegten Wert ist. Wenn kein minlength angegeben ist oder ein ungltiger Wert angegeben ist, hat die Eingabe keine Mindestlnge.

Die Eingabe schlgt bei der Einschrnkungsvalidierung fehl, wenn die Lnge des in das Feld eingegebenen Textes krzer als minlength UTF-16 Codeeinheiten ist, und verhindert so die Formularbermittlung. Einschrnkungsvalidierung wird nur angewandt, wenn der Wert vom Benutzer gendert wird. Siehe Client-seitige Validierung fr weitere Informationen.

multiple

Das Boolean-multiple-Attribut, wenn gesetzt, bedeutet, dass der Benutzer kommagetrennte E-Mail-Adressen im E-Mail-Widget eingeben oder mehr als eine Datei mit der file-Eingabe whlen kann. Siehe den email und file Eingabetyp.

name

Ein String, der einen Namen fr das Eingabesteuerung angibt. Dieser Name wird zusammen mit dem Wert des Steuerelements bermittelt, wenn die Formulardaten bermittelt werden.

Betrachten Sie das name als ein erforderliches Attribut (auch wenn es das nicht ist). Wenn eine Eingabe kein name angegeben hat oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular gesendet! (Deaktivierte Steuerelemente, nicht markierte Optionsschaltflchen, nicht markierte Kontrollkstchen und Rcksetztasten werden ebenfalls nicht gesendet.)

Es gibt zwei Spezialflle:

1. _charset_ : Wenn als Name eines <input>-Elements vom Typ hidden verwendet, wird der Wert der Eingabe automatisch vom Benutzeragent auf die zur bermittlung des Formulars verwendete Zeichenkodierung gesetzt.
2. isindex: Aus historischen Grnden ist der Name isindex nicht erlaubt.

Das name-Attribut erstellt ein einzigartiges Verhalten fr Optionsschaltflchen.

Nur eine Optionsschaltflche in einer gleichnamigen Gruppe von Optionsschaltflchen kann gleichzeitig aktiviert sein. Das Whlen einer Optionsschaltflche in dieser Gruppe deaktiviert automatisch jede derzeit aktivierte Optionsschaltflche in derselben Gruppe. Der Wert dieser einen aktiven Optionsschaltflche wird zusammen mit dem Namen bermittelt, wenn das Formular bermittelt wird,

Wenn Sie in eine Serie von gleichnamigen Gruppen von Optionsschaltflchen tabben, wird, wenn eine aktiviert ist, diejenige den Fokus erhalten. Wenn sie in der Quellreihenfolge nicht zusammen gruppiert sind, wird, wenn eine der Gruppe aktiviert ist, beim Tabben in die Gruppe beginnend, wenn die erste in der Gruppe erreicht wird, alle nicht aktivierten Optionsschaltflchen der Gruppe bersprungen. Mit anderen Worten, wenn eine aktiviert ist, berspringt das Tabben die nicht aktivierten Optionsschaltflchen in der Gruppe. Wenn keine aktiviert ist, erhlt die Optionsschaltflchengruppe den Fokus, wenn die erste Schaltflche in der gleichen Namensgruppe erreicht wird.

Sobald eine der Optionsschaltflchen in einer Gruppe den Fokus hat, wird durch Verwenden der Pfeiltasten durch alle Optionsschaltflchen mit demselben Namen navigiert, auch wenn die Optionsschaltflchen in der Quellreihenfolge nicht zusammen gruppiert sind.

Wenn einem Eingabeelement ein name zugewiesen wird, wird dieser Name zur Eigenschaft des lo<formularbesitzende Formularobjekt's HTMLFormElement.elements Eigenschaft. Wenn Sie ein Eingabefeld haben, dessen name auf guest gesetzt ist, und eine andere, deren name hat-size ist, kann der folgende Code verwendet werden:

js

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

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

Wenn dieser Code ausgefhrt wurde, wird guestName das HTMLInputElement fr das guest-Feld sein und hatSize das Objekt fr das hat-size-Feld.

Warnung: Vermeiden Sie es, Formularelementen einen name zu geben, der einer eingebauten Eigenschaft des Formulars entspricht, da Sie sonst die vordefinierte Eigenschaft oder Methode mit diesem Verweis auf das entsprechende Eingabefeld berschreiben wrden.

pattern

Gltig fr text, search, url, tel, email und password, wird das pattern-Attribut verwendet, um einen regulren Ausdruck zu kompilieren, den der value der Eingabe erfllen muss, damit der Wert die Einschrnkungsvalidierung besteht. Es muss ein gltiger JavaScript-Regulrer Ausdruck sein, wie er vom RegExp-Typ verwendet wird und wie in unserem Leitfaden fr regulre Ausdrcke dokumentiert ist. Es sollten keine Schrgstriche um den Mustertest angegeben werden. Bei der Zusammenstellung des regulren Ausdrucks:

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

Wenn das pattern-Attribut vorhanden, aber nicht angegeben oder ungltig ist, wird kein regulrer Ausdruck angewendet und dieses Attribut wird vollstndig ignoriert. Wenn das pattern-Attribut gltig ist und ein nicht-leerer Wert nicht dem Muster entspricht, verhindert die Einschrnkungsvalidierung die Formularbermittlung. Wenn das multiple vorhanden ist, wird der kompilierten Regulre Ausdruck gegen jeden kommagetrennten Wert abgeglichen.

Hinweis: Wenn Sie das pattern-Attribut verwenden, informieren Sie den Benutzer ber das erwartete Format, indem Sie erklrenden Text in der Nhe einfgen. Sie knnen auch ein title-Attribut einfgen, um zu erklren, was die Anforderungen sind, um das Muster zu erfllen; die meisten Browser werden diesen Titel als Tooltip anzeigen. Die sichtbare Erklrung ist zur Barrierefreiheit erforderlich. Der Tooltip ist ein verbessertes Element.

Siehe Client-seitige Validierung fr weiteres Informationen.

placeholder

Gltig fr text, search, url, tel, email, password und number, bietet das placeholder-Attribut einen kurzen Hinweis fr den Benutzer darauf, welche Art von Informationen im Feld erwartet wird. Es sollte ein Wort oder kurze Phrase sein, die einen Hinweis auf die erwartete Art von Daten gibt, anstelle einer Erklrung oder Aufforderung. Der Text darf keine Wagenrcklufe oder Zeilenumbrche enthalten. Wenn also zum Beispiel erwartet wird, dass ein Feld den Vornamen eines Benutzers aufnimmt und dessen Beschriftung "Vorname" lautet, knnte ein geeigneter Platzhalter "z.B. Mustafa" sein.

Hinweis: Das placeholder-Attribut ist nicht so semantisch sinnvoll wie andere Mglichkeiten, Ihr Formular zu erklren, und kann unerwartete technische Probleme mit Ihrem Inhalt verursachen. Siehe Labels fr weitere Informationen.

popovertarget

Wandelt ein Element <input type="button"> in eine Popover-Steuerungstaste um; nimmt die ID des zu kontrollierenden Popover-Elements als seinen Wert. Siehe die Popover API-Landeseite fr weitere Details. Die Etablierung einer Beziehung zwischen einem Popover und seiner Auslsetaste mit dem popovertarget-Attribut hat zwei weitere ntzliche Effekte:

• Der Browser erstellt eine implizite aria-details- und aria-expanded-Beziehung zwischen Popover und Auslser und platziert das Popover in einer logischen Position in der Keyboard-Fokusnavigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover besser zugnglich fr Benutzer von Tastatur und untersttzender Technologie (AT) (siehe auch Popover Accessibility Features).
• Der Browser erstellt eine implizite Verankerungsreferenz zwischen beiden, was es sehr bequem macht, Popovers relativ zu ihren Steuerelementen mit CSS-Ankerpositionierung zu positionieren. Siehe Popover-Ankerpositionierung fr weitere Details.

popovertargetaction

Gibt die auszufhrende Aktion auf einem von einem Steuerelement <input type="button"> gesteuerten Popover-Element an. Mgliche Werte sind:

"hide"

Die Schaltflche blendet ein angezeigtes Popover aus. Wenn Sie versuchen, ein bereits angedocktes Popover auszublenden, wird keine Aktion ausgefhrt.

"show"

Die Schaltflche zeigt ein verborgenes Popover an. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion unternommen.

"toggle"

Die Schaltflche schaltet ein Popover zwischen sichtbar und verborgen. Wenn das Popover verborgen ist, wird es angezeigt; wenn das Popover sichtbar ist, wird es verborgen. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die von der Steuertaste ausgefhrt wird.

readonly

Ein Boolean-Attribut, das, wenn vorhanden, darauf hinweist, dass der Benutzer nicht in der Lage sein sollte, den Wert der Eingabe zu bearbeiten. Das readonly-Attribut wird von den Eingabetypen text, search, url, tel, email, date, month, week, time, datetime-local, number und password untersttzt.

Siehe das HTML-Attribut: readonly fr mehr Informationen.

required

required ist ein Boolean-Attribut, das, wenn vorhanden, darauf hinweist, dass der Benutzer einen Wert fr die Eingabe angeben muss, bevor das besitzende Formular bermittelt werden kann. Das required-Attribut wird durch text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio und file-Eingaben untersttzt.

Siehe Client-seitige Validierung und das HTML-Attribut: required fr mehr Informationen.

size

Gltig fr email, password, tel, url und text, das size-Attribut gibt an, wie viel von der Eingabe angezeigt wird. Grundeinrichmetiliar erzeugt dies dasselbe Ergebnis wie die CSS width-Eigenschaft mit einigen Besonderheiten. Die tatschliche Einheit des Wertes hngt vom Eingabetyp ab. Fr password und text ist es eine Anzahl von Zeichen (oder em-Einheiten) mit einem Standardwert von 20, und fr andere sind es Pixel (oder px-Einheiten). CSS width hat Vorrang vor dem size-Attribut.

src

Nur gltig fr den image-Eingabeknopf, src ist eine Zeichenkette, die die URL der anzuzeigenden Bilddatei angibt, um die grafische Schaltflche zu darstellen. Siehe den image Eingabetyp.

step

Gltig fr date, month, week, time, datetime-local, number und range, das step-Attribut ist eine Zahl, die die Granularitt angibt, an die sich der Wert halten muss. Nur Werte, die eine ganze Anzahl von Schritten vom Sttzpunkt des Schrittes entfernt sind, sind gltig. Der Sttzpunkt des Schrittes ist min, wenn angegeben, sonst value oder 0, wenn keines angegeben ist (auer fr week, das einen Standardsttzpunkt des Schritts von -259.200.000 hat, was den Start von Woche 1970-W01 darstellt).

Wenn nicht explizit enthalten:

• step ist standardmig 1 fr number und range.
• Jeder Eingabedatentyp hat einen Standardwert fr step, der dem Typ angemessen ist; siehe die individuellen Eingabeseiten: date, datetime-local, month, time und week.

Der Wert muss eine positive Zahl sein - Integer oder Float - oder der spezielle Wert any, was bedeutet, dass kein Schritt impliziert wird und jeder Wert erlaubt ist (unter Bercksichtigung anderer Einschrnkungen, wie min und max).

Zum Beispiel, wenn Sie <input type="number" min="10" step="2"> haben, dann sind alle geraden Ganzzahlen, 10 oder grer, gltig. Wenn weggelassen, <input type="number"> sind alle Ganzzahlen gltig, aber Fliekommazahlen (wie 4.2) sind nicht gltig, weil step standardmig auf 1 gesetzt ist. Damit 4.2 gltig ist, msste step auf any, 0.1, 0.2, oder msste der min-Wert eine Zahl sein, die auf .2 endet, wie <input type="number" min="-5.2">.

Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht den Stufenkonfigurationen entsprechen, wird der Wert als ungltig in der Einschrnkungsvalidierung angesehen und das Pseudoklass :invalid wird bereinstimmen.

Siehe Client-seitige Validierung fr mehr Informationen.

switch

Gltig nur fr Kontrollkstchen-Eingaben, ist switch ein Boolean-Attribut, das angibt, ob das Kontrollkstchen-Eingabefeld als Schalter dargestellt werden soll.

Hinweis: Dieses Attribut ist noch experimentell und hat begrenzte Browseruntersttzung. Auf nicht untersttzten Browsern wird das Attribut ignoriert.

tabindex

Globales Attribut, gltig fr alle Elemente, einschlielich aller Eingabetypen, ein Integer-Attribut, das angibt, ob das Element Eingabefokus aufnehmen kann (fokusfhig ist), wenn es an der sequenziellen Tastaturnavigation teilnehmen soll. Da alle Eingabetypen mit Ausnahme der Eingabe vom Typ hidden fhig sind, fokussiert zu werden, sollte dieses Attribut nicht auf Formularsteuerelementen verwendet werden, da dadurch die Verwaltung der Fokusreihenfolge fr alle Elemente innerhalb des Dokuments mit der Gefahr einer fehlerhaften Benutzbarkeit und Zugnglichkeit, falls dies nicht korrekt erfolgt, erforderlich wre.

title

Globales Attribut, gltig fr alle Elemente, einschlielich aller Eingabetypen, das einen Text enthlt, der hnliche Informationen ber das zugehrige Element darstellt. Solche Informationen knnen typischerweise, aber nicht unbedingt, dem Benutzer als Tooltip prsentiert werden. Der Titel sollte NICHT als primre Erklrung des Zwecks des Formularelements verwendet werden. Stattdessen sollten Sie das <label>-Element verwenden, wobei das for-Attribut auf das id Attribut des Formularelements gesetzt wird. Siehe Labels unten.

type

Ein String, der den Typ des zu rendierenden Steuerelements angibt. Um beispielsweise ein Kontrollkstchen zu erstellen, wird ein Wert von checkbox verwendet. Wenn weggelassen (oder ein unbekannter Wert angegeben), wird der Eingabetypt text verwendet, wodurch ein Klartext-Eingabefeld erstellt wird.

Zulssige Werte sind in Eingabetypen oben aufgefhrt.

value

Der Wert der Eingabesteuerung. Wenn im HTML angegeben, ist dies der Ausgangswert, und von da an kann er jederzeit mithilfe von JavaScript gendert oder abgerufen werden, um auf die value-Eigenschaft des entsprechenden HTMLInputElement-Objekts zuzugreifen. Das value-Attribut ist immer optional, sollte jedoch als verpflichtend fr checkbox, radio und hidden angesehen werden.

width

Nur gltig fr den image-Eingabeknopf, ist width die Breite der Bilddatei, die angezeigt werden soll, um die grafische Schaltflche darzustellen. Siehe den image Eingabetyp.

Nicht-standardisierte Attribute

Die folgenden nicht-standardisierten Attribute sind auf einigen Browsern ebenfalls verfgbar. Im Allgemeinen sollten Sie deren Verwendung vermeiden, es sei denn, es kann nicht anders.

incremental

Das Boolean-Attribut incremental ist eine WebKit- und Blink-Erweiterung (also untersttzt von Safari, Opera, Chrome, etc.), die, wenn vorhanden, dem Benutzeragent sagt, die Eingabe als Live-Suche zu verarbeiten. Whrend der Benutzer den Wert des Feldes bearbeitet, sendet der Benutzeragent search-Ereignisse an das HTMLInputElement-Objekt, das das Suchfeld darstellt. Dies ermglicht Ihrem Code, die Suchergebnisse in Echtzeit zu aktualisieren, whrend der Benutzer die Suche bearbeitet.

Wenn incremental nicht angegeben ist, wird das search-Ereignis nur gesendet, wenn der Benutzer explizit eine Suche initiiert (wie durch Drcken der Enter- oder Return-Taste, whrend das Feld bearbeitet wird).

Das search-Ereignis ist so rate-begrenzt, dass es nicht hufiger als in einem implementierungsdefinierten Intervall gesendet wird.

orient

hnlich dem nicht-standardisierten CSS-Eigenschaft -moz-orient, das die <progress> und <meter> Elemente betrifft, definiert das orient-Attribut die Ausrichtung des Bereichsschiebers. Werte schlieen horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wo der Bereich vertikal gerendert wird. Siehe Vertikale Formularsteuerung erstellen fr einen modernen Ansatz zur Erstellung von vertikalen Formularsteuerungen.

results

Das results-Attributuntersttzt nur von Safariist ein numerischer Wert, der Ihnen erlaubt, die maximale Anzahl von Eintrgen in dem nativ bereitgestellten Dropdown-Men des <input>-Elements frherer Suchanfragen zu berschreiben.

Der Wert muss eine nicht negative Dezimalzahl sein. Wenn nicht bereitgestellt oder ein ungltiger Wert angegeben wird, wird die standardmige maximale Anzahl von Eintrgen des Browsers verwendet.

webkitdirectory

Das Boolean-webkitdirectory-Attribut, wenn vorhanden, gibt an, dass im Dateiauswahl-Interface nur Verzeichnisse ausgewhlt werden knnen. Siehe HTMLInputElement.webkitdirectory fr zustzliche Details und Beispiele.

Obwohl ursprnglich nur fr WebKit-basierte Browser implementiert, ist webkitdirectory auch in Microsoft Edge sowie Firefox 50 und spter verwendbar. Obwohl es relativ umfassende Untersttzung hat, ist es immer noch nicht standardisiert und sollte nicht verwendet werden, es sei denn, Sie haben keine Alternative.

Methoden

Die folgenden Methoden werden durch das HTMLInputElement-Interface bereitgestellt, das <input>-Elemente im DOM reprsentiert. Ebenso verfgbar sind die Methoden, die durch die bergeordneten Schnittstellen HTMLElement, Element, Node und EventTarget festgelegt sind.

checkValidity()

Gibt true zurck, wenn der Wert des Elements die Gltigkeitsprfungen besteht; ansonsten wird false zurckgegeben und ein invalid-Ereignis am Element ausgelst.

reportValidity()

Gibt true zurck, wenn der Wert des Elements die Gltigkeitsprfungen besteht; ansonsten wird false zurckgegeben, ein invalid-Ereignis am Element ausgelst und (falls das Ereignis nicht abgebrochen wird) das Problem dem Benutzer gemeldet.

select()

Whlt den gesamten Inhalt des <input>-Elements aus, wenn der Inhalt des Elements auswhlbar ist. Fr Elemente ohne auswhlbaren Textinhalt (wie ein visueller Farbwhler oder Kalenderdateneingaben) tut diese Methode nichts.

setCustomValidity()

Legt eine benutzerdefinierte Nachricht fest, die angezeigt wird, wenn der Wert des Eingabeelements nicht gltig ist.

setRangeText()

Setzt den Inhalt des angegebenen Bereichs von Zeichen im Eingabeelement auf eine gegebene Zeichenkette. Ein selectMode-Parameter ist verfgbar, um zu steuern, wie der vorhandene Inhalt beeinflusst wird.

setSelectionRange()

Whlt den angegebenen Bereich von Zeichen innerhalb eines Texteingabeelements aus. Tut nichts fr Eingaben, die nicht als Texteingabefelder dargestellt werden.

showPicker()

Zeigt den Browser-Auswahldialog fr das Eingabeelement an, der normalerweise angezeigt wird, wenn das Element ausgewhlt wird, aber durch einen Tastendruck oder eine andere Benutzerinteraktion ausgelst wird.

stepDown()

Verringert den Wert einer numerischen Eingabe standardmig um eins oder um die angegebene Anzahl von Einheiten.

stepUp()

Erhht den Wert einer numerischen Eingabe um eins oder um die angegebene Anzahl von Einheiten.

CSS

Da Inputs ersetzte Elemente sind, haben sie einige Funktionen, die auf Nicht-Formularelemente nicht anwendbar sind. Es gibt CSS-Selektoren, die gezielt Formularelemente basierend auf ihren UI-Funktionen, auch bekannt als UI-Pseudo-Klassen, ansprechen knnen. Das Input-Element kann auch nach Typ mit Attributselektoren angesprochen werden. Es gibt einige Eigenschaften, die besonders ntzlich sind.

UI-Pseudo-Klassen

Beispiel fr Pseudo-Klassen

Wir knnen ein Checkbox-Label basierend darauf gestalten, ob die Checkbox ausgewhlt ist oder nicht. In diesem Beispiel gestalten wir die color und font-weight des <label>, das unmittelbar nach einer ausgewhlten Eingabe kommt. Wir haben keine Styles angewendet, wenn das input nicht ausgewhlt ist.

<input id="checkboxInput" type="checkbox" />
<label for="checkboxInput">Toggle the checkbox on and off</label>

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

Attributselektoren

Es ist mglich, verschiedene Arten von Formularelementen basierend auf ihrem type mittels Attributselektoren zu adressieren. CSS-Attributselektoren stimmen Elemente basierend auf der bloen Anwesenheit eines Attributs oder dem Wert eines bestimmten Attributs ab.

/* 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

Standardmig erscheint der Platzhaltertext durchscheinend oder hellgrau. Das ::placeholder-Pseudo-Element ist der placeholder-Text des Eingabefelds. Es kann mit einer begrenzten Untergruppe von CSS-Eigenschaften gestaltet werden.

::placeholder {
  color: blue;
}

Nur die Untergruppe von CSS-Eigenschaften, die auf das ::first-line-Pseudo-Element anwendbar sind, kann in einer Regel verwendet werden, die ::placeholder in ihrem Selektor verwendet.

caret-color

Eine spezielle Eigenschaft fr textbezogene Eingabewelten ist die CSS-Eigenschaft caret-color, die es Ihnen ermglicht, die Farbe festzulegen, die zum Zeichnen des Textkursors 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 ermglicht es Ihnen, das Grenverhalten von Formulareingaben zu steuern (d.h. sie erhalten standardmig eine voreingestellte bevorzugte Gre). Diese Eigenschaft ermglicht es Ihnen, das Standardverhalten zu berschreiben, sodass Formularelemente ihre Gre anpassen, um ihren Inhalt zu fassen.

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

object-position und object-fit

In bestimmten Fllen (hufig bei nicht-textbasierten Eingaben und spezialisierten Schnittstellen) ist das <input>-Element ein ersetztes Element. Wenn es so ist, knnen die Position und Gre des Elements in seinem Rahmen mithilfe der CSS-Eigenschaften object-position und object-fit angepasst werden.

Styling

Fr mehr Informationen darber, wie man Farbe zu HTML-Elementen hinzufgt, siehe:

• Farbe auf HTML-Elemente anwenden mit CSS.

Auch siehe:

• HTML-Formulare gestalten
• Erweiterte Gestaltung fr HTML-Formulare und

Zustzliche Funktionen

Labels

Labels sind notwendig, um untersttzenden Text mit einem <input> zu verknpfen. Das <label>-Element bietet erklrende Informationen ber ein Formularfeld, das immer angemessen ist (abgesehen von gestalterischen berlegungen). Es ist nie eine schlechte Idee, ein <label> zu verwenden, um zu erklren, was in ein <input> oder <textarea> eingegeben werden sollte.

Zugehrige Labels

Die semantische Verknpfung von <input>- und <label>-Elementen ist ntzlich fr untersttzende Technologien wie Bildschirmleser. Indem sie durch das Attribut for des <label>-Elements gemeinsam genutzt werden, verbinden Sie das Label mit dem Eingabefeld auf eine Weise, die Bildschirmleser Inputs prziser den Benutzern beschreiben lsst.

Es reicht nicht aus, einfachen Text neben dem <input>-Element zu haben. Vielmehr erfordert Usability und Zugnglichkeit den Einschluss von entweder impliziten oder expliziten <label>:

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

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

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

Das erste Beispiel ist unzugnglich: keine Beziehung besteht zwischen der Aufforderung und dem <input>-Element.

Neben einem zugnglichen Namen bietet das Label einen greren "Trefferbereich" fr Maus- und Touchscreen-Nutzer, um darauf zu klicken oder sie zu berhren. Indem ein <label> mit einem <input> verbunden wird, fokussiert das Klicken auf eines von beiden das <input>. Wenn Sie einfachen Text verwenden, um Ihr Input zu "beschriften", passiert das nicht. Das Einbeziehen der Aufforderung als Teil des Aktivierungsbereichs fr die Eingabe ist hilfreich fr Menschen mit motorischen Kontrollbedingungen.

Als Webentwickler ist es wichtig, dass wir nie annehmen, dass Menschen alle Dinge wissen werden, die wir wissen. Die Vielfalt an Menschen, die das Web nutzen und damit auch Ihre Website garantiert praktisch, dass einige Besucher Ihrer Website Varianten in Denkprozessen und/oder Umstnde haben werden, die sie Ihre Formulare anders interpretieren lassen als Sie ohne klare und richtig prsentierte Labels.

Platzhalter sind nicht zugnglich

Das placeholder-Attribut ermglicht es Ihnen, Text festzulegen, der innerhalb des Inhaltsbereichs des <input>-Elements selbst angezeigt wird, wenn es 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 das nicht ist. Der Platzhalter dient dazu, einen Hinweis darauf zu geben, wie ein eingabewert aussehen sollte, nicht als Erklrung oder Aufforderung.

Nicht nur ist der Platzhalter fr Bildschirmleser nicht zugnglich, sondern sobald der Benutzer Text in das Formularelement eingibt, oder wenn das Formularelement bereits einen Wert hat, verschwindet der Platzhalter. Browser mit automatischer Seitenbersetzungsfunktionalitt knnen bei der bersetzung der Attribute berspringen, was bedeutet, dass der placeholder mglicherweise nicht bersetzt wird.

Client-seitige Validierung

Zustzlich zur Verwendung von CSS, um Eingaben basierend auf den :valid- oder :invalid-UI-Zustnden basierend auf dem aktuellen Zustand jeder Eingabe zu gestalten, wie im Abschnitt UI-Pseudo-Klassen oben erwhnt, ermglicht der Browser eine client-seitige Validierung bei (versuchter) Formulareinreichung. Bei der Formulareinreichung, wenn ein Formularelement die Einschrnkungsvalidierung nicht besteht, zeigen untersttzende Browser eine Fehlermeldung auf dem ersten ungltigen Formularelement an; eine Standardmeldung basierend auf der Art des Fehlers oder eine von Ihnen festgelegte Meldung.

Einige Eingabetypen und andere Attribute setzen Grenzen, welche Werte fr eine bestimmte Eingabe gltig sind. Beispielsweise bedeutet <input type="number" min="2" max="10" step="2">, dass nur die Zahlen 2, 4, 6, 8 oder 10 gltig sind. Mehrere Fehler knnten auftreten, einschlielich eines rangeUnderflow-Fehlers, wenn der Wert kleiner als 2 ist, rangeOverflow, wenn er grer als 10 ist, stepMismatch, wenn der Wert eine Zahl zwischen 2 und 10 ist, aber keine gerade Ganzzahl (nicht den Anforderungen des step-Attributs entspricht), oder typeMismatch, wenn der Wert keine Zahl ist.

Fr die Eingabetypen, deren Wertebereich periodisch ist (d.h. bei dem hchstmglichen Wert kehren die Werte zum Anfang zurck, anstatt zu enden), ist es mglich, dass die Werte der Eigenschaften max und min umgekehrt sind, was darauf hinweist, dass der Bereich erlaubter Werte bei min beginnt, zum niedrigsten mglichen Wert zurckkehrt und dann fortfhrt, bis max erreicht ist. Dies ist besonders ntzlich fr Datum- und Zeitwerte, wie wenn Sie den Bereich auf 20:00 Uhr bis 08:00 Uhr festlegen mchten:

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

Spezifische Attribute und deren Werte knnen zu einem bestimmten Fehler ValidityState fhren:

Wenn ein Formularelement nicht das required-Attribut hat, fhrt kein Wert oder ein leerer String nicht zu einer Ungltigkeit. Selbst wenn die obigen Attribute vorhanden sind, auer required, wird ein leerer String nicht zu einem Fehler fhren.

Wir knnen Grenzen festlegen, welche Werte wir akzeptieren, und untersttzte Browser werden diese Formularwerte von Natur aus validieren und den Benutzer warnen, wenn beim Absenden ein Fehler auftritt.

Zustzlich zu den in der obigen Tabelle beschriebenen Fehlern enthlt die validityState-Schnittstelle die booleschen, schreibgeschtzten Eigenschaften badInput, valid und customError. Das Validierungsobjekt umfasst:

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

Fr jede dieser booleschen Eigenschaften gibt ein Wert von true an, dass der angegebene Grund, warum die Validierung fehlgeschlagen sein knnte, zutrifft, mit Ausnahme der valid-Eigenschaft, die true ist, wenn der Wert des Elements alle Einschrnkungen einhlt.

Wenn ein Fehler auftritt, werden untersttzte Browser sowohl den Benutzer warnen als auch verhindern, dass das Formular abgeschickt wird. Ein Wort der Vorsicht: Wenn eine benutzerdefinierte Fehlermeldung auf einen wahrheitsgemen Wert (alles auer dem leeren String oder null) gesetzt wird, wird verhindert, dass das Formular abgeschickt wird. Wenn keine benutzerdefinierte Fehlermeldung vorliegt und keine der anderen Eigenschaften true zurckgeben, wird valid true sein und das Formular kann abgeschickt werden.

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

Die letzte Zeile, die die benutzerdefinierte Fehlermeldung auf den leeren String setzt, istt unerlsslich. Wird ein Fehler gemacht und die Gltigkeit wird eingestellt, wird die Einreichung nicht erfolgen, selbst wenn alle Werte gltig sind, bis die Nachricht null ist.

Beispiel fr benutzerdefinierte Validierungsfehler

Wenn Sie eine benutzerdefinierte Fehlermeldung anzeigen mchten, wenn ein Feld die Validierung nicht besteht, mssen Sie die Constraint Validation API verwenden, die auf <input> (und verwandten) Elementen verfgbar 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 werden dazu fhren, dass dies eine Standardfehlermeldung erzeugt, wenn Sie versuchen, das Formular mit entweder leerem oder ungltigem Wert einzureichen, der nicht mit pattern bereinstimmt.

Wenn Sie stattdessen benutzerdefinierte Fehlermeldungen anzeigen mchten, knnten 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 wie folgt angezeigt:

Kurz gesagt:

• Wir prfen den Gltigkeitszustand des Eingabeelements jedes Mal, wenn sein Wert durch das Ausfhren der checkValidity()-Methode ber den input-Ereignishandler gendert wird.
• Wenn der Wert ungltig ist, wird ein invalid-Ereignis erzeugt und die invalid-Ereignishandler-Funktion ausgefhrt. In dieser Funktion ermitteln wir, ob der Wert ungltig ist, weil er leer ist oder weil er nicht mit dem Muster bereinstimmt, indem wir einen if ()-Block verwenden, und setzen eine benutzerdefinierte Gltigkeitsfehlermeldung.
• Infolgedessen wird, wenn der Eingabewert ungltig ist, wenn der Absende-Button gedrckt wird, eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Wenn er gltig ist, wird er in gewohnter Weise eingereicht. Damit dies geschieht, muss die benutzerdefinierte Gltigkeit durch Aufrufen von setCustomValidity() mit einem leeren String-Wert gestoppt werden. Wir tun dies daher jedes Mal, wenn das input-Ereignis aufgerufen wird. Wenn Sie dies nicht tun und eine benutzerdefinierte Gltigkeit zuvor eingestellt wurde, wird die Eingabe als ungltig registriert, auch wenn sie derzeit einen gltigen Wert bei der Einreichung enthlt.

Lokalisierung

Die erlaubten Eingaben fr bestimmte <input>-Typen hngen von der Lokalisierung ab. In einigen lokalen Regionen ist 1.000,00 eine gltige Zahl, whrend in anderen Gebieten die gltige Mglichkeit, diese Zahl einzugeben, 1.000,00 ist.

Firefox verwendet die folgenden Heuristiken, um zu bestimmen, welche Lokalisierung zur Validierung der Benutzereingabe verwendet wird (zumindest fr type="number"):

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

Barrierefreiheit

Labels

Beim Hinzufgen von Eingaben ist es erforderlich, auch Labels hinzuzufgen. Dies ist unerlsslich, damit Benutzer von untersttzenden Technologien erkennen knnen, wofr die Eingabe gedacht ist. Auerdem gewhrleistet das Klicken oder Berhren eines Labels den Fokus auf das zugehrige Formularelement des Labels. Dies verbessert die Barrierefreiheit und Usability fr sehende Nutzer und vergrert den Bereich, den der Benutzer klicken oder berhren kann, um das Formularelement zu aktivieren. Dies ist besonders ntzlich (und sogar erforderlich) fr Radio-Buttons und Checkboxen, die sehr klein sind. Weitere Informationen ber Labels im Allgemeinen finden Sie unter Labels.

Das folgende Beispiel zeigt, wie das <label> mit einem <input>-Element im obigen Stil verknpft werden kann. Sie mssen dem <input> ein id-Attribut geben. Das <label> bentigt dann ein for-Attribut, dessen Wert mit der id des Inputs bereinstimmt.

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

Gre

Interaktive Elemente wie Formulareingaben sollten einen ausreichend groen Bereich bieten, der leicht zu aktivieren ist. Dies hilft einer Vielzahl von Menschen, einschlielich Menschen mit motorischen Kontrollproblemen und Menschen, die unprzise Eingabemethoden wie einen Stylus oder Finger verwenden. Eine Mindestgre von 4444 CSS-Pixeln wird empfohlen.

• Verstndnis des Erfolgs-Kriteriums 2.5.5: Zielgre | W3C Understanding WCAG 2.1
• Zielgre und 2.5.5 | Adrian Roselli
• Schnelltest: Groe Touch-Ziele - Das A11Y-Projekt

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• CSS appearance-Eigenschaft
• Ihr erstes HTML-Formular
• Wie Sie ein HTML-Formular strukturieren
• Die nativen Formularelemente
• Senden von Formulardaten
• Formulareinschrnkungsvalidierung
• HTML-Formulare gestalten