<input>: Das HTML-Eingabe-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

Wie ein <input> funktioniert, variiert erheblich, abhängig vom Wert seines type-Attributs, daher werden die unterschiedlichen Typen in eigenen separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben ist, wird standardmäßig der Typ text verwendet.

Die verfügbaren 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 mächtig wegen seiner Attribute; das type-Attribut, mit Beispielen oben beschrieben, ist das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-Schnittstelle basiert, teilen sie technisch die gleiche Menge an Attributen. In Realität haben die meisten Attribute jedoch nur Auswirkungen auf einen bestimmten Teil der Eingabetypen. Darüber hinaus beeinflusst die Art und Weise, wie einige Attribute eine Eingabe beeinflussen, verschiedene Eingabetypen in unterschiedlicher Weise.

Dieser Abschnitt bietet eine Tabelle, die alle Attribute mit einer kurzen Beschreibung auflistet. Diese Tabelle wird gefolgt von einer Liste, die jedes Attribut ausführlicher beschreibt und mit welchen Eingabetypen sie verbunden sind. Attribute, die für die meisten oder alle Eingabetypen üblich sind, werden ausführlicher unten definiert. Attribute, die einzigartig für bestimmte Eingabetypen sind — oder Attribute, die für alle Eingabetypen allgemein sind, aber besonderes Verhalten auf bestimmten Eingabetypen haben — sind stattdessen auf den Seiten dieser Typen dokumentiert.

Attribute für das <input>-Element umfassen die globalen HTML-Attribute und zusätzlich:

Einige zusätzliche nicht standardisierte Attribute sind nach den Beschreibungen der standardisierten Attribute aufgeführt.

Einzelne Attribute

accept

Nur gültig für den file-Eingabetyp. Das accept-Attribut definiert, welche Dateitypen in einer file-Upload-Steuerung auswählbar sind. Siehe den file-Eingabetyp.

alpha Experimentell

Nur gültig für den color-Eingabetyp. Das alpha-Attribut ermöglicht es dem Endbenutzer, die Deckkraft der ausgewählten Farbe festzulegen.

alt

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

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und falls ja, in welcher Weise. Siehe die autocapitalize-Seite zum globalen Attribut für weitere Informationen.

autocomplete

(Kein Boolean-Attribut!) Das autocomplete-Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenkette an, die beschreibt, welche Art von Autovervollständigungsfunktion die Eingabe bereitstellen soll, wenn überhaupt. Eine typische Implementierung von Autovervollständigung ruft vorherige Werte ab, die im gleichen Eingabefeld eingegeben wurden, aber es können auch komplexere Formen der Autovervollständigung existieren. Beispielsweise könnte ein Browser mit einer Geräteliste von Kontakten integriert werden, um automatisch E-Mail-Adressen in einem E-Mail-Eingabefeld zu vervollständigen. Siehe autocomplete für erlaubte Werte.

Das autocomplete-Attribut ist gültig für hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color und password. Dieses Attribut hat keine Auswirkungen auf Eingabetypen, die keine numerischen oder Textdaten zurückgeben, und ist gültig für alle Eingabetypen außer checkbox, radio, file oder eine der Schaltflächenarten.

Siehe das Attribut autocomplete für zusätzliche Informationen, einschließlich Informationen über Passwortsicherheit und wie autocomplete für hidden etwas anders ist als für andere Eingabetypen.

autofocus

Ein Boolean-Attribut, das, wenn es vorhanden ist, angibt, dass das Eingabefeld automatisch den Fokus haben soll, wenn die Seite geladen ist (oder wenn das <dialog>-Element, das das Eingabefeld enthält, angezeigt wurde).

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

Nicht mehr als ein Element im Dokument darf das autofocus-Attribut haben. Wenn auf mehr als einem Element vorhanden, erhält das erste mit dem Attribut den Fokus.

Das autofocus-Attribut kann nicht auf Eingaben des Typs hidden verwendet werden, da versteckte Eingaben keinen Fokus erhalten können.

Warnung: Das automatische Fokussieren einer Formularsteuerung kann sehbehinderte Personen, die Bildschirmlesetechnologien verwenden, sowie Menschen mit kognitiven Beeinträchtigungen verwirren. Wenn autofocus zugewiesen wird, "teleportieren" Bildschirmlesegeräte den Benutzer ohne vorherige Warnung zur Formularsteuerung.

Verwenden Sie sorgfältige Überlegungen zur Barrierefreiheit, wenn Sie das autofocus-Attribut anwenden. Das automatische Fokussieren auf eine Steuerung kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann auch dazu führen, dass auf einigen Touch-Geräten dynamische Tastaturen angezeigt werden. Während ein Bildschirmlesegerät das Etikett der Formularsteuerung, die den Fokus erhält, ankündigen wird, wird es nichts vor dem Etikett ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird ebenso den Kontext der vorhergehenden Inhalte verpassen.

capture

