<input> HTML-Tag

Probieren Sie es aus

<label for="name">Name (4 to 8 characters):</label>

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

<input>-Typen

Die Funktionsweise eines <input> variiert erheblich, abhängig vom Wert des type-Attributs, weshalb die verschiedenen Typen auf separaten Referenzseiten behandelt werden. Wenn dieses Attribut nicht angegeben ist, ist der Standardtyp text.

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 leistungsstark aufgrund seiner Attribute; das type-Attribut, welches oben mit Beispielen beschrieben ist, ist das wichtigste. Da jedes <input>-Element, unabhängig vom Typ, auf der HTMLInputElement-Schnittstelle basiert, teilen sie technisch gesehen dasselbe Set von Attributen. In Wirklichkeit haben jedoch die meisten Attribute nur auf eine spezifische Untergruppe von Eingabetypen Einfluss. Darüber hinaus hängt die Wirkung einiger Attribute auf eine Eingabe vom Eingabetyp ab und beeinflusst verschiedene Eingabetypen auf unterschiedliche Weise.

Dieser Abschnitt bietet eine Tabelle, die alle Attribute mit einer kurzen Beschreibung auflistet. Diese Tabelle wird von einer Liste gefolgt, die jedes Attribut im Detail beschreibt, zusammen mit den Eingabetypen, mit denen sie assoziiert sind. Diejenigen, die für die meisten oder alle Eingabetypen allgemein sind, werden im Folgenden detailliert beschrieben. Attribute, die einzigartig für bestimmte Eingabetypen sind – oder Attribute, die für alle Eingabetypen generell, 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-standardmäßige Attribute sind im Anschluss an die Beschreibungen der Standardattribute aufgeführt.

Einzelene Attribute

accept

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

alpha

Nur gültig für den Typ color. Das alpha-Attribut bietet dem Endnutzer die Möglichkeit, die Deckkraft der ausgewählten Farbe festzulegen.

alt

Nur gültig für den Bildknopf image. Das alt-Attribut bietet alternativen Text für das Bild, der angezeigt wird, wenn das Bild src fehlt oder anderweitig nicht geladen werden kann. 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 einen durch Leerzeichen getrennten String, der beschreibt, welche Art von Autovervollständigungsfunktionalität die Eingabe bereitstellen soll, wenn überhaupt. Eine typische Implementierung von Autovervollständigung merkt sich frühere Werte, die im selben Eingabefeld eingegeben wurden, es können jedoch auch komplexere Formen der Autovervollständigung existieren. Beispielsweise könnte sich ein Browser mit der Kontaktliste eines Geräts integrieren, um email-Adressen in einem E-Mail-Eingabefeld automatisch zu vervollständigen. Siehe autocomplete für zulässige 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 einen der Tasten-Typen gültig.

Weitere Informationen finden Sie im autocomplete-Attribut, einschließlich Informationen zur Passwortsicherheit und wie sich autocomplete bei hidden leicht von anderen Eingabetypen unterscheidet.

autofocus

Ein Boolean-Attribut, das, wenn vorhanden, angibt, dass das Eingabefeld automatisch den Fokus haben soll, wenn die Seite geladen wurde (oder wenn der <dialog> enthaltende relevante Content geladen wurde).

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

Es darf nicht mehr als ein Element im Dokument mit dem autofocus-Attribut versehen sein. Wenn es auf mehr als einem Element gesetzt wird, erhält das erste Element mit dem Attribut den Fokus.

Das autofocus-Attribut kann nicht bei Eingaben vom Typ hidden verwendet werden, da versteckte Eingaben nicht fokussiert werden können.

Warnung: Automatisches Fokussieren eines Formularsteuerelements kann sehbehinderte Menschen verwirren, die Bildschirmlesetechnologie verwenden, ebenso wie Menschen mit kognitiven Beeinträchtigungen. Wenn autofocus zugewiesen ist, "teleportieren" Lesegeräte für Bildschirme ihre Nutzer ohne Vorwarnung.

