Codelab: Best Practices für Zahlungsformulare

Sam Dutton

Öffne diesen Glitch in einem zweiten Tab, um dem Codelab zu folgen.

In diesem Codelab erfährst du, wie du sichere, zugängliche und benutzerfreundliche Zahlungsformen erstellst.

Achtung : In diesem Artikel geht es um Best Practices für das Front-End für Zahlungsformulare. Es wird nicht erklärt, wie Sie Transaktionen auf Ihrer Website implementieren. Weitere Informationen zum Hinzufügen von Zahlungsfunktionen zu deiner Website findest du unter Webzahlungen.

Schritt 1: HTML wie vorgesehen verwenden

Verwenden Sie Elemente, die für den Job erstellt wurden:

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

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

• Klicke auf Zum Bearbeiten Remix, 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 die Kartennummer, den Namen auf der Karte, das Ablaufdatum und den Sicherheitscode. Sie sind alle umschlossen in <section>-Elementen, die jeweils ein Label haben. Bei der Schaltfläche Zahlung abschließen handelt es sich um eine HTML- <button> In diesem Codelab erfahren Sie später, auf welche Browserfunktionen Sie mit für diese Elemente.

Hinweis : <input>-Elemente haben keine schließenden Tags. Das liegt daran, dass es sich um void-Elemente (leere) handelt: Sie haben selbst keinen Inhalt. Ein „/“ am Ende eines void-Elements ist optional: Entweder <input> oder <input /> ist zulässig.

Klicken Sie auf App anzeigen, um eine Vorschau Ihres Zahlungsformulars anzuzeigen.

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

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

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

Der HTML-Code, den Sie hinzugefügt haben, ist zwar gültig, aber durch den Standard-Browserstil wird die Verwendung des Formulars erschwert, insbesondere auf Mobilgeräten. Sieht nicht besonders gut aus.

Sie müssen sicherstellen, dass Ihre Formulare auf verschiedenen Geräten einwandfrei funktionieren, indem Sie Abstände, Ränder und Schriftgrößen.

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

Das ist eine Menge CSS! Zu beachten sind vor allem die Änderungen an den Größen:

• padding und margin werden Eingaben hinzugefügt.
• font-size und andere Werte unterscheiden sich je nach Größe des Darstellungsbereichs.

Wenn Sie fertig sind, klicken Sie auf App ansehen, um das Formular mit benutzerdefiniertem Stil zu sehen. Sie werden auch feststellen, angepasst und display: block; wird für Labels verwendet, sodass sie eigenständig in einer Zeile erscheinen. Eingaben über die gesamte Breite möglich. 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 hat. (Sie verwenden diese im Codelab.)

Das CSS ist Mobile-First:

• Der Standard-CSS-Code gilt für Darstellungsbereiche mit einer Breite von weniger als 400px.
• Medienabfragen sind wird verwendet, um den Standardwert für Darstellungsbereiche zu überschreiben, die mindestens 400px breit sind, und dann noch einmal für Darstellungsbereiche, die mindestens 500px breit sind. Dies sollte für kleinere Telefone, Mobilgeräte auf größeren Bildschirmen und auf Desktop-Computern.

Bei jeder Entwicklung für das Web müssen Sie verschiedene Geräte und Größen für Darstellungsbereiche testen. Das sind vor allem bei Formularen, da schon ein kleiner Fehler sie unbrauchbar machen kann. Sie sollten immer CSS-Haltepunkte, um sicherzustellen, dass sie mit Ihrem und Ihre Zielgeräte.

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

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

• Gerätemodus der Chrome-Entwicklertools verwenden Mobilgeräte zu simulieren.
• Senden Sie die URL von Ihrem Computer an Ihr Smartphone.
• Verwenden Sie einen Dienst wie BrowserStack, um einen Bereich zu testen von Geräten und Browsern.

Schritt 3: Attribute hinzufügen, die Nutzern bei der Dateneingabe helfen

Aktivieren Sie den Browser so, dass Eingabewerte gespeichert und automatisch ausgefüllt werden, und gewähren Sie Zugriff auf die sichere integrierte Zahlungs- und Validierungsfunktionen.

Fügen Sie dem Formular in der Datei index.html Attribute hinzu, damit diese so aussehen:

<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 dann in das Feld Kartennummer. Je nach Gerät und Plattform, sehen Sie möglicherweise eine Auswahl mit den für den Browser gespeicherten Zahlungsmethoden, wie die unten abgebildete.

<ph type="x-smartling-placeholder">

</ph>

Integrierte Browser-Zahlungsauswahl und Autofill

Nachdem Sie eine Zahlungsmethode ausgewählt und Ihren Sicherheitscode eingegeben haben, füllt der Browser das Formular automatisch mit die autocomplete-Werte der Zahlungskarte, 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.

Hinweis : Kein Grund zur Beunruhigung. Dein Browser kann das Formular möglicherweise mit gespeicherten Zahlungskartendaten automatisch ausfüllen lassen. Es werden aber keine Daten übertragen oder gespeichert.

Auf Mobilgeräten werden Sie außerdem bemerken, dass eine numerische Tastatur eingeblendet wird, sobald Sie auf das Symbol Kartennummer ein. Das liegt daran, dass du inputmode="numeric" verwendet hast. Bei numerischen Feldern ergibt sich ist es einfacher, Zahlen einzugeben und es ist nicht möglich, nicht numerische Zeichen einzugeben. Außerdem werden Nutzer daran erinnert, die Art der eingegebenen Daten zu merken.

