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

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

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 leistungsfähig 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 dasselbe Set von Attributen. In der Realität haben jedoch die meisten Attribute nur Auswirkungen auf einen spezifischen Teil von Eingabetypen. Zusätzlich hängt die Art und Weise, wie einige Attribute ein Eingabefeld beeinflussen, vom Eingabetyp ab und wirkt sich auf unterschiedliche Eingabetypen unterschiedlich aus.

Dieser Abschnitt bietet eine Tabelle, die alle Attribute mit einer kurzen Beschreibung auflistet. Anschließend folgt eine Liste, die jedes Attribut ausführlicher beschreibt und die Eingabetypen, mit denen sie verbunden sind. Attribute, die bei den meisten oder allen Eingabetypen üblich sind, werden weiter unten ausführlicher beschrieben. Attribute, die einzigartig für bestimmte Eingabetypen sind – oder Attribute, die bei allen Eingabetypen üblich sind, aber spezielle Verhaltensweisen aufweisen, wenn sie bei einem bestimmten Eingabetyp verwendet werden – sind stattdessen auf den Seiten dieser Typen dokumentiert.

Attribute für das <input>-Element schließen die globalen HTML-Attribute mit ein und zusätzlich:

Einige zusätzliche nicht standardisierte Attribute werden nach den Beschreibungen der Standardattribute aufgelistet.

Einzelne Attribute

• accept

  • : Nur gültig für den file-Eingabetyp, definiert das accept-Attribut, welche Dateitypen in einem file-Upload-Steuerelement auswählbar sind. Siehe den file-Eingabetyp.

• alpha Experimentell

  • : Nur gültig für den color-Eingabetyp, das alpha-Attribut gibt dem Endbenutzer die Möglichkeit, 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 anderweitig nicht geladen wird. Siehe den image-Eingabetyp.

• autocapitalize

  • : Steuert, ob eingegebener Text automatisch großgeschrieben wird und, falls ja, in welcher Weise. Weitere Informationen finden Sie auf der Seite des autocapitalize-globalen Attributs.

• autocomplete

  • : (Kein Boolesches Attribut!) Das autocomplete-Attribut nimmt als seinen Wert eine durch Leerzeichen getrennte Zeichenfolge an, die beschreibt, welche, wenn überhaupt, Art der Autovervollständigungsfunktionalität das Eingabefeld bereitstellen soll. Eine typische Implementierung von Autovervollständigung ruft vorherige in dasselbe Eingabefeld eingegebene Werte ab, aber komplexere Formen der Autovervollständigung können existieren. Zum Beispiel könnte ein Browser in die Kontaktliste eines Geräts integrieren, um email-Adressen in einem E-Mail-Eingabefeld automatisch 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 für alle Eingabetypen außer checkbox, radio, file oder jeglichen der Button-Typen gültig.

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

• autofocus

  • : Ein Boolean-Attribut, das, falls vorhanden, angibt, dass die Eingabe automatisch den Fokus haben sollte, wenn die Seite fertig geladen (oder wenn das <dialog>-Element, das das Element enthält, angezeigt) wurde.

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

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

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

    Warnung: Das automatische Fokussieren eines Formularsteuerelements kann sehbehinderte Personen, die Bildschirmlesetechnologie verwenden, und Menschen mit kognitiven Einschränkungen verwirren. Wenn autofocus zugewiesen ist, "teleportieren" Bildschirmlesegeräte ihren Benutzer ohne Vorwarnung zum Formularsteuerelement.

    Verwenden Sie bei der Anwendung des autofocus-Attributs sorgfältige Überlegungen zur Barrierefreiheit. Das automatische Fokussieren auf ein Steuerelement 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 Label des Formularsteuerelements ankündigt, das den Fokus erhält, wird das Bildschirmlesegerät nichts vor dem Label ankündigen, und der sehende Benutzer auf einem kleinen Gerät wird ebenso den durch den vorherigen Inhalt geschaffenen Kontext verpassen.

• capture

  • : Eingeführt in der HTML Media Capture-Spezifikation und nur gültig für den file-Eingabetyp, bestimmt das capture-Attribut, welches Medium – Mikrofon, Video oder Kamera – zum Erfassen einer neuen Datei zum Hochladen mit file-Upload-Steuerelement in unterstützenden Szenarien verwendet werden soll. Siehe den file-Eingabetyp.

• checked

  • : Gültig für die Typen radio und checkbox, ist checked ein Boolean-Attribut. Wenn es bei einem radio-Typ vorhanden ist, zeigt es an, dass die Optionsschaltfläche die aktuell ausgewählte in der Gruppe von gleichnamigen Optionsschaltflächen ist. Wenn es bei einem checkbox-Typ vorhanden ist, zeigt es an, dass das Kontrollkästchen standardmäßig ausgewählt ist (wenn die Seite geladen wird). Es zeigt nicht an, ob dieses Kontrollkästchen aktuell ausgewählt ist: Wenn der Status des Kontrollkästchens geändert wird, spiegelt dieses Inhaltsattribut die Änderung nicht wider. (Nur das checked-IDL-Attribut des HTMLInputElement wird aktualisiert.)

    Hinweis: Im Gegensatz zu anderen Eingabesteuerelementen werden der Wert eines Kontrollkästchens und anderer Optionsfelder nur in die übermittelten Daten aufgenommen, wenn sie aktuell checked sind. Wenn sie es sind, werden der Name und die Wert(e) der ausgewählten Steuerelemente übermittelt.

    Zum Beispiel, wenn ein Kontrollkästchen, dessen name fruit ist, den value cherry hat und das Kontrollkästchen aktiviert ist, werden die Formulardaten fruit=cherry enthalten. Wenn das Kontrollkästchen nicht aktiv ist, wird es nicht in den Formulardaten aufgeführt. Der Standardwert value für Kontrollkästchen und Optionsfelder ist on.

