Les balises: formulaires

Toute page HTML peut être enrichie de formulaires interactifs, qui invitent vos visiteurs à renseigner des informations : saisir du texte, sélectionner des options, valider avec un bouton…

Créer un formulaire

<form> </form> : C’est la balise principale du formulaire, elle permet d’en indiquer le début et la fin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

<p>Texte avant le formulaire</p>

<form>
   <p>Texte à l'intérieur du formulaire</p>
</form>

<p>Texte après le formulaire</p>

Notez qu’il faut obligatoirement mettre des balises de type block (comme

) à l’intérieur de votre formulaire si vous souhaitez y faire figurer du texte.

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 et l’afficher pour vos autres visiteurs.

Ainsi, on va ajouter deux attributs à la balise

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.
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.

Pour method, vous l’aurez deviné, je vais mettre la valeurpost.
Pour action, je vais taper le nom d’une page fictive en PHP (traitement.php).

<p>Texte avant le formulaire</p>

<form method="post" action="traitement.php">
   <p>Texte à l'intérieur du formulaire</p>
</form>

<p>Texte après le formulaire</p>

Les zones de saisie basiques

Zone de texte monoligne

Elle ne peut y écrire qu’une seule ligne. Elle sert à saisir des textes courts, par exemple un pseudo.

Pour insérer une zone de texte dans une ligne, on va utiliser la balise<input />.
À chaque fois, c’est la valeur de son attributtypequi va changer.
Pour créer une zone de texte à une ligne, on doit écrire :

<input type="text" />

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

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

Les libellés

Le rôle de la balise est d’informer le visiteur sur ce qu’il doit écrire <label>:

<form method="post" action="traitement.php">
    <p>
        <label>Votre pseudo</label> : <input type="text" name="pseudo" />
    </p>
</form>

Puis, il faut lier le label à la zone de texte. On doit donner un nom à la zone de texte avec l’attributid. De plus, pour lier le label au champ, il faut lui donner un attributforqui a la même valeur que l’iddu champ.

<form method="post" action="traitement.php">
   <p>
       <label for="pseudo">Votre pseudo</label> : <input type="text" name="pseudo" id="pseudo" />
   </p>
</form>

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 avecsize.
On peut limiter le nombre de caractères que l’on peut saisir avecmaxlength.
On peut pré-remplir le champ avec une valeur par défaut à l’aide devalue.
On peut donner une indication sur le contenu du champ avecplaceholder. 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 :

<form method="post" action="traitement.php">
    <p>
        <label for="pseudo">Votre pseudo :</label>
        <input type="text" name="pseudo" id="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10">
    </p>
</form>

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’attributtype="password".

<form method="post" action="traitement.php">
   <p>
       <label for="pseudo">Votre pseudo :</label>
       <input type="text" name="pseudo" id="pseudo" />
       
       <br />
       <label for="pass">Votre mot de passe :</label>
       <input type="password" name="pass" id="pass" />
       
   </p>
</form>

Zone de texte multiligne

La zone de texte multiligne : elle permet d’écrire une quantité importante de texte sur plusieurs lignes.

Pour créer une zone de texte multiligne, on utilise la balise <textarea> </textarea>. Comme pour tout autre élément du formulaire, il faut lui donner un nom avecnameet utiliser unlabelqui explique de quoi il s’agit.

<form method="post" action="traitement.php">
   <p>
       <label for="ameliorer">Comment pensez-vous que je pourrais améliorer mon site ?</label><br />
       <textarea name="ameliorer" id="ameliorer"></textarea>
   </p>
</form>

On peut modifier la taille du<textarea>de deux façons différentes.

En CSS : il suffit d’appliquer les propriétés CSSwidthetheightau<textarea>.
Avec des attributs : on peut ajouter les attributsrowsetcolsà 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’attributvalue: on écrit tout simplement le texte par défaut entre la balise ouvrante et la balise fermante !

Les zones de saisie enrichies

E-mail

Vous pouvez demander à saisir une adresse e-mail :

<input type="email" />

Une URL

