Codelab: Best Practices für Zahlungsformulare

Sam Dutton

In diesem Codelab erfahren Sie, wie Sie ein sicheres, barrierefreies und nutzerfreundliches Zahlungsformular erstellen.

Schritt 1: HTML wie vorgesehen verwenden

Verwenden Sie Elemente, die für die Aufgabe entwickelt wurden:

  • <form>
  • <section>
  • <label>
  • <input>, <select>, <textarea>
  • <button>

Wie Sie sehen, ermöglichen diese Elemente integrierte Browserfunktionen, verbessern die Barrierefreiheit und verleihen Ihrem Markup Bedeutung.

  • Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.

Sehen Sie sich den HTML-Code für Ihr Formular in index.html an.

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Es gibt <input> Elemente für Kartennummer, Karteninhaber, Ablaufdatum und Sicherheitscode. Sie sind alle in <section>-Elemente verpackt und haben jeweils ein Label. Die Schaltfläche Zahlung abschließen ist ein HTML-<button>. Später in diesem Codelab erfahren Sie mehr über die Browserfunktionen, auf die Sie über diese Elemente zugreifen können.

Klicken Sie auf App ansehen, um eine Vorschau des Zahlungsformulars aufzurufen.

  • Funktioniert das Formular so wie es ist?
  • Gibt es etwas, das Sie ändern würden, damit es besser funktioniert?
  • Wie sieht es auf Mobilgeräten aus?

Klicken Sie auf Quellcode ansehen, um zum Quellcode zurückzukehren.

Schritt 2: Design für Mobilgeräte und Computer

Das von Ihnen hinzugefügte HTML ist gültig, aber das Standard-Browser-Styling macht das Formular vor allem auf Mobilgeräten schwer zu bedienen. Sie sieht auch nicht besonders gut aus.

Sie müssen dafür sorgen, dass Ihre Formulare auf einer Vielzahl von Geräten gut funktionieren, indem Sie Ränder, Abstände und Schriftgrößen anpassen.

Kopieren Sie den gesamten CSS-Code unten und fügen Sie ihn in Ihre eigene css/main.css-Datei ein.

Das ist eine Menge CSS! Die wichtigsten Änderungen betreffen die Größen:

  • padding und margin werden Eingaben hinzugefügt.
  • font-size und andere Werte unterscheiden sich für unterschiedliche Größen des Darstellungsbereichs.

Wenn Sie fertig sind, klicken Sie auf App ansehen, um das Formular mit dem Design zu sehen. Außerdem sehen Sie, dass die Rahmen angepasst wurden und display: block; für Labels verwendet wird, sodass sie jeweils eine eigene Zeile haben und Eingaben die volle Breite einnehmen können. In den Best Practices für Anmeldeformulare werden die Vorteile dieses Ansatzes ausführlicher erläutert.

Mit der Auswahl :invalid wird angegeben, dass eine Eingabe einen ungültigen Wert hat. (Sie verwenden diese später im Codelab.)

Das Preisvergleichsportal ist für Mobilgeräte optimiert:

  • Das Standard-CSS gilt für Darstellungsbereiche, die weniger als 400px breit sind.
  • Mit Medienanfragen können Sie die Standardeinstellungen für Darstellungsbereiche überschreiben, die mindestens 400px breit sind, und dann noch einmal für Darstellungsbereiche, die mindestens 500px breit sind. Das sollte gut für kleinere Smartphones, Mobilgeräte mit größeren Displays und Computer funktionieren.

Wenn Sie für das Web entwickeln, müssen Sie auf verschiedenen Geräten und in verschiedenen Darstellungsbereichen testen. Das gilt vor allem für Formulare, da ein kleiner Fehler sie unbrauchbar machen kann. Sie sollten die CSS-Bruchpunkte immer so anpassen, dass sie gut mit Ihren Inhalten und Ihren Zielgeräten funktionieren.

  • Ist das gesamte Formular sichtbar?
  • Sind die Formularfelder groß genug?
  • Ist der gesamte Text lesbar?
  • Haben Sie Unterschiede zwischen der Verwendung eines echten Mobilgeräts und der Anzeige des Formulars im Gerätemodus in den Chrome-Entwicklertools festgestellt?
  • Mussten Sie die Markierungen anpassen?

Es gibt mehrere Möglichkeiten, Ihr Formular auf verschiedenen Geräten zu testen:

Schritt 3: Attribute hinzufügen, die Nutzern die Eingabe von Daten erleichtern

Ermöglichen Sie dem Browser, Eingabewerte zu speichern und automatisch auszufüllen, und gewähren Sie Zugriff auf sichere integrierte Zahlungs- und Validierungsfunktionen.

Fügen Sie dem Formular in Ihrer index.html-Datei Attribute hinzu, sodass es so aussieht:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Rufen Sie die App wieder auf und tippen oder klicken Sie auf das Feld Kartennummer. Je nach Gerät und Plattform wird möglicherweise eine Auswahl angezeigt, in der die für den Browser gespeicherten Zahlungsmethoden aufgeführt sind, wie unten dargestellt.