• colorspace Experimentell

  • : Nur gültig für den color-Eingabetyp, das colorspace-Attribut gibt den Farbraum an, der von der type="color"-Eingabe verwendet wird. Mögliche aufgezählte Werte sind:
    • "limited-srgb": Die Farbe befindet sich im sRGB-Farbraum. Dies schließt rgb(), hsl(), hwb() und <hex-color>-Werte ein. 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

  • : Gültig für hidden, text, search, url, tel und email-Eingabetypen, ermöglicht das dirname-Attribut die Übermittlung der Ausrichtung des Elements. Bei Einbeziehung wird das Formularsteuerelement zwei Name/Wert-Paare übermitteln: 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, wie vom Browser festgelegt.

    html

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

    Wenn das obige Formular übermittelt wird, wird die Eingabe sowohl das name / value-Paar fruit=cherry als auch das dirname / Richtungs-Paar fruit-dir=ltr versenden. Für weitere Informationen siehe das dirname-Attribut.

• disabled

  • : Ein Boolean-Attribut, das, falls vorhanden, angibt, dass der Benutzer nicht mit der Eingabe interagieren sollte. Deaktivierte Eingaben werden typischerweise heller dargestellt oder verwenden eine andere Form von Hinweis darauf, dass das Feld nicht verfügbar ist.

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

    Hinweis: Obwohl nicht durch die Spezifikation vorgeschrieben, behält Firefox standardmäßig den dynamischen deaktivierten Zustand eines <input>-Feldes über Seitenladevorgängen hinweg. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

• form

  • : Ein String, der das <form>-Element angibt, mit dem die Eingabe verbunden ist (d.h. ihr Formularbesitz). Der Wert dieses Strings muss, wenn vorhanden, mit der id eines <form>-Elements im selben Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, wird das <input>-Element mit dem am nächsten gelegenen umschließenden Formular verbunden, falls vorhanden.

    Das form-Attribut erlaubt das Platzieren einer Eingabe irgendwo im Dokument, jedoch das Einbeziehen in ein an anderer Stelle im Dokument befindliches Formular.

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

• formaction

  • : Nur gültig für die image und submit-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp.

• formenctype

  • : Nur gültig für die image und submit-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp.

• formmethod

  • : Nur gültig für die image und submit-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp.

• formnovalidate

  • : Nur gültig für die image und submit-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp.

• formtarget

  • : Nur gültig für die image und submit-Eingabetypen. Weitere Informationen finden Sie im submit-Eingabetyp.

• height

  • : Nur gültig für den image-Eingabeknopf, ist die height die Höhe der anzuzeigenden Bilddatei, um den grafischen Absenden-Button zu repräsentieren. Siehe den image-Eingabetyp.

• id

  • : Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen. Es definiert eine eindeutige Kennung (ID), die im gesamten Dokument eindeutig sein muss. Sein Zweck ist es, das Element bei Verlinkungen zu identifizieren. Der Wert wird als Wert des for-Attributs des <label>-Elements verwendet, um das Label mit dem Formularelement 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 beim Bearbeiten dieses Elements oder seiner Inhalte verwendet werden soll. Werte umfassen none, text, tel, url, email, numeric, decimal, und search.

• list

  • : Der angegebene Wert für das list-Attribut sollte die id eines <datalist>-Elements sein, das sich im selben Dokument befindet. Die <datalist> bietet eine Liste von vordefinierten Werten, um dem Benutzer Vorschläge für diese Eingabe zu machen. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden in den vorgeschlagenen Optionen nicht aufgenommen. Die zur Verfügung gestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste wählen oder einen anderen Wert angeben.

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

    Laut den Spezifikationen wird das list-Attribut nicht von hidden, password, checkbox, radio, file oder einem der Button-Typen unterstützt.

    Abhängig vom Browser kann der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen bekommen, Markierungen über eine Skala sehen oder sogar eine Eingabe, die sich wie ein <select> verhält, aber 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, definiert es den größten Wert im Bereich der zulässigen Werte. Wenn der in das Element eingegebene value diesen überschreitet, schlägt das Element bei der Constraints-Überprüfung fehl. Wenn der Wert des max-Attributs keine Zahl ist, hat das Element keinen Höchstwert.

    Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max kleiner sein als der Wert von min, was darauf hinweist, dass der Bereich möglicherweise umfahren kann; zum Beispiel erlaubt dies, einen Zeitbereich von 22:00 bis 4:00 Uhr anzugeben.