Seien Sie vorsichtig, wenn Sie das autofocus-Attribut anwenden und das Hinzufügen für Barrierefreiheit berücksichtigen. Automatisches Fokussieren auf ein Steuerelement kann dazu führen, dass die Seite beim Laden scrollt. Der Fokus kann auf einigen Touch-Geräten dazu führen, dass dynamische Tastaturen angezeigt werden. Ein Bildschirmlesegerät wird das Etikett des fokussierten Formularsteuerelements ansagen, aber es wird nichts vor dem Etikett ansagen. Ebenso wird der Sichtvergleichsbenutzer auf einem kleinen Gerät den Kontext verpassen, der durch den vorausgehenden Inhalt erstellt wird.

capture

Eingeführt in der HTML Media Capture-Spezifikation und nur gültig für den Eingabetyp file, definiert das capture-Attribut, welche Medien - Mikrofon, Video oder Kamera - verwendet werden sollen, um in unterstützenden Szenarien eine neue Datei mit dem file-Upload-Steuerelement aufzunehmen. Siehe den file Eingabetyp.

checked

Gültig für die Typen radio und checkbox. checked ist ein Boolean-Attribut. Wenn es beim radio-Typ vorhanden ist, gibt es an, dass der Radiobutton der aktuell ausgewählte in der Gruppe gleichnamiger Radiobuttons ist. Wenn es beim checkbox-Typ vorhanden ist, gibt es an, dass das Kontrollkästchen standardmäßig aktiviert ist (wenn die Seite geladen wird). Es zeigt nicht an, ob dieses Kontrollkästchen derzeit aktiviert ist: Wenn sich der Zustand des Kontrollkästchens ändert, wird dieses Inhaltsattribut bei der Änderung nicht aktualisiert. (Nur das HTMLInputElement-Attribut checked wird aktualisiert.)

Hinweis: Im Gegensatz zu anderen Eingabesteuerfeldern werden die Werte von Kontrollkästchen und Radio-Buttons nur in die übermittelten Daten aufgenommen, wenn sie derzeit checked sind. Wenn dies der Fall ist, werden der Name und die Werte der aktivierten Steuerelemente übermittelt.

Wenn beispielsweise ein Kontrollkästchen mit dem name fruit einen value von cherry hat und das Kontrollkästchen aktiviert ist, dann werden die Formulardaten fruit=cherry enthalten. Wenn das Kontrollkästchen nicht aktiv ist, wird es in den Formulardaten überhaupt nicht aufgeführt. Der Standardwert für Kontrollkästchen und Radio-Buttons ist on.

colorspace

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

• "limited-srgb": Die Farbe befindet sich im sRGB-Farbraum. Dazu gehören rgb(), hsl(), hwb() und <hex-color>-Werte. Der Farbwert ist auf 8-Bit pro r-, g- und b-Komponente begrenzt. 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 die Eingabetypen hidden, text, search, url, tel und email. Das dirname-Attribut ermöglicht die Übermittlung der Textausrichtung des Elements. Wenn hinzugefügt, wird das Formularsteuerelement mit zwei Name/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, führen die Eingaben dazu, dass sowohl das name / value-Paar fruit=cherry als auch das dirname / Richtungs-Paar fruit-dir=ltr gesendet werden. Für mehr Informationen siehe das dirname-Attribut.

disabled

Ein Boolean-Attribut, das, wenn vorhanden, angibt, dass der Benutzer nicht mit der Eingabe interagieren soll. Deaktivierte Eingaben werden typischerweise mit einer dunkleren Farbe oder mit einer anderen Form der Indikation dargestellt, dass das Feld nicht zur Verwendung verfügbar ist.

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

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

form

Eine Zeichenfolge, die das <form>-Element angibt, mit dem die Eingabe verknüpft ist (d.h. der Formularbesitzer ist). Der Wert dieser Zeichenfolge, falls vorhanden, muss mit der id eines <form>-Elements im selben Dokument übereinstimmen. Wenn dieses Attribut nicht spezifiziert ist, wird das <input>-Element mit dem nächsten enthaltenden Formular verbunden, falls vorhanden.

Das form-Attribut ermöglicht es, eine Eingabe an einer beliebigen Stelle im Dokument zu platzieren, aber diese in einem Formular an anderer Stelle im Dokument zu inkludieren.

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

formaction

Nur gültig für die Eingabetypen image und submit. Für mehr Informationen siehe den submit Eingabetyp.

formenctype

Nur gültig für die Eingabetypen image und submit. Für mehr Informationen siehe den submit Eingabetyp.

formmethod

