Apparence
Si ce n'est pas terminé, compléter le devoir de la semaine 3 avant de commencer celui-ci.
Devoir - Semaine 4 Formulaire, événement et DOM ​
Fini la calculatrice! 🎉
Instructions ​
Voici ce qui est demandé pour ce devoir :
- Créer une page web simple avec un titre et un formulaire HTML utilisant bootstrap. Le formulaire doit contenir les champs suivants :
- Nom (champ texte)
- Prénom (champ texte)
- Adresse e-mail (champ texte)
- Mot de passe (champ mot de passe)
- Confirmer le mot de passe (champ mot de passe)
- Un bouton de soumission
- Utiliser le DOM et les événements pour gérer la validation des champs avant la soumission du formulaire. Si une validation échoue, afficher un message d'erreur approprié sous le champ concerné (ajout/suppression d'un élément HTML). Voici les validations à effectuer :
- Vérifier que l'adresse e-mail est dans un format correct. Pour faire simple, seulement vérifier la présence du caractère
@(nous allons voir le reste en détail plus tard). - Vérifier que le mot de passe et la confirmation du mot de passe correspondent.
- Vérifier que l'adresse e-mail est dans un format correct. Pour faire simple, seulement vérifier la présence du caractère
- Lors de la soumission du formulaire :
- Vérifier que tous les champs sont remplis.
- Si toutes les validations passent, ajoutez un élément
<p>sous le formulaire avec un message de succès indiquant que le formulaire a été soumis avec succès. Assurez-vous d'enlever ce message après 5 secondes.
Pour le style, utilisez bootstrap pour la mise en page et le style de base. Assurez-vous d'inclure les éléments suivants:
- Une nav-bar contenant le nom de votre application, un logo et un lien vers la page d'accueil.
- Un footer simple contenant votre nom, le sigle du cours et l'année en cours.
- Dans une section de paramétrage, un bouton permettant de changer la couleur de fond de la page. (vous pouvez choisir les couleurs que vous voulez)
- Dans une section de paramétrage, un bouton permettant de changer les paramètres de la police du titre, c'est-à -dire la taille, la couleur et la famille de police. (vous pouvez choisir les options que vous voulez)
Remise ​
Il s'agit d'un devoir formatif et nous y reviendrons ensemble en classe lors du prochain cours.