Eingeführt in der HTML-Medienerfassungsspezifikation und nur gültig für den file Eingabetyp, definiert das capture-Attribut, welches Medium (Mikrofon, Video oder Kamera) verwendet werden sollte, um eine neue Datei für den Upload mit file-Upload-Steuerung in unterstützenden Szenarien zu erfassen. Siehe den file-Eingabetyp.

checked

Gültig für Radio- und Kontrollkästchentypen. checked ist ein Boolean-Attribut. Wenn es auf einem radio-Typ vorhanden ist, gibt es an, dass die Optionsschaltfläche die derzeit ausgewählte innerhalb der Gruppe von gleichnamigen Optionsschaltflächen ist. Wenn es auf einem checkbox-Typ vorhanden ist, zeigt es an, dass das Kontrollkästchen standardmäßig (beim Laden der Seite) aktiviert ist. Es gibt nicht an, ob dieses Kontrollkästchen derzeit aktiviert ist: Wenn sich der Zustand des Kontrollkästchens ändert, spiegelt sich dies nicht in diesem Inhaltsattribut wider. (Nur das HTMLInputElement's checked IDL-Attribut wird aktualisiert.)

Hinweis: Anders als andere Eingabesteuerungen wird der Wert eines Kontrollkästchens und von Optionsschaltflächen nur dann in die übermittelten Daten aufgenommen, wenn sie derzeit checked sind. Wenn das der Fall ist, werden der Name und die Wert(e) der aktivierten Steuerungen übermittelt.

Beispielsweise, wenn ein Kontrollkästchen dessen name fruit ist, einen value von cherry hat und das Kontrollkästchen angekreuzt ist, werden die übermittelten Formulardaten fruit=cherry enthalten. Wenn das Kontrollkästchen nicht aktiv ist, wird es überhaupt nicht in den Formulardaten aufgelistet. Der Standardwert für Kontrollkästchen und Optionsschaltflächen ist on.

colorspace Experimentell

Nur gültig für den color-Eingabetyp. Das colorspace-Attribut gibt den Farbraum an, der vom Eingabetyp type="color" verwendet wird. Mögliche aufgezählte Werte sind:

• "limited-srgb": Die Farbe befindet sich im sRGB-Farbraum. Dazu gehören rgb(), hsl(), hwb() und <hex-color> Werte. Der Farbwert ist auf 8-Bit pro r, g und b-Komponente beschränkt. Dies ist der Standard.
• "display-p3": Der Display P3 Farbraum, z.B. color(display-p3 1.84 -0.19 0.72 / 0.6)

dirname

Nur gültig für hidden, text, search, url, tel und email Eingabetypen. Das dirname-Attribut ermöglicht die Übermittlung der Richtung des Elements. Wenn es enthalten ist, wird die Formularsteuerung mit zwei Name/Wert-Paaren übermittelt: zuerst das name/value-Paar und dann der Wert des dirname-Attributs als Name, mit einem Wert von ltr oder rtl, wie vom Browser festgelegt.

html

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

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

disabled

Ein Boolean-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 von Indikation dargestellt, dass das Feld nicht verfügbar ist.

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

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

form

Eine Zeichenfolge, die das <form>-Element angibt, mit dem die Eingabe verknüpft ist (d.h. sein Formulareigentümer). Der Wert dieser Zeichenfolge, wenn vorhanden, muss mit der id eines <form>-Elements im gleichen Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, ist das <input>-Element mit dem nächstgelegenen enthaltenden Formular verknüpft, falls vorhanden.

Das form-Attribut ermöglicht es, ein Eingabefeld irgendwo im Dokument zu platzieren, aber es in einem Formular anderswo im Dokument einzuschließen.

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

formaction

Nur gültig für die image- und submit-Eingabetypen. Weitere Informationen siehe submit Eingabetyp.

formenctype

Nur gültig für die image- und submit-Eingabetypen. Weitere Informationen siehe submit Eingabetyp.

formmethod

Nur gültig für die image- und submit-Eingabetypen. Weitere Informationen siehe submit Eingabetyp.

formnovalidate

Nur gültig für die image- und submit-Eingabetypen. Weitere Informationen siehe submit Eingabetyp.

formtarget

Nur gültig für die image- und submit-Eingabetypen. Weitere Informationen siehe submit Eingabetyp.

height

Nur gültig für den image-Eingabeknopf. Die height ist die Höhe der Bilddatei, die angezeigt werden soll, um den grafischen Senden-Button darzustellen. Siehe den image Eingabetyp.

id

Globales Attribut, das für alle Elemente, einschließlich aller Eingabetypen, gültig ist. Es definiert eine eindeutige Kennung (ID), die im gesamten Dokument eindeutig sein muss. Sein Zweck ist es, das Element beim Verlinken zu identifizieren. Der Wert wird als Wert des for-Attributs des <label> verwendet, um das Etikett mit der Formularsteuerung zu verknüpfen. Siehe <label>.

inputmode

Globaler Wert, der für alle Elemente gültig ist. Es bietet einen Hinweis an Browser, welche Art von virtueller Tastaturkonfiguration zu verwenden ist, wenn dieses Element oder sein Inhalt bearbeitet wird. Werte umfassen none, text, tel, url, email, numeric, decimal und search.

list

Der dem list-Attribut gegebene Wert sollte die id eines <datalist>-Elements sein, das sich im gleichen Dokument befindet. Der <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer zur Vorschläge für dieses Eingabefeld gemacht werden. Alle Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

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

Laut den Spezifikationen wird das list-Attribut von hidden, password, checkbox, radio, file oder einer der Schaltflächenarten nicht unterstützt.

Abhängig vom Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen bekommen, Markierungen entlang eines Bereichs oder sogar ein Eingabefeld, das sich wie ein <select> öffnet, aber auch nicht gelistete Werte zulässt. Schauen Sie sich die Browser-Kompatibilitätstabelle für die anderen Eingabetypen an.

Siehe das <datalist>-Element.

max

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

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max niedriger sein als der Wert von min, was darauf hinweist, dass der Bereich übergreifend ist; zum Beispiel können Sie so einen Zeitbereich von 22:00 bis 4:00 Uhr angeben.

maxlength

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

Der Eingabewert wird bei der Beschränkungsvalidierung fehlschlagen, wenn die Länge des in das Feld eingegebenen Textes größer ist als maxlength UTF-16 Codeeinheiten. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als durch das maxlength-Attribut erlaubt sind. Die Beschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Validierung auf der Clientseite für weitere Informationen.

min

Gültig für date, month, week, time, datetime-local, number und range. Es definiert den kleinsten Wert im Bereich der zulässigen Werte. Wenn der eingegebene value in das Element kleiner als dieser ist, schlägt das Element bei der Beschränkungsvalidierung 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 ist, aber nicht angegeben oder ungültig ist, wird kein min-Wert angewendet. Wenn das min-Attribut gültig ist und ein nicht leerer Wert kleiner ist als der durch das min-Attribut erlaubte Mindestwert, wird die Beschränkungsvalidierung die Formularübermittlung verhindern. Siehe Validierung auf der Clientseite für weitere Informationen.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie Daten oder Zeiten), kann der Wert des max niedriger sein als der Wert des min, was darauf hinweist, dass der Bereich übergreifend ist; zum Beispiel können Sie eine Zeitspanne von 22:00 bis 4:00 Uhr angeben.