• maxlength

  • : Gültig für text, search, url, tel, email und password, definiert es die maximale Zeichenfolgenlänge (gemessen in UTF-16-Code-Einheiten), die der Benutzer in das Feld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn kein maxlength angegeben ist oder ein ungültiger Wert angegeben wird, hat das Feld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von 'minlength' sein.

    Die Eingabe wird bei der Constraints-Überprüfung fehlschlagen, wenn die Länge des in das Feld eingegebenen Textes länger ist als maxlength UTF-16-Code-Einheiten lang. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen eingeben, als durch das maxlength-Attribut erlaubt ist. Die Constraints-Überprüfung wird nur angewendet, wenn der Wert durch den Benutzer geändert wird. Weitere Informationen finden Sie unter Client-seitige Validierung.

• min

  • : Gültig für date, month, week, time, datetime-local, number und range, definiert es den negativsten Wert im Bereich der zulässigen Werte. Wenn der in das Element eingegebene value weniger als dies ist, schlägt das Element bei der Constraints-Überprüfung fehl. Wenn der Wert des min-Attributs keine Zahl ist, hat das Element keinen Mindestwert.

    Dieser Wert muss weniger als oder gleich dem des max-Attributs sein. Wenn das min-Attribut vorhanden, aber nicht angegeben oder ungültig ist, wird kein min-Wert angewendet. Wenn das min-Attribut gültig ist und ein nicht leerer Wert weniger ist als das Minimum, das durch das min-Attribut erlaubt ist, wird die Constraints-Überprüfung das Absenden des Formulars verhindern. Weitere Informationen finden Sie unter Client-seitige Validierung.

    Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Daten oder Zeiten), kann der Wert von max kleiner sein als der Wert von min, was darauf hinweist, dass der Bereich möglicherweise umfahren kann; zum Beispiel erlaubt dies, einen Zeitbereich von 22:00 bis 4:00 Uhr anzugeben.

• minlength

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

  Die Eingabe wird bei der Constraints-Überprüfung fehlschlagen, wenn die Länge des in das Feld eingegebenen Textes weniger ist als minlength UTF-16-Code-Einheiten lang, was das Absenden des Formulars verhindert. Constraints-Überprüfung wird nur angewendet, wenn der Wert durch den Benutzer geändert wird. Weitere Informationen finden Sie unter Client-seitige Validierung.

• multiple

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

• name

  • : Ein String, der einen Namen für das Eingabesteuerelement angibt. Dieser Name wird zusammen mit dem Wert des Steuerelements beim Absenden der Formulardaten übermittelt.

    Betrachten Sie den name als ein erforderliches Attribut (obwohl es nicht ist). Wenn eine Eingabe keinen name hat oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular gesendet! (Deaktivierte Steuerelemente, nicht ausgewählte Optionsfelder, nicht ausgewählte Kontrollkästchen und Zurücksetzen-Buttons werden ebenfalls nicht gesendet.)

    Es gibt zwei Sonderfälle:

    1. _charset_ : Wenn als Name eines <input>-Elements des Typs hidden verwendet, wird der Eingabewert vom User Agent automatisch auf die Zeichenkodierung gesetzt, die beim Absenden 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 Optionen.

    Nur eine Optionsschaltfläche in einer gleichnamigen Gruppe von Optionsschaltflächen kann gleichzeitig ausgewählt sein. Das Auswählen einer beliebigen Optionsschaltfläche in dieser Gruppe deaktiviert automatisch jede derzeit ausgewählte Optionsschaltfläche in derselben Gruppe. Der Wert dieser einen ausgewählten Optionsschaltfläche wird zusammen mit dem Namen gesendet, wenn das Formular abgesendet wird.

    Beim Tabben in eine Serie von gleichnamigen Gruppen von Optionsschaltflächen, wenn eine ausgewählt ist, erhält diese den Fokus. Wenn sie in der Quellreihenfolge nicht gruppiert sind und eine der Gruppe ausgewählt ist, beginnt das Tabben in die Gruppe, wenn die erste der Gruppe erreicht wird, wobei alle diejenigen übersprungen werden, die nicht ausgewählt sind. Mit anderen Worten, wenn eine ausgewählt ist, wird das Tabben die nicht ausgewählten Optionsschaltflächen in der Gruppe überspringen. Wenn keine ausgewählt ist, erhält die Optionsschaltflächengruppe den Fokus, wenn die erste Taste in der gleichnamigen Gruppe erreicht ist.

    Sobald eine der Optionsschaltflächen in einer Gruppe den Fokus hat, navigieren die Pfeiltasten durch alle gleichnamigen Optionsschaltflächen, auch wenn die Optionsschaltflächen in der Quellreihenfolge nicht zusammen gruppiert sind.

    Wenn einem Eingabeelement ein name gegeben wird, wird dieser Name zu einem Eigentumselement des Formulars über die HTMLFormElement.elements-Eigenschaft. Wenn Sie eine Eingabe haben, dessen name auf guest gesetzt ist, und eine andere, deren name auf hat-size

    js

    let form = document.querySelector("form");
    
    let guestName = form.elements.guest;
    let hatSize = form.elements["hat-size"];
    

// Beispiel-JavaScript-Code zum Erzeugen von Referenzen auf <input /> Felder
const guestName = document.forms[0].elements["guest"]; const hatSize =
document.forms[0].elements["hat-size"];

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

pattern

