<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 in Abhängigkeit vom Wert seines type-Attributs, daher werden die verschiedenen Typen auf ihren eigenen separaten Referenzseiten behandelt. Wenn dieses Attribut nicht angegeben ist, wird als Standardtyp text angenommen.

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, wie oben mit Beispielen beschrieben, ist das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-Schnittstelle basiert, teilen sie technisch gesehen dieselbe Attributgruppe. In der Praxis haben jedoch die meisten Attribute nur einen Effekt auf einen bestimmten Teil der Eingabetypen. Darüber hinaus hängt die Art und Weise, wie einige Attribute ein Eingabeelement 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. Diese Tabelle wird gefolgt von einer Liste, die jedes Attribut detaillierter beschreibt, zusammen mit den Eingabetypen, mit denen sie assoziiert sind. Attribute, die den meisten oder allen Eingabetypen gemeinsam sind, werden weiter unten im Detail definiert. Attribute, die besonderen Eingabetypen eigen sind oder Attribute, die allen Eingabetypen gemeinsam sind, aber bei einem bestimmten Eingabetyp spezielle Verhaltensweisen aufweisen, werden 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 werden nach den Beschreibungen der Standardattribute aufgelistet.

Einzelne Attribute

• accept

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

• alt

  • : Nur gültig für den image-Button, bietet das alt-Attribut einen alternativen Text für das Bild und zeigt den Wert des Attributs an, wenn das Bild-src(#src) fehlt oder sonst fehlschlägt. Siehe den image-Eingabetyp.

• autocapitalize

  • : Steuert, ob eingegebener Text automatisch großgeschrieben wird und, falls ja, auf welche Weise. Weitere Informationen finden Sie auf der globalen Attributseite autocapitalize.

• autocomplete

  • : (Kein Boolean-Attribut!) Das autocomplete-Attribut nimmt als Wert eine durch Leerzeichen getrennte Zeichenfolge, die beschreibt, welche, wenn überhaupt, Art von Autovervollständigungsfunktionalität das Eingabefeld bieten sollte. Eine typische Implementierung von Autovervollständigung erinnert sich an zuvor eingegebene Werte im selben Eingabefeld, aber komplexere Formen der Autovervollständigung können existieren. Zum Beispiel könnte ein Browser mit der Kontaktliste eines Geräts integrieren, um 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 keinen Effekt auf Eingabetypen, die keine numerischen oder textuellen Daten zurückgeben, und ist für alle Eingabetypen gültig, außer checkbox, radio, file oder irgendwelche der Schaltflächentypen.

  Weitere Informationen, einschließlich Informationen zur Passwortsicherheit und darüber, wie autocomplete für hidden leicht anders ist als für andere Eingabetypen, finden Sie im autocomplete-Attribut.

• autofocus

  • : Ein Boolean-Attribut, das, wenn vorhanden, anzeigt, dass das Eingabefeld automatisch den Fokus erhalten soll, wenn die Seite vollständig geladen wurde (oder wenn das <dialog> mit dem Element angezeigt wurde).

    Hinweis: Ein Element mit dem autofocus-Attribut kann bereits 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 einem Element vorhanden ist, erhält das erste Element mit diesem Attribut den Fokus.

    Das autofocus-Attribut kann nicht auf Eingaben vom Typ hidden verwendet werden, da versteckte Eingaben nicht den Fokus erhalten können.

    Warnung: Automatisches Fokussieren auf ein Formularelement kann verwirrend für sehbehinderte Personen sein, die Bildschirmlesetechnologie verwenden, ebenso wie für Menschen mit kognitiven Beeinträchtigungen. Wenn autofocus zugewiesen ist, "teleportieren" Bildschirmlesegeräte ihren Benutzer ohne vorherige Warnung zum Formularelement.

  Verwenden Sie bei der Anwendung des autofocus-Attributs eine sorgfältige Überlegung zur Barrierefreiheit. Das automatische Fokussieren auf ein Steuerelement kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann außerdem dazu führen, dass auf einigen Touch-Geräten dynamische Tastaturen angezeigt werden. Während ein Bildschirmleser das Label des jeweils fokussierten Formularsteuerelements ansagt, wird er nichts vor dem Label ansagen, und der sehende Benutzer auf einem kleinen Gerät wird gleichermaßen den Kontext, der durch den vorangehenden Inhalt erzeugt wurde, verpassen.

• capture

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

• checked

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

    Hinweis: Im Gegensatz zu anderen Eingabesteuerelementen wird der Wert eines Kontrollkästchens oder einer Optionsschaltfläche nur dann in den übermittelten Daten aufgenommen, wenn sie momentan checked ist. Wenn sie es sind, werden der Name und der Wert(e) der aktivierten Steuerungen übermittelt.

    Zum Beispiel: Wenn ein Kontrollkästchen, dessen name fruit ist, einen value von cherry hat und das Kontrollkästchen aktiviert ist, dann wird in den übermittelten Formulardaten fruit=cherry enthalten sein. Wenn das Kontrollkästchen nicht aktiv ist, wird es überhaupt nicht in den Formulardaten aufgeführt. Der Standard-value für Kontrollkästchen und Optionsschaltflächen ist on.

• dirname

  • : Gültig für hidden, text, search, url, tel und email Eingabetypen, aktiviert das dirname-Attribut die Übermittlung der Direktionalität des Elements. Wenn eingeschlossen, wird die Formularsteuerung mit zwei Namen/Wert-Paaren übermittelt: das erste ist der name und value, und das zweite ist der Wert des dirname-Attributs als Name, mit einem Wert von ltr oder rtl, wie vom Browser festgelegt.

    html

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

    Wenn das oben gezeigte Formular übermittelt wird, wird der Eingabewert sowohl zu dem name/value-Paar fruit=cherry als auch zu dem dirname/Richtungs-Paar fruit-dir=ltr gesendet. Weitere Informationen finden Sie im dirname-Attribut.

• disabled

  • : Ein Boolean-Attribut, das, wenn vorhanden, anzeigt, dass der Benutzer nicht mit der Eingabe interagieren sollte. Deaktivierte Eingaben werden normalerweise in einer gedimmten Farbe dargestellt oder mit einer anderen Form der Anzeige, dass das Feld nicht verfügbar ist.

    Deaktivierte Eingaben empfangen insbesondere nicht das click-Ereignis, und deaktivierte Eingaben werden auch nicht mit dem Formular übermittelt.

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

• form

  • : Ein String, der das zugeordnete <form>-Element angibt (d.h. seinen Formularbesitzer). Der Wert dieses Strings, wenn vorhanden, muss mit der id eines <form>-Elements im selben Dokument übereinstimmen. Wenn dieses Attribut nicht angegeben ist, wird das <input>-Element dem nächstgelegenen enthaltenen Formular zugeordnet, falls vorhanden.

    Das form-Attribut ermöglicht es, eine Eingabe an beliebigen Stellen im Dokument zu platzieren, aber es mit einem Formular anderswo im Dokument zu verknüpfen.

    Hinweis: Eine Eingabe kann nur mit einem einzigen Formular verbunden sein.

• formaction

  • : Nur gültig für die image- und submit-Eingabetypen. Siehe den submit-Eingabetyp für mehr Informationen.

• formenctype

  • : Nur gültig für die image- und submit-Eingabetypen. Siehe den submit-Eingabetyp für mehr Informationen.

• formmethod

  • : Nur gültig für die image- und submit-Eingabetypen. Siehe den submit-Eingabetyp für mehr Informationen.

• formnovalidate

  • : Nur gültig für die image- und submit-Eingabetypen. Siehe den submit-Eingabetyp für mehr Informationen.

• formtarget

  • : Nur gültig für die image- und submit-Eingabetypen. Siehe den submit-Eingabetyp für mehr Informationen.

• height

  • : Nur gültig für den image-Inputbutton, ist height die Höhe der Bilddatei, die angezeigt werden soll, um die grafische Absenden-Schaltfläche darzustellen. Siehe den image-Eingabetyp.

• id

  • : Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen. Es definiert eine eindeutige Kennung (ID), die im gesamten Dokument einzigartig sein muss. Der Zweck besteht darin, das Element beim Verlinken zu identifizieren. Der Wert wird als Wert des <label>'s for-Attributes verwendet, um das Label mit der Formularsteuerung zu verknüpfen. Siehe <label>.

• inputmode

  • : Globaler Wert, gültig für alle Elemente, er gibt den Browsern einen Hinweis auf die Konfiguration der virtuellen Tastatur, die beim Bearbeiten dieses Elements oder seines Inhalts verwendet wird. Die Werte umfassen none, text, tel, url, email, numeric, decimal und search.

• list

  • : Der Wert, der dem list-Attribut gegeben wird, sollte die id eines <datalist>-Elements sein, das sich im selben Dokument befindet. Das <datalist> bietet eine Liste von vordefinierten Werten, die dem Benutzer für diese Eingabe vorgeschlagen werden sollen. Alle Werte in der Liste, die mit dem type nicht kompatibel sind, sind in den vorgeschlagenen Optionen nicht enthalten. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

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

  Gemäß den Spezifikationen wird das list-Attribut nicht von hidden, password, checkbox, radio, file oder einem der Schaltflächentypen unterstützt.

  Abhängig vom Browser könnte der Benutzer eine benutzerdefinierte Farbpalette vorgeschlagen bekommen, Tick-Markierungen entlang eines Bereichs oder sogar eine Eingabe, die sich wie ein <select> öffnet, aber es erlaubt, nicht aufgelistete Werte einzufügen. Prüfen Sie die Browser-Kompatibilitäts-Tabelle für die anderen Eingabetypen.

  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 erlaubten Werte. Wenn der in das Element eingegebene value diesen überschreitet, schlägt das Element bei der Einschränkungsvalidierung fehl. Wenn der Wert des max-Attributs keine Zahl ist, hat das Element keinen Höchstwert.

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

• maxlength

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

  Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes länger als maxlength UTF-16 Code-Einheiten ist. Standardmäßig verhindern Browser, dass Benutzer mehr Zeichen als von maxlength erlaubt eingeben. Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen.

• min

  • : Gültig für date, month, week, time, datetime-local, number und range, definiert es den kleinsten Wert im Bereich der erlaubten Werte. Wenn der in das Element eingegebene value kleiner als dieser Wert ist, schlägt das Element bei der Einschrä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, 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 das Minimum, das vom min-Attribut erlaubt wird, wird die Einschränkungsvalidierung die Einreichung des Formulars verhindern. Siehe Client-seitige Validierung für weitere Informationen.

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

• minlength

  • : Gültig für text, search, url, tel, email und password, definiert es die minimal erforderliche Zeichenlänge (gemessen in UTF-16 Code-Einheiten), die der Benutzer in das Eingabefeld eingeben muss. Dies muss ein nicht-negativer Ganzzahlwert sein, der kleiner als oder gleich dem Wert ist, der von maxlength spezifiziert wird. Wenn kein minlength festgelegt oder ein ungültiger Wert angegeben ist, hat die Eingabe keine Mindestlänge.

  Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes kürzer als minlength UTF-16 Code-Einheiten ist und die Übermittlung des Formulars verhindert. Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Siehe Client-seitige Validierung für weitere Informationen.

• multiple

  • : Das Boolean-Attribut multiple, wenn es gesetzt ist, erlaubt dem Benutzer, kommaseparierte E-Mail-Adressen im E-Mail-Widget einzugeben oder mehr als eine Datei mit der file-Eingabe auszuwählen. Siehe den email- und file-Eingabetyp.

• name

  • : Ein String, der einen Namen für die Eingabesteuerung spezifiziert. Dieser Name wird zusammen mit dem Wert der Steuerung gesendet, wenn die Formulardaten gesendet werden.

    Betrachten Sie den name als erforderliches Attribut (auch wenn es nicht so ist). Wenn eine Eingabe keinen name hat, oder name leer ist, wird der Wert der Eingabe nicht mit dem Formular gesendet! (Deaktivierte Steuerungen, nicht markierte Optionsfelder, nicht markierte Kontrollkästchen und Reset-Knöpfe werden ebenfalls nicht gesendet.)

    Es gibt zwei Sonderfälle:

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

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

    Nur eine Optionsschaltfläche in einer gleichnamigen Gruppe von Optionsschaltflächen kann zu einem Zeitpunkt markiert sein. Die Auswahl einer beliebigen Optionsschaltfläche in dieser Gruppe hebt automatisch die Markierung der aktuell ausgewählten Optionsschaltfläche in derselben Gruppe auf. Der Wert dieser einen markierten Optionsschaltfläche wird zusammen mit dem Namen gesendet, wenn das Formular übermittelt wird.

    Wenn in eine Serie gleichnamiger Gruppen von Optionsschaltflächen getippt wird, wird, falls eine markiert ist, diese den Fokus erhalten. Wenn sie nicht in der Quellreihenfolge gruppiert sind, wenn eine der Gruppe markiert ist, beginnt das Tabbing in die Gruppe, wenn die erste der Gruppe erreicht wird und überspringt alle, die nicht markiert sind. Mit anderen Worten, wenn eine markiert ist, wird das Tabben die nicht markierten Optionsschaltflächen in der Gruppe überspringen. Wenn keine markiert sind, erhält die Optionsschaltflächengruppe den Fokus, wenn die erste Schaltfläche in der gleichen Namensgruppe erreicht ist.

    Sobald eine der Radio-Knöpfe in einer Gruppe den Fokus hat, bewegen sich die Pfeiltasten durch alle Radio-Knöpfe mit demselben Namen, selbst wenn die Radio-Knöpfe in der Quellreihenfolge nicht gruppiert sind.

    Wenn einem Input-Element ein name gegeben wird, wird dieser Name zu einer Eigenschaft des owners form element's'HTMLFormElement.elements'-Eigenschaft. Wenn Sie ein Eingabefeld haben, dessen name auf guest und ein anderes, dessen name auf hat-size gesetzt ist, kann folgender Code verwendet werden:

    js

    let form = document.querySelector("form");
    
    let guestName = form.elements.guest;
    let hatSize = form.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.

    Warnung: Vermeiden Sie, Formularelementen einen name zu geben, der mit einer eingebauten Eigenschaft des Formulars zusammenfällt, da Sie dadurch die vordefinierte Eigenschaft oder Methode mit diesem Verweis auf das entsprechende Eingabefeld überschreiben.

• pattern

  • : Gültig für text, search, url, tel, email und password, wird das pattern-Attribut verwendet, um ein reguläres Ausdruck zu erstellen, das der value der Eingabe erfüllen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er beim RegExp-Typ verwendet wird, und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert. Es sollten keine Schrägstriche um den Mustertext angegeben werden. Beim Kompilieren des regulären Ausdrucks:

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

    Wenn das pattern-Attribut vorhanden ist, aber nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut komplett ignoriert. Wenn das pattern-Attribut gültig ist und ein nicht leerer Wert nicht mit dem Muster übereinstimmt, verhindert die Einschränkungsvalidierung die Übermittlung des Formulars. Wenn das multiple-Attribut vorhanden ist, wird der kompilierte reguläre Ausdruck mit jedem kommagetrennten Wert verglichen.

    Hinweis: Wenn Sie das pattern-Attribut verwenden, informieren Sie den Benutzer über das erwartete Format, indem Sie erklärenden Text in der Nähe einschließen. Sie können auch ein title-Attribut einfügen, um zu erklären, was die Anforderungen sind, um dem Muster zu entsprechen; die meisten Browser werden diesen Titel als Tooltip anzeigen. Die sichtbare Erklärung ist erforderlich für die Barrierefreiheit. Der Tooltip ist eine Verbesserung.

    Siehe Client-seitige Validierung für weitere Informationen.

• placeholder

  • : Gültig für text, search, url, tel, email, password und number, liefert das placeholder-Attribut einen Hinweis für den Benutzer, welche Art von Informationen im Feld erwartet wird. Es sollte ein Wort oder ein kurzer Satz sein, der einen Hinweis auf den erwarteten Datentyp gibt, anstatt eine Erklärung oder Aufforderung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten. Wenn zum Beispiel ein Feld erwartet, den Vornamen des Benutzers zu erfassen, und dessen Label "Vorname" ist, könnte ein geeigneter Platzhalter "z.B. Mustafa" sein.

    Hinweis: Das placeholder-Attribut ist nicht so semantisch hilfreich wie andere Möglichkeiten, Ihr Formular zu erklären, und kann unerwartete technische Probleme mit Ihrem Inhalt verursachen. Siehe Labels für weitere Informationen.

• popovertarget

  • : Verwandelt ein <input type="button">-Element in eine Popover-Steuerknopf; nimmt die ID des Popover-Elements, das es steuern soll, als Wert. Siehe die Popover-API Landing Page für mehr Details. Die Schaffung einer Beziehung zwischen einem Popover und seinem Auslöseknopf mit dem popovertarget-Attribut hat zwei zusätzliche nützliche Effekte:
    • Der Browser erstellt eine implizite aria-details- und aria-expanded-Beziehung zwischen Popover und Auslöser und platziert das Popover in einer logischen Position in der Tastaturfokus-Navigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover für Tastatur- und unterstützende Technologie (AT)-Nutzer besser zugänglich (siehe auch Popover accessibility features).
    • Der Browser erstellt eine implizite Verankerungsreferenz zwischen den beiden, was es sehr bequem macht, Popovers relativ zu ihren Steuerungen mit CSS-Ankerpositionierung zu positionieren. Siehe Popover anchor positioning für mehr Details.

• popovertargetaction

  • : Gibt die auszuführende Aktion auf einem Popover-Element an, das von einem Steuerknopf <input type="button"> gesteuert wird. Mögliche Werte sind:

    "hide"

    Der Knopf wird ein angezeigtes Popover verbergen. Wenn Sie versuchen, ein bereits verstecktes Popover zu verbergen, wird keine Aktion unternommen.

    "show"

    Der Button zeigt ein verstecktes Popover an. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion unternommen.

    "toggle"

    Der Button wechselt ein Popover zwischen anzeigen und versteckt. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die vom Steuerknopf ausgeführt wird.

• readonly

  • : Ein Boolean-Attribut, das, wenn vorhanden, 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.

    Siehe das HTML-Attribut: readonly für mehr Informationen.

• required

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

    Siehe Client-seitige Validierung und die HTML-Attribut: required für mehr Informationen.

• size

  • : Gültig für email, password, tel, url und text, das size-Attribut definiert, wie viel der Eingabe angezeigt wird. Im Wesentlichen wird das gleiche Ergebnis erzielt wie bei der Einstellung der CSS-width-Eigenschaft 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-Inputbutton, ist src ein String, der die URL der anzuzeigenden Bilddatei angibt, um die grafische Absenden-Schaltfläche darzustellen. Siehe den image-Eingabetyp.

• step

  • : Gültig für date, month, week, time, datetime-local, number und range, gibt das step-Attribut eine Zahl an, die die Granularität festlegt, an die der Wert gebunden sein muss. Nur Werte, die ein Vielfaches der Schrittgröße vom Schrittbasiswert sind, sind gültig. Der Schrittbasiswert ist min falls spezifiziert, value ansonsten, oder 0 falls keiner bereitgestellt wird (außer bei week, wo die Standard-Schrittbasis −259.200.000 ist, was den Anfang der Woche 1970-W01 darstellt).

  Wenn nicht explizit einbezogen:

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

  Der Wert muss eine positive Zahl—Ganzzahl oder Gleitkommazahl—sein oder der spezielle Wert any, was bedeutet, dass keine Schrittweite impliziert wird und jeder Wert erlaubt ist (unter Vorbehalt anderer Einschränkungen, wie min und max).

  Zum Beispiel, wenn Sie <input type="number" min="10" step="2"> haben, dann sind alle ganzzahlige Zahlen, 10 oder höher, gültig. Wenn weggelassen, <input type="number">, ist jede ganze Zahl gültig, aber Gleitkommazahlen (wie 4.2) sind nicht gültig, da step standardmäßig 1 ist. Um 4.2 gültig zu machen, müsste step entweder any, 0.1, 0.2 sein, oder der min-Wert müsste eine Zahl sein, die in .2 endet, wie <input type="number" min="-5.2">.

  Hinweis: Wenn die von der Nutzerin eingegebenen Daten nicht den Schrittkonfigurationen entsprechen, wird der Wert in der Einschränkungsvalidierung als ungültig betrachtet und wird die :invalid-Pseudoklasse treffen.

  Siehe Client-seitige Validierung für mehr Informationen.

• tabindex

  • : Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, ein ganzzahliges Attribut, das angibt, ob das Element den Eingabefokus erhalten kann (fokussierbar ist), ob es an der sequentiellen Tastaturnavigation teilnehmen sollte. Da alle Eingabetypen außer dem Typ hidden fokussierbar sind, sollte dieses Attribut auf Formularelementen nicht verwendet werden, da sonst der Fokusreihenfolge für alle Elemente im Dokument verwaltet werden müsste mit dem Risiko, die Benutzbarkeit und Barrierefreiheit bei falscher Handhabung zu beeinträchtigen.

• title

  • : Globales Attribut, gültig für alle Elemente, einschließlich aller Eingabetypen, das einen Text enthält, der Beratungsinformationen in Bezug auf das Element bereitstellt, zu dem es gehört. Solche Informationen können typischerweise, aber nicht notwendigerweise, dem Benutzer als Tooltip präsentiert werden. Der Titel sollte NICHT als primäre Erklärung des Zwecks der Kontrolle des Formulars verwendet werden. Verwenden Sie stattdessen das <label>-Element mit einem for-Attribut, das auf das id-Attribut der Formularelementkontrolle eingestellt ist. Siehe Labels unten.

• type

  • : Ein String, der den Typ der zu rendernden Steuerung spezifiziert. Beispielsweise wird ein Wert von checkbox verwendet, um ein Kontrollkästchen zu erstellen. Wenn weggelassen (oder ein unbekannter Wert angegeben), wird der Eingabetyp text verwendet und ein Klartext-Eingabefeld erstellt.

    Erlaubte Werte sind oben in den Input-Typen aufgeführt.

• value

  • : Der Wert der Eingabesteuerung. Wenn im HTML angegeben, ist dies der Initialwert und kann von da an jederzeit geändert oder mit JavaScript abgerufen werden, um auf die entsprechende HTMLInputElement-Objekt value-Eigenschaft zuzugreifen. Das value-Attribut ist immer optional, sollte jedoch als zwingend für checkbox, radio und hidden betrachtet werden.

• width

  • : Nur gültig für den image-Inputbutton, ist width die Breite der Bilddatei, die angezeigt werden soll, um die grafische Absenden-Schaltfläche darzustellen. Siehe den image-Eingabetyp.

Nicht-standardisierte Attribute

Die folgenden nicht-standardisierten Attribute sind auch bei einigen Browsern verfügbar. Generell sollten sie vermieden werden, es sei denn, es gibt keine Alternative.

• incremental Nicht standardisiert

  • : Das Boolean-Attribut incremental ist eine Erweiterung für WebKit und Blink (daher wird es von Safari, Opera, Chrome usw. unterstützt), das, wenn vorhanden, den User-Agent dazu fordert, den Input als Live-Suche zu bearbeiten. Während der Benutzer den Wert des Feldes bearbeitet, sendet der User-Agent search-Ereignisse an das HTMLInputElement-Objekt, das das Suchfeld repräsentiert. 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 dann gesendet, wenn der Benutzer explizit eine Suche initiiert (zum Beispiel durch Drücken der Enter- oder Return-Taste, während er das Feld bearbeitet).

    Das search-Ereignis ist so rate-begrenzt, dass es nicht häufiger als ein implementierungsdefiniertes Intervall gesendet wird.

• orient Nicht standardisiert

  • : Ähnlich wie die nicht-standardisierte CSS-Eigenschaft -moz-orient, die die <progress>- und <meter>-Elemente beeinflusst, definiert das orient-Attribut die Ausrichtung des Bereichsschiebers. Werte umfassen horizontal, was bedeutet, dass der Bereich horizontal dargestellt wird, und vertical, bei dem der Bereich vertikal gerendert wird. Siehe Erstellen vertikaler Formularelemente für einen modernen Ansatz, vertikale Formularelemente zu erstellen.

• results Nicht standardisiert

  • : Das results-Attribut—nur von Safari unterstützt—ist ein numerischer Wert, der es Ihnen ermöglicht, die maximale Anzahl von Einträgen zu überschreiben, die im nativen Dropdown-Menü des <input>-Elements für frühere Suchanfragen angezeigt werden sollen.

  Der Wert muss eine nicht negative Dezimalzahl sein. Wird kein gültiger Wert bereitgestellt, wird die maximale Anzahl von Einträgen auf den Standardwert des Browsers gesetzt.

• webkitdirectory Nicht standardisiert

  • : Das Boolean-Attribut webkitdirectory, wenn vorhanden, weist darauf hin, dass nur Verzeichnisse als Auswahloptionen für den Benutzer in der Dateiauswahloberfläche angezeigt werden sollen. 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 in Firefox 50 und später verwendbar. Obwohl es eine relativ breite Unterstützung hat, ist es immer noch nicht standardisiert und sollte nicht verwendet werden, wenn keine Alternative besteht.

Methoden

Die folgenden Methoden werden von der HTMLInputElement-Schnittstelle bereitgestellt, die <input>-Elemente im DOM repräsentiert. Auch verfügbar sind die von den übergeordneten Schnittstellen spezifizierten Methoden, HTMLElement, Element, Node und EventTarget.

checkValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls wird false zurückgegeben und es wird ein invalid-Ereignis auf das Element ausgelöst.

reportValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls wird false zurückgegeben, ein invalid-Ereignis auf dem Element ausgelöst und (falls das Ereignis nicht abgebrochen wird) das Problem dem Benutzer gemeldet.

select()

Wählt den gesamten Inhalt des <input>-Elements aus, wenn der Inhalt des Elements ausgewählt werden kann. Bei Elementen ohne auswählbaren Textinhalt (wie ein visueller Farbwähler oder ein Kalendereingabefeld) bewirkt diese Methode nichts.

setCustomValidity()

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

setRangeText()

Setzt den Inhalt des angegebenen Zeichenbereichs im Eingabe-Element auf eine gegebene Zeichenfolge. Ein selectMode-Parameter ist verfügbar, um zu steuern, wie der bestehende Inhalt beeinflusst wird.

setSelectionRange()

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

showPicker()

Zeigt den Browser-Auswähler für das Eingabeelement an, der normalerweise bei Auswahl des Elements angezeigt wird, aber durch einen Tastendruck oder eine andere Benutzerinteraktion ausgelöst wird.

stepDown()

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

stepUp()

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

CSS

Inputs, als ersetzte Elemente, haben einige Eigenschaften, die nicht auf Nicht-Formularelemente anwendbar sind. Es gibt CSS-Selektoren, die speziell auf Formularelemente basierend auf ihren UI-Merkmalen, auch bekannt als UI-Pseudoklassen, abzielen können. Das Input-Element kann auch durch Typ mit Attributselektoren angesprochen werden. Einige Eigenschaften sind ebenfalls besonders nützlich.

UI-Pseudoklassen

Pseudoklassen-Beispiel

Wir können ein Checkbox-Label basierend darauf stylen, ob die Checkbox angekreuzt ist oder nicht. In diesem Beispiel stylen wir die color und font-weight des <label>, das unmittelbar nach einem angekreuzten input kommt. Wir haben keine Styles angewendet, wenn das input nicht angekreuzt 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 zu Elementen basierend entweder nur auf der Anwesenheit eines Attributs oder dem Wert eines bestimmten Attributs.

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

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

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

::placeholder

Standardmäßig ist das Aussehen von Placholder-Text transluzent oder hellgrau. Das ::placeholder-Pseudoelement ist der placeholder-Text des inputs. Es kann mit einem begrenzten Satz von CSS-Eigenschaften gestylt werden.

::placeholder {
  color: blue;
}

Nur der Teil der CSS-Eigenschaften, der auf das ::first-line-Pseudoelement anzuwenden ist, kann in einer Regel verwendet werden, die ::placeholder in seinem Selektor verwendet.

caret-color

Eine Eigenschaft, die sich speziell auf Texteingabe-bezogene Elemente bezieht, ist die CSS-caret-color-Eigenschaft, mit der Sie die Farbe festlegen können, die zur Darstellung der Texteingabepflegemarke verwendet wird:

HTML

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

CSS

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

Ergebnis

field-sizing

Die field-sizing-Eigenschaft ermöglicht Ihnen die Kontrolle über das Größenverhalten von Formulareingaben (d.h. ihnen wird standardmäßig eine bevorzugte Größe zugewiesen). Diese Eigenschaft ermöglicht es Ihnen, das Standardverhalten zu überschreiben und Formularelementen die Anpassung an ihre Inhalte zu erlauben.

Diese Eigenschaft wird typischerweise verwendet, um Formularfelder zu erstellen, die sich an ihren Inhalt anpassen und mit zunehmendem Text größer werden. Dies funktioniert mit input-Typen, die direkte Texteingabe akzeptieren (zum Beispiel text und url), input Typ file und <textarea>-Elemente.

object-position und object-fit

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

Styling

Für weitere Informationen zur Hinzufügung von Farbe zu Elementen in HTML, siehe:

• Farbe auf HTML-Elemente anwenden mit CSS.

Siehe auch:

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

Zusätzliche Funktionen

Labels

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

Zugeordnete Labels

Die semantische Paarung von <input>- und <label>-Elementen ist nützlich für unterstützende Technologien wie Screenreader. Indem Sie sie durch das for-Attribut des <label> verbinden, koppeln Sie das Label an das input auf eine Weise, die es Screenreadern ermöglicht, Eingaben für Benutzer präziser zu beschreiben.

Es genügt nicht, einfachen Text neben dem <input>-Element zu haben. Vielmehr erfordern Benutzerfreundlichkeit und Barrierefreiheit die Einbeziehung entweder eines impliziten oder expliziten <label>:

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

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

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

Das erste Beispiel ist unzugänglich: Es besteht keine Beziehung zwischen der Eingabeaufforderung und dem <input>-Element.

Zusätzlich zu einem zugänglichen Namen bietet das Label eine größere "Treffer"-Fläche für Maus- und Touchscreen-Nutzer, um darauf zu klicken oder zu berühren. Durch das Zusammenführen eines <label> mit einem <input> wird beim Klicken auf beide das <input> fokussiert. Wenn Sie einfachen Text verwenden, um Ihr input zu "labeln", wird dies nicht geschehen. Die Eingabeaufforderung als Teil des Aktivierungsbereichs des inputs ist hilfreich für Personen mit motorischen Kontrollproblemen.

Als Webentwickler ist es wichtig, dass wir nie davon ausgehen, dass Menschen all das wissen, was wir wissen. Die Vielfalt der Menschen, die das Web nutzen – und damit Ihre Website – garantiert praktisch, dass einige Besucher Ihrer Seite einige Variationen in Denkprozessen und/oder Umständen haben werden, was dazu führt, dass sie Ihre Formulare sehr unterschiedlich interpretieren, wenn keine klaren und richtig präsentierten Labels vorhanden sind.

Platzhalter sind nicht zugänglich

Das placeholder-Attribut erlaubt es Ihnen, Text anzugeben, der innerhalb des Inhaltsbereichs des <input>-Elements selbst erscheint, wenn es leer ist. Der Platzhalter sollte nie notwendig sein, um Ihre Formulare zu verstehen. Es ist kein Label und sollte nicht als Ersatz verwendet werden, weil es keins ist. Der Platzhalter dient dazu, einen Hinweis darauf zu geben, wie ein eingegebener Wert aussehen sollte, nicht als Erklärung oder Aufforderung.

Der Platzhalter ist nicht nur für Screenreader nicht zugänglich, sondern 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, wodurch der placeholder möglicherweise nicht übersetzt wird.

Clientseitige Validierung

Zusätzlich zur Verwendung von CSS, um inputs basierend auf den :valid- oder :invalid-UI-Zuständen basierend auf dem aktuellen Zustand jedes inputs zu stylen, wie im Abschnitt UI-Pseudoklassen oben beschrieben, bietet der Browser eine clientseitige Validierung bei (versuchter) Formularübermittlung. Bei der Formularübermittlung, wenn es ein Formularelement gibt, das die Beschränkungsvalidierung nicht besteht, zeigen unterstützende Browser eine Fehlermeldung bei dem ersten ungültigen Formularelement an; entweder eine Standardmeldung basierend auf dem Fehlertyp oder eine von Ihnen festgelegte Nachricht.

Einige input-Typen und andere Attribute schränken ein, welche Werte für ein gegebenes input 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. Es könnten mehrere Fehler auftreten, einschließlich eines rangeUnderflow-Fehlers, wenn der Wert kleiner als 2 ist, rangeOverflow, wenn er größer als 10 ist, stepMismatch, wenn der Wert eine Zahl zwischen 2 und 10 ist, aber keine gerade ganze Zahl (entspricht nicht den Anforderungen des step-Attributs), oder typeMismatch, wenn der Wert keine Zahl ist.

Für die input-Typen, deren Wertebereich periodisch ist (das heißt, bei dem höchstmöglichen Wert wickeln sich die Werte an den Anfang zurück, anstatt zu enden), ist es möglich, dass die Werte der max- und min-Eigenschaften umgekehrt sind. Dies zeigt an, dass der Bereich der zulässigen Werte bei min beginnt, sich zu dem niedrigstmöglichen Wert wickelt und dann fortfährt, bis max erreicht ist. Dies ist besonders nützlich für Daten und Zeiten, wie wenn Sie den Bereich von 20 Uhr bis 8 Uhr zulassen möchten:

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

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

Wenn ein Formularelement nicht das required-Attribut hat, ist kein Wert oder ein leerer String nicht ungültig. Selbst wenn die obigen Attribute vorhanden sind, mit Ausnahme von required, wird ein leerer String nicht zu einem Fehler führen.

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

Zusätzlich zu den im obigen Tabellen beschriebenen Fehlern enthält die validityState-Schnittstelle die booleschen, nur lesbaren Eigenschaften badInput, valid und customError. Das Validität-Objekt 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 zeigt ein Wert von true an, dass der angegebene Grund, warum die Validierung möglicherweise fehlgeschlagen ist, zutrifft, mit Ausnahme der valid-Eigenschaft, die true ist, wenn der Wert des Elements allen Einschränkungen entspricht.

Wenn ein Fehler vorliegt, werden unterstützende Browser sowohl den Benutzer warnen als auch die Übermittlung des Formulars verhindern. Ein Wort der Vorsicht: Wenn ein benutzerdefinierter Fehler auf einen truthy Wert gesetzt wird (alles außer dem leeren String oder null), wird die Formulareinreichung verhindert. Wenn keine benutzerdefinierte Fehlermeldung vorliegt und keine der anderen Eigenschaften true zurückgibt, wird valid true sein, und es kann eingereicht 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, in der die benutzerdefinierte Fehlermeldung auf den leeren String gesetzt wird, ist entscheidend. Wenn der Benutzer einen Fehler macht und die Gültigkeit gesetzt wird, wird sie nicht übermittelt, selbst wenn alle Werte gültig sind, bis die Nachricht null ist.

Beispiel für benutzerdefinierte Validierungsfehler

Wenn Sie eine benutzerdefinierte Fehlermeldung anzeigen möchten, wenn ein Feld die Validierung nicht besteht, müssen Sie die Constraint Validation API verwenden, die auf <input>-Elementen (und verwandten) verfügbar ist. Nehmen Sie das folgende Formular:

<form>
  <label for="name">Enter username (upper and lowercase letters): </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
  <button>Submit</button>
</form>

Die grundlegenden HTML-Formularvalidierungsfunktionen führen dazu, dass eine Standardfehlermeldung angezeigt wird, wenn Sie versuchen, das Formular ohne gültige Eingabe oder einen Wert, der nicht dem pattern entspricht, zu übermitteln.

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

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

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

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

Das Beispiel wird folgendermaßen dargestellt:

Kurz gesagt:

• Wir überprüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sein Wert durch Ausführen der checkValidity()-Methode über den input-Ereignishandler geändert wird.
• Wenn der Wert ungültig ist, wird ein invalid-Ereignis ausgelöst und die invalid-Ereignishandlerfunktion ausgeführt. Innerhalb dieser Funktion ermitteln wir, ob der Wert ungültig ist, weil er leer ist oder weil er nicht dem Muster entspricht, und setzen eine benutzerdefinierte Validitätsfehlermeldung.
• Folglich wird, falls der Eingabewert ungültig ist, wenn der Absenden-Button gedrückt wird, eine der benutzerdefinierten Fehlermeldungen angezeigt.
• Wenn es gültig ist, wird es wie erwartet übermittelt. Damit dies passiert, muss die benutzerdefinierte Gültigkeit abgebrochen werden, indem setCustomValidity() mit einem leeren String-Wert aufgerufen wird. Wir tun dies daher jedes Mal, wenn das input-Ereignis ausgelöst wird. Wenn Sie dies nicht tun und zuvor eine benutzerdefinierte Gültigkeit festgelegt wurde, wird das input als ungültig registriert, auch wenn es derzeit einen gültigen Wert enthält.

Lokalisierung

Die erlaubten Eingaben für bestimmte <input>-Typen hängen von der Lokalisierung ab. In einigen Gebieten ist 1.000,00 eine gültige Zahl, während in anderen Gebieten die gültige Eingabeweise dieser Zahl 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 am Element oder einem seiner Eltern angegeben ist.
• Versuchen Sie die Sprache, die durch einen Content-Language-HTTP-Header angegeben ist. Oder,
• Wenn keine angegeben ist, verwenden Sie die Browsersprache.

Barrierefreiheit

Labels

Beim Einfügen von Eingabeelementen ist es eine Anforderung der Barrierefreiheit, Labels hinzuzufügen. Dies ist erforderlich, damit diejenigen, die unterstützende Technologien verwenden, wissen, wofür die Eingabe gedacht ist. Außerdem gibt das Klicken oder Berühren eines Labels dem zugehörigen Technologieformularfaktor den Fokus zurück. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für sehende Benutzer und erhöht die Fläche, die ein Benutzer klicken oder berühren kann, um das Formularelement zu aktivieren. Dies ist besonders nützlich (und sogar notwendig) für Radio-Buttons und Checkboxes, die sehr klein sind. Für weitere Informationen über Labels im Allgemeinen siehe Labels.

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

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

Größe

Interaktive Elemente wie Formularinputs sollten einen Bereich bieten, der groß genug ist, damit es einfach ist, sie zu aktivieren. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Kontrollproblemen und Menschen, die nicht-präzise Formen der Eingabe wie einen Stift oder Finger verwenden. Eine minimale interaktive Größe von 44×44 CSS-Pixeln wird empfohlen.

• Verständnis des Erfolgskriteriums 2.5.5: Zielgröße | W3C Verständnis WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Touch-Ziele - Das A11Y-Projekt

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS appearance Eigenschaft
• Ihr erstes HTML-Formular
• Wie man ein HTML-Formular strukturiert
• Die nativen Formularelemente
• Formulardaten senden
• Formular-Beschränkungsvalidierung
• Styling von HTML-Formularen