Créer un formulaire
Il faut commencer par écrire une balise <form> </form>, c'est la balise principale du formulaire, elle permet d'en indiquer le début et la fin.
1 <p>Texte avant le formulaire</p>
2
3 <form>
4 <p>Texte à l'intérieur du formulaire</p>
5 </form>
6
7 <p>Texte après le formulaire</p>
Maintenant ça va devenir un peu plus complexe, pour essayer de clarifier les choses, on va prendre un exemple:
Supposons que votre visiteur vienne de taper un commentaire dans votre formulaire, par exemple un message qu'il aimerait publier sur vos forums. Ce message doit être envoyé pour que vous puissiez le recevoir (logique, non ?) et l'afficher pour vos autres visiteurs.
Eh bien c'est là le problème, ou plutôt les problèmes, que l'on va se poser :
- Problème n°1: comment envoyer le texte saisi par le visiteur? Par quel moyen?
- Problème n°2: une fois que les données ont été envoyées, comment les traiter?
Souhaitez-vous recevoir le message automatiquement par mail ou préférez-vous qu'un programme se charge de l'enregistrer quelque part, puis de l'afficher sur une page visible par tout le monde?
Pour fournir les réponses à ces deux problèmes, vous devez ajouter deux attributs à la balise <form>:
- réponse au problème n°1: method: cet attribut indique par quel moyen les données vont être envoyées. Il existe deux solutions pour envoyer des données sur le Web :
- method="get": c'est une méthode en général assez peu adaptée car elle est limitée à 255 caractères. La particularité vient du fait que les informations seront envoyées dans l'adresse de la page (http://…).
- method="post": c'est la méthode la plus utilisée pour les formulaires car elle permet d'envoyer un grand nombre d'informations. Les données saisies dans le formulaire ne transitent pas par la barre d'adresse.
- réponse au problème n°2:
action: c'est l'adresse de la page ou du programme qui va traiter les informations. Cette page se chargera de vous envoyer un e-mail avec le message si c'est ce que vous voulez, ou bien d'enregistrer le message avec tous les autres dans une base de données.
Cela ne peut pas se faire en HTML et CSS, on utilisera en général un autre langage dont vous avez peut-être entendu parler : PHP.
On va donc maintenant compléter la balise <form> avec les deux attributs qu'on vient de voir:
- Pour method, vous l'aurez deviné, je vais mettre la valeur post.
- Pour action, je vais taper le nom d'une page fictive en PHP (traitement.php). C'est cette page qui sera appelée lorsque le visiteur cliquera sur le bouton d'envoi du formulaire.
1 <p>Texte avant le formulaire</p>
2
3 <form method="post" action="traitement.php">
4 <p>Texte à l'intérieur du formulaire</p>
5 </form>
6
7 <p>Texte après le formulaire</p>
Les zones de saisie basiques
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
Voici une zone de texte monoligne:
Pour insérer une zone de texte dans une ligne, on va utiliser la balise <input/>.
On retrouvera cette balise plusieurs fois dans la suite de ce chapitre. À chaque fois, c'est la valeur de son attribut type qui va changer.
Pour créer une zone de texte à une ligne, on doit écrire :
1 <input type="text" />
Cependant, 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" />
Ce qui donne, tout ensemble:
1 <form method="post" action="traitement.php">
2 <p><input type="text" name="pseudo" /></p>
3 </form>
Les libellés
Pour identifier une zone de texte, on va utiliser 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>
Ça ne suffit pas, il faut maintenant lier le label à la zone de texte.
Pour ça, on va donner un nom à la zone de texte, non pas avec l'attribut name mais avec l'attribut id.
Pour éviter les problèmes de "double-emploi", il vaut mieux donner la même valeur au name et à l'id.
Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur que l'id du champ, comme ceci:
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>
Si on essaie de cliquer sur le texte « Votre pseudo », 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:
- size: agrandir le champ,
- maxlength: limiter le nombre de caractères que l'on peut saisir,
- value: pré-remplir le champ avec une valeur par défaut,
- placeholder: donner une indication sur le contenu du champ, qui disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.
Pour exemple, on veut que la zone de texte contienne 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>
Zone de mot de passe
On peut facilement créer 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>
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 un label 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>
Pour modifier la taille du cadre, il y a deux façons:
- 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.
On peut pré-remplir le <textarea> avec une valeur par défaut. Dans ce cas, 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>
Les zones de saisie enrichies
Il existe plusieurs valeurs qu'on peut donner à l'attribut type de la balise <input/>:
- un email,
- une url,
- un numéro de téléphone,
- un nombre,
- un curseur,
- une couleur,
- une notion de temps (heure, date, etc...),
- une recherche.
Pur saisir une adresse e-mail:
1 <input type="email" />
La seule différence sera au niveau du navigateur, le visuel semblant à priori identique. Le navigateur sait désormais que l'utilisateur doit saisir une adresse e-mail. Il peut afficher une indication si l'adresse n'est pas un e-mail, c'est ce que fait Firefox par exemple:
Sachez que certains navigateurs, comme les navigateurs mobiles sur iPhone et Android, affichent un clavier adapté à la saisie d'e-mail.
Une URL
Avec le type url, on peut demander à saisir une adresse absolue (commençant généralement par http://):
1 <input type="url" />
Ça fonctionne de la même façon que pour l'e-mail, souvent les navigateurs mobiles proposent un clavier adapter à la saisie d'URL.
Numéro de téléphone
Ce champ est dédié à la saisie de numéros de téléphone :
1 <input type="tel" />
Sur iPhone, par exemple, un clavier adapté s'affiche lorsqu'on doit remplir le champ.
Nombre
Ce champ permet de saisir un nombre entier :
1 <input type="number" />
Le champ s'affichera en général avec des petites flèches pour changer la valeur.
On peut personnaliser le fonctionnement du champ avec les attributs suivants :
- min: valeur minimale autorisée.
- max: valeur maximale autorisée.
- step: c'est le « pas » de déplacement. Si vous indiquez un pas de 2, le champ n'acceptera que des valeurs de 2 en 2 (par exemple 0, 2, 4, 6…).
Un curseur
Le type range permet de sélectionner un nombre avec un curseur (aussi appelé slider):
1 <input type="range" />
Vous pouvez utiliser là aussi les attributs min, max et step pour restreindre les valeurs disponibles.
Couleur
Ce champ permet de saisir une couleur :
1 <input type="color" />
Attention tous les navigateurs ne connaissent pas encore ce type de champ, mais la compatibilité progresse.
On peut vérifier la compatibilité via Can I Use.
Date
Différents types de champs de sélection de date existent :
- date: pour la date (05/08/1985 par exemple);
- time: pour l'heure (13:37 par exemple);
- week: pour la semaine;
- month: pour le mois;
- datetime: pour la date et l'heure (avec gestion du décalage horaire);
- datetime-local: pour la date et l'heure (sans gestion du décalage horaire).
Par exemple:
1 <input type="date" />
Comme on peut s'en rendre compte, il y a le choix. Par contre, comme pour d'autres types, il n'est pas complètement reconnu, on peut donc aller vérifier sur Can I Use.
Recherche
On peut créer un champ de recherche comme ceci :
1 <input type="search" />
Le navigateur décide ensuite comment afficher le champ de recherche.
Ainsi, il peut ajouter une petite loupe au champ pour signifier que c'est un champ de recherche et éventuellement mémoriser les dernières recherches effectuées par le visiteur.
Les éléments d'options
Les éléments d'options sont des éléments qui demandent au visiteur de faire un choix parmi une liste de possibilités, comme:
- les cases à cocher;
- les zones d'options;
- les listes déroulantes.
Les cases à cocher
Pour créer une case à cocher, on va utiliser la balise <input/> + type="checkbox", en rajoutant un label, comme ceci:
1 <input type="checkbox" name="choix" />
Voici un exemple de mise en pratique:
1 <form method="post" action="traitement.php">
2 <p>
3 Cochez les aliments que vous aimez manger :<br />
4 <input type="checkbox" name="frites" id="frites" /><label for="frites">Frites</label><br />
5 <input type="checkbox" name="steak" id="steak" /><label for="steak">Steak haché</label><br />
6 <input type="checkbox" name="epinards" id="epinards" /><label for="epinards">Epinards</label><br />
7 <input type="checkbox" name="huitres" id="huitres" /><label for="huitres">Huitres</label><br />
8 </p>
9 </form>
Il faut bien penser à donner un nom différent à chaque case à cocher, cela permettra d'identifier plus tard lesquelles ont été cochées par le visiteur.
On peut aussi faire en sorte qu'une case soit cochée par défaut avec l'attribut checked:
1 <input type="checkbox" name="choix" checked />
On sait que normalement, tout attribut possède une valeur, mais là, ce n'est pas obligatoire : la présence de l'attribut suffit à faire comprendre à l'ordinateur que la case doit être cochée.
Si toutefois c'est génant, on peut donner n'importe quelle valeur à l'attribut (certains webmasters écrivent parfois checked="checked" mais c'est un peu redondant !). Dans tous les cas, la case sera cochée.
Les zones d'options
Les zones d'options permettent de faire un choix (et un seul) parmi une liste de possibilités.
Elles ressemblent un peu aux cases à cocher mais il y a une petite difficulté supplémentaire : elles doivent être organisées en groupes. Les options d'un même groupe possèdent le même nom (name), mais chaque option doit avoir une valeur (value) différente.
On va alors utiliser <input/> + type="radio":
1 <form method="post" action="traitement.php">
2 <p>
3 Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
4 <input type="radio" name="age" value="moins15" id="moins15" /><label for="moins15">Moins de 15 ans
</label><br />
5 <input type="radio" name="age" value="medium15-25" id="medium15-25" /><label for="medium15-25">
15-25 ans</label><br />
6 <input type="radio" name="age" value="medium25-40" id="medium25-40" /><label for="medium25-40">
25-40 ans</label><br />
7 <input type="radio" name="age" value="plus40" id="plus40" /><label for="plus40">Encore plus vieux
que ça ?!</label><br />
8 </p>
9 </form>
Il faut absolument mettre le même nom pour chaque option, sans quoi il devient possible de sélectionner tous les éléments d'options, ce qu'on ne veut surtout pas.
On a choisi de donner une valeur différente entre id et name, au profit de value, car un id doit être unique.
S'il y a deux zones d'options différentes, il faut donner un name unique à chaque groupe, comme ceci :
1 <form method="post" action="traitement.php">
2 <p>
3 Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
4 <input type="radio" name="age" value="moins15" id="moins15" /><label for="moins15">Moins de 15 ans
</label><br />
5 <input type="radio" name="age" value="medium15-25" id="medium15-25" /><label for="medium15-25">
15-25 ans</label><br />
6 <input type="radio" name="age" value="medium25-40" id="medium25-40" /><label for="medium25-40">
25-40 ans</label><br />
7 <input type="radio" name="age" value="plus40" id="plus40" /><label for="plus40">Encore plus vieux
que ça ?!</label><br />
8 </p>
9 <p>
10 Sur quel continent habitez-vous ?<br />
11 <input type="radio" name="continent" value="europe" id="europe" /><label for="europe">Europe</label>
<br />
12 <input type="radio" name="continent" value="afrique" id="afrique" /><label for="afrique">Afrique
</label><br />
13 <input type="radio" name="continent" value="asie" id="asie" /><label for="asie">Asie</label><br />
14 <input type="radio" name="continent" value="amerique" id="amerique" /><label for="amerique">Amerique
</label><br />
15 <input type="radio" name="continent" value="australie" id="australie" /><label for="australie">
Australie</label><br />
16 </p>
17 </form>
On peut aussi utiliser l'attribut checked pour sélectionner une valeur par défaut.
Les listes déroulantes
Les listes déroulantes sont un autre moyen élégant de faire un choix parmi plusieurs possibilités.
Voici la méthodologie:
- On utilise la balise <select> </select> qui indique le début et la fin de la liste déroulante.
- On ajoute l'attribut name à la balise pour donner un nom à la liste.
- Puis, à l'intérieur du <select> </select>, nous allons placer plusieurs balises <option> </option>(une par choix possible).
- On ajoute enfin à chacune d'elles un attribut value pour pouvoir identifier ce que le visiteur a choisi.
Ça pourrait par exemple donner:
1 <form method="post" action="traitement.php">
2 <p>
3 <label for="pays">Dans quel pays habitez-vous ?</label><br />
4 <select name="pays" id="pays">
5 <option value="france">France</option>
6 <option value="espagne">Espagne</option>
7 <option value="italie">Italie</option>
8 <option value="royaume-uni">Royaume-Uni</option>
9 <option value="canada">Canada</option>
10 <option value="etats-unis">États-Unis</option>
11 <option value="chine">Chine</option>
12 <option value="japon">Japon</option>
13 </select>
14 </p>
15 </form>
Pour qu'une option soit sélectionnée par défaut, il faut utiliser cette fois l'attribut selected:
1 <option value="canada" selected>Canada</option>
On peut aussi grouper les options avec la balise <optgroup> </optgroup>. Dans notre exemple, pourquoi ne pas séparer les pays en fonction de leur continent ?
1 <form method="post" action="traitement.php">
2 <p>
3 <label for="pays">Dans quel pays habitez-vous ?</label><br />
4 <select name="pays" id="pays">
5 <optgroup label="Europe">
6 <option value="france">France</option>
7 <option value="espagne">Espagne</option>
8 <option value="italie">Italie</option>
9 <option value="royaume-uni">Royaume-Uni</option>
10 </optgroup>
11 <optgroup label="Amérique">
12 <option value="canada">Canada</option>
13 <option value="etats-unis">États-Unis</option>
14 </optgroup>
15 <optgroup label="Asie">
16 <option value="chine">Chine</option>
17 <option value="japon">Japon</option>
18 </optgroup>
19 </select>
20 </p>
21 </form>
Ici les groupes ne peuvent pas être sélectionnés, seuls les pays sont disponibles pour la sélection.
Finaliser et envoyer le formulaire
Dernière ligne droite, il ne reste plus qu'à agrémenter notre formulaire de quelques dernières fonctionnalités (comme la validation), puis nous pourrons ajouter le bouton d'envoi du formulaire.
Regrouper les champs
Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les regrouper au sein de plusieurs balises <fieldset>.
Chaque <fieldset> peut contenir une légende avec la balise <legend>.
Voici un exemple de mise en pratique:
1 <form method="post" action="traitement.php">
2
3 <fieldset>
4 <legend>Vos coordonnées</legend> <!-- Titre du fieldset -->
5
6 <label for="nom">Quel est votre nom ?</label>
7 <input type="text" name="nom" id="nom" />
8
9 <label for="prenom">Quel est votre prénom ?</label>
10 <input type="text" name="prenom" id="prenom" />
11
12 <label for="email">Quel est votre e-mail ?</label>
13 <input type="email" name="email" id="email" />
14
15 </fieldset>
16
17 <fieldset>
18 <legend>Votre souhait</legend> <!-- Titre du fieldset -->
19
20 <p>
21 Faites un souhait que vous voudriez voir exaucé :
22
23 <input type="radio" name="souhait" value="riche" id="riche" /><label for="riche">Etre riche</label>
24 <input type="radio" name="souhait" value="celebre" id="celebre" /><label for="celebre">Etre célèbre</label>
25 <input type="radio" name="intelligent" value="intelligent" id="intelligent" /><label for="intelligent">Etre
<strong>encore</strong> plus intelligent</label>
26 <input type="radio" name="souhait" value="autre" id="autre" /><label for="autre">Autre...</label>
27 </p>
28
29 <p>
30 <label for="precisions">Si "Autre", veuillez préciser :</label>
31 <textarea name="precisions" id="precisions" cols="40" rows="4"></textarea>
32 </p>
33 </fieldset>
34 </form>
Sélectionner automatiquement un champ
Vous pouvez placer automatiquement le curseur dans l'un des champs de votre formulaire avec l'attribut autofocus.
Dès que le visiteur chargera la page, le curseur se placera dans ce champ.
Par exemple, pour que le curseur soit par défaut dans le champ prenom:
1 <input type="text" name="prenom" id="prenom" autofocus />
Rendre un champ obligatoire
Vous pouvez faire en sorte qu'un champ soit obligatoire en lui donnant l'attribut required, le navigateur indiquera alors au visiteur qu'il doit impérativement être rempli (si le champ est vide au moment de l'envoi).
1 <input type="text" name="prenom" id="prenom" required />
Attention!! Les anciens navigateurs, qui ne reconnaissent pas cet attribut, enverront le contenu du formulaire sans vérification. Pour ces navigateurs, il sera nécessaire de compléter les tests avec, par exemple, des scripts JavaScript.
On dispose de pseudo-formats en CSS pour changer le style des éléments requis (:required) et invalides (:invalid). N'oubliez pas non plus que vous disposez du pseudo-format :focus pour changer l'apparence d'un champ lorsque le curseur se trouve à l'intérieur:
1 :required
2 {
3 background-color: red;
4 }
Le bouton d'envoi
Il ne nous reste plus qu'à créer le bouton d'envoi.
Là encore, la balise <input/> vient à notre secours. Elle existe en quatre versions :
- type="submit": le principal bouton d'envoi de formulaire. C'est celui que vous utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans l'attribut action du formulaire.
- type="reset": remise à zéro du formulaire.
- type="image": équivalent du bouton submit, présenté cette fois sous forme d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image.
- type="button": bouton générique, qui n'aura (par défaut) aucun effet. En général, ce bouton est géré en JavaScript pour exécuter des actions sur la page. Nous ne l'utiliserons pas ici.
On peut changer le texte affiché à l'intérieur des boutons avec l'attribut value.
Voici un exemple de bouton d'envoi:
1 <input type="submit" value="Envoyer" />
Lorsque vous cliquez sur le bouton « Envoyer », le formulaire vous amène alors à la page indiquée dans l'attribut action. Souvenez-vous, nous avions imaginé une page fictive :traitement.php.
Le problème, c'est que vous ne pouvez pas créer cette page seulement en HTML. Il est nécessaire d'apprendre un nouveau langage, comme le PHP, pour pouvoir « récupérer » les informations saisies et décider quoi en faire.
Dans ce cas là, on peut suivre le cours sur le PHP / MySQL.