Formulaire - Among Us

Pour cet exercice nous allons créer un formulaire permettant de générer un personnage du célèbre jeu Among Us.

Aucun fichier de départ ne vous est fourni. Vous allez devoir créer votre propre fichier HTML.

Aperçu du résultat 👇

Matériel

Fonts

VT323

Couleurs 🎨

#75DBF4 #F21717

Médias

Arrière-plan Requis fonctionnels La page de résultat s'attend à recevoir les informations suivantes: name, color, hat et impostor. Il faudra donc nommer vos champs de formulaire en conséquence. Créez un champ de texte permettant d'entrer un nom de personnage. Ce champ doit être obligatoire et limiter l'utilisateur à un nom entre 2 et 20 caractères.

À titre indicatif, affichez le texte "Red" en attendant que l'usager insère le nom de son choix. Créez ensuite un champ permettant de choisir la couleur du personnage 🎨. À l'aide de boutons radio, offrez une sélection de chapeaux 🎩. Notez la valeur à passer lorsque cette option est sélectionnée, suivie du texte à afficher à l'écran:
    • none | Aucun
    • banana | Banane
    • egg | Oeuf
    • toilet | Papier de toilette

Par défaut, l'option "Aucun" doit-être sélectionné. Ajoutez une boite à cocher avec la mention "Imposteur 🗡" permettant de sélectionner si le personnage est un imposteur ou non ✅. Ajoutez finalement un bouton avec la mention "Créer mon personnage" permettant de soumettre le formulaire et d'envoyer ses informations via une méthode get à l'adresse suivante: https://tim-montmorency.com/timdoc/582-215MO/html/formulaire-avance/exercices/among-us/submit/

Vous devriez maintenant être capable de créer des personnages similaires à ceux-ci en soumettant votre formulaire:

Requis visuels Faites en sorte que l'image d'arrière-plan étoilé soit afficher comme fond d'écran ✨, que tous les textes utilisent la police Google VT323 et aient une taille de 20px. Le formulaire doit avoir une largeur de 400px, un fond noir ⚫️, une bordure blanche de 2px ⚪️, des coins arrondis de 15px et se garder une marge intérieure de 20px de tous les côtés afin que son contenu ne touche jamais à ses extrémités. Le formulaire doit être centré horizontalement ↔️ et être affiché à 50px du haut de la page. Affichez le titre "Among Us" en 40px. Ce titre ne doit pas avoir de graisse ni de marge vers le haut. Uniquement une marge de 20px vers le bas. Le champ de nom doit prendre toute la largeur du formulaire, se garder une marge intérieure de 10px de tous les côtés, avoir des coins arrondis de 10px, une bordure bleue 🔵 de 2px lorsque son contenu est valide et rouge lorsqu'invalide 🔴. Le bouton "Créer mon personnage" doit prendre toute la largeur du formulaire, avoir un fond bleu, des coins arrondis de 10px et une taille de texte de 20px. Notes de cours 📚