Die meisten Websites und Anwendungen enthalten ein Webformular. Witze auf Websites wie Websites<form>-Element enthalten.
Das HTML-<form>-Element gibt ein Landmark eines Dokuments an, das folgendes Element enthält:
Interaktive Steuerelemente für die Übermittlung von Informationen. In einem <form> finden Sie alle interaktiven (und nicht interaktiven)
aus den Formular-Steuerelementen.
HTML ist leistungsstark. In diesem Abschnitt geht es um die Möglichkeiten von HTML. Dabei geht es um die Möglichkeiten von HTML, die ohne Hinzufügen von JavaScript funktionieren. Die clientseitige Aktualisierung der Benutzeroberfläche mithilfe von Formulardaten erfordert im Allgemeinen CSS oder JavaScript, das hier nicht erläutert wird. Es gibt einen ganzen Learn Forms-Kurs. Wir werden diesen Abschnitt hier nicht kopieren, aber wir werden verschiedene Formularsteuerelemente und die HTML-Attribute, die sie unterstützen.
Mithilfe von Formularen können Nutzer mit Ihrer Website oder Anwendung interagieren, die eingegebenen Informationen validieren und
auf einen Server übertragen. Mithilfe von HTML-Attributen kann festgelegt werden, dass Nutzer Formularsteuerelemente auswählen oder einen Wert eingeben müssen. HTML-Datei
können bestimmte Kriterien definiert werden, denen der Wert entsprechen muss, um gültig zu sein. Wenn der Nutzer versucht, das Formular zu senden,
Alle Formularsteuerwerte durchlaufen eine clientseitige Validierung der Einschränkung und können die Übermittlung verhindern
bis die Daten den erforderlichen Kriterien entsprechen; ganz ohne JavaScript. Du kannst diese Funktion auch deaktivieren, indem du die novalidate aktivierst.
auf der <form> oder, häufiger, formnovalidate, auf einer Schaltfläche, wodurch die Formulardaten für den späteren Ausfüllen gespeichert werden
die Validierung verhindert.
Formulare senden
Formulare werden gesendet, wenn der Nutzer eine im Formular verschachtelte Schaltfläche aktiviert. Wenn Sie <input> für Schaltflächen verwenden,
„value“ ist 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 schließenden <button>-Tags. Eine Schaltfläche zum Senden kann auf zwei Arten geschrieben werden:
<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 Formulareingaben sowie eine Schaltfläche zum Senden. Es gibt jedoch
ein Formular zu senden.
Die Attribute des <form>-Elements legen die HTTP-Methode fest.
unter dem das Formular eingereicht wird, sowie die URL, unter der das eingereichte Formular verarbeitet wird. Ja, Formulare können gesendet, verarbeitet und
kann eine neue Seite ohne JavaScript geladen werden. Das <form>-Element ist so leistungsstark.
action und method des <form>-Elements
definieren die Attributwerte die URL, die die Formulardaten verarbeitet, bzw. die HTTP-Methode, mit der die Daten gesendet werden.
Standardmäßig werden die Formulardaten an die aktuelle Seite gesendet. Andernfalls geben Sie für das Attribut action die URL an, an die die Daten gesendet werden sollen.
Die gesendeten Daten bestehen aus Name/Wert-Paaren der verschiedenen Formularsteuerelemente des Formulars. Standardmäßig sind dabei alle
Steuerelemente, die im Formular eingebettet sind und die ein name haben. Mit dem Attribut form ist es jedoch möglich, Formularsteuerelemente
außerhalb von <form> und zum Weglassen von Formularsteuerelementen, die in <form> verschachtelt sind. Unterstützt in Formularsteuerelementen und <fieldset>,
Das Attribut form verwendet als Wert die id der Form, mit der das Steuerelement verknüpft ist, nicht unbedingt die Form, in der es
die verschachtelt ist. Das bedeutet, dass Formularsteuerelemente nicht physisch in einem <form> verschachtelt sein müssen.
Das Attribut method definiert das HTTP-Protokoll der Anfrage: in der Regel GET oder POST. Mit GET werden die Formulardaten als
Parameter-String aus name=value-Paaren, der an die URL der action angehängt wird.
Mit POST werden die Daten an den Hauptteil der HTTP-Anfrage angehängt. Beim Senden sicherer Daten wie Passwörter und Kreditkartendaten
verwenden, verwenden Sie immer POST.
Es gibt auch eine DIALOG-Methode. Wenn sich ein <form method="dialog"> in einem <dialog> befindet, wird das Dialogfeld durch Senden des Formulars geschlossen.
Es gibt ein Übermittlungsereignis, obwohl die Daten weder gelöscht noch eingereicht werden. Auch ohne JavaScript. Dies wird in
Abschnitt „Dialogfeld“. Da damit das Formular nicht gesendet wird, möchten Sie wahrscheinlich
Geben Sie sowohl formmethod="dialog" als auch formnovalidate auf der Schaltfläche „Senden“ an.
Formularschaltflächen können mehr als die zu Beginn dieses Abschnitts beschriebenen Attribute haben. Wenn die Schaltfläche ein formaction enthält,
formenctype-, formmethod-, formnovalidate- oder formtarget-Attribut – die Werte, die auf der Schaltfläche festgelegt sind, mit der das Formular aktiviert wird
haben Vorrang vor action, enctype, method und target
festgelegt am <form>. Die Einschränkungsprüfung erfolgt vor der Formulareinreichung, jedoch nur, wenn keine
formnovalidate für die aktivierte Schaltfläche zum Senden oder novalidate auf der <form>.
Um zu sehen, mit welcher Schaltfläche ein Formular gesendet wurde,
die Schaltfläche name. Schaltflächen ohne Namen oder Wert werden bei der Formulareinreichung nicht mit den Formulardaten gesendet.
Nach dem Absenden des Formulars
Wenn der Nutzer ein ausgefülltes Onlineformular sendet, werden die Namen und Werte der entsprechenden Formularsteuerelemente gesendet. Der Name ist der Wert des Attributs name. Die Werte stammen aus dem Inhalt des Attributs value oder dem Wert, der vom Nutzer eingegeben oder ausgewählt wurde. Der Wert von <textarea> ist der innere 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>
„Hoover Sukhdeep“ wird ausgewählt (oder nichts unternehmen, da der Browser standardmäßig den ersten Optionswert auswählt) Wenn Sie dann auf die Schaltfläche „Senden“ klicken, wird die Seite neu geladen, wobei die URL wie folgt festgelegt wird:
https://web.dev/learn/html/forms?student=hoover
Da die zweite Option kein value-Attribut hat, wird der innere Text als Wert eingereicht. Auswählen von "Blendan-Glättung"
Wenn Sie auf die Schaltfläche „Senden“ klicken, wird die Seite neu geladen. Dabei wird die URL wie folgt festgelegt:
https://web.dev/learn/html/forms?student=Blendan+Smooth
Wenn ein Formular gesendet wird, enthalten die gesendeten Informationen die Namen und Werte aller benannten Formularsteuerelemente, die ein name haben
außer für nicht ausgewählte Kontrollkästchen, nicht aktivierte Optionsfelder und die Namen und Werte aller anderen Schaltflächen als der,
hat das Formular eingereicht. Für alle anderen Formularsteuerelemente gilt Folgendes: Wenn das Formularsteuerelement einen Namen hat, aber kein Wert eingegeben oder standardmäßig festgelegt wurde,
Das name des Formularsteuerelements wird mit einem leeren Wert gesendet.
Es gibt 22 Eingabetypen, die wir also nicht alle abdecken können.
Beachten Sie jedoch, dass die Angabe eines Werts optional ist und oft keine gute Idee ist, wenn der Nutzer Informationen eingeben soll.
Für <input>-Elemente, bei denen der Nutzer den Wert nicht bearbeiten kann, sollten Sie immer einen Wert angeben, auch für Eingabedaten.
Elemente mit dem Typ hidden, radio, checkbox, submit, button und reset.
Die Verwendung eindeutiger names für Formularsteuerelemente vereinfacht die serverseitige Datenverarbeitung und wird empfohlen, indem Kästchen und
Optionsfelder als Ausnahmen von dieser Regel aus.
Optionsfelder
Falls Sie schon einmal bemerkt haben, dass beim Auswählen eines Optionsfelds innerhalb einer Gruppe von Optionsfeldern nur eines ausgewählt werden kann,
angegeben werden, liegt dies am Attribut name. Dieser Effekt wird generiert, indem jedes Optionsfeld
dasselbe name in einer Gruppe.
Ein name sollte für die Gruppe eindeutig sein: Wenn du versehentlich dasselbe name für zwei separate Gruppen verwendest und ein Optionsfeld auswählst,
Durch eine Schaltfläche in der zweiten Gruppe wird die Auswahl aller Elemente aufgehoben, die in der ersten Gruppe mit demselben name-Element getroffen wurden.
Mit dem Formular werden die name und die value des ausgewählten Optionsfelds gesendet. Achten Sie darauf, dass jedes Optionsfeld
Eine relevante (und in der Regel eindeutige) value. Die Werte der nicht ausgewählten Optionsfelder werden nicht gesendet.
Sie können auf einer Seite beliebig viele Optionsfeldgruppen erstellen. Jede Gruppe arbeitet unabhängig voneinander, solange jede Gruppe ein
Eindeutig für die Gruppe name.
Wenn Sie die Seite mit einem der Optionsfelder in einer ausgewählten Gruppe mit demselben Namen laden möchten, fügen Sie das Attribut checked ein.
Dieses Optionsfeld entspricht der CSS-Pseudoklasse :default.
auch wenn der Nutzer ein anderes
Radio auswählt. Das aktuell ausgewählte Optionsfeld stimmt mit dem :checked überein.
Pseudoklasse.
Wenn der Nutzer ein Optionsfeld aus einer Gruppe von Optionsfeldern auswählen muss, fügen Sie das Attribut required zu mindestens einem
der Steuerelemente. Wenn Sie required in ein Optionsfeld in einer Gruppe aufnehmen, wird für die Formulareinreichung eine Auswahl getroffen. Allerdings
muss nicht das Radio mit dem Attribut sein, das als gültig ausgewählt wird. Geben Sie außerdem deutlich in der <legend> an.
dass die Formularsteuerung erforderlich ist. Die Beschriftung der Gruppen von Optionsfeldern sowie der einzelnen Schaltflächen wird beschrieben.
.
Kästchen
Es gilt, dass alle Kästchen in einer Gruppe dieselbe name haben. Nur ausgewählte Kästchen haben die entsprechenden name und value
mit dem Formular gesendet werden. Wenn Sie mehrere Kästchen mit demselben Namen ausgewählt haben, wird derselbe Name mit
(hoffentlich) unterschiedliche Werte. Wenn Sie mehrere Formularsteuerelemente mit demselben Namen haben, auch wenn sie nicht alle Kontrollkästchen sind,
werden sie alle
durch kaufmännische Und-Zeichen getrennt.
Wenn Sie kein value in ein Kästchen einfügen, wird der Wert der ausgewählten Kästchen standardmäßig auf on gesetzt. Dies ist wahrscheinlich nicht der
hilfreich sind. Wenn Sie drei Kästchen mit dem Namen chk haben und alle angeklickt sind, ist das gesendete Formular nicht verständlich:
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
Wenn ein Kästchen erforderlich sein soll, fügen Sie das Attribut required hinzu. Informieren Sie den Nutzer immer dann, wenn ein Kästchen angeklickt werden muss oder
jedes Formularsteuerelement erforderlich ist. Wenn Sie required einem Kästchen hinzufügen, ist nur dieses Kästchen erforderlich. hat das keine Auswirkungen auf andere
mit demselben Namen.
Labels und Feldsätze
Damit Nutzende wissen, wie sie ein Formular ausfüllen müssen, muss das Formular zugänglich sein. Jedes Formularsteuerelement muss ein Label haben.
Sie möchten auch Gruppen von Formularsteuerelementen beschriften. Während einzelne Eingabe-, Auswahl- und Textbereiche mit <label> beschriftet sind,
Gruppen von Formularsteuerelementen werden durch den Inhalt von <legend> von
<fieldset>, mit denen sie gruppiert werden.
In den vorherigen Beispielen haben Sie vielleicht bemerkt, dass jedes Formularsteuerelement mit Ausnahme der Schaltfläche zum Senden ein <label> hatte. Etiketten
stellen Formularsteuerelemente mit barrierefreien Namen bereit. Der zugängliche Name der Schaltflächen basiert auf ihrem Inhalt oder Wert. Alle anderen
Für Formularsteuerelemente ist eine verknüpfte <label> erforderlich. Auch wenn kein entsprechendes Label vorhanden ist, werden die Formularsteuerelemente
aber Nutzende wissen nicht,
welche Informationen erwartet werden.
Um ein Formularsteuerelement explizit mit einem <label> zu verknüpfen, fügen Sie das for-Attribut in <label> ein: Der Wert ist der
id des Formularsteuerelements, mit dem es verknüpft ist.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
Die Verknüpfung von Labels mit Formularsteuerelementen hat mehrere Vorteile. Beschriftungen machen Steuerelemente für Screenreader zugänglich, indem und dem Steuerelement einen barrierefreien Namen geben. Labels sind auch „Trefferbereiche“. sie machen die Website nutzungsfreundlicher für Nutzende mit Feinmotorik durch eine größere Fläche. Wenn Sie eine Maus verwenden, klicken Sie auf eine beliebige Stelle auf dem Label "Ihr Name". Tun sodass die Eingabe im Mittelpunkt steht.
Wenn du implizite Labels angeben möchtest, füge das Formularsteuerelement zwischen dem öffnenden und dem schließenden <label>-Tag ein. Dies entspricht
sowohl für Screenreader als auch für Zeigergeräte zugänglich ist, bietet aber nicht den Stilaufhänger wie die explizite
.
<label>Your name
<input type="text" name="name">
</label>
Da Labels „Trefferbereiche“ sind, fügen Sie keine interaktiven Elemente innerhalb eines expliziten Labels oder andere interaktive Komponenten ein als das Formularsteuerelement mit Label in einem impliziten Label. Wenn Sie beispielsweise einen Link in ein Label einfügen, während der Browser den HTML-Code rendert, sind Ihre Nutzer verwirrt, wenn sie auf das Label klicken, um ein Formularsteuerelement aufzurufen, werden aber zu folgender URL weitergeleitet: eine neue Seite zu öffnen.
Im Allgemeinen steht <label> vor dem Formularsteuerelement, außer bei Optionsfeldern und Kästchen. Dies ist nicht erforderlich.
Es ist einfach das übliche UX-Muster. Die Reihe „Learn Forms“ enthält Informationen zum Formulardesign.
Bei Gruppen von Optionsfeldern und Kontrollkästchen gibt das Label den zugänglichen Namen für das Formularsteuerelement an, mit dem es verknüpft ist.
aber die Gruppe der Steuerelemente und ihre Labels benötigen ebenfalls ein Label. Gruppieren Sie alle Elemente in einem
<fieldset>, wobei <legend> das Label für die Gruppe bereitstellt.
<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 wird mit dem impliziten <label> jedes Label ein Optionsfeld und mit <legend> das Label für die Gruppe von Optionsfeldern festgelegt.
Das Verschachteln einer <fieldset> innerhalb einer anderen <fieldset> ist Standard. Wenn ein Formular z. B. eine Umfrage mit vielen Fragen ist,
die in Gruppen verwandter Fragen unterteilt sind, <fieldset> ist möglicherweise in einem anderen <fieldset> verschachtelt als
"Meine Favoriten":
<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 -->
Diese Elemente Standarddarstellungen haben zu einer Unterbeanspruchung geführt, aber <legend> und <fieldset> können mit CSS gestaltet werden.
Zusätzlich zu allen globalen Attributen unterstützt <fieldset> auch die Attribute name, disabled und form.
Wenn Sie einen Feldsatz deaktivieren, werden alle verschachtelten Formularsteuerelemente deaktiviert. Weder das name- noch das form-Attribut enthält
auf dem <fieldset> viel nutzen. Mit name kann mit JavaScript auf den Fieldset zugegriffen werden, aber der Fieldset selbst
ist nicht in den gesendeten Daten enthalten. Die benannten Formularsteuerelemente, die darin enthalten sind, sind eingeschlossen.
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, kann die Eingabe
verwendeter Typ bestimmt die Art der angezeigten Tastatur. Die angezeigte Standardtastatur kann für den erforderlichen Eingabetyp optimiert werden.
Wenn Sie beispielsweise tel eingeben, wird eine Tastatur angezeigt, die für die Eingabe von Telefonnummern optimiert ist. email enthält @ und .. und die
dynamische Tastatur für url besteht aus einem Doppelpunkt und einem Schrägstrich. Leider ist : immer noch nicht auf dem iPhone
Die standardmäßige dynamische Tastatur für die Eingabetypen url.
Tastaturen für <input type="tel"> auf iPhones und zwei verschiedenen Android-Smartphones:
Tastaturen für <input type="email"> auf iPhones 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 beliebiger Art, definiert und eingeschränkt sein
accept-Attribut verwendet. Die Liste der zulässigen Dateitypen kann eine kommagetrennte Liste von Dateiendungen, ein globaler Typ,
oder eine Kombination aus
allgemeinen Typen und Erweiterungen. Bei accept="video/*, .gif" werden beispielsweise alle Videodateien und animierten GIFs akzeptiert.
„audio/*“ verwenden für Sounddateien: „video/*“ für Videodateien und „image/*“ für Bilddateien.
Das Aufzählungsattribut capture, definiert in den
Media Capture-Spezifikation kann verwendet werden, wenn eine neue
mit der Kamera oder dem Mikrofon des Nutzers erstellt werden. Sie können den Wert für die an Nutzer gerichteten Eingabegeräte auf user setzen.
oder environment für die Kamera auf der Rückseite oder das Mikrofon. Im Allgemeinen funktioniert die Verwendung von capture ohne Wert, weil der Nutzer
welches Eingabegerät er verwenden möchte.
<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 wiederum verhindern, dass Formulare mit ungültigen Werten gesendet werden.
Es gibt einige CSS-Selektoren, die Formularsteuerelemente auf Grundlage von HTML-Attributen zuordnen, darunter :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 interaktiv ist und disabled
ist vorhanden. Die Pseudoklasse :read-write gleicht Elemente mit
contenteditable festgelegt und
Formularsteuerelemente, die standardmäßig bearbeitbar sind, wie z. B. number, password und text Eingabetypen (aber nicht das Kontrollkästchen,
Optionsfeldern oder dem Typ hidden). Wenn ein normalerweise beschreibbares Element das Zeichen readonly hat
festgelegt ist, wird er stattdessen mit :read-only übereinstimmen.
Wenn der Nutzer Informationen in Formularsteuerelemente eingibt, werden die CSS-UI-Selektoren wie :valid,
:invalid, :in-range und
:out-of-range wird je nach Status aktiviert und deaktiviert. Wenn Nutzende
schließt ein Formularsteuerelement, entweder das noch nicht vollständig unterstützte :user-invalid oder
:user-valid Pseudoklasse wird übereinstimmen.
Sie können CSS verwenden, um Hinweise darauf bereitzustellen, ob Formularsteuerelemente erforderlich und gültig sind, wenn der Nutzer mit dem Formular interagiert. Sie können CSS sogar 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;
}
Bei diesem CSS-Snippet handelt es sich um ein Anti-Muster. Auch wenn die Benutzeroberfläche intuitiv und übersichtlich erscheint, versuchen viele Nutzer, ein Formular bei Fehlermeldungen aktivieren. Wenn eine Schaltfläche zum Senden auf diese Weise deaktiviert erscheint, ist keine Validierung der Einschränkung möglich. Funktion, auf die sich viele Nutzende verlassen.
Angewendetes CSS wird fortlaufend auf der Grundlage des aktuellen Status der Benutzeroberfläche aktualisiert. Wenn Sie z. B. Eingabetypen mit
Einschränkungen wie email, number, url und Datumstypen, wenn der Wert ungleich null (nicht leer) ist und der aktuelle
Wert keine gültige E-Mail-Adresse, Nummer, URL, Datum oder Uhrzeit ist, wird die CSS-Pseudoklasse :invalid als Übereinstimmung gefunden. Diese Konstante
Die Aktualisierung unterscheidet sich von der integrierten Validierung der HTML-Einschränkung, die nur dann 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 werden. Sie können zwar Elemente auf der Grundlage
der Pseudoklassen :required und :valid/:invalid hat der Browser Fehlermeldungen ausgegeben, die auf Fehlern basieren,
die Attribute required, pattern, min, max und sogar type werden bei der Formulareinreichung bereitgestellt.
Wenn wir versuchen, das Formular zu senden, ohne den gewünschten bevorzugten Schüler/Studenten auszuwählen, wird durch die Einschränkungsvalidierung das Senden des Formulars verhindert.
Fehler (validityState.valueMissing).
Wenn eine der validityState-Eigenschaften true zurückgibt, wird die Übermittlung blockiert und der Browser zeigt eine Fehlermeldung an
in das erste falsche Formularsteuerelement, wodurch es fokussiert wird. Wenn der Nutzer ein Formular aktiviert und ungültige Werte vorhanden sind,
zeigt das erste ungültige Formularsteuerelement eine Fehlermeldung an und wird hervorgehoben. Wenn für ein erforderliches Steuerelement kein Wert festgelegt ist und ein
numerischer Wert liegt außerhalb des zulässigen Bereichs oder wenn ein Wert nicht dem für das Attribut type erforderlichen Typ entspricht, wird das Formular nicht validiert.
wird nicht gesendet und eine Fehlermeldung wird angezeigt.
Wenn ein number-, Datums- oder Uhrzeitwert unter der minimalen min-Einstellung oder über der maximalen max liegt, wird das Steuerelement :out-of-range (und :invalid) verwendet.
wird der Nutzer über valididityState.rangeUnderflow informiert.
validityState.rangeOverflow Fehler, wenn sie
versuchen Sie, das Formular zu senden. Wenn der Wert außerhalb des Schritts mit dem
step festlegen, ob explizit festgelegt oder der Standardwert 1 ist, ist das Steuerelement :out-of-range (und :invalid) und es ist ein
validityState.stepMismatch-Fehler. Der Fehler wird als Infofeld angezeigt und enthält standardmäßig hilfreiche Informationen zur Fehlerbehebung.
Es gibt ähnliche Attribute für die Länge von Werten: minlength
und maxlength-Attribute weist den Nutzer auf einen Fehler hin
mit validityState.tooLong oder
validityState.tooShort beim Einreichen.
Das maxlength verhindert außerdem, dass der Nutzer zu viele Zeichen eingibt.
Die Verwendung des Attributs maxlength kann zu einer schlechten Nutzererfahrung führen. Es ist im Allgemeinen besser, den Nutzenden
, um mehr als die zulässige Zeichenlänge einzugeben. Stellen Sie dabei einen Zähler bereit, optional in Form
<output>-Element, das nicht mit dem Formular eingereicht wird,
können sie den Text verkleinern, bis in der Ausgabe angezeigt wird, dass die maximal zulässige Länge nicht überschritten wurde. Das maxlength
im HTML-Code enthalten sein, auch ohne JavaScript. Beim Laden wird dann der Wert
Das Attribut "maxlength" (maxlength) kann verwendet werden, um diesen Zeichenzähler in JavaScript zu erstellen.
Einige Eingabetypen scheinen Standardeinschränkungen zu haben, aber das ist nicht der Fall. Der Eingabetyp tel stellt beispielsweise eine numerische
Telefontastatur auf Geräten mit dynamischen Tastaturen, beschränkt jedoch keine gültigen Werte. Für diese und andere Eingabetypen
gibt es das Attribut pattern. Sie können einen regulären Ausdruck angeben, mit dem der Wert als gültig erachtet werden muss.
Wenn ein Wert ein leerer String ist und nicht erforderlich ist, wird kein validityState.patternMismatch ausgelöst.
Fehler. Falls erforderlich und leer, wird dem Nutzer die Standardfehlermeldung für validityState.valueMissing angezeigt, statt
patternMismatch.
Bei E-Mails ist der validityState.typeMismatch wahrscheinlich auch
für Ihre Bedürfnisse zu verzeihen. Sie sollten pattern mit aufnehmen.
damit Intranet-E-Mail-Adressen ohne TLD nicht als gültig akzeptiert werden.
Das Musterattribut ermöglicht die Angabe eines regulären Ausdrucks, mit dem der Wert übereinstimmen muss. Wenn ein Musterabgleich erforderlich ist,
dass dem Nutzer klar ist, was von ihm erwartet wird.
All dies kann ohne eine einzige JavaScript-Zeile erreicht werden, aber da es sich um ein HTML-API handelt, können Sie JavaScript verwenden, um benutzerdefinierte Nachrichten erhalten. Sie können auch JavaScript verwenden, um die verbleibende Zeichenanzahl zu ändern, eine Fortschrittsanzeige für die Passwortstärke sowie andere Möglichkeiten zur dynamischen Verbesserung der Vervollständigung
Beispiel
Dieses Beispiel enthält ein Formular in einem <dialog> mit einem verschachtelten <form> mit drei Formularsteuerelementen und zwei Senden-Schaltflächen.
klare Beschriftungen und Anweisungen.
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 den
<dialog>, ohne die Daten zu senden oder zu löschen. Sie müssen auch formnovalidate angeben, da der Browser sonst
dass alle Pflichtfelder einen Wert enthalten. Der Nutzer möchte das Dialogfeld und das Formular schließen,
Daten eingeben würde dies verhindern. aria-label="close" einschließen, weil „X“ ist ein bekannter visueller Hinweis,
kein beschreibendes Label.
Alle Formularsteuerelemente haben implizite Labels, sodass Sie die Attribute id oder for nicht angeben müssen. Die Eingabeelemente
das erforderliche Attribut haben. In der Zahleneingabe ist step explizit festgelegt, um zu zeigen, wie step ist
enthalten. Da step standardmäßig auf 1 gesetzt ist, kann dieses Attribut weggelassen werden.
<select> hat einen Standardwert, der das Attribut required unnötig macht. Anstatt das Attribut value einzufügen
Bei jeder Option ist der Wert standardmäßig der innere Text.
Über die Schaltfläche „Senden“ am Ende wird die Formularmethode auf POST gesetzt. Beim Anklicken wird die Gültigkeit jedes Werts überprüft. Wenn alle
Werte gültig sind, die Formulardaten werden gesendet, das Dialogfeld wird geschlossen und die Seite wird möglicherweise zu thankyou.php weitergeleitet,
also die Aktions-URL. Wenn Werte fehlen, der numerische Wert nicht übereinstimmt oder außerhalb des zulässigen Bereichs liegt,
wird eine relevante browserdefinierte Fehlermeldung angezeigt, das Formular wird nicht gesendet und das Dialogfeld wird nicht geschlossen.
Die Standardfehlermeldungen können mit dem validityState.setCustomValidity('message here') angepasst werden.
. Wenn Sie eine benutzerdefinierte Nachricht festlegen, muss die Nachricht explizit auf den leeren String gesetzt werden, wenn alles
ist gültig. Andernfalls kann das Formular nicht gesendet werden.
Weitere Hinweise
Es gibt einen ganzen Abschnitt, in dem es darum geht, Nutzern die Eingabe der richtigen Daten in Formulare zu erleichtern. Immer User Experience ist es wichtig, die Nutzenden vor Fehlern zu schützen, indem Sie Anweisungen und Hinweise bei Bedarf angeben. In diesem Abschnitt wird beschrieben, wie HTML allein eine clientseitige Validierung ermöglichen kann. Die Validierung muss jedoch sowohl clientseitig als auch clientseitig erfolgen. serverseitig. Die Validierung kann auf unaufdringliche Weise beim Ausfüllen des Formulars erfolgen, z. B. durch Hinzufügen eines wenn der Wert korrekt ist. Geben Sie jedoch keine Fehlermeldungen an, bevor das Formularsteuerelement nicht vollständig ausgeführt wurde. Wenn der Nutzer macht einen Fehler und informiert die Nutzenden, wo der Fehler ist und was er falsch gemacht hat.
Beim Entwerfen von Formularen ist es wichtig zu bedenken, dass nicht jeder so ist wie Sie. Jemand kann einen einzelnen Buchstaben als Nachname oder keinen Nachnamen enthalten, hat keine Postleitzahl, kann eine dreizeilige Adresse haben, darf keine Adresse haben. Möglicherweise sehen sie eine übersetzte Version Ihres Formulars.
Formularsteuerelemente, ihre Labels und die Fehlermeldungen sollten programmgesteuert genau und aussagekräftig auf dem Bildschirm sichtbar und aussagekräftig sein.
bestimmbar und programmatisch mit dem entsprechenden Formularelement oder der entsprechenden Formulargruppe verknüpft sind. Die autocomplete
können und sollten verwendet werden, um ein schnelleres Ausfüllen von Formularen zu ermöglichen und die Barrierefreiheit zu verbessern.
HTML bietet alle Tools, mit denen grundlegende Formularsteuerelemente barrierefrei gemacht werden können. Je interaktiver ein Formularelement oder ein Prozess ist, desto mehr Wert muss der Barrierefreiheit im Hinblick auf Fokusmanagement, Festlegung und Aktualisierung von ARIA-Namen, -Rollen, und Werte und gegebenenfalls ARIA-Live-Ankündigungen. Aber wie wir hier gelernt haben, erhalten Sie mit HTML allein eine ohne auf ARIA oder JavaScript zurückgreifen zu müssen.
Wissen testen
Testen Sie Ihr Wissen über Formulare.
Wie sorgen Sie dafür, dass Optionsfelder zur selben Gruppe gehören?
name-Attributwert zu.id-Attributwert zu.Mit welchem HTML-Element teilen Sie dem Nutzer mit, wofür dieses Formularfeld gedacht ist?
<h1><title><label>