Nur gültig für die Eingabetypen image und submit. Für mehr Informationen siehe den submit Eingabetyp.

formnovalidate

Nur gültig für die Eingabetypen image und submit. Für mehr Informationen siehe den submit Eingabetyp.

formtarget

Nur gültig für die Eingabetypen image und submit. Für mehr Informationen siehe den submit Eingabetyp.

height

Nur beim Bildknopf image gültig. Die height ist die Höhe der Bilddatei, die angezeigt wird, um den grafischen Bestätigungsbutton darzustellen. Siehe den image Eingabetyp.

id

Globales Attribut, das für alle Elemente gültig ist, einschließlich aller Eingabetypen, und eine eindeutige Kennung (ID) definiert, die im gesamten Dokument einzigartig sein muss. Ihr Zweck ist es, das Element bei der Verknüpfung zu identifizieren. Der Wert wird als Wert des Attributs for des <label>-Elements verwendet, um das Label mit dem Formularsteuerelement zu verbinden. Siehe <label>.

inputmode

Globaler Wert, gültig für alle Elemente, er bietet einen Hinweis an Browser, welche Art von virtueller Tastaturkonfiguration beim Bearbeiten dieses Elements oder seines Inhalts verwendet werden soll. 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. Die <datalist> bietet eine Liste vorab definierter Werte als Vorschläge für den Nutzer zur Eingabe. Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in den vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Nutzer können aus dieser vordefinierten Liste auswä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 Spezifikationen wird das list-Attribut nicht von hidden, password, checkbox, radio, file oder irgendeinem Button-Typ unterstützt.

Abhängig vom Browser kann der Nutzer eine benutzerdefinierte Farbpalette, Tic-Marken entlang eines Bereichs oder sogar eine Eingabe, die sich wie ein <select> öffnet, aber auch nicht aufgelistete Werte zulässt, sehen. Schauen Sie sich die Browser-Kompatibilitätstabelle für die anderen Eingabetypen an.

Siehe das <datalist>-Element.

max

Gültig für date, month, week, time, datetime-local, number und range, es definiert den größten Wert im Bereich der zulässigen Werte. Wenn der 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 Sonderfall: Wenn der Datentyp periodisch ist (wie bei Datums- oder Zeitangaben), kann der Wert von max niedriger als der Wert von min sein, was darauf hinweist, dass der Bereich umschlagen kann; zum Beispiel erlaubt dies die Angabe eines Zeitbereichs von 22:00 Uhr bis 4:00 Uhr.

maxlength

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

Die Eingabe schlägt bei der Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Textes größer ist als maxlength UTF-16-Codeeinheiten lang. Standardmäßig verhindern Browser, dass Nutzer mehr Zeichen eingeben, als durch das maxlength-Attribut erlaubt sind. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird. Weitere Informationen finden Sie unter Client-side-Validierung.

min

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

Dieser Wert muss kleiner oder gleich dem Wert des max-Attributs sein. Wenn das min-Attribut vorhanden, aber nicht spezifiziert oder ungültig ist, wird kein min-Wert angewendet. Wenn das min-Attribut gültig ist und ein nicht leerer Wert kleiner als das Minimum, das durch das min-Attribut zugelassen wird, wird die Einschränkungsvalidierung die Formularübermittlung verhindern. Weitere Informationen finden Sie unter Client-side-Validierung.

Es gibt einen Sonderfall: Wenn der Datentyp periodisch ist (wie bei Datums- oder Zeitangaben), kann der Wert von max niedriger als der Wert von min sein, was darauf hinweist, dass der Bereich umschlagen kann; zum Beispiel erlaubt dies die Angabe eines Zeitbereichs von 22:00 Uhr bis 4:00 Uhr.

minlength

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

Methoden

Die folgenden Methoden werden von der HTMLInputElement Schnittstelle bereitgestellt, die <input>-Elemente im DOM darstellt. Ebenfalls verfügbar sind die Methoden, die von den übergeordneten Schnittstellen HTMLElement, Element, Node und EventTarget spezifiziert sind.

checkValidity()