minlength

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

Der Eingabewert wird bei der Beschränkungsvalidierung fehlschlagen, wenn die Länge des in das Feld eingegebenen Textes kleiner ist als minlength UTF-16 Codeeinheiten, was die Formularübermittlung verhindert. Die Beschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Validierung auf der Clientseite für weitere Informationen.

multiple

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

name

Eine Zeichenfolge, die einen Namen für die Eingabesteuerung angibt. Dieser Name wird zusammen mit dem Wert der Steuerung gesendet, wenn die Formulardaten übermittelt werden.

Betrachten Sie name als obligatorisches Attribut (auch wenn es das nicht ist). Wenn eine Eingabe keinen angegebenen Name hat oder der Name leer ist, wird der Wert der Eingabe nicht mit dem Formular gesendet! (Deaktivierte Steuerungen, nicht markierte Optionsschaltflächen, nicht markierte Kontrollkästchen und Zurücksetzen-Schaltflächen werden ebenfalls nicht gesendet.)

Es gibt zwei Sonderfälle:

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

Das name-Attribut erstellt ein einzigartiges Verhalten für Optionsschaltflächen.

Nur eine Optionsschaltfläche innerhalb einer Gruppe von gleichnamigen Optionsschaltflächen kann gleichzeitig aktiviert sein. Das Auswählen einer Optionsschaltfläche innerhalb dieser Gruppe hebt automatisch die Auswahl der derzeit ausgewählten Optionsschaltfläche in der gleichen Gruppe auf. Der Wert dieser einen aktivierten Optionsschaltfläche wird zusammen mit dem Namen gesendet, wenn das Formular übermittelt wird.

Beim Tabben in eine Serie von gleichnamigen Optionsschaltflächen, wenn eine aktiviert ist, wird diese den Fokus erhalten. Wenn sie nicht in der Quellreihenfolge gruppiert sind, und eine der Gruppe aktiviert ist, beginnt das Tabben in die Gruppe, wenn die erste der Gruppe erreicht wird, überspringt alle, die nicht aktiviert sind. Mit anderen Worten, wenn eine aktiviert ist, überspringt das Tabben die nicht markierten Optionsschaltflächen in der Gruppe. Wenn keine aktiviert ist, erhält die Gruppe von Optionsschaltflächen den Fokus, wenn die erste Schaltfläche in der gleichnamigen Gruppe erreicht wird.

Sobald eine der Optionsschaltflächen innerhalb einer Gruppe den Fokus hat, navigieren die Pfeiltasten zwischen allen Optionsschaltflächen mit dem gleichen Namen, auch wenn die Optionsschaltflächen nicht in der Quellreihenfolge gruppiert sind.

Wenn ein Eingabeelement einen name erhält, wird dieser Name Eigentum der HTMLFormElement.elements Eigenschaft des zugehörigen Formularelements. Wenn Sie ein Eingabefeld namens guest und ein weiteres namens hat-size haben, können Sie den folgenden Code verwenden:

