In diesem Codelab erfährst du, wie du sichere, zugängliche und benutzerfreundliche Zahlungsformen erstellst.
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.
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
undmargin
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 mindestens500px
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">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.
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.
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.
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
undmessage
sowie einen Wert fürsomeField
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.