JavaScript

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.

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

Ressourcen

• FormData
• Constraint Validation API
• <input type="password">