js

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

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

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

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

pattern

Gültig für text, search, url, tel, email und password. Das pattern-Attribut wird verwendet, um einen regulären Ausdruck zu kompilieren, den der value der Eingabe erfüllen muss, damit der Wert die Beschränkungsvalidierung besteht. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er von der RegExp-Type verwendet wird, und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert. Es sollten keine Schrägstriche um den Text des Musters angegeben werden. Bei der Kompilierung des regulären Ausdrucks:

1. wird das Muster implizit mit ^(?: und )$ eingeschlossen, sodass die Übereinstimmung gegen den gesamten Eingabewert erforderlich ist, d.h. ^(?:<pattern>)$.
2. wird das 'v'-Flag angegeben, sodass das Muster als Sequenz von Unicode-Zeichen interpretiert wird, anstelle von ASCII.

Wenn das pattern-Attribut vorhanden ist, aber nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut vollständig ignoriert. Wenn das pattern-Attribut gültig ist und ein nicht leerer Wert nicht dem Muster entspricht, verhindert die Beschränkungsvalidierung die Formularübermittlung. Wenn das multiple vorhanden ist, wird der kompilierte reguläre Ausdruck gegen jeden kommagetrennten Wert getestet.

Hinweis: Wenn Sie das pattern-Attribut verwenden, informieren Sie den Benutzer über das erwartete Format, indem Sie erläuternden Text in der Nähe bereitstellen. Sie können auch ein title-Attribut hinzufügen, um zu erklären, welche Anforderungen an das Muster bestehen; 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 Validierung auf der Clientseite für weitere Informationen.

placeholder

Gültig für text, search, url, tel, email, password und number. Das placeholder-Attribut bietet dem Benutzer einen kurzen Hinweis darauf, welche Art von Information im Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf die erwartete Art von Daten gibt, anstelle einer Erklärung oder Aufforderung. Der Text darf nicht Wagenrückläufe oder Zeilenvorschübe enthalten. Beispielsweise könnte ein geeignetes Platzhalter sein "z.B. Mustafa" für ein Feld, das den Vornamen eines Benutzers erfassen soll und dessen Etikett "Vorname" ist.

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. Weitere Informationen finden Sie unter Labels.

popovertarget

Wandelt ein <input type="button">-Element in eine Popover-Steuerungsschaltfläche um; nimmt die ID des zu steuernden Popover-Elements als Wert. Weitere Details finden Sie auf der Popover API-Seite. Die Erstellung einer Beziehung zwischen einem Popover und seinem auslösenden Knopf mit dem popovertarget-Attribut hat zwei weitere nützliche Effekte:

• Der Browser erstellt eine implizite aria-details und eine aria-expanded-Beziehung zwischen Popover und Auslöser und platziert das Popover in einer logischen Position in der Tastaturnavigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover zugänglicher für Benutzer der Tastatur und unterstützender Technologien (AT) (siehe auch Popover-Zugänglichkeitseigenschaften).
• Der Browser erstellt eine implizite Ankerreferenz zwischen beiden, was es sehr praktisch macht, Popover mit CSS-Ankerpositionierung relativ zu ihren Steuerungen zu positionieren. Weitere Details finden Sie unter Popover-Ankerpositionierung.

popovertargetaction

Gibt die Aktion an, die auf einem mittels einer Steuerung <input type="button"> gesteuerten Popover-Element ausgeführt werden soll. Mögliche Werte sind:

"hide"

Die Schaltfläche wird ein angezeigtes Popover ausblenden. Wenn Sie versuchen, ein bereits verstecktes Popover auszublenden, wird keine Aktion ausgeführt.

"show"

Die Schaltfläche wird ein verstecktes Popover anzeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion ausgeführt.

"toggle"

Die Schaltfläche wird ein Popover zwischen sichtbar und versteckt umschalten. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover bereits angezeigt wird, wird es ausgeblendet. Wenn popovertargetaction ausgelassen wird, wird "toggle" als Standardaktion ausgeführt, die von der Steuerungsschaltfläche ausgeführt wird.

readonly

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

Weitere Informationen finden Sie im HTML-Attribut: readonly.

required

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

Siehe Validierung auf der Clientseite und das HTML-Attribut: required für weitere Informationen.

size

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

src

Nur gültig für den image-Eingabeknopf. Die src ist eine Zeichenfolge, die die URL der Bilddatei angibt, die angezeigt werden soll, um den grafischen Senden-Button darzustellen. Siehe den image Eingabetyp.

step

Gültig für date, month, week, time, datetime-local, number und range. Das step-Attribut ist eine Zahl, die die Granularität angibt, die der Wert einhalten muss. Nur Werte, die eine ganze Anzahl von Schritten vom Schrittbasiswert entfernt sind, sind gültig. Der Schrittbasiswert ist min, falls angegeben, ansonsten value oder 0, wenn keiner angegeben ist (außer week, das einen Schrittbasiswert von −259,200,000 hat, der den Start der Woche 1970-W01 darstellt).

Wenn nicht explizit eingeschlossen:

