Pour cet exercice vous devrez compléter un formulaire de carte de crédit déjà entamé.
Aperçu du résultat 👇
Couleurs 🎨
Champs
Lorsque le formulaire est soumis, ses informations doivent-être envoyés en utilisant la méthode get à l'adresse suivante:
La page de résultat s'attend à recevoir les informations suivantes: credit-card-number, expiry-date, et security-code.
• 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
Tous les champs doivent avoir une marge intérieure équivalente à une demi-lettre et une bordure grise de 2px par défaut. Chaque champ doit avoir un libellé cliquable attribuant le focus au champ qui lui est associé.
• Numéro de carte
• Expiration
• Sécurité 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. 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/24" et "123". Le code de sécurité doit avoir une longueur de 3 caractères. Ni plus ni moins. Ajustez les espacements entre les éléments de votre formulaire afin de ressembler au résultat ci-dessus ☝️ Lorsque les champs sont valides, ceux-ci doivent avoir une bordure bleue 🔵. Dans le cas contraire, une bordure rouge 🔴. 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é.
Formulaire
text, label, form, submit