Codelab: Best Practices für Zahlungsformulare

Sam Dutton

In diesem Codelab erfahren Sie, wie Sie ein sicheres, leicht zugängliches und nutzerfreundliches Zahlungsformular erstellen.

Schritt 1: HTML wie vorgesehen verwenden

Verwenden Sie für den Job erstellte Elemente:

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

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

  • Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.

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, Name auf der Karte, Ablaufdatum und Sicherheitscode. Sie sind alle in <section>-Elemente umschlossen und jedes hat ein Label. Die Schaltfläche Complete Payment (Zahlung abschließen) ist eine HTML-<button>. Später in diesem Codelab erfahren Sie mehr über die Browserfunktionen, auf die Sie mithilfe dieser Elemente zugreifen können.

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

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

Klicken Sie auf Quelltext anzeigen, um zu Ihrem Quellcode zurückzukehren.

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

Der von Ihnen hinzugefügte HTML-Code ist gültig, aber der Standard-Browserstil erschwert die Verwendung des Formulars, insbesondere auf Mobilgeräten. Sieht auch nicht besonders gut aus.

Sie müssen dafür sorgen, dass Ihre Formulare auf einer Reihe von Geräten gut funktionieren, indem Sie Abstände, Ränder 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 Faktoren sind die Größenänderungen:

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

Wenn Sie bereit sind, klicken Sie auf App ansehen, um das Formular mit benutzerdefinierten Stilen zu sehen. Sie werden auch feststellen, dass die Rahmen angepasst wurden. display: block; wird für Labels verwendet, sodass sie allein auf einer Zeile stehen und Eingaben über volle Breite erfolgen können. In den Best Practices für Anmeldeformulare werden die Vorteile dieses Ansatzes ausführlicher erläutert.

Mit der Auswahl :invalid wird angegeben, wenn eine Eingabe einen ungültigen Wert enthält. (Sie benötigen sie später im Codelab.)

Das CSS ist Mobile-First:

  • Der Standard-CSS-Code gilt für Darstellungsbereiche, die weniger als 400px breit sind.
  • Mit Medienabfragen wird die Standardeinstellung für Darstellungsbereiche, die mindestens 400px breit sind, und dann für Darstellungsbereiche, die mindestens 500px breit sind, überschrieben. Das sollte für kleinere Smartphones, Mobilgeräte mit größeren Bildschirmen und Desktops funktionieren.

Wenn Sie Apps für das Web erstellen, müssen Sie Tests mit verschiedenen Geräten und Größen des Darstellungsbereichs durchführen. Dies gilt insbesondere für Formulare, da eine kleine Störung sie unbrauchbar machen kann. Sie sollten CSS-Haltepunkte immer anpassen, damit sie gut mit Ihren Inhalten und Ihren Zielgeräten funktionieren.

  • Ist das gesamte Formular sichtbar?
  • Sind die Eingaben im Formular groß genug?
  • Ist der gesamte Text lesbar?
  • Hast du Unterschiede zwischen der Verwendung eines echten Mobilgeräts und der Ansicht des Formulars im Gerätemodus in den Chrome-Entwicklertools bemerkt?
  • Mussten Sie Haltepunkte anpassen?

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

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

Aktivieren Sie den Browser, um Eingabewerte zu speichern und automatisch auszufüllen, und gewähren Sie Zugriff auf sichere integrierte Zahlungs- und Validierungsfunktionen.

Fügen Sie dem Formular in der Datei index.html 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 noch einmal auf und tippen oder klicken Sie in das Feld Kartennummer. Je nach Gerät und Plattform wird eine Auswahl angezeigt, die für den Browser gespeicherte Zahlungsmethoden wie die folgende anzeigt.

Zwei Screenshots eines Zahlungsformulars in Chrome auf einem Android-Smartphone. Das eine zeigt die integrierte Browser-Zahlungskartenauswahlfunktion, das andere zeigt automatisch ausgefüllte Platzhalterwerte an.
Integrierter Browser zur Zahlungsauswahl und zum automatischen Ausfüllen.

Nachdem Sie eine Zahlungsmethode ausgewählt und den 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 überprüfen und bestätigen auch die Gültigkeit von Kreditkartennummern und Sicherheitscodes.