• step standardmäßig auf 1 für number und range.
• Jeder Date-/Zeit-Eingabetyp hat einen Standard-step-Wert, der für den Typ geeignet ist; siehe die einzelnen Eingabeseiten: date, datetime-local, month, time, und week.

Der Wert muss eine positive Zahl sein — Ganzzahl oder Fließkommazahl — oder der spezielle Wert any, was bedeutet, dass keine stufenweise Erweiterung impliziert wird und jeder Wert erlaubt ist (barring other constraints, like min and max).

Wenn Sie beispielsweise <input type="number" min="10" step="2"> haben, dann ist jede gerade Ganzzahl, 10 oder größer, gültig. Wenn weggelassen, <input type="number">, ist jede Ganzzahl gültig, aber Fließkommazahlen (wie 4.2) sind nicht gültig, da step standardmäßig 1 ist. Für 4.2, um gültig zu sein, müsste step auf any, 0.1, 0.2 gesetzt sein oder der min-Wert müsste eine Zahl sein, die auf .2 endet, wie <input type="number" min="-5.2">.

Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht der Schrittkonfiguration entsprechen, wird der Wert in der Beschränkungsvalidierung als ungültig angesehen und entspricht der :invalid-Pseudoklasse.

Siehe Validierung auf der Clientseite für weitere Informationen.

tabindex

Globales Attribut, das für alle Elemente, einschließlich aller Eingabetypen, gültig ist. Ein ganzzahliges Attribut, das angibt, ob das Element Eingabefokus nehmen kann (fokusbar ist), ob es an der sequentiellen Tastaturnavigation teilnehmen soll. Da alle Eingabetypen außer dem Eingabetyp hidden fokussierbar sind, sollte dieses Attribut nicht für Formularsteuerungen verwendet werden, da dies die Verwaltung der Fokusreihenfolge für alle Elemente innerhalb des Dokuments erfordern würde, wodurch die Gefahr besteht, die Benutzerfreundlichkeit und Zugänglichkeit zu schädigen, wenn es falsch gemacht wird.

title

Globales Attribut, das für alle Elemente, einschließlich alle Eingabetypen, gültig ist. Es enthält einen Text, der Beratungsinformationen zu dem Element darstellt, zu dem es gehört. Solche Informationen können normalerweise, aber nicht unbedingt, dem Benutzer als Tooltip präsentiert werden. Der Titel sollte NICHT als primäre Erklärung des Zwecks der Formularsteuerung verwendet werden. Verwenden Sie stattdessen das <label>-Element mit einem for-Attribut, das auf das id-Attribut der Formularsteuerung gesetzt ist. Siehe Etiketten unten.

type

Eine Zeichenkette, die den Typ der zu rendernden Steuerung angibt. Beispielsweise wird zur Erstellung eines Kontrollkästchens ein Wert von checkbox verwendet. Wenn dieses Attribut weggelassen wird (oder ein unbekannter Wert angegeben wird), wird der Eingabetyp text verwendet, d.h. es wird ein schlichtes Texteingabefeld erstellt.

Zugelassene Werte sind in den Eingabetypen oben aufgeführt.

value

Der Wert der Eingabesteuerung. Wenn im HTML angegeben, ist dies der Anfangswert und kann von da an jederzeit über JavaScript modifiziert oder abgerufen werden, indem auf die value-Eigenschaft des entsprechenden HTMLInputElement Objekts zugegriffen wird. Das value-Attribut ist immer optional, sollte jedoch als obligatorisch für checkbox, radio und hidden betrachtet werden.

width

Nur gültig für den image-Eingabeknopf. Die width ist die Breite der Bilddatei, die angezeigt werden soll, um den grafischen Senden-Button darzustellen. Siehe den image Eingabetyp.

Nicht-standardisierte Attribute

Die folgenden nicht-standardisierten Attribute sind ebenfalls in einigen Browsern verfügbar. Generell sollten Sie deren Nutzung vermeiden, es sei denn, es gibt keine Alternative.

incremental Nicht standardisiert

Das Boolean-Attribut incremental ist eine WebKit- und Blink-Erweiterung (daher wird es von Safari, Opera, Chrome usw. unterstützt), das, wenn vorhanden, dem User-Agent mitgeteilt wird, die Eingabe als Live-Suche zu verarbeiten. Während der Benutzer den Wert des Feldes bearbeitet, sendet der User-Agent search-Ereignisse an das HTMLInputElement-Objekt, das das Suchfeld repräsentiert. Dadurch kann Ihr Code die Suchergebnisse in Echtzeit aktualisieren, während der Benutzer die Suche bearbeitet.

Wenn incremental nicht angegeben ist, wird das search-Ereignis nur gesendet, wenn der Benutzer eine Suche explizit initiiert (z. B. durch Drücken der Enter- oder Return-Taste während der Bearbeitung des Feldes).

Das search-Ereignis ist so rate-begrenzt, dass es nicht häufiger als in durch die Implementierungs-Definierte Intervall gesendet wird.

orient Nicht standardisiert