Gültig für text, search, url, tel, email und password, wird das pattern-Attribut verwendet, um einen regulären Ausdruck zu kompilieren, dem der value der Eingabe entsprechen muss, damit der Wert die Constraints-Überprüfung besteht. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er vom RegExp-Typ verwendet wird und in unserem Leitfaden für reguläre Ausdrücke dokumentiert ist. Keine Schrägstriche sollten um den Mustertext angegeben werden. Beim Kompilieren des regulären Ausdrucks:

1. wird das Muster implizit mit ^(?: und )$ umschlossen, so dass die Übereinstimmung gegen den gesamten Eingabewert erforderlich ist, d.h. ^(?:<pattern>)$.
2. wird das 'v'-Flag angegeben, so dass das Muster als Folge von Unicode-Zeichencodes und nicht als ASCII behandelt wird.

Wenn das pattern-Attribut vorhanden, 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, wird die Constraints-Überprüfung das Absenden des Formulars verhindern. Wenn das multiple vorhanden ist, wird der kompilierte reguläre Ausdruck gegen jeden durch Kommas getrennten Wert geprüft.

Hinweis: Wenn Sie das pattern-Attribut verwenden, informieren Sie den Benutzer über das erwartete Format, indem Sie erläuternden Text in der Nähe angeben. Sie können auch ein title-Attribut hinzufügen, um zu erklären, welche Anforderungen erfüllt werden müssen, um das Muster zu erfüllen; die meisten Browser zeigen diesen Titel als Tooltip an. Die sichtbare Erklärung ist erforderlich für Barrierefreiheit. Der Tooltip ist eine Verbesserung.

Weitere Informationen finden Sie unter Client-seitige Validierung.

placeholder

Gültig für text, search, url, tel, email, password und number, bietet das placeholder-Attribut einen kurzen Hinweis auf die Art der erwarteten Information im Feld. Es sollte ein Wort oder eine kurze Phrase sein, die einen Hinweis auf die erwartete Art von Daten gibt, anstatt einer Erklärung oder Aufforderung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten. Wenn zum Beispiel ein Feld erwartet, den Vornamen eines Benutzers zu erfassen und sein Label "Vorname" ist, wäre ein geeigneter Platzhalter "z.B. Mustafa".

Hinweis: Das placeholder-Attribut ist nicht so semantisch nützlich wie andere Arten, Ihr Formular zu erklären, und kann unerwartete technische Probleme mit Ihrem Inhalt verursachen. Weitere Informationen finden Sie unter Labels.

popovertarget

Macht ein <input type="button">-Element zu einem Popover-Steuerungsknopf; nimmt die ID des Popover-Elements, das zu steuern ist, als seinen Wert. Weitere Einzelheiten finden Sie auf der Popover-API-Landungsseite. Das Herstellen einer Beziehung zwischen einem Popover und seinem Einführ-Knopf mittels des popovertarget-Attributs hat zwei zusätzliche nützliche Effekte:

• Der Browser erstellt eine implizite aria-details- und aria-expanded-Beziehung zwischen Popover und Einführer und platziert das Popover, wenn es angezeigt wird, in einer logischen Position in der Tastatur-Fokus-Navigationsreihenfolge. Dies macht das Popover für Tastatur- und Assistive-Technologie (AT)-Benutzer zugänglicher (siehe auch Popover-Accessibility-Funktionen).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr bequem macht, Popover relativ zu ihren Steuerungen unter Verwendung von CSS-Ankerpositionierung zu platzieren. Weitere Details finden Sie unter Popover-Ankerpositionierung.

popovertargetaction

Gibt die Aktion an, die auf ein Popover-Element ausgeführt werden soll, das von einem Steuerungs-<input type="button"> gesteuert wird. Mögliche Werte sind:

"hide"

Der Knopf wird ein angezeigtes Popover verbergen. Wenn Sie versuchen, ein bereits verborgenes Popover zu verbergen, wird keine Aktion durchgeführt.

"show"

Der Knopf wird ein verborgenes Popover anzeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion durchgeführt.

"toggle"

Der Knopf wird ein Popover zwischen Anzeigen und Verbergen umschalten. Wenn das Popover verborgen ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es verborgen. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die von dem Steuerknopf durchgeführt wird.

readonly

Ein Boolean-Attribut, das, falls vorhanden, angibt, dass der Benutzer den Wert der Eingabe nicht bearbeiten können soll. Das readonly-Attribut wird von den text, search, url, tel, email, date, month, week, time, datetime-local, number und password-Eingabetypen unterstützt.

Weitere Informationen finden Sie im HTML-Attribut: readonly.

required

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

Weitere Informationen finden Sie unter Client-seitige Validierung und im HTML-Attribut: required.

size

Gültig für email, password, tel, url und text, gibt das size-Attribut an, wie viel von der Eingabe angezeigt wird. Es erzeugt im Grunde das gleiche Ergebnis wie das Setzen der CSS-width-Eigenschaft mit ein paar 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, ist das src ein String, der die URL der Bilddatei angibt, um den grafischen Absenden-Button anzuzeigen. 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, der der Wert entsprechen muss. Nur Werte, die eine ganze Anzahl von Schritten von der Schrittbasis entfernt sind, sind gültig. Die Schrittbasis ist min, falls angegeben, value ansonsten oder 0, wenn weder noch angegeben ist (außer week, das eine Standardschrittbasis von −259.200.000 hat, was dem Beginn der Woche 1970-W01 entspricht).

Wenn nicht explizit enthalten:

