Auf Formularereignisse reagieren
Sie können JavaScript verwenden, um auf Nutzerinteraktionen in Ihrem Formular zu reagieren, zusätzliche Formularfelder einzublenden, ein Formular zu senden und vieles mehr.
Nutzern beim Ausfüllen zusätzlicher Steuerelemente für Formulare helfen
Stellen Sie sich vor, Sie haben ein Umfrageformular erstellt. Nachdem ein Nutzer eine Option ausgewählt hat, soll zusätzlich <input> angezeigt werden, um eine bestimmte Frage zu der Auswahl zu stellen.
Wie können Sie nur das relevante <input>-Element anzeigen lassen?
Du kannst JavaScript verwenden, um ein <input> nur dann anzuzeigen, wenn das zugehörige <input type="radio"> derzeit ausgewählt ist.
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
Sehen wir uns den JavaScript-Code für die Demo an.
Sind Ihnen die Attribute aria-controls und aria-expanded aufgefallen?
Verwenden Sie diese ARIA-Attribute, damit Nutzer von Screenreadern erkennen können, wann eine zusätzliche Formularsteuerung ein- oder ausgeblendet wird.
Dafür sorgen, dass Nutzer ein Formular senden können, ohne eine Seite zu verlassen
Angenommen, Sie haben ein Kommentarformular. Wenn ein Leser einen Kommentar hinzufügt und das Formular absendet, wäre es ideal, wenn er den Kommentar sofort und ohne Seitenaktualisierung sehen könnte.
Dazu warten Sie auf das Ereignis onsubmit, verwenden dann event.preventDefault(), um das Standardverhalten zu verhindern, und senden Sie das FormData mit der Fetch API.
Das Back-End-Skript kann prüfen, ob eine POST-Anfrage anscheinend vom Browser (z. B. mit dem Attribut action eines Formularelements, wobei method="post") oder von JavaScript, z. B. einer fetch()-Anfrage, stammt.
if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
// return JSON
} else {
// return HTML
}
Benachrichtigen Sie Nutzer von Screenreadern immer über Änderungen an dynamischen Inhalten.
Fügen Sie dem HTML-Code ein Element mit dem Attribut aria-live="polite" hinzu und aktualisieren Sie den Inhalt des Elements nach einer Änderung.
Ändere beispielsweise den Text zu „Dein Kommentar wurde erfolgreich gepostet“, nachdem ein Nutzer einen Kommentar abgegeben hat.
Weitere Informationen zu Live-Regionen in ARIA
Validierung mit JavaScript
Sicherstellen, dass Fehlermeldungen zum Stil und Ton Ihrer Website passen
Der Wortlaut der Standard-Fehlermeldungen unterscheidet sich je nach Browser.
Wie können Sie dafür sorgen, dass allen Nutzern dieselbe Mitteilung angezeigt wird und sie zum Stil und Ton Ihrer Website passt?
Mit der Methode setCustomValidity() der Constraint Validation API können Sie eigene Fehlermeldungen definieren.
Nutzer in Echtzeit über Fehler informieren
Die integrierten HTML-Funktionen für die Formularvalidierung eignen sich hervorragend, um Nutzer über ungültige Formularfelder zu informieren, bevor die Daten an Ihr Back-End gesendet werden. Wäre es nicht hilfreich, Nutzende zu benachrichtigen, sobald sie ein Formularfeld verlassen?
Prüfen Sie das Ereignis blur, das ausgelöst wird, wenn ein Element den Fokus verliert, und verwenden Sie die ValidityState-Oberfläche, um festzustellen, ob eine Formularsteuerung ungültig ist.
Sicherstellen, dass Nutzer das eingegebene Passwort sehen können
Der für <input type="password"> eingegebene Text ist standardmäßig verdeckt, um die Privatsphäre der Nutzer zu schützen.
Erleichtern Sie Nutzern die Eingabe ihres Passworts, indem Sie ein <button> einblenden, um die Sichtbarkeit des eingegebenen Texts ein- oder auszuschalten.
Demo ausprobieren Stellen Sie die Sichtbarkeit des eingegebenen Texts mithilfe von Passwort anzeigen <button> ein.
In diesem Artikel finden Sie ausführliche Informationen dazu. Durch Klicken auf Show Password (Passwort anzeigen) wird das Attribut type des Passwortfelds von type="password" in type="text" geändert und der Text <button> in „Passwort ausblenden“ geändert.
Es ist wichtig, die Schaltfläche Passwort anzeigen zugänglich zu machen.
Verbinden Sie <button> über das Attribut aria-controls mit <input type="password">.
Wenn Sie Screenreader-Nutzer darüber informieren möchten, ob das Passwort derzeit ein- oder ausgeblendet ist, verwenden Sie ein ausgeblendetes Element mit aria-live="polite" und ändern Sie den Text entsprechend.
Es ist wichtig, dass Nutzer von Screenreadern erkennen können, wann ein Passwort angezeigt wird und für andere Personen sichtbar ist, die auf ihren Bildschirm schauen.
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
Weitere Informationen zum Implementieren einer Option zum Anzeigen des Passworts