Formulaire - Carte de crédit

Pour cet exercice vous devrez compléter un formulaire de carte de crédit déjà entamé.

Aperçu du résultat 👇

Matériel

Pen de départ 

Couleurs 🎨

Rouge #eb001b
Bleu blue

Lorsque le formulaire est soumis, ses informations doivent-être envoyés en utilisant la méthode get à l'adresse suivante:

https://ex.smnarnold.com/formulaires/carte-de-credit

La page de résultat s'attend à recevoir les informations suivantes: credit-card-number, expiry-date, et security-code.

Requis

  1. Créez 3 champs de texte. Chacun de ces champs sera requis afin de pouvoir soumettre le formulaire:

    • Un pour le numéro de carte de crédit

    • Un pour la date d'expiration

    • Un pour le code de sécurité de la carte

  2. Tous les champs doivent avoir une marge intérieure équivalente à une demi-lettre et une bordure grise de 2px par défaut.

  3. Chaque champ doit avoir un libellé cliquable attribuant le focus au champ qui lui est associé.

    • Numéro de carte

    • Expiration

    • Sécurité

  4. Le champ de carte de crédit doit prendre toute la largeur du formulaire, avoir des coins arrondis de 6px et affichez le texte indicatif "4242 4242 4242 4242" tant qu'aucune valeur ne lui est assignée.

  5. Les champs de date d'expiration et de code de sécurité doivent prendre la moitié de la largeur du formulaire, s'afficher côte à côte, avoir à leurs extrémités extérieures des coins arrondis de 6px et affichez les textes indicatifs "10/22" et "123".

  6. Le code de sécurité doit avoir une longueur de 3 caractères. Ni plus ni moins.

  7. Ajustez les espacements entre les éléments de votre formulaire afin de ressembler au résultat ci-dessus ☝️

  8. Lorsque les champs sont valides, ceux-ci doivent avoir une bordure bleue 🔵. Dans le cas contraire, une bordure rouge 🔴.

  9. Un bouton bleu 🔵 prenant toute la largeur du formulaire, avec des coins arrondis de 6px et affichant la mention "Acheter maintenant" doit permettre de soumettre le formulaire lorsque cliqué.

Bonus

  1. Assurez-vous que le numéro de carte de crédit est 12 caractères, ni plus ni moins.

  2. Assurez-vous qu'un minimum de 4 caractères soit entré dans le champ "date d'expiration" et qu'un maximum de 5 soit permis. Ainsi, les dates d'expiration avec ou sans le "/" seront acceptées.

Notes de cours 📚