Formulaire d'inscription en ligne
Ce projet est le troisième projet pour le cours de développement du frontend de Team Treehouse.
Dans ce projet, vous construirez un formulaire d'enregistrement réactif et adapté aux mobiles en utilisant une grande variété de types et d'attributs d'entrée de formulaire HTML. En utilisant les fichiers de maquette fournis, vous construirez une version mobile et de bureau du formulaire à l'aide de requêtes multimédias et une approche "mobile-axée".
Le lien en direct pour ce projet peut être trouvé ici
Capture d'écran
Instructions
- Construisez la disposition à l'aide de Mobile First Design :
- Assurez-vous que le fichier HTML inclut la balise META de la fenêtre dans la tête du document, voir Configuration de la fenêtre pour comprendre pourquoi et comment ajouter cette balise.
- Regardez la maquette fournie (mobile-form.png) et ajoutez le même contenu à votre fichier index.html.
- Créez la structure de formulaire: utilisez uniquement une balise
<form> . La balise <form> doit contenir tous les éléments de formulaire. Ajoutez un fieldset et legend pour chacune des sections suivantes:
- Section "coordonnées" de la page, et
- La section "newsletter" de la page
- Assurez-vous d'inclure les types de champs de formulaire suivants:
- entrée de texte
- Email Entrée
- entrée téléphonique
- Sélectionner le menu
- cocher les cases
- boutons radio
- textarea
- bouton de soumettre
- Les champs de formulaire doivent inclure les attributs suivants:
-
input : doit inclure des attributs id , type et name . -
select et textarea : devrait inclure des attributs id et name .
- Ajoutez des étiquettes à chaque élément de formulaire à l'aide de la balise HTML
<label> . Le texte à l'intérieur des étiquettes doit correspondre aux noms des champs de formulaire dans les maquettes.
- Assurez-vous que vous associez correctement chaque élément
<label> avec son contrôle de forme correspondant via l'attribut for . Voir le lien ci-dessus pour un exemple. Et n'oubliez pas l'élément TextArea. Cela a également besoin d'une étiquette fonctionnelle.
- Utilisez l'attribut d'
placeholder du champ de saisie pour ajouter le texte "requis" à:
- le champ de nom complet
- le champ d'adresse e-mail
- Une fois que vous avez tout en place pour la disposition mobile, utilisez une requête multimédia pour ajouter un point d'arrêt pour ajuster la disposition pour des tablettes et des écrans de bureau plus larges.
- Faites correspondre la conception comme elle devrait regarder sur une tablette ou un bureau de 768px de large en utilisant la moquette de bureau.
- Utilisez une approche mobile axée sur les mobiles en écrivant vos requêtes multimédias en utilisant la propriété
min-width dans votre CSS.
- Une fois que tous vos points d'arrêt sont en place, vérifiez que votre disposition correspond aux deux maquettes.
- Vérifiez que la position du texte de l'étiquette correspond aux deux maquettes:
- Mobile : le texte doit être au-dessus du champ de formulaire.
- Bureau : le texte doit être sur le côté gauche du champ de formulaire.
Utilisez une police Google pour le texte
Ajouter :focus états au formulaire pour un utilisateur clique ou onglets dans un champ de texte.
Assurez-vous de vérifier que votre code est valide en l'exécutant via un validateur HTML et CSS.
- Des liens vers les validateurs peuvent être trouvés dans les ressources du projet. Cela vous aidera à repérer toutes les erreurs qui pourraient être dans votre code.
- Il y a quelques exceptions que vous n'avez pas besoin de corriger:
- Ne vous inquiétez pas des avertissements, nous avons juste besoin de vous pour vérifier les erreurs qui pourraient être là.
- Si les indicateurs de validateur CSS utilisent le calc, les préfixes du fournisseur ou les pseudo-éléments / pseudo-classes, ces erreurs doivent être ignorées.
- Si HTML Validator Flags Utilisation du tuyau ('|') Dans les liens / URL de police Google, cette erreur peut également être ignorée.