Ähnlich wie die -moz-orient nicht-standardisierte CSS-Eigenschaft, die die <progress> und <meter>-Elemente betrifft, definiert das orient-Attribut die Ausrichtung des Bereichsschiebers. Werte beinhalten horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wobei der Bereich vertikal gerendert wird. Siehe Erstellung vertikaler Formularsteuerungen für einen modernen Ansatz zur Erstellung vertikaler Formularsteuerungen.

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 an das <input>-Element im nativen Drop-down-Menü vorheriger Suchanfragen angezeigt wird.

Der Wert muss eine nicht-negative Dezimalzahl sein. Wenn nicht bereitgestellt oder ein ungültiger Wert eingegeben wird, wird die Standard-Maximalanzahl der Einträge des Browsers verwendet.

webkitdirectory Nicht standardisiert

Das Boolean-Attribut webkitdirectory, wenn vorhanden, gibt an, dass nur Verzeichnisse vom Benutzer im Dateiauswahlfenster ausgewählt werden dürfen. Siehe HTMLInputElement.webkitdirectory für zusätzliche Details und Beispiele.

Obwohl ursprünglich nur für WebKit-basierte Browser implementiert, ist webkitdirectory in Microsoft Edge sowie in Firefox 50 und höher nutzbar. Obwohl es also eine relativ breite Unterstützung hat, ist es immer noch nicht standardisiert und sollte nicht verwendet werden, es sei denn, Sie haben keine Alternative.

Methoden

Die folgenden Methoden werden durch das HTMLInputElement-Interface bereitgestellt, welches <input>-Elemente im DOM repräsentiert. Ebenso verfügbar sind die Methoden, die in den übergeordneten Interfaces HTMLElement, Element, Node und EventTarget definiert sind.

checkValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls gibt es false zurück und löst ein invalid-Ereignis am Element aus.

reportValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls gibt es false zurück, löst ein invalid-Ereignis am Element aus und meldet (falls 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 z.B. ein visueller Farbwähler oder Kalendereingabe) tut diese Methode nichts.

setCustomValidity()

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

setRangeText()

Setzt den Inhalt des angegebenen Zeichenbereichs im Eingabeelement auf eine bestimmte Zeichenkette. Ein selectMode-Parameter steht zur Verfügung, um zu steuern, wie der vorhandene Inhalt betroffen ist.

setSelectionRange()

Wählt den angegebenen Zeichenbereich innerhalb eines textuellen Eingabeelements aus. Macht für Eingaben, die nicht als Texteingabefelder präsentiert werden, nichts.

showPicker()

Zeigt den Browserauswahldialog für das Eingabeelement an, der normalerweise angezeigt wird, wenn das Element ausgewählt wird, aber durch einen Tastendruck oder andere Benutzerinteraktion ausgelöst wird.

stepDown()

Verringert standardmäßig den Wert einer numerischen Eingabe um eins oder um die angegebene Anzahl von Einheiten.

stepUp()

Erhöht den Wert einer numerischen Eingabe um eins oder um die angegebene Anzahl von Einheiten.

CSS

Inputs, als ersetzte Elemente, haben einige Merkmale, die bei nicht-formularbasierten Elementen nicht anwendbar sind. Es gibt CSS-Selektoren, die speziell auf Formularelemente basierend auf ihren UI-Eigenschaften abzielen können, auch bekannt als UI-Pseudoklassen. Das Eingabeelement kann auch nach Typ mit Attributselektoren adressiert werden. Es gibt einige Eigenschaften, die besonders nützlich sind.

UI-Pseudoklassen

Pseudoklassen-Beispiel

Wir können das Label einer Checkbox basierend darauf stylen, ob die Checkbox ausgewählt ist oder nicht. In diesem Beispiel stylen wir die color und font-weight des <label>-Elements, das direkt nach einer ausgewählten Eingabe kommt. Wir haben keine Stile angewendet, wenn das input nicht ausgewählt 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 möglich, verschiedene Arten von Formularelementen basierend auf ihrem type mit Attributselektoren anzusprechen. CSS-Attributselektoren passen Elemente basierend entweder nur auf das Vorhandensein eines Attributs oder den Wert eines bestimmten Attributs an.