Es ist äußerst wichtig, den Zahlungsformularen alle verfügbaren autocomplete-Werte richtig hinzuzufügen. Es ist es kommt häufig vor, dass Websites den autocomplete-Wert für das Ablaufdatum der Karte und andere . Wenn ein einzelner autofill-Wert falsch ist oder fehlt, müssen Nutzer ihren tatsächlichen um Kartendaten manuell einzugeben. Andernfalls entgeht Ihnen möglicherweise ein Verkauf. Autofill in Zahlungsformularen nicht richtig funktioniert, können Nutzer ihre Zahlungskartendaten auch auf ihrem Smartphone speichern. oder Computer, was äußerst unsicher ist.

Hinweis : Studien haben ergeben, dass es besser ist, separate ausgewählte Elemente für Monat und Jahr zu verwenden, anstatt nur eine einzige Eingabe durchzuführen. Die Entscheidung liegt ganz bei Ihnen. Testen Sie dies, indem Sie den HTML-Code unserer vollständigen Demoversion des Zahlungsformulars remixen und bearbeiten. Sie enthält den Code für beide Feldtypen für das Ablaufdatum.

Versuchen Sie, das Zahlungsformular mit einem leeren Feld einzureichen. Browser-Aufforderungen zum Abschließen fehlen Daten. Fügen Sie dem Wert im Feld Kartennummer einen Buchstaben hinzu und versuchen Sie, das Formular zu senden. Die warnt der Browser, dass der Wert ungültig ist. Das liegt daran, dass Sie das Attribut pattern verwendet haben, um geben gültige Werte für ein Feld an. Dasselbe gilt für maxlength und andere Validierungseinschränkungen JavaScript ist nicht erforderlich.

Ihr Zahlungsformular sollte nun so aussehen:

• Entfernen Sie autocomplete-Werte und füllen Sie das Zahlungsformular aus. Welche Schwierigkeiten haben Sie begegnen?
• Testen Sie Zahlungsformulare in Onlineshops. Überlegen Sie, was gut funktioniert und was schiefgeht. Gibt es häufige Probleme oder Best Practices, die Sie befolgen sollten?

Schritt 4: Zahlungsschaltfläche nach dem Absenden des Formulars deaktivieren

Sie sollten eine Schaltfläche zum Senden deaktivieren, nachdem die Nutzenden darauf getippt oder angeklickt haben – insbesondere, wie die nutzende Person die Zahlung tätigt. Viele Nutzer tippen oder klicken wiederholt auf Schaltflächen, auch wenn sie gut funktionieren. Dies kann zu Problemen bei der Zahlungsabwicklung führen und die Serverlast erhöhen.

Fügen Sie der Datei js/main.js den 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 zu senden, und warte ab, was passiert.

Achtung : Auf einigen Websites bleiben die Schaltflächen zum Senden von Formularen deaktiviert, bis der Nutzer alle Formularfelder korrekt ausgefüllt hat. Sie sollten das nicht tun, da Nutzer versehentlich einen erforderlichen Wert weglassen oder einen ungültigen Wert verwenden. Tippen oder klicken Sie dann auf die deaktivierte Schaltfläche „Senden“ und gehen Sie davon aus, dass Ihre Website nicht funktioniert. Auch wenn Sie Formularwerte als ungültig oder fehlend markieren, werden dem Nutzer möglicherweise keine Warnungen angezeigt. Dies gilt insbesondere für längere Formulare und auf Mobilgeräten. Die Inline-Validierung ist sinnvoll, wenn der Nutzer Daten eingibt und wenn er versucht, das Formular abzusenden.

Hier sehen Sie, wie Ihr Code an dieser Stelle aussehen sollte, mit einigen Kommentaren und einem validate()-Funktion:

• Sie werden feststellen, dass der JavaScript-Code auskommentierten Code für die Datenvalidierung enthält. Dieser Code verwendet Constraint Validation API (allgemein unterstützt), um benutzerdefinierte Validierung, Zugriff auf die integrierte Browser-Benutzeroberfläche, um Fokus festzulegen und Aufforderungen anzuzeigen. Entfernen Sie die Kommentarzeichen des Codes und Probieren Sie es aus. Sie müssen geeignete Werte für someregex und message sowie einen Wert für someField

• Daten aus Analysen und Echtzeitüberwachung von Nutzern die Sie beobachten würden, um Verbesserungsmöglichkeiten für Ihre Formulare zu finden?

Ihr vollständiges Zahlungsformular sollte nun so aussehen:

• Formular auf verschiedenen Geräten ausprobieren Welche Geräte und Browser sind Sie? Ausrichtung? Wie könnte das Formular verbessert werden?

Weitere Möglichkeiten

Sehen Sie sich die folgenden wichtigen Formularfunktionen an, die in diesem Codelab nicht behandelt werden:

• Link zu Ihren Nutzungsbedingungen und Dokumenten mit Ihrer Datenschutzerklärung: Machen Sie deutlich, wie Sie um ihre Daten zu schützen.

• Stil und Branding: Achten Sie darauf, dass diese Elemente zum Rest Ihrer Website passen. Beim Eingeben von Namen und Adressen und Zahlungen vornehmen, müssen sich die Nutzer wohlfühlen und darauf vertrauen können, dass sie am richtigen Ort sind.

• Analytics und Monitoring echter Nutzer: ermöglichen es, die Leistung und Nutzerfreundlichkeit Ihres Formulardesigns mit echten Nutzenden zu testen und zu überwachen.