Auf einem Mobilgerät sehen Sie auch, dass eine numerische Tastatur angezeigt wird, sobald Sie in das Feld Kartennummer tippen. Das liegt daran, dass du inputmode="numeric" verwendet hast. Bei numerischen Feldern ist dies die Eingabe von Zahlen einfacher und die Eingabe nicht-numerischer Zeichen unmöglich. Außerdem werden Nutzer daran erinnert, sich an den Typ der Daten zu erinnern, die sie eingeben.

Es ist sehr wichtig, dass du den Zahlungsformularen alle verfügbaren autocomplete-Werte korrekt hinzufügst. Es kommt sehr häufig vor, dass auf Websites der autocomplete-Wert für das Ablaufdatum der Karte und andere Felder nicht angegeben werden. Wenn ein einzelner autofill-Wert falsch ist oder fehlt, müssen Nutzer ihre tatsächliche Karte abrufen, um Kartendaten manuell einzugeben, und du verlierst möglicherweise bei einem Verkauf. Wenn die Autofill-Funktion in Zahlungsformularen nicht richtig funktioniert, können Nutzer auch beschließen, die Zahlungskartendetails auf ihrem Smartphone oder Computer zu speichern. Dies ist äußerst unsicher.

Versuchen Sie, das Zahlungsformular mit einem leeren Feld zu senden. Der Browser fordert Sie auf, fehlende Daten zu vervollständigen. Fügen Sie dem Wert im Feld Kartennummer nun einen Buchstaben hinzu und versuchen Sie, das Formular einzureichen. Der Browser warnt dich, dass der Wert ungültig ist. Dies liegt daran, dass Sie mit dem Attribut pattern gültige Werte für ein Feld angegeben haben. Dasselbe gilt für maxlength und andere Validierungseinschränkungen. Es ist kein JavaScript erforderlich.

Ihr Zahlungsformular sollte nun wie folgt aussehen:

  • Entfernen Sie autocomplete Werte und füllen Sie das Zahlungsformular aus. Welche Schwierigkeiten betreten Sie?
  • Probieren Sie Zahlungsformulare in Onlineshops aus. Überlegen Sie, was gut funktioniert und was nicht. Gibt es allgemeine Probleme oder Best Practices, die Sie befolgen sollten?

Schritt 4: Schaltfläche „Zahlung“ nach dem Senden des Formulars deaktivieren

Sie sollten eine Senden-Schaltfläche deaktivieren, sobald der Nutzer darauf getippt oder angeklickt hat – insbesondere dann, wenn er eine Zahlung tätigt. Viele Nutzer tippen oder klicken wiederholt auf Schaltflächen, auch wenn sie einwandfrei funktionieren. Dies kann zu Problemen bei der Zahlungsabwicklung und zur Serverlast führen.

Fügen Sie der Datei js/main.js folgenden JavaScript-Code 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);
  }
}

Versuche, das Zahlungsformular einzureichen, und warte ab, was passiert.

So sollte Ihr Code zu diesem Zeitpunkt aussehen, wenn zusätzlich einige Kommentare und eine validate()-Funktion hinzugefügt werden:

  • Sie werden feststellen, dass der JavaScript-Code zur Datenvalidierung auskommentiert ist. In diesem Code wird die Constraint Validation API verwendet, die weit verbreitet wird, um eine benutzerdefinierte Validierung hinzuzufügen. Dabei wird auf die integrierte Browser-UI zugegriffen, um den Fokus festzulegen und Aufforderungen anzuzeigen. Entfernen Sie die Kommentarzeichen des Codes und probieren Sie es aus. Sie müssen die entsprechenden Werte für someregex und message sowie einen Wert für someField festlegen.

  • Welche Analyse- und echten Nutzerüberwachungsdaten würden Sie beobachten, um Möglichkeiten zur Verbesserung Ihrer Formulare zu finden?

Ihr vollständiges Zahlungsformular sollte nun wie folgt aussehen:

Noch mehr

Hier einige wichtige Formularfunktionen, die in diesem Codelab nicht behandelt werden:

  • Link zu den Nutzungsbedingungen und der Datenschutzerklärung: Erläutern Sie für Nutzer, wie Sie ihre Daten schützen.

  • Stil und Branding: Achten Sie darauf, dass diese zum Rest Ihrer Website passen. Wenn Nutzer Namen und Adressen eingeben und Zahlungen vornehmen, müssen sie sich darauf verlassen können, dass sie noch am richtigen Ort sind.

  • Analysen und echtes Nutzermonitoring: Ermöglichen Sie die Leistung und Nutzerfreundlichkeit Ihres Formulardesigns, um es für echte Nutzer zu testen und zu überwachen.