Collinette Bastien B1SIO1 SLAM

Compte Rendu Mission 4 : Tutorial pour la réalisation de la page Web infos.html (formulaire

interactif) Partie 1 : la page HTML

Cette première partie de la mission 4 a pour but de nous montrer comment organniser un formulaire dans sa partie HTML5/CCS3 à travers trois versions du même formulaire, nous permettant ainsi de constater l’évolution et l’impacte des ajouts de code dans le formulaire.

Ainsi, le code du premier formulaire était le suivant :

Collinette Bastien B1SIO1 SLAM

Collinette Bastien B1SIO1 SLAM

Pour donner la page suivante :

Collinette Bastien B1SIO1 SLAM

La deuxième version a subit quelques modifications dont l’ajout d’une classe « formLab » dans les balises <label> qui est rajoutée dans le fichier css lié à la page. Voici le code modifié du deuxième formulaire :

Collinette Bastien B1SIO1 SLAM

et voici le morceau de code ajouté dans le fichier css :

et voici le resultat sur la page :

Collinette Bastien B1SIO1 SLAM

Pour la troisième révision de la page du formulaire, nous avons ajouté des balises <span> afin de pouvoir afficher des messages d’erreur au cas où l’utilisateur remplirait mal le formulaire.

Collinette Bastien B1SIO1 SLAM

Le code ci-dessus avait pour résultat :

Mais l’ajout du code css de la classe « msgErreur » ainsi que de la classe « masquer » on permis de cacher l’apparition des messages d’erreur ainsi que de la saisie de l’adresse mail.

Collinette Bastien B1SIO1 SLAM

Ce qui permet d’achever la préparation de la page du formulaire côté HTML5/CSS3 pour la deuxième partie de la mission 4 :