Cet atelier de programmation vous explique comment créer un formulaire de paiement sécurisé, accessible et facile à utiliser.
Étape 1: Utilisez le code HTML comme prévu
Utilisez des éléments conçus pour le travail:
<form>
<section>
<label>
<input>
,<select>
,<textarea>
<button>
Comme vous le verrez, ces éléments permettent d'intégrer une fonctionnalité de navigateur, d'améliorer l'accessibilité donner du sens à votre balisage.
- Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
Examinez le code HTML de votre formulaire dans index.html
.
<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>
Il y a des éléments <input>
pour le numéro de carte, le nom sur la carte, la date d'expiration et le code de sécurité. Ils sont tous
sont encapsulés dans des éléments <section>
et chacun est associé à un libellé. Le bouton Effectuer le paiement est un fichier HTML
<button>
Dans la suite de cet atelier de programmation, vous découvrirez les fonctionnalités du navigateur auxquelles vous pouvez accéder en utilisant
ces éléments.
Cliquez sur Afficher l'application pour prévisualiser votre formulaire de paiement.
- Le formulaire fonctionne-t-il correctement tel quel ?
- Y a-t-il quelque chose que vous changeriez pour l'améliorer ?
- Et sur mobile ?
Cliquez sur Afficher la source pour revenir au code source.
Étape 2: Concevez votre application pour les mobiles et les ordinateurs
Le code HTML que vous avez ajouté est valide, mais le style par défaut du navigateur rend le formulaire difficile à utiliser, surtout sur les mobiles. Ce n'est pas très beau non plus.
Vous devez vous assurer que vos formulaires fonctionnent bien sur divers appareils en ajustant les marges intérieures, les tailles de police.
Copiez tout le code CSS ci-dessous et collez-le dans votre propre fichier css/main.css
.
Cela fait beaucoup de CSS ! Voici les principaux points à retenir concernant les modifications apportées aux tailles:
padding
etmargin
sont ajoutés aux entrées.font-size
et les autres valeurs diffèrent selon les tailles de fenêtre d'affichage.
Lorsque vous êtes prêt, cliquez sur Afficher l'application pour afficher le formulaire stylisé. Vous remarquerez également
que les bordures ont
a été ajusté, et display: block;
est utilisé pour les libellés afin qu'ils s'alignent eux-mêmes sur une ligne, et
peuvent être en pleine largeur. Bonnes pratiques concernant les formulaires de connexion
explique plus en détail les avantages de cette approche.
Le sélecteur :invalid
permet d'indiquer lorsqu'une entrée comporte une valeur non valide. (Vous utiliserez
dans la suite de cet atelier de programmation.)
Le CSS est conçu en priorité pour les mobiles:
- Le CSS par défaut est destiné aux fenêtres d'affichage dont la largeur est inférieure à
400px
. - Les requêtes média sont
utilisé pour remplacer la valeur par défaut pour les fenêtres d'affichage dont la largeur est supérieure ou égale à
400px
, puis une seconde fois pour les des fenêtres d'affichage d'une largeur d'au moins500px
. Cela devrait fonctionner bien pour les petits téléphones, les appareils mobiles sur des écrans plus grands et sur les ordinateurs de bureau.
Chaque fois que vous créez des applications pour le Web, vous devez effectuer des tests sur différents appareils et tailles de fenêtres d'affichage. C'est surtout vrai pour les formulaires, car un petit glitch peut les rendre inutilisables. Vous devez toujours ajuster Des points d'arrêt CSS pour s'assurer qu'ils fonctionnent bien avec et vos appareils cibles.
- L'intégralité du formulaire est-elle visible ?
- Les entrées du formulaire sont-elles suffisamment grandes ?
- Le texte est-il lisible ?
- Avez-vous remarqué les différences entre l'utilisation d'un véritable appareil mobile et l'affichage du formulaire dans Mode Appareil dans les outils pour les développeurs Chrome ?
- Avez-vous dû ajuster les points d'arrêt ?
Il existe plusieurs façons de tester votre formulaire sur différents appareils:
- Utiliser le mode Appareil des outils pour les développeurs Chrome pour simuler des appareils mobiles.
- Envoyez l'URL de votre ordinateur vers votre téléphone.
- Utilisez un service tel que BrowserStack pour effectuer un test sur une plage d'appareils et de navigateurs.
Étape 3: Ajoutez des attributs pour aider les utilisateurs à saisir des données
Permettez au navigateur de stocker et de saisir automatiquement les valeurs saisies, et de donner accès à des applications sécurisées intégrées de paiement et de validation.
Ajoutez des attributs au formulaire dans votre fichier index.html
pour qu'il se présente comme suit:
<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>
Affichez à nouveau votre application, puis appuyez ou cliquez sur le champ Numéro de carte. En fonction de l’appareil et plate-forme, un sélecteur peut s'afficher pour afficher les modes de paiement enregistrés pour le navigateur, comme dans l'exemple ci-dessous.
<ph type="x-smartling-placeholder">Une fois que vous avez sélectionné un mode de paiement et saisi votre code de sécurité, le navigateur remplit automatiquement le formulaire en utilisant
les valeurs autocomplete
de la carte de paiement que vous avez ajoutées au formulaire:
cc-number
cc-name
cc-exp
cc-csc
De nombreux navigateurs vérifient également la validité des numéros de carte de crédit et des codes de sécurité.
Sur un appareil mobile, vous remarquerez également qu'un clavier numérique s'affiche dès que vous appuyez sur l'icône
champ Numéro de carte. En effet, vous avez utilisé inputmode="numeric"
. Pour les champs numériques,
il est plus facile de saisir des chiffres et impossible de saisir des caractères non numériques, et encourage les utilisateurs à
de se souvenir du type
de données qu'ils saisissent.
Il est extrêmement important d'ajouter correctement toutes les valeurs autocomplete
disponibles aux formulaires de paiement. Il est
Il est assez fréquent que les sites n'atteignent pas la valeur autocomplete
correspondant à la date d'expiration de la carte et à d'autres
. Si une seule valeur autofill
est incorrecte ou manquante, les utilisateurs devront récupérer leur valeur réelle
pour saisir manuellement les données de la carte, vous risquez de passer à côté d'une vente. Si la saisie automatique dans les formulaires de paiement
ne fonctionne pas correctement, l'utilisateur peut également décider de conserver une trace des informations relatives à sa carte de paiement sur son téléphone
ou un ordinateur, qui n'est pas sécurisé.
Essayez d'envoyer le formulaire de paiement sans renseigner le champ. Le navigateur vous invite à terminer
données. Ajoutez maintenant une lettre à la valeur du champ Numéro de carte, puis essayez d'envoyer le formulaire. La
le navigateur vous avertit que la valeur n'est pas valide. Cela est dû au fait que vous avez utilisé l'attribut pattern
pour
et spécifier des valeurs valides pour un champ. Il en va de même pour maxlength
et les autres
Contraintes de validation
JavaScript n'est pas nécessaire.
Votre formulaire de paiement devrait maintenant se présenter comme suit:
- Essayez de supprimer les valeurs
autocomplete
et de remplir le formulaire de paiement. Quelles difficultés rencontrez-vous ? rencontrer ? - Essayez les formulaires de paiement sur les boutiques en ligne. Réfléchissez à ce qui fonctionne bien et à ce qui ne va pas. Y a-t-il des problèmes courants ou des meilleures pratiques que vous devriez suivre ?
Étape 4: Désactiver le bouton de paiement une fois le formulaire envoyé
Nous vous recommandons de désactiver le bouton "Envoyer" une fois que l'utilisateur a appuyé ou cliqué dessus, en particulier si l'utilisateur effectue le paiement. De nombreux utilisateurs appuient ou cliquent sur des boutons à plusieurs reprises, même s'ils fonctionnent bien. Cela peut entraîner des problèmes de traitement des paiements et augmenter la charge du serveur.
Ajoutez le code JavaScript suivant à votre fichier js/main.js
:
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);
}
}
Essayez d'envoyer le formulaire de paiement et voyez ce qui se passe.
Voici à quoi doit ressembler votre code à ce stade, avec l'ajout de commentaires et d'une
Fonction validate()
:
Vous remarquerez que le JavaScript inclut du code commenté pour la validation des données. Ce code utilise l'API Constraint Validation (qui est largement accepté) pour ajouter et l'accès à l'UI intégrée du navigateur pour définir le focus et afficher les invites. Annulez la mise en commentaire du code, puis essayez-le. Vous devez définir des valeurs appropriées pour
someregex
etmessage
, ainsi qu'une valeur poursomeField
Quelles sont les données d'analyse et de Real User Monitoring ? surveilleriez-vous afin de trouver des moyens d'améliorer vos formulaires ?
Une fois terminé, le formulaire de paiement doit se présenter comme suit:
- Testez votre formulaire sur différents appareils. Quels appareils et navigateurs utilisez-vous ? ciblage ? Comment pourrions-nous améliorer le formulaire ?
Aller plus loin
Voici quelques fonctionnalités essentielles du formulaire, qui ne sont pas abordées dans cet atelier de programmation:
Lien vers les documents de vos conditions d'utilisation et de vos règles de confidentialité: expliquez clairement aux utilisateurs comment vous protéger leurs données.
Style et branding: assurez-vous qu'ils correspondent au reste de votre site. Lorsque vous saisissez des noms et des adresses et à effectuer un paiement, les utilisateurs doivent se sentir à l'aise et avoir l'assurance qu'ils sont toujours au bon endroit.
Analyse et surveillance des utilisateurs réels: permettre aux utilisateurs réels de tester et de surveiller les performances et la facilité d'utilisation de la conception de votre formulaire.