Fehlende Formular-Absende-Schaltflächen

Jedes Formular benötigt eine ausdrückliche, auffindbare Möglichkeit, es abzusenden – eine echte <button type="submit"> oder <input type="submit">. Formulare, die nur über einen JavaScript-Handler abgesendet werden können, der an ein generisches, nicht absendendes Element gebunden ist (etwa ein gestyltes <div> mit onclick), können Tastaturnutzern keine zuverlässige Möglichkeit lassen, das Absenden überhaupt auszulösen, und lassen jeden Nutzer ohne ein klares, konventionelles Signal für "so schließe ich dieses Formular ab".

Warum ein echtes Absende-Steuerelement wichtig ist

Native Absende-Schaltflächen bringen eingebautes Verhalten mit, das leicht verloren geht, wenn ein Formular nur über benutzerdefiniertes JavaScript abgesendet wird: Das Drücken von Eingabe, während der Fokus in einem beliebigen Textfeld des Formulars liegt, löst automatisch eine echte Absende-Schaltfläche aus – ein Verhalten, das Nutzer von praktisch jedem Formular erwarten, das sie je ausgefüllt haben. Ein Formular, das nur über ein speziell angeklicktes benutzerdefiniertes Element absendet, bricht diese Erwartung – und wenn dieses benutzerdefinierte Element keine echte, per Tastatur fokussierbare Schaltfläche ist (siehe Tastaturunzugängliche Steuerelemente), haben Tastaturnutzer möglicherweise überhaupt keine Möglichkeit, abzusenden.

Die Lösung

<!-- Vorher: kein echtes Absende-Steuerelement, verlässt sich vollständig auf ein Skript, das einen Klick auf ein generisches div bindet -->
<form id="anmeldung">
  ...
  <div class="submit-btn" onclick="submitForm()">Anmelden</div>
</form>

<!-- Nachher: eine echte Absende-Schaltfläche -->
<form id="anmeldung">
  ...
  <button type="submit">Anmelden</button>
</form>

Eine echte <button type="submit"> kann weiterhin gestaltet werden, wie es das Design verlangt, und kann weiterhin benutzerdefiniertes JavaScript auslösen (über das submit-Ereignis des Formulars) – die Verwendung des korrekten Elements erfordert keinen Verzicht auf Kontrolle über Verhalten oder Aussehen.

Wo dies auftritt

Benutzerdefinierte Single-Page-App-Formulare und stark JavaScript-getriebene Checkout-Abläufe sind die häufigste Quelle – Teams, die die Formularübermittlung vollständig in JavaScript bauen, überspringen manchmal das native Absende-Element, weil die Ereignisbehandlung des Frameworks es für einen Mausnutzer nicht strikt zum Funktionieren benötigt, und übersehen dabei, dass es für volle Tastatur- und Eingabetaste-Unterstützung weiterhin erforderlich ist.

Offizielle Referenzen

• W3C Technique H32