Die meisten Websites und Anwendungen enthalten ein Webformular. Witzewebsites wie DoWebsites<form>-Element enthalten.
Das HTML-<form>-Element kennzeichnet ein Landmark eines Dokuments, das interaktive Steuerelemente zum Senden von Informationen enthält. In einem <form> sind alle interaktiven (und nicht interaktiven) Formularsteuerelemente aufgeführt, aus denen sich dieses Formular zusammensetzt.
HTML ist leistungsstark. In diesem Abschnitt geht es um die Möglichkeiten von HTML und die Möglichkeiten von HTML ohne Hinzufügen von JavaScript. Die clientseitige Verwendung von Formulardaten zur Aktualisierung der Benutzeroberfläche erfordert im Allgemeinen CSS oder JavaScript, was an dieser Stelle nicht behandelt wird. Es gibt einen ganzen Kurs Lernformulare. Dieser Abschnitt wird hier nicht dupliziert, aber wir führen verschiedene Formularsteuerelemente und die HTML-Attribute ein, die diese unterstützen.
Mit Formularen können Sie Nutzern ermöglichen, mit Ihrer Website oder App zu interagieren, die eingegebenen Informationen zu validieren und die Daten an einen Server zu senden. Mithilfe von HTML-Attributen kann festgelegt werden, dass Nutzer Formularsteuerelemente auswählen oder einen Wert eingeben müssen. HTML-Attribute können bestimmte Kriterien definieren, denen der Wert entsprechen muss, um gültig zu sein. Wenn der Nutzer versucht, das Formular zu senden, durchlaufen alle Formularsteuerungswerte die clientseitige Einschränkungsvalidierung und können die Übermittlung verhindern, bis die Daten die erforderlichen Kriterien erfüllen – ganz ohne JavaScript. Sie können dieses Feature auch deaktivieren: Wenn Sie das Attribut novalidate für <form> oder häufiger formnovalidate für eine Schaltfläche festlegen und die Formulardaten zur späteren Vervollständigung speichern, wird die Validierung verhindert.
Formulare senden
Formulare werden gesendet, wenn der Nutzer eine im Formular verschachtelte Schaltfläche zum Senden aktiviert. Wenn Sie <input> für Schaltflächen verwenden, ist der „Wert“ das Label der Schaltfläche und wird in der Schaltfläche angezeigt. Bei Verwendung von <button> ist das Label der Text zwischen dem öffnenden und dem schließenden <button>-Tag. Es gibt zwei Möglichkeiten, eine Senden-Schaltfläche zu erstellen:
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
Für ein sehr einfaches Formular benötigen Sie ein <form>-Element mit einigen Formulareingaben und einer Schaltfläche zum Senden. Aber das Senden eines Formulars
ist mehr als das.
Die Attribute des Elements <form> legen die HTTP-Methode, über die das Formular gesendet wird, und die URL fest, über die das Formular gesendet wird. Ja, Formulare können ohne JavaScript gesendet,
verarbeitet und eine neue Seite geladen werden. Das <form>-Element ist so leistungsstark.
Die Attributwerte action und method des <form>-Elements definieren die URL, die die Formulardaten verarbeitet, bzw. die HTTP-Methode zum Senden der Daten.
Standardmäßig werden die Formulardaten an die aktuelle Seite gesendet. Andernfalls legen Sie für das Attribut action die URL fest, an die die Daten gesendet werden sollen.
Die gesendeten Daten bestehen aus Name/Wert-Paaren der verschiedenen Formularsteuerelemente des Formulars. Standardmäßig umfasst dies alle im Formular verschachtelten Formularsteuerelemente, die ein name haben. Mit dem Attribut form ist es jedoch möglich, Formularsteuerelemente außerhalb des <form>s einzufügen und Formularsteuerelemente auszulassen, die im <form> verschachtelt sind. Das Attribut form wird von Formularsteuerelementen und <fieldset> unterstützt und verwendet als Wert den id der Form des Steuerelements, mit dem es verknüpft ist, nicht unbedingt in der Form, in der es verschachtelt ist. Das heißt, Formularsteuerelemente müssen nicht physisch in einem <form> verschachtelt sein.
Das Attribut method definiert das HTTP-Protokoll der Anfrage: in der Regel GET oder POST. Mit GET werden die Formulardaten als Parameterstring von name=value-Paaren gesendet, die an die URL der action angehängt werden.
Mit POST werden die Daten an den Text der HTTP-Anfrage angehängt. Verwenden Sie beim Senden von sicheren Daten wie Passwörtern und Kreditkartendaten immer POST.
Es gibt auch die Methode DIALOG. Wenn sich ein <form method="dialog"> innerhalb eines <dialog> befindet, wird durch Senden des Formulars das Dialogfeld geschlossen. Es wird ein Sendeereignis ausgelöst, obwohl die Daten weder gelöscht noch gesendet werden. Auch ohne JavaScript. Dies wird im Abschnitt des Dialogfelds erläutert. Da das Formular dadurch nicht gesendet wird, sollten Sie sowohl formmethod="dialog" als auch formnovalidate in die Schaltfläche zum Senden aufnehmen.
Formularschaltflächen können mehr als die am Anfang dieses Abschnitts beschriebenen Attribute haben. Wenn die Schaltfläche ein formaction-, formenctype-, formmethod-, formnovalidate- oder formtarget-Attribut enthält, haben die für die Schaltfläche zum Aktivieren der Formularübermittlung festgelegten Werte Vorrang vor den für <form> festgelegten Werten für action, enctype, method und target. Die Überprüfung der Einschränkung erfolgt vor dem Senden des Formulars, jedoch nur, wenn weder ein formnovalidate auf der aktivierten Schaltfläche zum Senden noch ein novalidate auf der <form> vorhanden ist.
Um zu ermitteln, welche Schaltfläche zum Senden eines Formulars verwendet wurde, weisen Sie der Schaltfläche ein name zu. Schaltflächen ohne Namen oder Wert werden beim Senden des Formulars nicht mit den Formulardaten gesendet.
Nach dem Absenden des Formulars
Wenn der Nutzer ein ausgefülltes Onlineformular absendet, werden die Namen und Werte der relevanten Formularsteuerelemente übermittelt. Der Name ist der Wert des Attributs name. Die Werte stammen aus dem Inhalt des Attributs value oder aus dem vom Nutzer eingegebenen oder ausgewählten Wert. Der Wert eines <textarea> ist sein innerer Text.
Der Wert von <select> ist der value der ausgewählten <option>. Wenn <option> kein value-Attribut enthält, ist der Wert der innere Text der ausgewählten Option.
<form method="GET">
<label for="student">Pick a student:</label>
<select name="student" id="student">
<option value="hoover">Hoover Sukhdeep</option>
<option>Blendan Smooth</option>
<option value="toasty">Toasty McToastface</option>
</select>
<input type="submit" value="Submit Form">
</form>
Wenn Sie „Hoover Sukhdeep“ auswählen (oder nichts tun, da der Browser standardmäßig den ersten Optionswert auswählt) und dann auf die Schaltfläche „Senden“ klicken, wird die Seite neu geladen. Die URL wird wie folgt festgelegt:
https://web.dev/learn/html/forms?student=hoover
Da die zweite Option kein value-Attribut hat, wird der innere Text als Wert gesendet. Wenn Sie „Blendan Smooth“ auswählen und auf die Schaltfläche „Senden“ klicken, wird die Seite neu geladen. Die URL wird so festgelegt:
https://web.dev/learn/html/forms?student=Blendan+Smooth
Wenn ein Formular gesendet wird, umfassen die gesendeten Informationen die Namen und Werte aller benannten Formularsteuerelemente, die ein name haben. Ausgenommen sind nicht angeklickte Kästchen, nicht ausgewählte Optionsfelder sowie die Namen und Werte aller anderen Schaltflächen als der, über die das Formular gesendet wurde. Bei allen anderen Formularsteuerelementen wird das name der Formularsteuerung mit einem leeren Wert gesendet, wenn die Formularsteuerung einen Namen hat, aber kein Wert eingegeben oder voreingestellt wurde.
Es gibt 22 Eingabetypen, daher können wir nicht alle abdecken.
Beachten Sie jedoch, dass das Einfügen eines Werts optional ist und häufig auch ungünstig ist, wenn Nutzende Informationen eingeben sollen.
Für <input>-Elemente, bei denen der Nutzer den Wert nicht bearbeiten kann, sollten Sie immer einen Wert angeben. Dies gilt auch für Eingabeelemente vom Typ hidden, radio, checkbox, submit, button und reset.
Die Verwendung eindeutiger names für Formularsteuerelemente vereinfacht die serverseitige Datenverarbeitung und wird empfohlen. Kästchen und Optionsfelder sind Ausnahmen von dieser Regel.
Optionsfelder
Falls Sie jemals bemerkt haben, dass bei der Auswahl eines Optionsfelds innerhalb einer Gruppe von Optionsfeldern jeweils nur eines ausgewählt werden kann, liegt dies am Attribut name. Dieser Effekt kann nur einmal ausgewählt werden, indem jedem Optionsfeld in einer Gruppe dieselbe name zugewiesen wird.
Eine name sollte für die Gruppe eindeutig sein: Wenn Sie versehentlich dieselbe name für zwei separate Gruppen verwenden und ein Optionsfeld in der zweiten Gruppe auswählen, wird die Auswahl aller in der ersten Gruppe mit derselben name getroffenen Auswahlen aufgehoben.
Die name und die value des ausgewählten Optionsfelds werden mit dem Formular gesendet. Jedes Optionsfeld muss einen relevanten (und normalerweise eindeutigen) value haben. Die Werte der nicht ausgewählten Optionsfelder werden nicht gesendet.
Sie können auf einer Seite beliebig viele Optionsfelder verwenden, wobei jede Gruppe unabhängig voneinander arbeitet, solange jede eine für die Gruppe eindeutige name hat.
Wenn Sie die Seite laden möchten, während eines der Optionsfelder in einer Gruppe mit demselben Namen ausgewählt ist, fügen Sie das Attribut checked ein.
Dieses Optionsfeld entspricht der CSS-Pseudoklasse :default, auch wenn der Nutzer ein anderes Optionsfeld auswählt. Das aktuell ausgewählte Optionsfeld entspricht der Pseudoklasse :checked.
Wenn der Nutzer ein Optionsfeld aus einer Gruppe von Optionsfeldern auswählen muss, fügen Sie mindestens einem der Steuerelemente das Attribut required hinzu. Wenn Sie required in ein Optionsfeld in einer Gruppe einfügen, ist eine Auswahl für die Formularübermittlung erforderlich. Es muss jedoch nicht das Optionsfeld mit dem ausgewählten Attribut sein, um gültig zu sein. Gib außerdem in <legend> deutlich an, dass das Formularsteuerelement erforderlich ist. Die Beschriftung von Gruppen von Optionsfeldern zusammen mit jeder einzelnen Schaltfläche wird später beschrieben.
Kästchen
Es gilt, dass alle Kästchen innerhalb einer Gruppe dieselbe name haben. Nur für ausgewählte Kästchen werden name und value mit dem Formular gesendet. Wenn Sie mehrere Kästchen mit demselben Namen ausgewählt haben, wird derselbe Name mit (hoffentlich) unterschiedlichen Werten gesendet. Wenn Sie mehrere Formularsteuerelemente mit demselben Namen haben, werden sie alle durch kaufmännisches Und-Zeichen (&) gesendet, auch wenn es sich dabei nicht nur um Kontrollkästchen handelt.
Wenn Sie kein value in ein Kästchen einfügen, wird der Wert der ausgewählten Kästchen standardmäßig auf on gesetzt, was wahrscheinlich nicht hilfreich ist. Wenn drei Kästchen mit dem Namen „chk“ angeklickt sind und alle Kästchen angeklickt sind, ist das gesendete Formular nicht lesbar:
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
Damit ein Kästchen erforderlich ist, fügen Sie das Attribut required hinzu. Informieren Sie den Nutzer immer, wenn ein Kästchen angeklickt werden muss oder wenn Formularsteuerelemente erforderlich sind. Wenn Sie einem Kästchen required hinzufügen, ist nur dieses Kästchen erforderlich. Andere Kästchen mit demselben Namen sind davon nicht betroffen.
Labels und Feldsätze
Damit Nutzende wissen, wie sie ein Formular ausfüllen, muss das Formular barrierefrei sein. Jede Formularsteuerung muss ein Label haben.
Sie möchten auch Gruppen von Formularsteuerelementen mit Labels versehen. Während einzelne Eingabe-, Auswahl- und Textfelder mit <label> beschriftet sind, werden Gruppen von Formularsteuerelementen durch den Inhalt des <legend> der <fieldset> gekennzeichnet, die sie gruppieren.
In den vorherigen Beispielen ist Ihnen vielleicht aufgefallen, dass mit Ausnahme der Schaltfläche „Senden“ jedes Formularsteuerelement ein <label> hatte. Labels stellen Steuerelemente für Formulare mit barrierefreien Namen bereit. Der leicht zugängliche Name von Schaltflächen ist aus dem Inhalt oder dem Wert abgeleitet. Für alle anderen Formularsteuerelemente ist ein verknüpftes <label> erforderlich. Wenn kein zugehöriges Label vorhanden ist, rendert der Browser zwar die Formularsteuerelemente, die Nutzer wissen jedoch nicht, welche Informationen erwartet werden.
Wenn Sie eine Formularsteuerung explizit mit einer <label> verknüpfen möchten, fügen Sie das Attribut for im <label> ein: den Wert für id der Formularsteuerung, mit der sie verknüpft ist.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
Die Verknüpfung von Labels mit Steuerelementen für Formulare bietet mehrere Vorteile. Durch Labels werden Formularsteuerelemente für Nutzer von Screenreadern zugänglich, indem dem Steuerelement ein zugänglicher Name zugewiesen wird. Labels sind auch „Hit Areas“. Sie machen die Website für Nutzer mit Fingerfertigkeiten nutzbarer, indem sie den Bereich vergrößern. Wenn Sie eine Maus verwenden, klicken Sie irgendwo auf das Label „Mein Name“. Dadurch liegt der Eingabefokus.
Wenn du implizite Labels erstellen möchtest, füge das Formularsteuerelement zwischen dem öffnenden und dem schließenden <label>-Tag ein. Dies ist sowohl aus der Perspektive eines Screenreaders als auch aus der Perspektive eines Zeigergeräts möglich, bietet jedoch keinen Stil-Hook wie das explizite Label.
<label>Your name
<input type="text" name="name">
</label>
Da Labels „Trefferbereiche“ sind, sollten Sie keine interaktiven Elemente in einem expliziten Label oder andere interaktive Komponenten außer der mit Labels versehenen Formularsteuerung in einem impliziten Label einschließen. Wenn Sie beispielsweise einen Link in ein Label einfügen, während der Browser den HTML-Code rendert, werden Ihre Nutzer verwirrt, wenn sie auf das Label klicken, um eine Formularsteuerung aufzurufen, aber auf eine neue Seite weitergeleitet werden.
Im Allgemeinen steht <label> vor dem Formularsteuerelement, außer bei Optionsfeldern und Kästchen. Dies ist jedoch nicht erforderlich.
Es ist nur das übliche UX-Muster. Die Reihe "Formulare lernen" enthält Informationen zum Formulardesign.
Bei Gruppen von Optionsfeldern und Kästchen gibt das Label den zugänglichen Namen der Formularsteuerung an, mit der es verknüpft ist. Die Gruppe der Steuerelemente und ihre Labels benötigen jedoch auch ein Label. Gruppieren Sie alle Elemente in einem <fieldset>, um die Gruppe mit einem Label zu versehen. Dabei stellt <legend> das Label für die Gruppe bereit.
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<label>
<input type="radio" value="blendan" name="machine"> Blendan Smooth
</label>
</li>
<li>
<label>
<input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
</label>
</li>
<li>
<label>
<input type="radio" value="toasty" name="machine"> Toasty McToastface
</label>
</li>
</ul>
</fieldset>
In diesem Beispiel kennzeichnet jedes implizite <label> ein Optionsfeld und <legend> stellt das Label für die Gruppe von Optionsfeldern bereit.
Ein <fieldset> in einem anderen <fieldset> zu verschachteln ist Standard. Wenn ein Formular beispielsweise eine Umfrage mit vielen Fragen ist, die in Gruppen ähnlicher Fragen unterteilt sind, kann das <fieldset>-Element „Lieblingsschüler“ in einem anderen <fieldset>-Element namens „Meine Favoriten“ verschachtelt sein:
<fieldset>
<legend>Your favorites:</legend>
<ul start="6">
<li>
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<!-- the rest of the code here -->
Die Standarddarstellung dieser Elemente hat zu einer unzureichenden Verwendung geführt, allerdings können <legend> und <fieldset> mit CSS gestaltet werden.
Neben allen globalen Attributen unterstützt <fieldset> auch die Attribute name, disabled und form.
Wenn Sie einen Feldsatz deaktivieren, werden alle verschachtelten Formularsteuerelemente deaktiviert. Weder die Attribute name noch die Attribute form werden bei <fieldset> häufig verwendet. Über name kann mit JavaScript auf den Feldsatz zugegriffen werden. Der Feldsatz selbst ist jedoch nicht in den gesendeten Daten enthalten (die darin verschachtelten benannten Formularsteuerelemente sind enthalten).
Eingabetypen und dynamische Tastatur
Wie bereits erwähnt, gibt es 22 verschiedene Arten von Eingaben.
Wenn ein Nutzer ein Gerät mit einer dynamischen Tastatur verwendet, die nur bei Bedarf angezeigt wird, z. B. ein Smartphone, bestimmt der verwendete Eingabetyp in einigen Fällen den Typ der angezeigten Tastatur. Die angezeigte Standardtastatur kann für den erforderlichen Eingabetyp optimiert werden.
Bei Eingabe von tel wird beispielsweise eine Tastatur angezeigt, die für die Eingabe von Telefonnummern optimiert ist. email enthält @ und . und die dynamische Tastatur für url enthält einen Doppelpunkt und einen Schrägstrich. Leider verwendet das iPhone immer noch nicht : in der standardmäßigen dynamischen Tastatur für url-Eingabetypen.
Tastaturen für <input type="tel"> auf einem iPhone und zwei verschiedenen Android-Smartphones:
Tastaturen für <input type="email"> auf einem iPhone und zwei verschiedenen Android-Smartphones:
Zugriff auf Mikrofon und Kamera
Der Dateieingabetyp <input type="file"> ermöglicht das Hochladen von Dateien über Formulare. Dateien können einen beliebigen Typ haben, der durch das Attribut accept definiert und begrenzt wird. Die Liste der zulässigen Dateitypen kann eine durch Kommas getrennte Liste von Dateierweiterungen, ein globaler Typ oder eine Kombination aus globalen Typen und Erweiterungen sein. accept="video/*, .gif" akzeptiert beispielsweise alle Videodateien oder animierten GIFs.
Verwenden Sie „audio/*“ für Audiodateien, „video/*“ für Videodateien und „image/*“ für Bilddateien.
Das Aufzählungsattribut capture, das in der Spezifikation zur Medienaufnahme definiert ist, kann verwendet werden, wenn eine neue Mediendatei mit der Kamera oder dem Mikrofon des Nutzers erstellt werden soll. Du kannst den Wert für die Eingabegeräte für Nutzer auf user oder für die Rückkamera oder das Mikrofon des Smartphones auf environment setzen. Im Allgemeinen funktioniert die Verwendung von capture ohne Wert, da der Nutzer das gewünschte Eingabegerät auswählen kann.
<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
Integrierte Validierung
Ohne JavaScript kann HTML verhindern, dass Formulare mit ungültigen Werten gesendet werden.
Es gibt einige CSS-Selektoren, die Formularsteuerungen basierend auf dem Vorhandensein von HTML-Attributen zuordnen. Dazu gehören :required und :optional, wenn der boolesche Wert required festgelegt ist oder nicht; :default, wenn checked hartcodiert ist; und :enabled oder :disabled, je nachdem, ob das Element vorhanden ist und :disabled :disabled, je nachdem, ob das Element interaktiv ist und ob {1.2/Attribut {2.3.disabled Die Pseudoklasse :read-write gleicht Elemente mit contenteditable-Set- und Formularsteuerelementen ab, die standardmäßig bearbeitet werden können, z. B. die Eingabetypen number, password und text (aber keine Kästchen, Optionsfelder oder den Typ hidden). Wenn für ein Element, das normalerweise beschreibbar ist, das Attribut readonly festgelegt ist, entspricht es stattdessen :read-only.
Wenn der Nutzer Informationen in die Formularsteuerelemente eingibt, werden die CSS-UI-Selektoren, einschließlich :valid, :invalid, :in-range und :out-of-range, je nach Status ein- und ausgeschaltet. Wenn der Nutzer eine Formularsteuerung schließt, wird entweder die noch nicht vollständig unterstützte Pseudoklasse :user-invalid oder die Pseudoklasse :user-valid übereinstimmen.
Mithilfe von CSS können Sie Hinweise darauf bereitstellen, ob Steuerelemente für Formulare erforderlich und gültig sind, wenn der Nutzer mit dem Formular interagiert. Sie können sogar CSS verwenden, um zu verhindern, dass Nutzer auf die Schaltfläche „Senden“ klicken können, bis das Formular gültig ist:
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
Dieses CSS-Snippet ist ein Anti-Muster. Auch wenn Ihre Benutzeroberfläche intuitiv und klar erscheint, versuchen viele Nutzer, ein Formular einzureichen, um Fehlermeldungen zu erhalten. Wenn eine Schaltfläche zum Senden auf diese Weise deaktiviert erscheint, ist keine Überprüfung der Einschränkung möglich, ein Feature, auf das sich viele Nutzer verlassen.
Der angewendete CSS-Code wird fortlaufend anhand des aktuellen Status der Benutzeroberfläche aktualisiert. Wenn Sie beispielsweise Eingabetypen mit Einschränkungen wie email, number, url und Datumstypen einschließen und der Wert nicht null (nicht leer) ist und der aktuelle Wert keine gültige E-Mail-Adresse, Zahl, URL, Datum oder Uhrzeit ist, wird die :invalid-CSS-Pseudoklasse als Übereinstimmung eingestuft. Diese konstante Aktualisierung unterscheidet sich von der integrierten Validierung von HTML-Einschränkungen, die nur erfolgt, wenn der Nutzer versucht, das Formular zu senden.
Die integrierte Einschränkungsvalidierung ist nur für Einschränkungen relevant, die mit HTML-Attributen festgelegt wurden. Sie können ein Element basierend auf den Pseudoklassen :required und :valid/:invalid gestalten. Die vom Browser ausgegebenen Fehlermeldungen, die auf Fehler in den Attributen required, pattern, min, max und sogar type zurückzuführen sind, werden aber beim Senden des Formulars ausgegeben.
Wenn wir versuchen, das Formular zu senden, ohne den gewünschten Schüler/Studenten auszuwählen, verhindert die Einschränkungsvalidierung das Senden des Formulars aufgrund eines validityState.valueMissing-Fehlers.
Wenn eines der validityState-Properties true zurückgibt, wird die Übertragung blockiert und der Browser zeigt im ersten falschen Formularsteuerelement eine Fehlermeldung an, um den Fokus zu rücken. Wenn der Nutzer eine Formularübermittlung aktiviert und ungültige Werte vorhanden sind, wird für das erste ungültige Formularsteuerelement eine Fehlermeldung angezeigt und der Fokus liegt auf dem Fokus. Wenn für ein erforderliches Steuerelement kein Wert festgelegt ist, ein numerischer Wert außerhalb des zulässigen Bereichs liegt oder ein Wert nicht dem für das Attribut type erforderlichen Typ entspricht, wird das Formular nicht validiert und das Formular wird nicht gesendet, und eine Fehlermeldung wird angezeigt.
Wenn ein number-, Datums- oder Uhrzeitwert unter dem minimalen min-Wert oder über dem maximalen max-Satz liegt, ist die Steuerung :out-of-range (und :invalid) und der Nutzer wird über den Fehler valididityState.rangeUnderflow validityState.rangeOverflow informiert, wenn er versucht, das Formular zu senden. Wenn der Wert nicht mit dem step-Wert übereinstimmt, unabhängig davon, ob er explizit festgelegt oder standardmäßig auf 1 gesetzt ist, ist das Steuerelement :out-of-range (und :invalid) und es wird der Fehler validityState.stepMismatch ausgegeben. Der Fehler wird als Infofeld angezeigt und enthält standardmäßig hilfreiche Informationen zur Behebung des Fehlers.
Es gibt ähnliche Attribute für die Länge von Werten: Die Attribute minlength und maxlength weisen den Nutzer bei der Übermittlung auf einen Fehler mit validityState.tooLong oder validityState.tooShort hin.
Das maxlength verhindert außerdem, dass der Nutzer zu viele Zeichen eingibt.
Die Verwendung des Attributs maxlength kann zu einer schlechten Nutzererfahrung führen. Im Allgemeinen ist es besser, dem Nutzer die Möglichkeit zu geben, mehr als die zulässige Zeichenlänge einzugeben, indem ein Zähler bereitgestellt wird – optional in Form eines <output>-Elements, das nicht mit dem Formular gesendet wird. So kann der Text so lange bearbeitet werden, bis die Ausgabe anzeigt, dass die maximal zulässige Länge nicht überschritten wurde. Sie können das maxlength-Objekt in Ihren HTML-Code einfügen. Wie alles, was wir besprochen haben, funktioniert auch dieser ohne JavaScript. Anschließend kann beim Laden der Wert des Attributs maxlength verwendet werden, um diesen Zeichenzähler in JavaScript zu erstellen.
Einige Eingabetypen scheinen Standardeinschränkungen zu haben, aber nicht. Der Eingabetyp tel ermöglicht beispielsweise eine numerische Wähltastatur auf Geräten mit dynamischer Tastatur, schränkt jedoch keine gültigen Werte ein. Für diesen und andere Eingabetypen gibt es das Attribut pattern. Sie können einen regulären Ausdruck angeben, dem der Wert entsprechen muss, um als gültig zu gelten.
Wenn ein Wert ein leerer String ist und der Wert nicht erforderlich ist, wird kein validityState.patternMismatch-Fehler verursacht. Falls erforderlich und leer, wird dem Nutzer die Standardfehlermeldung für validityState.valueMissing statt patternMismatch angezeigt.
Für E-Mails ist validityState.typeMismatch für Ihre Anforderungen wahrscheinlich zu nachsichtig. Sie sollten das Attribut pattern verwenden, damit Intranet-E-Mail-Adressen ohne TLD nicht als gültig anerkannt werden.
Das Attribut „pattern“ ermöglicht die Bereitstellung eines regulären Ausdrucks, dem der Wert entsprechen muss. Wenn eine Musterübereinstimmung erforderlich ist, sollte für den Nutzer sehr klar sein, was erwartet wird.
All dies ist ohne eine einzige Zeile JavaScript möglich. Da es sich um eine HTML API handelt, können Sie mit JavaScript benutzerdefinierte Nachrichten während der Einschränkungsvalidierung einbinden. Sie können auch JavaScript verwenden, um die Anzahl der noch verfügbaren Zeichen zu aktualisieren, eine Fortschrittsleiste für die Passwortstärke anzuzeigen oder andere Möglichkeiten zur dynamischen Verbesserung der Vervollständigung zu verwenden.
Beispiel
Dieses Beispiel enthält ein Formular innerhalb einer <dialog> mit einem verschachtelten <form>-Element mit drei Formularsteuerelementen und zwei Sendeschaltflächen mit klaren Labels und Anleitungen.
Mit der ersten Schaltfläche zum Senden wird das Dialogfeld geschlossen. Verwenden Sie formmethod="dialog", um die Standardmethode des Formulars zu überschreiben und schließen Sie <dialog>, ohne die Daten zu senden oder zu löschen. Sie müssen auch formnovalidate angeben. Andernfalls prüft der Browser, ob alle Pflichtfelder einen Wert haben. Der Nutzer möchte möglicherweise das Dialogfeld und das Formular schließen, ohne Daten einzugeben. Eine Validierung würde dies verhindern. Geben Sie aria-label="close" an, da „X“ ein bekannter visueller Hinweis, aber kein beschreibendes Label ist.
Die Formularsteuerelemente haben alle implizite Labels, sodass Sie keine id- oder for-Attribute angeben müssen. Die Eingabeelemente haben beide das erforderliche Attribut, wodurch sie erforderlich sind. In der Zahleneingabe ist die step explizit festgelegt, um zu zeigen, wie step enthalten ist. Da step standardmäßig auf 1 festgelegt ist, kann dieses Attribut weggelassen werden.
<select> hat einen Standardwert, sodass das Attribut required nicht benötigt wird. Anstatt das Attribut value für jede Option anzugeben, wird standardmäßig der innere Text verwendet.
Mit der Schaltfläche „Senden“ am Ende wird die Formularmethode auf „POST“ gesetzt. Wenn Sie darauf klicken, wird die Gültigkeit jedes einzelnen Werts überprüft. Wenn alle Werte gültig sind, werden die Formulardaten gesendet, das Dialogfeld wird geschlossen und die Seite wird möglicherweise zur Aktions-URL thankyou.php weitergeleitet. Wenn Werte fehlen oder der numerische Wert einen nicht übereinstimmenden Schritt aufweist oder außerhalb des Bereichs liegt, wird eine entsprechende browserdefinierte Fehlermeldung angezeigt, das Formular wird nicht gesendet und das Dialogfeld wird nicht geschlossen.
Die Standardfehlermeldungen können mit der Methode validityState.setCustomValidity('message here') angepasst werden. Wenn Sie eine benutzerdefinierte Nachricht festlegen, muss die Nachricht explizit auf einen leeren String gesetzt werden, wenn alles gültig ist. Andernfalls wird das Formular nicht gesendet.
Weitere Aspekte
Es gibt einen ganzen Abschnitt, der Nutzern dabei hilft, die richtigen Daten in Formulare einzugeben. Für eine gute Nutzerfreundlichkeit ist es wichtig, dass Nutzer keine Fehler machen, indem Sie bei Bedarf Anleitungen und Hinweise bereitstellen. In diesem Abschnitt wird beschrieben, wie HTML allein die Validierung clientseitig bereitstellen kann. Die Validierung muss jedoch sowohl clientseitig als auch serverseitig erfolgen. Die Validierung kann auf unaufdringliche Weise beim Ausfüllen des Formulars erfolgen, beispielsweise durch Hinzufügen eines Häkchens, wenn der Wert korrekt ist. Geben Sie jedoch keine Fehlermeldungen an, bevor die Formularsteuerung abgeschlossen ist. Wenn der Nutzer einen Fehler macht, teilen Sie ihm mit, wo der Fehler ist und was er falsch gemacht hat.
Beim Erstellen von Formularen ist es wichtig zu berücksichtigen, dass nicht jeder wie Sie ist. Ein Nutzer kann nur einen Buchstaben als Nachname (oder gar keinen Nachnamen) verwenden, hat keine Postleitzahl, eine dreizeilige Adresse oder keine Adresse. Möglicherweise sieht er sich eine übersetzte Version Ihres Formulars an.
Formularsteuerelemente, ihre Labels und Fehlermeldungen sollten auf dem Bildschirm sichtbar, korrekt und aussagekräftig, programmatisch bestimmbar und programmatisch mit dem entsprechenden Formularelement oder der entsprechenden Formulargruppe verknüpft sein. Das Attribut autocomplete kann und sollte verwendet werden, um das Ausfüllen von Formularen zu beschleunigen und die Zugänglichkeit zu verbessern.
HTML stellt alle Tools bereit, um grundlegende Formularsteuerelemente zugänglich zu machen. Je interaktiver ein Formularelement oder ein Prozess ist, desto mehr Aufmerksamkeit muss der Barrierefreiheit im Hinblick auf Fokusmanagement, Festlegung und Aktualisierung von ARIA-Namen, Rollen und Werten, falls erforderlich, sowie ARIA-Live-Ankündigungen nach Bedarf geschenkt werden. Aber wie wir hier gelernt haben, können Sie allein mit HTML Ihr Ziel der Zugänglichkeit und Gültigkeit erreichen, ohne auf ARIA oder JavaScript zurückzugreifen.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Formulare.
Wie können Sie dafür sorgen, dass Optionsfelder zur selben Gruppe gehören?
name-Attribut zuweisen.id-Attribut zuweisen.Mit welchem HTML-Element wird dem Nutzer mitgeteilt, wofür dieses Formularfeld gedacht ist?
<h1><title><label>