Présentation de l'exercice formulaire interactif

Présentation de l'exercice

Faire un formulaire c'est bien, mais encore faut-il savoir quoi demander à l'utilisateur. Dans notre cas, nous allons faire simple et classique : un formulaire d'inscription. Notre formulaire d'inscription aura besoin de quelques informations concernant l'utilisateur, cela nous permettra d'utiliser un peu tous les éléments HTML spécifiques aux formulaires que nous avons vus jusqu'à présent. Voici les informations à récupérer ainsi que les types d'éléments HTML :

Information à relever	Type d'élément à utiliser
Sexe	<input type="radio" />
Nom	<input type="text" />
Prénom	<input type="text" />
Âge	<input type="text" />
Pseudo	<input type="text" />
Mot de passe	<input type="password" />
Mot de passe (confirmation)	<input type="password" />
Pays	<select>
Si l'utilisateur souhaite recevoir des mails	<input type="checkbox" />

Bien sûr, chacune de ces informations devra être traitée afin que l'on sache si le contenu est bon. Par exemple, si l'utilisateur a bien spécifié son sexe ou bien s'il n'a pas entré de chiffres dans son prénom, etc. Dans notre cas, nos vérifications de contenu ne seront pas très poussées pour la simple et bonne raison que nous n'avons pas encore étudié les « regex » à ce stade du cours, nous nous limiterons donc à la vérification de la longueur de la chaîne ou bien à la présence de certains caractères. Bref, rien d'incroyable, mais cela suffira amplement car le but de ce TP n'est pas vraiment de vous faire analyser le contenu mais plutôt de gérer les événements et le CSS de votre formulaire.

Voici donc les conditions à respecter pour chaque information :

Information à relever	Condition à respecter
Sexe	Un sexe doit être sélectionné
Nom	Pas moins de 2 caractères
Prénom	Pas moins de 2 caractères
Âge	Un nombre compris entre 5 et 140
Pseudo	Pas moins de 4 caractères
Mot de passe	Pas moins de 6 caractères
Mot de passe (confirmation)	Doit être identique au premier mot de passe
Pays	Un pays doit être sélectionné
Si l'utilisateur souhaite recevoir des mails	Pas de condition

Nous avons choisi de limiter les noms et prénoms à deux caractères minimum, même s'il en existe avec un seul caractère. Il s'agit ici d'un exemple, libre à vous de définir vos propres conditions.

Concrètement, l'utilisateur n'est pas censé connaître toutes ces conditions quand il arrive sur votre formulaire, il faudra donc les lui indiquer avant même qu'il ne commence à entrer ses informations, comme ça il ne perdra pas de temps à corriger ses fautes. Pour cela, il va vous falloir afficher chaque condition d'un champ de texte quand l'utilisateur fera une erreur. Pourquoi parlons-nous ici uniquement des champs de texte ? Tout simplement parce que nous n'allons pas dire à l'utilisateur « Sélectionnez votre sexe » alors qu'il n'a qu'une case à cocher, cela paraît évident.

Autre chose, il faudra aussi faire une vérification complète du formulaire lorsque l'utilisateur aura cliqué sur le bouton de soumission. À ce moment-là, si l'utilisateur n'a pas coché de case pour son sexe on pourra lui dire qu'il manque une information, pareil s'il n'a pas sélectionné de pays.

Vous voilà avec toutes les informations nécessaires pour vous lancer dans ce TP. Nous vous laissons concevoir votre propre code HTML, mais vous pouvez très bien utiliser celui de la correction si vous le souhaitez.

Créé avec HelpNDoc Personal Edition: Générateur de documentation iPhone gratuit