• step standardmäßig auf 1 für number und range.
• Jeder Datums-/Uhrzeiten-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 – entweder Integer oder Float – oder der spezielle Wert any, was bedeutet, dass kein Schritt impliziert wird und jeder Wert erlaubt ist (mit Ausnahme anderer Einschränkungen, wie min und max).

Zum Beispiel, wenn Sie <input type="number" min="10" step="2"> haben, dann ist jede gerade ganze Zahl, 10 oder größer, gültig. Wenn step weggelassen wird bei <input type="number">, ist jede ganze Zahl gültig, aber Fließkommazahlen (wie 4.2) sind nicht gültig, weil step standardmäßig auf 1 gesetzt ist. Damit 4.2 gültig ist, hätte step auf any, 0.1, 0.2 gesetzt werden müssen, oder der min-Wert müsste eine Zahl sein, die auf .2 endet, wie <input type="number" min="-5.2">.

Hinweis: Wenn die von dem Benutzer eingegebenen Daten nicht der Schrittkonfiguration entsprechen, wird der Wert bei der Constraints-Überprüfung als ungültig angesehen und wird das :invalid-Pseudoklasse entsprechen.

Weitere Informationen finden Sie unter Client-seitige Validierung.

tabindex

Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, ein ganzzahliges Attribut, das angibt, ob das Element den Eingabefokus erhalten kann (fokusfähig ist), ob es an die sequentielle Tastaturnavigation teilnehmen soll. Da alle Eingabetypen außer der Eingabe des Typs hidden fokussierbar sind, sollte dieses Attribut nicht auf Formularelementen verwendet werden, da dies die Verwaltung der Fokussierreihenfolge für alle Elemente im Dokument erforderlich machen würde, mit dem Risiko, die Bedienbarkeit und Barrierefreiheit zu beeinträchtigen, wenn dies falsch gemacht wird.

title

Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, das einen Text enthält, der beratende Informationen in Bezug auf das zugehörige Element darstellt. Solche Informationen können typischerweise, aber nicht notwendigerweise, dem Benutzer als Tooltip präsentiert werden. Der Titel sollte NICHT als primäre Erläuterung des Zwecks des Formularelements verwendet werden. Verwenden Sie stattdessen das <label>-Element mit einem for-Attribut, das auf das id-Attribut des Formularelements eingestellt ist. Weitere Einzelheiten finden Sie unter Labels unten.

type

Ein String, der den Typ des darzustellenden Steuerelements angibt. Zum Beispiel, um ein Kontrollkästchen zu erstellen, wird ein Wert von checkbox verwendet. Wenn weggelassen (oder ein unbekannter Wert angegeben) wird, wird der Eingabetyp text verwendet, um ein Klartext-Eingabefeld zu erstellen.

Erlaubte Werte sind in den Eingabetypen oben aufgelistet.

value

Der Wert des Eingabesteuerelements. Wenn im HTML angegeben, ist dies der Anfangswert, und von da an kann es jederzeit durch JavaScript geändert oder abgerufen werden, um die entsprechende HTMLInputElement-Objekteigenschaft value zuzugreifen. Das value-Attribut ist immer optional, sollte jedoch für checkbox, radio und hidden als obligatorisch angesehen werden.

width

Nur gültig für den image-Eingabeknopf, die width ist die Breite der Bilddatei, um den grafischen Absende-Button anzuzeigen. Siehe den image-Eingabetyp.

Nicht standardisierte Attribute

Die folgenden nicht standardisierten Attribute sind auch in einigen Browsern verfügbar. Als allgemeine Regel sollten Sie es vermeiden, diese zu verwenden, es sei denn, es kann nicht anders sein.

incremental Nicht standardisiert

Das Boolean-Attribut incremental ist eine WebKit- und Blink-Erweiterung (daher von Safari, Opera, Chrome, etc. unterstützt), die, falls vorhanden, den User Agent dazu anweist, die Eingabe als Live-Suche zu verarbeiten. Wenn der Benutzer den Wert des Feldes bearbeitet, sendet der Benutzeragent search-Ereignisse an das HTMLInputElement-Objekt, das das Suchfeld darstellt. Dies ermöglicht Ihrem Code, die Suchergebnisse in Echtzeit zu 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 (wie durch Drücken der Enter oder Return-Taste, während das Feld bearbeitet wird).

Das search-Ereignis ist so eingeschränkt, dass es nicht häufiger gesendet wird, als ein implementierungsdefiniertes Intervall zulässt.

orient Nicht standardisiert

Ähnlich wie die -moz-orient nicht standardisierte CSS-Eigenschaft, die die <progress> und <meter>-Elemente betrifft, definiert das orient-Attribut die Orientierung des Bereichs-Schiebereglers. Werte umfassen horizontal, was bedeutet, dass der Bereich horizontal dargestellt wird, und vertical, was bedeutet, dass der Bereich vertikal dargestellt wird. Siehe Erstellen von vertikalen Formularelementen für einen modernen Ansatz zur Erstellung vertikaler Formularelemente.

results Nicht standardisiert

Das results-Attribut – nur von Safari unterstützt – ist ein numerischer Wert, der es Ihnen erlaubt, die maximale Anzahl von Einträgen zu überschreiben, die im nativ bereitgestellten Dropdown-Menü früherer Suchanfragen des <input>-Elements angezeigt werden.