Avec le typeurl, on peut demander à saisir une adresse absolue (commençant généralement parhttp://) :

<input type="url" />

Numéro de téléphone

Ce champ est dédié à la saisie de numéros de téléphone :

<input type="tel" />

Nombre

Ce champ permet de saisir un nombre entier :

<input type="number" />

Le champ s’affichera en général avec des petites flèches pour changer la valeur.

Vous pouvez 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 typerangepermet de sélectionner un nombre avec un curseur (aussi appelé slider), comme à la figure suivante :

<input type="range" />

Vous pouvez utiliser là aussi les attributsmin,maxetsteppour restreindre les valeurs disponibles.

Couleur

Ce champ permet de saisir une couleur :

<input type="color" />

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-localpour la date et l’heure (sans gestion du décalage horaire).

<input type="date" />

Recherche

On peut créer un champ de recherche comme ceci :

<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 cases à cocher

On utilise à nouveau la balise<input />, en spécifiant cette fois le typecheckbox:

<input type="checkbox" name="choix" />

Rajoutez un<label>bien placé, et le tour est joué !

On peut faire en sorte qu’une case soit cochée par défaut avec l’attributchecked:

<input type="checkbox" name="choix" checked />

Normalement, tout attribut possède une valeur. Dans le cas présent, en revanche, ajouter une valeur n’est pas obligatoire : la présence de l’attribut suffit à faire comprendre à l’ordinateur que la case doit être cochée.
Si cela vous perturbe, sachez que vous pouvez donner n’importe quelle valeur à l’attribut (certains webmasters écrivent parfoischecked="checked"mais c’est un peu redondant !). Dans tous les cas, la case sera cochée.

Les zones d’options

Les zones d’options vous 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.

La balise à utiliser est toujours un<input />, avec cette fois la valeurradiopour l’attributtype.

Essayez d’enlever les attributsname, vous verrez qu’il devient possible de sélectionner tous les éléments d’options. Or, ce n’est pas ce que l’on veut, c’est pour cela qu’on les « lie » entre eux en leur donnant un nom identique.

Vous noterez que cette fois on a choisi uniddifférent dename. En effet, les valeurs denameétant identiques, on n’aurait pas pu différencier les id (et vous savez bien qu’uniddoit être unique !). Voilà donc pourquoi on a choisi de donner à l’idla même valeur quevalue.

Si vous avez deux zones d’options différentes, il faut donner unnameunique à chaque groupe, comme ceci :

L’attributcheckedest, là aussi, disponible 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. On va utiliser la balise<select> </select>qui indique le début et la fin de la liste déroulante. On ajoute l’attributnameà 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 à chacune d’elles un attributvaluepour pouvoir identifier ce que le visiteur a choisi.

Si vous voulez qu’une option soit sélectionnée par défaut, utilisez cette fois l’attributselected:

<option value="canada" selected>Canada</option>

Vous pouvez aussi grouper vos options avec la balise<optgroup> </optgroup>. On va séparer les pays en fonction de leur continent :

Finaliser et envoyer le 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>.

Sélectionner automatiquement un champ

Vous pouvez placer automatiquement le curseur dans l’un des champs de votre formulaire avec l’attributautofocus. 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 champprenom:

<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’attributrequired.

<input type="text" name="prenom" id="prenom" required />

Le navigateur indiquera alors au visiteur, si le champ est vide au moment de l’envoi, qu’il doit impérativement être rempli.

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:focuspour changer l’apparence d’un champ lorsque le curseur se trouve à l’intérieur.

:required2{background-color: red;}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo

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’attributactiondu formulaire.
type="reset": remise à zéro du formulaire.
type="image": équivalent du boutonsubmit, présenté cette fois sous forme d’image. Rajoutez l’attributsrcpour 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’attributvalue.

Pour créer un bouton d’envoi on écrira donc par exemple :

<input type="submit" value="Envoyer" />

Lorsque vous cliquez sur le bouton « Envoyer », le formulaire vous amène alors à la page indiquée dans l’attributaction. 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. Cela tombe bien, j’ai aussi rédigé un cours sur le langage PHP pour ceux que cela intéresse !

En résumé

Un formulaire est une zone interactive de la page, dans laquelle vos visiteurs peuvent saisir des informations.
On délimite un formulaire avec la balise<form>à laquelle il faut ajouter deux attributs :method(mode d’envoi des données) etaction(page vers laquelle le visiteur sera redirigé après envoi du formulaire et qui traitera les informations).
Une grande partie des éléments du formulaire peut s’insérer avec la balise<input />. La valeur de son attributtypepermet d’indiquer quel type de champ doit être inséré :
- text: zone de texte ;
- password: zone de texte pour mot de passe ;
- tel: numéro de téléphone ;
- checkbox: case à cocher ;
- etc.
La balise<label>permet d’écrire un libellé. On l’associe à un champ de formulaire avec l’attributfor, qui doit avoir la même valeur que l’iddu champ de formulaire.
On peut rendre un champ obligatoire avec l’attributrequired, faire en sorte qu’il soit sélectionné par défaut avecautofocus, donner une indication dans le champ avecplaceholder…
Pour récupérer ce que les visiteurs ont saisi, le langage HTML ne suffit pas. Il faut utiliser un langage « serveur » comme PHP… Si vous voulez aller plus loin, il va donc falloir apprendre un nouveau langage !