Gibt true zurück, wenn der Wert des Elements die Gültigkeitsprüfungen besteht; andernfalls wird false zurückgegeben und ein invalid Ereignis am 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 am Element ausgelöst und (wenn 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 auswählbar ist. Für Elemente ohne auswählbaren Textinhalt (wie ein visueller Farbwähler oder Kalendereingabe) bewirkt diese Methode nichts.

setCustomValidity()

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

setRangeText()

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

setSelectionRange()

Wählt den angegebenen Zeichenbereich innerhalb eines Text-Eingabeelements aus. Macht nichts bei Eingaben, die nicht als Texteingabefelder präsentiert werden.

showPicker()

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

stepDown()

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

stepUp()

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

CSS

Eingaben, die ersetzte Elemente sind, haben einige Funktionen, die auf Nicht-Formularelemente nicht anwendbar sind. Es gibt CSS-Selektoren, die speziell Formularsteuerungen basierend auf ihren UI-Funktionen, auch bekannt als UI-Pseudoklassen, anvisieren können. Das input-Element kann auch nach Typ mit Attributselektoren anvisiert werden. Es gibt einige Eigenschaften, die ebenfalls besonders nützlich sind.

UI-Pseudoklassen

Pseudoklassen-Beispiel

Wir können ein Kontrollkästchen-Label basierend darauf stylen, ob das Kontrollkästchen ausgewählt ist oder nicht. In diesem Beispiel stylen wir die color und font-weight des <label>, das direkt nach einer ausgewählten Eingabe folgt. Es wurden keine Stile angewendet, wenn das input nicht ausgewählt ist.

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

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

Attributselektoren

Es ist möglich, verschiedene Typen von Eingabesteuerelementen basierend auf ihrem type unter Verwendung von Attributselektoren zu anvisieren. CSS-Attributselektoren passen Elemente an, basierend entweder nur auf der Anwesenheit eines Attributs oder dem Wert eines gegebenen 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 erscheint der Text des Platzhalters lichtdurchlässig oder hellgrau. Das ::placeholder-Pseudo-Element ist der placeholder-Text der Eingabe. Es kann mit einem eingeschränkten Satz von CSS-Eigenschaften gestylt werden.

::placeholder {
  color: blue;
}

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

caret-color

Eine Eigenschaft, die speziell auf texteingabe-bezogene Elemente zutrifft, ist die CSS-caret-color-Eigenschaft, die es erlaubt, die Farbe des Texteingabe-Cursors zu bestimmen:

HTML

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

CSS

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

Ergebnis

field-sizing

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

Diese Eigenschaft wird typischerweise verwendet, um Formularfelder zu erstellen, die sich entsprechend ihrem Inhalt verkleinern und mit mehr eingegebenem Text wachsen. Dies funktioniert mit Eingabetypen, die direkte Texteingabe akzeptieren (zum Beispiel text und url), Eingabetyp file und <textarea> Elemente.

object-position und object-fit

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

Styling

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

• Farbe auf HTML-Elemente anwenden mit CSS.

Siehe auch:

• HTML-Formulare stylen
• Erweiterte Stylings für HTML-Formulare

Zusätzliche Funktionen

Labels

Labels sind notwendig, um erklärenden Text mit einem <input> zu verknüpfen. Das <label>-Element bietet erläuternde Informationen über ein Eingabefeld, das immer angemessen ist (abgesehen von eventuellen Layoutbedenken, die Sie haben könnten). Es ist nie eine schlechte Idee, ein <label> zu verwenden, um zu erklären, was in ein <input> oder ein <textarea> eingegeben werden sollte.

Zugehörige Labels

Die semantische Paarung von <input>- und <label>-Elementen ist nützlich für unterstützende Technologien wie Bildschirmleser. Indem Sie sie unter Verwendung des for-Attributs des <label>-Elements koppeln, verbinden Sie das Label mit der Eingabe auf eine Weise, die es Bildschirmlesern ermöglicht, Eingaben genauer zu beschreiben.

Es reicht nicht aus, einfachen Text neben dem <input>-Element zu haben. Vielmehr erfordern Benutzerfreundlichkeit und Barrierefreiheit 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 unzugänglich: Es besteht keine Verbindung zwischen der Aufforderung und dem <input>-Element.

Zusätzlich zu einem zugänglichen Namen bietet das Label einen größeren 'Touchpoint' für Maus- und Touchscreen-Nutzer zum Klicken oder Berühren. Durch die Kopplung eines <label> mit einem <input> wird beim Klicken auf eines von beiden das <input> fokussiert. Wenn Sie einfachen Text verwenden, um Ihre Eingabe zu "benennen", geschieht dies nicht. Es ist hilfreich für Menschen mit motorischen Störungen, den Auftreffbereich der Eingabe als Teil des aktivierenden Bereichs zu haben.

Als Webentwickler ist es wichtig, dass wir nie annehmen, dass Menschen alle Dinge wissen, die wir wissen. Die Vielfalt der Menschen, die das Web nutzen – und damit Ihre Website – garantiert praktisch, dass einige Ihrer Website-Besucher einige Variationen im Denkprozess und/oder Umstände haben, die sie dazu führen, Ihre Formulare ohne klar und ordnungsgemäß präsentierte Labels sehr unterschiedlich zu interpretieren.

Platzhalter sind nicht zugänglich

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

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

Client-seitige Validierung

Zusätzlich zur Verwendung von CSS zur Stilisierung von Eingaben basierend auf den :valid oder :invalid UI-Zuständen basierend auf dem aktuellen Zustand jeder Eingabe, wie oben im Abschnitt UI-Pseudoklassen erwähnt, bietet der Browser eine client-seitige Validierung bei (versuchtem) Formularversand an. Beim Formularversand, wenn ein Formularsteuerelement die Prüfung der Einschränkungen nicht besteht, zeigen unterstützende Browser eine Fehlermeldung beim ersten ungültigen Formularsteuerelement an; sie zeigen eine Standardnachricht basierend auf dem Fehlertyp oder eine von Ihnen festgelegte Nachricht an.

Einige Eingabetypen und andere Attribute setzen Einschränkungen auf, welche Werte für eine gegebene Eingabe gültig sind. Beispielsweise bedeutet <input type="number" min="2" max="10" step="2">, dass nur die Zahlen 2, 4, 6, 8 oder 10 gültig sind. Mehrere Fehler könnten auftreten, einschließlich eines rangeUnderflow-Fehlers, wenn der Wert kleiner als 2 ist, rangeOverflow, wenn der Wert größer als 10 ist, stepMismatch, wenn der Wert eine Zahl zwischen 2 und 10 ist, aber keine gerade Ganzzahl (entspricht nicht den Anforderungen des step-Attributs) oder typeMismatch, wenn der Wert keine Zahl ist.

Bei Eingabetypen, deren Bereich an möglichen Werten periodisch ist (d.h. am höchsten möglichen Wert wickeln sich die Werte zum Anfang zurück, anstatt zu enden), ist es möglich, dass die Werte der max und min-Eigenschaften vertauscht werden, was angibt, dass der Bereich der erlaubten Werte bei min beginnt, sich bis zum niedrigsten möglichen Wert zurückwickelt und dann weitergeht, bis max erreicht wird. Dies ist insbesondere nützlich für Datums- und Zeitangaben, wie wenn Sie den Bereich von 20 Uhr bis 8 Uhr morgens erlauben möchten:

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

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

Wenn ein Formularsteuerelement nicht das required-Attribut hat, wird kein Wert oder eine leere Zeichenkette nicht als ungültig betrachtet. Selbst wenn die obigen Attribute vorhanden sind, mit Ausnahme von required, wird eine leere Zeichenkette nicht zu einem Fehler führen.

Wir können Grenzen für die Werte setzen, die wir akzeptieren, und unterstützende Browser werden diese Formularwerte nativ validieren und den Benutzer benachrichtigen, wenn ein Fehler bei der Einsendung des Formulars auftritt.

Zusätzlich zu den in der Tabelle oben beschriebenen Fehlern enthält das validityState-Interface die boolean-Leseeigenschaften 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 bedeutet ein Wert von true, 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, benachrichtigen unterstützende Browser den Benutzer und verhindern, dass das Formular eingereicht wird. Ein Wort der Vorsicht: Wenn eine benutzerdefinierte Fehlermeldung auf einen wahrheitsgemäßen Wert gesetzt wird (etwas anderes als eine leere Zeichenkette oder null), wird das Formular daran gehindert, eingereicht zu werden. Wenn keine benutzerdefinierte Fehlermeldung vorhanden ist und keine der anderen Eigenschaften true zurückgibt, wird valid true sein und das Formular kann eingereicht werden.

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

Die letzte Zeile, die die benutzerdefinierte Fehlermeldung auf eine leere Zeichenkette setzt, ist entscheidend. Wenn der Benutzer einen Fehler macht und die Gültigkeit gesetzt ist, wird das Formular auch dann nicht eingereicht, 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 für <input>- (und verwandte) Elemente 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 dies eine Standard-Fehlermeldung erzeugt, wenn Sie versuchen, das Formular mit entweder einem nicht gültigen Wert oder einem Wert, der nicht dem pattern entspricht, einzureichen.

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

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

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

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

Das Beispiel wird wie folgt gerendert:

Kurz gesagt:

• Wir überprüfen den gültigen Zustand des Eingabeelements jedes Mal, wenn sich sein Wert ändert, indem wir die checkValidity()-Methode über den input-Ereignishandler ausführen.
• Wenn der Wert ungültig ist, wird ein invalid-Ereignis ausgelöst, und die invalid-Ereignishandlerfunktion wird ausgeführt. Innerhalb dieser Funktion ermitteln wir, ob der Wert ungültig ist, weil er leer ist oder weil er dem Muster nicht entspricht, indem wir einen if ()-Block verwenden und eine benutzerdefinierte Fehlermeldung festlegen.
• Infolgedessen wird eine der benutzerdefinierten Fehlermeldungen angezeigt, wenn der Eingabewert ungültig ist, wenn die Senden-Taste gedrückt wird.
• Wenn der Wert gültig ist, wird er wie erwartet gesendet. Damit dies geschieht, muss die benutzerdefinierte Gültigkeit abgebrochen werden, indem setCustomValidity() mit einem leeren Zeichenkettenwert aufgerufen wird. Deshalb tun wir dies jedes Mal, wenn das input-Ereignis ausgelöst wird. Wenn Sie dies nicht tun und eine benutzerdefinierte Gültigkeit zuvor festgelegt wurde, wird die Eingabe als ungültig registriert, selbst wenn sie beim Absenden einen gültigen Wert enthält.

Lokalisierung

Die erlaubten Eingaben für bestimmte <input>-Typen hängen von der Gebietsschema ab. In einigen Gebietsschemas ist 1.000,00 eine gültige Nummer, während in anderen Gebietsschemas die gültige Art, diese Nummer einzugeben, 1.000,00 ist.

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

• Versuchen Sie, die Sprache zu verwenden, die durch ein lang/xml:lang-Attribut auf dem 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 das Browser-Gebietsschema.

Barrierefreiheit

Labels

Wenn Eingaben enthalten sind, ist es ein Barrierefreiheitsstandard, neben den Eingaben auch Labels hinzuzufügen. Dies ist erforderlich, damit Benutzer, die unterstützende Technologien verwenden, erkennen können, für was die Eingabe vorgesehen ist. Außerdem gibt das Klicken oder Berühren eines Labels dem damit verbundenen Steuerelement den Fokus. Dies verbessert die Barrierefreiheit und Benutzerfreundlichkeit für sehende Benutzer, erhöht den Bereich, auf den ein Benutzer klicken oder tippen kann, um das Steuerelement zu aktivieren. Dies ist besonders nützlich (und sogar nötig) für Radiobuttons und Kontrollkästchen, die winzig sind. Für weitere Informationen zu Labels im Allgemeinen siehe Labels.

Das folgende Beispiel zeigt, wie das <label> mit einem <input>-Element in der oben angegebenen Weise verknüpft werden kann. Sie müssen dem <input> ein id-Attribut geben. Das <label> benötigt dann ein for-Attribut, dessen Wert mit der id des Eingabefeldes übereinstimmt.

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

Größe

Interaktive Elemente wie Formulareingaben sollten einen ausreichend großen Bereich bieten, damit sie leicht aktiviert werden können. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Problemen und Menschen, die weniger präzise Eingabemethoden wie einen Eingabestift oder Finger verwenden. Eine Mindestgröße für interaktive Bereiche von 44×44 CSS-Pixel wird empfohlen.

• Erfolgskriterium 2.5.5: Zielgröße verstehen | W3C Erklärung zu 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
• Anleitung zur Strukturierung eines HTML-Formulars
• Die nativen Form-Widgets
• Senden von Formulardaten
• Einschränkungsvalidierung von Formularen
• HTML-Formulare stylen