Der Wert muss eine nicht negative Dezimalzahl sein. Wenn nicht angegeben oder ein ungültiger Wert gegeben wird, wird die von den Browservorschriften festgelegte Standard-Maximalanzahl von Einträgen verwendet.

webkitdirectory Nicht standardisiert

Das Boolean-Attribut webkitdirectory, falls vorhanden, gibt an, dass nur Verzeichnisse zur Auswahl durch den Benutzer im Dateiauswahl-Interface erlaubt sind. Siehe HTMLInputElement.webkitdirectory für zusätzliche Details und Beispiele.

Obwohl ursprünglich nur für WebKit-basierte Browser implementiert, ist webkitdirectory auch in Microsoft Edge sowie Firefox 50 und später nutzbar. Trotz seiner relativ breiten Unterstützung ist es jedoch immer noch kein Standard 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 darstellt. Ebenfalls verfügbar sind die Methoden, die von den Eltern-Interfaces HTMLElement, Element, Node und EventTarget spezifiziert sind.

checkValidity()

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

reportValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; ansonsten gibt es false zurück, löst ein invalid Ereignis beim Element aus, und meldet (wenn das Ereignis nicht abgebrochen wird) das Problem dem Benutzer.

select()

Wählt den gesamten Inhalt des <input> Elements aus, wenn der Inhalt des Elements auswählbar ist. Für Elemente ohne auswählbaren Textinhalt (wie ein visueller Farbwähler oder Kalenderdatumseingabe) 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 Bereichs von Zeichen im Eingabeelement auf eine bestimmte Zeichenfolge. Ein selectMode Parameter ist verfügbar, um zu steuern, wie der vorhandene Inhalt beeinflusst wird.

setSelectionRange()

Wählt den angegebenen Bereich von Zeichen innerhalb eines Texteingabeelements aus. Macht nichts bei Eingaben, die nicht als Textfelder angezeigt werden.

showPicker()

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

stepDown()

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

stepUp()

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

CSS

Inputs, als ersetzte Elemente, haben einige Merkmale, die für nicht-Form-Elemente nicht zutreffen. Es gibt CSS-Selektoren, die speziell auf Formularelemente basierend auf ihren UI-Funktionen abzielen können, auch bekannt als UI-Pseudoklassen. Das Input-Element kann auch nach Typ mit Attributselektoren gezielt werden. Es gibt einige Eigenschaften, die besonders nützlich sind.

UI-Pseudoklassen

Pseudoklassen-Beispiel

Wir können ein Kontrollkästchen-Label basierend darauf stylen, ob das Kontrollkästchen markiert ist oder nicht. In diesem Beispiel stylen wir die color und font-weight der <label>, die unmittelbar nach einer geprüften Eingabe kommt. Wir haben keine Styles angewandt, wenn das input nicht markiert 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, unterschiedliche Typen von Formulareingaben auf Basis ihres type mit Attributselektoren zu bestimmen. CSS-Attributselektoren passen auf Elemente, die entweder nur das Vorhandensein eines Attributs oder den Wert eines bestimmten Attributs haben.

/* matches a password input */
input[type="password"] {
}

/* matches a form control whose valid values are limited to a range of values */
input[min][max] {
}

/* matches a form control with a pattern attribute */
input[pattern] {
}

::placeholder

Standardmäßig erscheint Platzhaltertext halbtransparent oder in hellem Grau. Das ::placeholder Pseudoelement ist der placeholder Text der Eingabe. Es kann mit einem eingeschränkten Satz von CSS-Eigenschaften gestylt werden.

::placeholder {
  color: blue;
}

Nur der Teil der CSS-Eigenschaften, die auf das ::first-line Pseudoelement angewendet werden können, kann in einer Regel verwendet werden, die ::placeholder in ihrem Selektor hat.

caret-color

Eine auf texteingabe-bezogene Elemente spezifische Eigenschaft ist die CSS caret-color Eigenschaft, die es ermöglicht, die Farbe zu setzen, in der der Texteingabe-Cursor gezeichnet wird:

HTML

<label for="textInput">Note the red caret:</label>
<input id="textInput" class="custom" size="32" />

CSS

input.custom {
  caret-color: red;
  font:
    16px "Helvetica",
    "Arial",
    sans-serif;
}

Ergebnis

field-sizing

Die field-sizing Eigenschaft ermöglicht es Ihnen, das Größenverhalten von Formulareingaben zu steuern (d.h. sie erhalten standardmäßig eine bevorzugte Standardgröße.) Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben, sodass Formularelemente sich in der Größe anpassen, um ihren Inhalt aufzunehmen.

Diese Eigenschaft wird typischerweise verwendet, um Formulareingaben zu erstellen, die ihren Inhalt umschließen und wachsen, wenn mehr Text eingegeben wird. Dies funktioniert mit Eingabetypen, die direkte Texteingaben akzeptieren (zum Beispiel text und url), Eingabetyp file und <textarea> Elemente.

object-position und object-fit

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

Styling

Für weitere Informationen zum Hinzufügen von Farben zu Elementen in HTML, siehe:

• Anwenden von Farbe auf HTML-Elemente mit CSS.

Siehe auch:

• Styling von HTML-Formularen
• Fortgeschrittenes Styling für HTML-Formulare

Zusätzliche Funktionen