/* 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 ist das Aussehen von Placeholder-Text transluzent oder hellgrau. Der ::placeholder Pseudo-Element ist der placeholder Text der Eingabe. Es kann mit einem begrenzten Satz von CSS-Eigenschaften gestyled werden.

::placeholder {
  color: blue;
}

Nur der Unterbereich von CSS-Eigenschaften, die auf das ::first-line Pseudo-Element angewendet werden können, kann in einer Regel verwendet werden, die ::placeholder in ihrem Selektor verwendet.

caret-color

Eine spezifische Eigenschaft für textbezogene Eingabeelemente ist die CSS-Eigenschaft caret-color, die es Ihnen ermöglicht, die Farbe festzulegen, die zum Zeichnen des Text Eingabecursors 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 Eigenschaft field-sizing 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, sodass Formularelemente sich in der Größe an ihren Inhalt anpassen können.

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

object-position und object-fit

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

Styling

Weitere Informationen zum Hinzufügen von Farben zu Elementen in HTML finden Sie unter:

• Applying color to HTML elements using CSS.

Siehe auch:

• Styling HTML forms
• Advanced styling for HTML forms und

Zusätzliche Eigenschaften

Labels

Labels sind notwendig, um unterstützenden Text mit einem <input> zu verknüpfen. Das <label>-Element bietet erklärende Informationen über ein Formularfeld, das immer angemessen ist (abgesehen von Layout-Angelegenheiten, die Sie haben mögen). Es ist nie eine schlechte Idee, ein <label> zu verwenden, um zu erklären, was in ein <input> oder ein <textarea> eingegeben werden soll.

Zugehörige Labels

Die semantische Zuordnung von <input>- und <label>-Elementen ist nützlich für unterstützende Technologien wie Bildschirmlesegeräte. Indem sie mit dem for-Attribut von <label> gepaart werden, verbinden sie das Label mit der Eingabe, was Bildschirmlesegeräten hilft, Eingabefelder den Benutzern präziser zu erläutern.

Es reicht nicht aus, einfachen Text neben das <input>-Element zu setzen. Vielmehr erfordert die Benutzerfreundlichkeit und Zugänglichkeit die Einbindung eines impliziten oder expliziten <label>:

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

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

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

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

Zusätzlich zu einem zugänglichen Namen bietet das Label eine größere 'Trefferfläche' für Maus- und Touchscreen-Nutzer zum Klicken oder Berühren. Durch die Kopplung eines <label> mit einem <input> wird das <input> sowohl durch Klicken auf das <label> als auch auf das <input> fokussiert. Wenn Sie normalen Text verwenden, um Ihr Eingabefeld zu beschriften, geschieht dies nicht. Es ist hilfreich für Menschen mit motorischen Funktionseinschränkungen, wenn der Hinweistext Teil des Aktivierungsbereichs der Eingabe ist.

Als Webentwickler ist es wichtig, dass wir niemals davon ausgehen, dass Menschen all das wissen werden, was wir wissen. Die Vielfalt der Menschen, die das Web nutzen – und damit auch Ihre Website – garantiert praktisch, dass einige Besucher Ihrer Website einige Unterschiede in den Denkprozessen und/oder Umständen haben, die sie dazu führen, Ihre Formulare sehr unterschiedlich von Ihnen zu interpretieren, ohne klare und korrekt präsentierte Labels.

Platzhalter sind nicht zugänglich

Das placeholder-Attribut ermöglicht es Ihnen, Text zu spezifizieren, der innerhalb des Inhaltsbereichs des <input>-Elements selbst erscheint, wenn er leer ist. Der Platzhalter sollte niemals benötigt werden, um Ihre Formulare zu verstehen. Er ist kein Label und sollte nicht als Ersatz verwendet werden, weil er das nicht ist. Der Platzhalter wird verwendet, um einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht als Erklärung oder Hinweis.

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

Client-seitige Validierung

Zusätzlich zur Verwendung von CSS, um Eingaben basierend auf den :valid oder :invalid UI-Zuständen basierend auf dem aktuellen Zustand jeder Eingabe zu stylen, wie oben im Abschnitt UI-Pseudoklassen erwähnt, bietet der Browser clientseitige Validierung beim (versuchten) Absenden des Formulars. Beim Absenden des Formulars wird, wenn ein Formularelement die Beschränkungsvalidierung nicht besteht, von unterstützenden Browsern eine Fehlermeldung zu dem ersten ungültigen Formularelement angezeigt; entweder eine Standardnachricht basierend auf dem Fehlertyp oder eine von Ihnen festgelegte Nachricht.

Einige Eingabetypen und andere Attribute begrenzen, welche Werte für eine bestimmte Eingabe gültig sind. Zum Beispiel bedeutet <input type="number" min="2" max="10" step="2"> dass nur die Zahlen 2, 4, 6, 8 oder 10 gültig sind. Mehrere Fehler können 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 Zahl (also nicht den Anforderungen des step-Attributs entspricht), oder typeMismatch, wenn der Wert keine Zahl ist.

Für die Eingabetypen, deren Bereich periodischer Werte ist (d.h. die Werte kehren nach Erreichen des höchsten möglichen Wertes zum Anfang zurück, anstatt zu enden), ist es möglich, dass die Werte der max- und min-Eigenschaften vertauscht werden, was anzeigt, dass der Bereich der erlaubten Werte bei min beginnt, sich um den niedrigsten möglichen Wert wickelt und dann fortfährt, bis max erreicht ist. Das ist besonders nützlich für Daten und Zeiten, beispielsweise wenn Sie den Bereich von 20:00 Uhr bis 8:00 Uhr erlauben möchten:

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

Bestimmte Attribute und deren Werte können zu einem spezifischen Fehler ValidityState führen:

Wenn ein Formularelement nicht das required-Attribut hat, ist kein Wert oder eine leere Zeichenkette nicht ungültig. Auch wenn die oben genannten Attribute vorhanden sind, wird eine leere Zeichenkette nicht zu einem Fehler führen, mit Ausnahme von required.

Wir können Einschränkungen festlegen, welche Werte wir akzeptieren, und unterstützende Browser werden diese Formularwerte nativ validieren und den Benutzer auf einen Fehler hinweisen, wenn das Formular abgesendet wird.

Zusätzlich zu den in der Tabelle oben beschriebenen Fehlern enthält das validityState-Interface die Booleschen readonly-Eigenschaften badInput, valid und customError. Das Gültigkeitsobjekt beinhaltet:

• 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 bedeutet ein Wert von true, dass der angegebene Grund der Validierungsfehler zutreffen kann, mit Ausnahme der valid-Eigenschaft, die true ist, wenn der Wert des Elements allen Einschränkungen entspricht.

Wenn es einen Fehler gibt, werden unterstützende Browser sowohl den Benutzer warnen als auch verhindern, dass das Formular abgesendet wird. Ein Wort der Vorsicht: Wenn ein benutzerdefinierter Fehler auf einen wahrheitswertigen Wert gesetzt ist (alles außer der leeren Zeichenkette oder null), wird verhindert, dass das Formular abgesendet wird. Wenn es keine benutzerdefinierte Fehlermeldung gibt und keine der anderen Eigenschaften wahr ist, wird valid wahr sein, und das Formular kann abgesendet werden.

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

Die letzte Zeile, die die benutzerdefinierte Fehlermeldung auf die leere Zeichenkette setzt, ist entscheidend. Wenn der Benutzer einen Fehler macht und die Gültigkeit gesetzt ist, wird es nicht nach einen neue Gültigkeitsschätzung gesendet, selbst wenn alle Werte gültig sind, bis die Botschaft 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-Formularvalidierungsfunktionen führen dazu, dass dies eine Standardfehlermeldung produziert, wenn Sie versuchen, das Formular mit entweder keinem gültigen Wert oder einem Wert einzureichen, der nicht mit dem pattern übereinstimmt.

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

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

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

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

Das Beispiel rendert folgendermaßen:

Kurz gesagt:

• Wir überprüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sich sein Wert ändert, indem wir die checkValidity()-Methode über den input-Ereignishandler ausführen.
• Wenn der Wert ungültig ist, wird ein invalid-Ereignis ausgelöst, und die invalid-Ereignishandlerfunktion wird ausgeführt. Innerhalb dieser Funktion ermitteln wir, ob der Wert ungültig ist, weil er leer ist, oder weil er nicht dem Muster entspricht, indem wir einen if ()-Block verwenden und eine benutzerdefinierte Validitätsfehlermeldung festlegen.
• Wenn der Eingabewert ungültig ist, wenn die Schaltfläche zum Absenden gedrückt wird, wird eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Wenn sie gültig ist, wird sie, wie erwartet, übermittelt. Dafür muss die benutzerdefinierte Validität storniert werden, indem setCustomValidity() mit einem leeren Zeichenkettenwert aufgerufen wird. Wir tun dies daher jedes Mal, wenn das input-Ereignis ausgelöst wird. Wenn Sie dies nicht tun, und eine benutzerdefinierte Validität zuvor festgelegt wurde, wird die Eingabe als ungültig registriert, selbst wenn sie zum Zeitpunkt der Übermittlung einen gültigen Wert enthält.

Lokalisierung

Die erlaubten Eingaben für bestimmte <input>-Typen hängen von der Spracheinstellung ab. In einigen Sprachregionen ist 1.000,00 eine gültige Zahl, während in anderen Sprachregionen 1.000,00 die gültige Eingabe ist.

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

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

Barrierefreiheit

Labels

Wenn Eingaben inkludiert werden, ist es eine Barrierefreiheitsanforderung, Labels hinzuzufügen. Dies ist notwendig, damit diejenigen, die unterstützende Technologien verwenden, wissen, wofür die Eingabe gedacht ist. Außerdem erhält das Klicken oder Berühren eines Labels den Fokus auf das zugehörige Formelement. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für sehende Benutzer, erhöht die Fläche, auf die ein Benutzer klicken oder berühren kann, um das Formelement zu aktivieren. Dies ist besonders nützlich (und sogar notwendig) für Radiobuttons und Checkboxen, die sehr klein sind. Mehr Informationen über Labels im Allgemeinen finden Sie unter Labels.

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

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

Größe

Interaktive Elemente wie Formulareingaben sollten einen ausreichend großen Bereich bieten, um leicht aktiviert zu werden. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Kontrolleinschränkungen und Menschen, die unpräzise Eingabemethoden wie einen Stift oder Finger verwenden. Eine minimale interaktive Größe von 44×44 CSS-Pixel wird empfohlen.

• Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
• Target Size and 2.5.5 | Adrian Roselli
• Quick test: Large touch targets - The A11Y Project

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-appearance-Eigenschaft
• Ihr erstes HTML-Formular
• Anleitung: Wie man ein HTML-Formular strukturiert
• Die nativen Formularelemente
• Senden von Formulardaten
• Formulareinschränkungsvalidierung
• Styling von HTML-Formularen