Les Formulaires
Un formulaire en XHTML
Sa réputation pour les saisies de données fait du formulaire un outil inéluctable dans l'environnement web. Que ce soient pour les recherches, pour l'inscription, ou pour l'envoi de mails, les formulaires présentent toujours un grand intérêt. Dans ce chapitre, nous allons apprendre les essentiels à savoir pour faire un formulaire.
La mise en forme du formulaire ne sera pas abordée ici, puisque c'est le rôle du CSS. En ce qui concerne l'envoi et les traitements des données saisies, ça dépasse le cadre de l'XHTML. Il faut un langage côté serveur, comme le PHP par exemple. Tout ceci étant dit, entrons dans le vif du sujet.
Création du formulaire
La balise XHTML utilisée pour la création d'un formulaire est la balise <form>< /form>. Elle peut avoir plusieurs attributs, comme un nom par exemple qui est signalé par le mot clé name. Mais un des attributs très importants dans le formulaire est l'attribut method. Comme son nom l'indique, l'attribut method détermine la méthode du formulaire. Elle peut prendre deux valeurs possibles :
- get : La méthode get correspond à l'envoi de données par URL. C'est-à-dire que les données saisies par l'utilisateur dans le formulaire sont renvoyées dans l'URL. Toutefois, elle est limitée à 255 caractères (théoriquement)
- post : Avec la méthode post, il n'y a pas de limite ce qui fait que l'on peut envoyer la quantité de données qu'on souhaite (quoique les limitations du serveur s'appliquent tout de même. )
Les champs input
La balise <input /> est utilisée pour pas mal de choses dans les formulaires. Son attribut 'type' détermine son type, ou plus exactement son rôle dans le formulaire. Elle ne nécessite pas une balise fermante. Toutefois, il est essentiel de ne pas oublier le slash à la fin.
La zone de texte à une ligne
Une zone de texte à une ligne est un conteneur permettant d'introduire des textes à une ligne. On peut spécifier sa taille qui correspond à la longueur du rectangle. A part sa taille, il est surtout important d'indiquer son nom. Lorsque vous allez envoyer les données saisies en PHP, c'est le nom qui permet de récupérer cette valeur. Pour faire une zone de texte à une ligne, on utilise la balise input et on lui met comme type le texte comme suit :
Aperçu :
Code XHTML :
<input type="text" name="login" size="8" />
Les labels
Les labels servent à indiquer à l'utilisateur ce qu'il doit saisir dans le champ. Entre autres, c'est une courte définition de la valeur saisie dans le champ. Elle permet de faire le lien entre un champ et son intitulé par le biais de l'attribut 'for'.
Aperçu :
Code XHTML :
<form method="post" action="identification.php" > <label for="login">Login </label> <input type="text" name="login" size="8"/> </form>
Les boutons
Dans un formulaire, il doit toujours y avoir un bouton. Le bouton sert à soumettre le formulaire une fois que les données sont saisies. Dans ce cas, il confirme l'envoi des données et c'est un bouton de type submit comme celui-ci par exemple qui sera utilisé :
Aperçu :
Code XHTML :
<input type="submit" value="Valider" />
Un autre bouton qui est de type reset sert à vider les champs, afin de les réinitialiser :
Aperçu :
Code XHTML :
<input type="reset" value="Vider" />
Si l'utilisateur décide d'annuler et/ou de réinitialiser ce qu'il a saisi, il peut cliquer sur ce bouton. Sauf que ce bouton n'est pas très pratique. En effet, l'utilisateur a décidé au départ de remplir le formulaire, ce n'est pas à la fin de sa saisie qu'il va tout annuler alors qu'il y a déjà passé du temps !
De plus, il arrive aussi parfois de presser sur ce bouton sans le faire exprès et ça oblige à tout refaire. Ce qui peut s'avérer fastidieux dans le cas des longs formulaires.
Champ mot de passe
Quand vous saisissez votre mot de passe sur Yahoo par exemple, vous voyez apparaître dans le zone de texte des étoiles ou des points à la place des caractères que vous saisissez. Vous savez que tout ceci a pour but de préserver la discrétion et la sécurité.
Pour que quelqu'un de malveillant qui se met derrière vous ne retienne pas votre mot de passe et en fasse un mauvais usage. Vous voulez bien faire ce genre de choses mais vous ne savez pas comment faire. A partir de maintenant vous le sauriez, il suffit de mettre un input de type password :
Aperçu :
Code XHTML :
<input type="password" name="pass" size="8"/>
Formulaire de login
Avec toutes ces notions de base, vous êtes maintenant en mesure de faire votre propre formulaire de login. En voici un exemple mais vous pouvez en faire comme bon vous semble :
Aperçu :
Code XHTML :
<form method="post" action="identification.php" > <label for="login">Login :</label><input type="text" name="login" size="8"/><br /><br /> <label for="pass">Mot de pass :</label><input type="password" name="pass" size="8"/> </form>
Les zones de texte multi ligne
L'input de type texte nous a servi pour faire une zone de texte à une ligne. Mais pour en faire une en plusieurs lignes, on utilise la balise textarea. On peut le rencontrer dans les formulaires d'envoi de commentaire par exemple :
Aperçu :
Code XHTML :
<form method="post" action="commentaire.php" > <label for="pseudo">Votre pseudo :</label> <input type="text" name="pseudo " size="8"/><br /><br /> <label for="comment">Vos commentaires :</label> <textarea name="comment" ></textarea> </form>
Notez bien que contrairement à input, la balise textarea nécessite une balise fermante.