Labels

Labels sind notwendig, um Hilfetext mit einem <input> zu verknüpfen. Das <label> Element bietet erklärende Informationen zu einem Formularfeld, die immer angemessen sind (abgesehen von Layout-Bedenken, die Sie haben könnten). Es ist nie eine schlechte Idee, ein <label> zu verwenden, um zu erklären, was in ein <input> oder <textarea> eingegeben werden sollte.

Zugeordnete Labels

Die semantische Zuordnung von <input> und <label> Elementen ist nützlich für Hilfstechnologien wie Bildschirmleser. Durch die Zuordnung mithilfe des for Attributs des <label> Elements verbinden Sie das Label mit der Eingabe, was es Bildschirmlesern ermöglicht, Eingaben den Benutzern präziser zu beschreiben.

Ein einfacher Text neben dem <input> Element reicht nicht aus. Vielmehr erfordert Benutzbarkeit und Zugänglichkeit die Einbeziehung 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 gibt keine Beziehung zwischen der Eingabeaufforderung und dem <input> Element.

Neben einem zugänglichen Namen bietet das Label einen größeren "Treffer"-Bereich für Maus- und Touchscreen-Benutzer zum Klicken oder Berühren. Durch die Zuordnung eines <label> mit einem <input> wird das Fokussieren des <input> sowohl möglich durch Klicken darauf oder dem Label. Wenn Sie einen einfachen Text verwenden, um Ihre Eingabe zu "labeln", passiert dies nicht. Das Einbeziehen der Eingabeaufforderung in den Aktivierungsbereich für die Eingabe ist hilfreich für Personen mit motorischen Beeinträchtigungen.

Als Webentwickler sollten wir nie annehmen, dass die Menschen alles Wissen, was wir wissen. Die Vielfalt der Menschen, die das Internet nutzen – und somit Ihrer Website – stellt praktisch sicher, dass einige Besucher Ihrer Site durch einen unterschiedlichen Denkprozess und/oder Umstände dazu veranlasst werden, Ihre Formulare ganz anders zu interpretieren als Sie ohne klare und ordnungsgemäß 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 es leer ist. Der Platzhalter sollte niemals erforderlich sein, um Ihre Formulare zu verstehen. Er ist kein Label und sollte nicht als Ersatz verwendet werden, weil er das nicht ist. Der Platzhalter wird verwendet, um einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht als Erklärung oder Eingabeaufforderung.

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

Client-seitige Validierung

Neben der Verwendung von CSS zum Stylen von Eingaben basierend auf den :valid oder :invalid UI-Stati basierend auf dem aktuellen Zustand jeder Eingabe, wie im Abschnitt zu UI-Pseudoklassen oben beschrieben, ermöglicht der Browser eine client-seitige Validierung bei (versuchter) Formularübermittlung. Bei der Formularübermittlung wird von unterstützenden Browsern auf dem ersten ungültigen Formularelement eine Fehlermeldung angezeigt, in der entweder eine Standardmeldung basierend auf dem Fehlertyp oder eine von Ihnen festgelegte Nachricht angezeigt wird.

Einige Eingabetyen und andere Attribute legen Beschränkungen fest, welche Werte für eine bestimmte Eingabe gültig sind. Zum Beispiel bedeutet <input type="number" min="2" max="10" step="2">, dass nur die Zahlen 2, 4, 6, 8 oder 10 gültig sind. Diverse Fehler könnten auftreten, darunter ein rangeUnderflow Fehler, 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 (der Anforderungen des step Attributs nicht entspricht), oder typeMismatch, wenn der Wert keine Zahl ist.

Für die Eingabetypen, deren Bereich möglicher Werte periodisch ist (d.h. dass die Werte sich am höchsten möglichen Wert wieder zurück auf den Anfang zurücksetzen, anstatt zu enden), können die Werte der max und min Eigenschaften umgekehrt werden, was darauf hinweist, dass der Bereich der erlaubten Werte bei min beginnt, wieder auf den niedrigsten möglichen Wert zurückspringt und dann weitergeht bis max erreicht ist. Dies ist besonders nützlich für Daten und Zeiten, z. B., wenn Sie möchten, dass der Bereich von 20:00 Uhr bis 08:00 Uhr reicht:

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

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

Wenn ein Formularelement das required Attribut nicht hat, ist ein kein Wert oder eine leere Zeichenfolge nicht ungültig. Selbst wenn die obigen Attribute mit Ausnahme von required vorhanden sind, führt eine leere Zeichenfolge nicht zu einem Fehler.

Wir können Grenzen festlegen, welche Werte wir akzeptieren, und unterstützende Browser werden diese Formularwerte nativ validieren und den Benutzer darauf hinweisen, wenn bei der Übermittlung ein Fehler vorliegt.

Zusätzlich zu den in der obigen Tabelle beschriebenen Fehlern enthält das validityState Interface die booleschen Lese-schreibgeschützten Eigenschaften badInput, valid und customError. Das Validitätsobjekt umfasst:

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

Für jede dieser booleschen Eigenschaften gibt ein true Wert an, dass der angegebene Grund für das Fehlschlagen der Validierung wahr ist, mit Ausnahme der valid Eigenschaft, die true ist, wenn der Wert des Elements allen Einschränkungen entspricht.

