11 - Créer un formulaire

Nous allons passer en revue les différentes balises HTML permettant de saisir du texte dans un formulaire.
Il faut savoir qu'il y a deux zones de texte différentes :

La zone de texte monoligne : comme son nom l'indique, on ne peut y écrire qu'une seule ligne. Elle sert à saisir des textes courts, par exemple un pseudo.
La zone de texte multiligne : cette zone de texte permet d'écrire une quantité importante de texte sur plusieurs lignes, par exemple une dissertation sur l'utilité du HTML dans le développement des pays d'Asie du Sud-Est (ce n'est qu'une suggestion hein…).

Zone de texte monoligne

La figure suivante montre à quoi ressemble une zone de texte monoligne.

Pour insérer une zone de texte dans une ligne, on va utiliser la balise <input />.

Pour créer une zone de texte à une ligne, on doit écrire :




1<input type="text" />

Ce n'est pas encore suffisant : il faut donner un nom à votre zone de texte. Ce nom n'apparaît pas sur la page mais il vous sera indispensable par la suite. En effet, cela vous permettra (en PHP par exemple) de reconnaître d'où viennent les informations : vous saurez que tel texte est le pseudo du visiteur, tel texte est le mot de passe qu'il a choisi, etc.

Pour donner un nom à un élément de formulaire, on utilise l'attribut name. Ici, on va supposer qu'on demande au visiteur de rentrer son pseudo :




1<input type="text" name="pseudo" />

Essayons donc de créer un formulaire très basique avec notre champ de texte :




1<form method="post" action="traitement.php">

2   <p><input type="text" name="pseudo" /></p>

3</form>

Comme d'habitude, je vous invite fortement à essayer ce code chez vous afin d'observer le résultat.

Les libellés

Cette zone de texte est bien jolie mais si votre visiteur tombe dessus, il ne sait pas ce qu'il doit écrire. C'est justement le rôle de la balise <label> :




1<form method="post" action="traitement.php">

2    <p>

3        <label>Votre pseudo</label> : <input type="text" name="pseudo" />

4    </p>

5</form>

Ce code donne exactement le résultat que vous avez pu observer à la figure précédente.

Mais cela ne suffit pas. Il faut lier le label à la zone de texte.
Pour ce faire, on doit donner un nom à la zone de texte, non pas avec l'attribut name mais avec l'attributid (que l'on peut utiliser sur toutes les balises).

Un name et un id sur le champ ? Cela ne va-t-il pas faire double emploi ?

Si, un peu. Personnellement, je donne la même valeur au name et à l'id, cela ne pose pas de problème.

Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur que l'id du champ… Le mieux est de le voir sur un exemple :




1<form method="post" action="traitement.php">

2   <p>

3       <label for="pseudo">Votre pseudo</label> : <input type="text" name="pseudo" id="pseudo" />

4   </p>

5</form>

Essayez de cliquer sur le texte « Votre pseudo » : vous allez voir que le curseur se place automatiquement dans la zone de texte correspondante.

Quelques attributs supplémentaires

On peut ajouter un certain nombre d'autres attributs à la balise <input /> pour personnaliser son fonctionnement :

On peut agrandir le champ avec size.
On peut limiter le nombre de caractères que l'on peut saisir avec maxlength.
On peut pré-remplir le champ avec une valeur par défaut à l'aide de value.
On peut donner une indication sur le contenu du champ avec placeholder. Cette indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.

Dans l'exemple suivant, la zone de texte contient une indication permettant de comprendre ce qu'il faut saisir ; le champ fait 30 caractères de long mais on ne peut écrire que 10 caractères maximum à l'intérieur :




1<form method="post" action="traitement.php">

2    <p>

3        <label for="pseudo">Votre pseudo :</label>

4        <input type="text" name="pseudo" id="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" />

5    </p>

6</form>

Testez vous-mêmes le résultat pour observer le comportement du champ. En attendant, voici le rendu du champ dans son état initial en figure suivante.

Zone de mot de passe

Vous pouvez facilement faire en sorte que la zone de texte se comporte comme une « zone de mot de passe », c'est-à-dire une zone où on ne voit pas à l'écran les caractères saisis. Pour créer ce type de zone de saisie, utilisez l'attribut type="password".

Je complète mon formulaire. Il demande maintenant au visiteur son pseudo et son mot de passe :




1<form method="post" action="traitement.php">

2   <p>

3       <label for="pseudo">Votre pseudo :</label>

4       <input type="text" name="pseudo" id="pseudo" />

5       

6       <br />

7       <label for="pass">Votre mot de passe :</label>

8       <input type="password" name="pass" id="pass" />

9       

10   </p>

11</form>

Testez la zone de mot de passe : vous verrez que les caractères ne s'affichent pas à l'écran, comme sur la figure suivante.

Zone de texte multiligne

Pour créer une zone de texte multiligne, on change de balise : nous allons utiliser <textarea> </textarea>.

Comme pour tout autre élément du formulaire, il faut lui donner un nom avec name et utiliser unlabel qui explique de quoi il s'agit.




1<form method="post" action="traitement.php">

2   <p>

3       <label for="ameliorer">Comment pensez-vous que je pourrais améliorer mon site ?</label><br />

4       <textarea name="ameliorer" id="ameliorer"></textarea>

5   </p>

6</form>

Comme vous pouvez le constater, c'est un peu petit ! Heureusement, on peut modifier la taille du<textarea> de deux façons différentes.

En CSS : il suffit d'appliquer les propriétés CSS width et height au <textarea>.
Avec des attributs : on peut ajouter les attributs rows et cols à la balise <textarea>. Le premier indique le nombre de lignes de texte qui peuvent être affichées simultanément, et le second le nombre de colonnes.

Pourquoi ouvre-t-on la balise <textarea> pour la fermer juste après ?

Vous pouvez pré-remplir le <textarea> avec une valeur par défaut. Dans ce cas, on n'utilise pas l'attribut value : on écrit tout simplement le texte par défaut entre la balise ouvrante et la balise fermante !




1<form method="post" action="traitement.php">

2   <p>

3       <label for="ameliorer">

4       Comment pensez-vous que je puisse améliorer mon site ?

5       </label>

6       <br />

7       

8       <textarea name="ameliorer" id="ameliorer" rows="10" cols="50">

9       Améliorer ton site ?!

10       Mais enfin ! Il est tellement génialissime qu'il n'est pas nécessaire de l'améliorer !

11       </textarea>       

12   </p>

13</form>

info

Pages