Zwei Screenshots eines Zahlungsformulars in Chrome auf einem Android-Smartphone Auf dem einen ist die integrierte Auswahl für Zahlungskarten im Browser zu sehen, auf dem anderen Platzhalter mit automatisch ausgefüllten Werten.
Integrierte Auswahl und Autofill-Funktion für Browserzahlungen

Nachdem Sie eine Zahlungsmethode ausgewählt und Ihren Sicherheitscode eingegeben haben, füllt der Browser das Formular automatisch mit den autocomplete-Werten der Zahlungskarte aus, die Sie dem Formular hinzugefügt haben:

  • cc-number
  • cc-name
  • cc-exp
  • cc-csc

Viele Browser prüfen und bestätigen auch die Gültigkeit von Kreditkartennummern und Sicherheitscodes.

Auf einem Mobilgerät wird außerdem eine Zifferntastatur angezeigt, sobald Sie auf das Feld Kartennummer tippen. Das liegt daran, dass Sie inputmode="numeric" verwendet haben. Bei numerischen Feldern erleichtert dies die Eingabe von Zahlen und macht die Eingabe nicht numerischer Zeichen unmöglich. Außerdem werden Nutzer daran erinnert, welche Art von Daten sie eingeben.

Es ist äußerst wichtig, Zahlungsformularen alle verfügbaren autocomplete-Werte hinzuzufügen. Es kommt häufig vor, dass auf Websites der autocomplete-Wert für das Ablaufdatum der Karte und andere Felder fehlen. Wenn ein einzelner autofill-Wert falsch oder fehlt, müssen Nutzer ihre tatsächliche Karte abrufen, um die Kartendaten manuell einzugeben. In diesem Fall entgeht Ihnen möglicherweise ein Verkauf. Wenn die automatische Vervollständigung in Zahlungsformularen nicht richtig funktioniert, können Nutzer auch die Zahlungskartendaten auf ihrem Smartphone oder Computer speichern, was sehr unsicher ist.

Reichen Sie das Zahlungsformular mit einem leeren Feld ein. Der Browser fordert Sie auf, fehlende Daten zu ergänzen. Fügen Sie dem Wert im Feld Kartennummer einen Buchstaben hinzu und versuchen Sie noch einmal, das Formular zu senden. Der Browser warnt, dass der Wert ungültig ist. Das liegt daran, dass Sie mit dem Attribut pattern gültige Werte für ein Feld angegeben haben. Das gilt auch für maxlength und andere Gültigkeitsbeschränkungen. JavaScript ist nicht erforderlich.

Ihr Zahlungsformular sollte jetzt so aussehen:

  • Entfernen Sie die autocomplete-Werte und füllen Sie das Zahlungsformular aus. Welche Schwierigkeiten haben Sie?
  • Zahlungsformulare in Onlineshops ausprobieren Überlegen Sie, was gut funktioniert und was nicht. Gibt es häufig auftretende Probleme oder Best Practices, die Sie beachten sollten?

Schritt 4: Zahlungsschaltfläche deaktivieren, nachdem das Formular gesendet wurde

Sie sollten eine Schaltfläche zum Senden deaktivieren, nachdem der Nutzer darauf getippt oder geklickt hat, insbesondere wenn er eine Zahlung ausführt. Viele Nutzer tippen oder klicken wiederholt auf Schaltflächen, auch wenn sie ordnungsgemäß funktionieren. Das kann zu Problemen bei der Zahlungsabwicklung führen und die Serverlast erhöhen.

Fügen Sie der Datei js/main.js das folgende JavaScript hinzu:

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

Versuchen Sie, das Zahlungsformular einzureichen, und sehen Sie, was passiert.

Ihr Code sollte jetzt so aussehen, mit einigen Kommentaren und einer validate()-Funktion:

  • Sie sehen, dass der JavaScript-Code kommentierten Code für die Datenvalidierung enthält. In diesem Code wird die Constraint Validation API (die weithin unterstützt wird) verwendet, um eine benutzerdefinierte Validierung hinzuzufügen. Dabei wird auf die integrierte Browseroberfläche zugegriffen, um den Fokus festzulegen und Aufforderungen anzuzeigen. Entfernen Sie die Kommentare und testen Sie den Code. Sie müssen geeignete Werte für someregex und message sowie einen Wert für someField festlegen.

  • Welche Analyse- und Real User Monitoring-Daten würden Sie erfassen, um Möglichkeiten zur Verbesserung Ihrer Formulare zu ermitteln?

Ihr vollständiges Zahlungsformular sollte jetzt so aussehen:

Weiterführende Informationen

Die folgenden wichtigen Formularfunktionen werden in diesem Codelab nicht behandelt:

  • Link zu Ihren Nutzungsbedingungen und Ihrer Datenschutzerklärung: Informieren Sie die Nutzer darüber, wie Sie ihre Daten schützen.

  • Stil und Branding: Achten Sie darauf, dass diese zum Rest Ihrer Website passen. Beim Eingeben von Namen und Adressen und bei der Zahlung müssen sich Nutzer sicher fühlen und darauf vertrauen, dass sie sich noch an der richtigen Stelle befinden.

  • Analysen und Monitoring echter Nutzer: Mit dieser Funktion können die Leistung und Nutzerfreundlichkeit Ihres Formulardesigns für echte Nutzer getestet und beobachtet werden.