Select - Twitter

Pour cet exercice, vous devrez compléter le formulaire de Twitter demandant la date de naissance de son nouveau membre.

Aperçu du résultat 👇

Matériel Pen de départ Requis fonctionnels Créez un menu déroulant permettant de choisir sa date de naissance. Attribuez-y les attributs name et id et donnez leur la valeur day afin de permettre au back-end de récupérer sa valeur.

N'oubliez pas d'ajouter un libellé intitulé "jour" à votre menu déroulant. Puisqu'un mois peut contenir 31 jours, offrez 31 options dans ce menu déroulant. Chacune de ces options doit avoir comme valeur et comme texte affiché un nombre de 1 à 31.

Plutôt que d'écrire ces 31 options à la main, essayez la commande Emmet suivante: option[value="$"]{$}*31 suivit de la touche tab. De façon similaire au précédent menu déroulant, créez-en un nouveau, mais cette fois-ci pour le mois de naissance de l'usager et configurez ses attributs name et id à month, afin de pouvoir y faire référence en back-end.

Attribuez cette fois à chaque option une valeur allant de 1 à 12, mais affichez les noms complets de chaque mois afin de simplifier la vie à l'utilisateur. (Malheureusement, il n'y a pas de raccourcis Emmet cette fois) Créez un dernier menu déroulant permettant à l'usager de choisir son année de naissance. Ses attributs name et id doivent avoir la valeur year et ses options doivent allez de 2007 jusqu'à 1980. (La valeur et le texte affiché sont les mêmes) Les données du formulaire doivent-êtres envoyées avec la méthode get à la page suivante https://tim-montmorency.com/timdoc/582-215MO/html/formulaire-intermediaire/exercices/twitter/submit/ lorsque le formulaire est soumis. Afin de soumettre le formulaire, ajoutez un champ de type submit affichant le texte "Suivant". Si votre formulaire fonctionne bien, vous devriez obtenir un message vous donnant l’âge de l’usager. Requis visuel Positionnez le formulaire au centre de la page, ajoutez-lui une ombre noire ⚫️ d'une opacité de 25% et une dimension de 20px afin de donner l'impression que le formulaire flotte légèrement au-dessus de la page. Faites en sorte que tous les textes à l'intérieur du formulaire soient centrés et profitez-en pour attribuer une taille de police de 18px au titre. Les libellés et le bouton "Suivant" doivent avoir une taille de texte de 12px. Les menus déroulants doivent avoir une largeur minimale de 100px, une marge intérieure d'une demi-lettre, des coins arrondis de 3px et une bordure de 2px utilisant la couleur contenue dans la variable --secondary. Le bouton "Suivant" doit prendre toute la largeur du formulaire, avoir une hauteur de 40px, des coins arrondis de 20px, une marge vers le haut de 10px, ainsi que la couleur de fond contenu dans la variable --primary par défaut et celle de --primary-alt lorsqu'il est survolé. Notes de cours 📚