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>
<ph type="x-smartling-placeholder">
„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 name
s 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:
![iPhone-Tastatur, auf der „input type=tel“ angezeigt wird](https://web.dev/static/learn/html/forms/image/iphone-keyboard-showing-i-6aab374bde53b.png?authuser=0&hl=de)
![Android-Tastatur, auf der „input type=tel“ angezeigt wird](https://web.dev/static/learn/html/forms/image/android-keyboard-showing-b540d1c29ceb8.png?authuser=0&hl=de)
![Android-Tastatur, auf der „input type=tel“ angezeigt wird](https://web.dev/static/learn/html/forms/image/android-keyboard-showing-cbe2b843a60ff.png?authuser=0&hl=de)
Tastaturen für <input type="email">
auf iPhones und zwei verschiedenen Android-Smartphones:
![iPhone-Tastatur, auf der „input type=email“ angezeigt wird.](https://web.dev/static/learn/html/forms/image/iphone-keyboard-showing-i-e1d00606a1da7.png?authuser=0&hl=de)
![Android-Tastatur, auf der „input type=email“ angezeigt wird.](https://web.dev/static/learn/html/forms/image/android-keyboard-showing-38d69c5428aa4.png?authuser=0&hl=de)
![Android-Tastatur, auf der „input type=email“ angezeigt wird.](https://web.dev/static/learn/html/forms/image/android-keyboard-showing-ad6263a2a00fc.png?authuser=0&hl=de)
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>