Auf Formularereignisse antworten
Sie können JavaScript verwenden, um auf Nutzerinteraktionen in Ihrem Formular zu reagieren, zusätzliche Formularfelder anzuzeigen, ein Formular zu senden und vieles mehr.
Nutzern beim Ausfüllen zusätzlicher Formularsteuerelemente helfen
Stellen Sie sich vor, Sie haben ein Umfrageformular erstellt. Nachdem Nutzende eine Option
ausgewählt haben,
möchten Sie eine zusätzliche <input>
einblenden, damit Sie eine bestimmte Frage zur Auswahl stellen können.
Wie kann nur das relevante <input>
-Element angezeigt werden?
Du kannst ein <input>
nur dann mit JavaScript anzeigen lassen, wenn die zugehörige <input type="radio">
derzeit ausgewählt ist.
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
Sehen wir uns die
JavaScript-Code für die Demo
Sind Ihnen die Attribute aria-controls
und aria-expanded
aufgefallen?
Diese
ARIA-Attribute
, damit Screenreader-Nutzer erkennen können, wann ein zusätzliches Formularsteuerelement ein- oder ausgeblendet wird.
Sicherstellen, dass Nutzer ein Formular senden können, ohne eine Seite zu verlassen
Stellen Sie sich vor, Sie haben ein Kommentarformular. Wenn ein Leser einen Kommentar hinzufügt und das Formular absendet, wäre es ideal, wenn sie den Kommentar sofort sehen könnten, ohne dass die Seite aktualisiert werden muss.
Dazu warten Sie auf das Ereignis onsubmit
und verwenden dann event.preventDefault()
, um das Standardverhalten zu verhindern.
und senden Sie FormData
mithilfe der Fetch API.
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Dein Backend-Skript kann prüfen, ob eine POST
-Anfrage vom Browser zu stammen scheint
(mithilfe des action
-Attributs eines Formularelements, wobei method="post"
) oder aus JavaScript stammen,
wie z. B. eine fetch()
-Anfrage.
if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
// return JSON
} else {
// return HTML
}
Nutzer von Screenreadern immer über Änderungen an dynamischen Inhalten informieren.
Fügen Sie Ihrem HTML-Code ein Element mit dem Attribut aria-live="polite"
hinzu.
und aktualisieren den Inhalt des Elements nach einer Änderung.
Ändere zum Beispiel den Text zu „Dein Kommentar wurde erfolgreich gepostet“, nachdem ein Nutzer einen Kommentar abgegeben hat.
Weitere Informationen zu ARIA-Live-Regionen
Validierung mit JavaScript
Achten Sie darauf, dass die Fehlermeldungen zum Stil und zum Ton Ihrer Website passen.
Der Wortlaut der Standardfehlermeldungen ist je nach Browser unterschiedlich.
Wie erreichen Sie, dass allen Nutzenden
dieselbe Botschaft angezeigt wird,
und ob die Botschaft zum Stil und Ton Ihrer Website passt?
Verwenden Sie den setCustomValidity()
.
der Constraint Validation API
um eigene Fehlermeldungen zu definieren.
Nutzer in Echtzeit über Fehler informieren
Die integrierten HTML-Funktionen für die Formularvalidierung eignen sich hervorragend, um Nutzer zu benachrichtigen. zu ungültigen Formularfeldern vor, bevor die Daten an Ihr Backend gesendet werden. Wäre es nicht toll, Nutzende zu benachrichtigen, sobald sie ein Formularfeld verlassen?
Achten Sie auf das Ereignis
blur
-Ereignis, das ausgelöst wird, wenn ein Element den Fokus verliert, und das Element
ValidityState
-Oberfläche, um zu erkennen, 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 Nutzenden zu respektieren.
Erleichtern Sie Nutzern die Eingabe ihres Passworts, indem Sie ein <button>
einblenden, mit dem die Sichtbarkeit des eingegebenen Texts ein- oder ausgeschaltet werden kann.
Demo ansehen Aktivieren oder deaktivieren Sie die
Sichtbarkeit des eingegebenen Texts mit der Schaltfläche Passwort anzeigen <button>
.
So funktioniert's Wenn Sie auf Passwort anzeigen klicken,
ändert das Attribut type
des Passwortfelds von type="password"
in type="text"
und der Text <button>
in "Passwort ausblenden" geändert wird.
Die Schaltfläche Passwort anzeigen muss zugänglich sein.
Verbinden Sie <button>
mit <input type="password">
. Verwenden Sie dazu das Attribut aria-controls
.
So benachrichtigen Sie Nutzer von Screenreadern, ob das Passwort derzeit angezeigt 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 wissen, wann ein Passwort angezeigt wird und für andere Personen sichtbar ist, die auf ihren Bildschirm blicken.
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
Weitere Informationen zum Implementieren einer Option zum Anzeigen des Passworts