Wenn ein Fehler auftritt, werden unterstützende Browser den Benutzer sowohl darauf hinweisen als auch verhindern, dass das Formular abgesendet wird. Ein Wort der Vorsicht: Wenn eine benutzerdefinierte Fehlermeldung auf einen wahrheitsgemäßen Wert gesetzt wird (alles außer die leere Zeichenfolge oder null), wird das Absenden des Formulars verhindert. Wenn es keine benutzerdefinierte Fehlermeldung gibt und keine der anderen Eigenschaften wahr zurückgibt, wird valid wahr und das Formular kann übermittelt 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 Validitätsnachricht auf die leere Zeichenfolge setzt, ist unerlässlich. Wenn der Benutzer einen Fehler macht und die Validität eingestellt ist, wird das Formular nicht abgesendet, auch wenn alle Werte gültig sind, bis die Nachricht null ist.

Beispiel für benutzerdefinierte Validierungsfehler

Wenn Sie eine benutzerdefinierte Fehlermeldung anzeigen möchten, wenn ein Feld die Validierung nicht besteht, müssen Sie die Constraint Validation API verwenden, die auf <input> (und verwandten) Elementen verfügbar ist. Betrachten 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 führen, dass diese eine Standardfehlermeldung erzeugt, wenn Sie versuchen, das Formular entweder mit einem ungültigen Wert oder ohne Wert auszufüllen, oder einem Wert, der nicht mit dem pattern übereinstimmt.

Wenn Sie stattdessen benutzerdefinierte Fehlermeldungen anzeigen möchten, könnten Sie JavaScript wie folgendes 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 so:

Kurz gesagt:

• Wir überprüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sich der Wert ändert, durch den Einsatz der checkValidity() Methode über den input Ereignishandler.
• Wenn der Wert ungültig ist, wird ein invalid Ereignis ausgelöst, und die invalid Ereignishandlerfunktion ausgeführt. Innerhalb dieser Funktion prüfen wir, ob der Wert ungültig ist, weil er leer ist oder weil er nicht mit dem Muster übereinstimmt, unter Verwendung eines if () Blocks und setzen eine benutzerdefinierte Gültigkeitsfehlermeldung.
• Folglich, wenn der Eingabewert ungültig ist, wenn die Senden-Schaltfläche gedrückt wird, wird eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Wenn er gültig ist, wird er wie erwartet übermittelt. Damit dies geschehen kann, muss die benutzerdefinierte Validität aufgehoben werden, indem Sie setCustomValidity() mit einem leeren Zeichenfolgenwert ausführen. Wir machen dies daher jedes Mal, wenn das input Ereignis ausgelöst wird. Wenn Sie dies nicht tun und eine benutzerdefinierte Validität zuvor festgelegt wurde, registriert die Eingabe als ungültig, selbst wenn sie derzeit einen gültigen Wert bei der Übermittlung enthält.

Lokalisierung

Die erlaubten Eingaben für bestimmte <input> Typen hängen von der Lokalisierung ab. In einigen Regionen ist 1.000,00 eine gültige Zahl, während in anderen Regionen der gültige Weg, diese Zahl einzugeben, 1.000,00 ist.

Firefox verwendet die folgenden Heuristiken, um die Lokalisierung zur Validierung der Benutzereingabe zu bestimmen (zumindest für type="number"):

• Versuchen Sie die Sprache, die durch ein lang/xml:lang Attribut auf dem Element oder einem seiner Elternteile angegeben wird.
• Versuchen Sie die Sprache, die von einem Content-Language HTTP-Header angegeben wird. Oder,
• Wenn keine angegeben ist, verwenden Sie die Browser-Sprache.

Barrierefreiheit

Labels

Wenn Eingaben hinzugefügt werden, ist es eine Voraussetzung zur Barrierefreiheit, Labels nebenhinzuzufügen. Dies ist notwendig, damit Benutzer, die Hilfstechnologien verwenden, erkennen können, wofür die Eingabe ist. Auch das Klicken oder Berühren eines Labels fokussiert das zugehörige Formulareingabefeld. Dies verbessert die Barrierefreiheit und Benutzbarkeit für sehende Benutzer, erhöht die Fläche, die ein Benutzer zum Klicken oder Berühren aktivieren kann, und ist besonders nützlich (und sogar notwendig) für Kontrollkästchen und Radiobuttons, die winzig sind. Für mehr Informationen über Labels im Allgemeinen siehe Labels.

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

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

Größe

Interaktive Elemente wie Formulareingaben sollten eine Fläche bieten, die groß genug ist, um leicht aktiviert zu werden. Dies hilft einer Vielzahl von Menschen, einschließlich Personen mit motorischen Beeinträchtigungen und Personen, die nicht-präzise Eingabemethoden wie einen Stift oder Finger verwenden. Eine Mindest-Interaktionsgröße von 44×44 CSS-Pixel wird empfohlen.

• Erfolgskriterium 2.5.5 verstehen: Zielgröße | W3C Understanding WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Quick test: Large touch targets - The A11Y Project

Technische Übersicht

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS appearance Eigenschaft
• Ihr erstes HTML-Formular
• Anleitung zur Strukturierung eines HTML-Formulars
• Die nativen Formularwidgets
• Senden von Formulardaten
• Formularbeschränkungsvalidierung
• Styling von HTML-Formularen