XHTML : les bases

Alain Barraud

Mémento informatique

Accueil Logithèque - SE Photo - vidéo Internet - protocoles Site Web PC - Réseau Archives

Page ouverte le 04/06/2009

Les formulaires

Avec les formulaires, on arrive à la limite de ce que l'on peut faire avec le XHTML.

Sommaire de la page

Créer un formulaire Les zones de saisie Elements d'options Un formulaire accessible et design ? Y'a plus qu'à appuyer sur le bouton ! Sites à consulter

Créer un formulaire

Pour créer un formulaire dans une page HTML on doit obligatoirement l'insérer dans la balise <form></form>. C'est la principale du formulaire, elle permet d'en indiquer le début et la fin.

Code : HTML

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>

Noter qu'il faut obligatoirement mettre des balises de type block (comme <p></p>) à l'intérieur du formulaire si on veut écrire du texte dedans.

Les formulaires sont faits pour être envoyés et exploités. D'où les 2 problèmes suivants :

Problème nº 1 : comment envoyer le texte rentré par le visiteur ? Par quel moyen ?
Problème nº 2 : une fois que les données ont été envoyées, comment les traiter ? veut-on recevoir le message automatiquement par mail, ou est-ce qu'un programme se charge de l'enregistrer quelque part, puis de l'afficher sur une page visible par tout le monde ?
Cela revient d'ailleurs à faire un livre d'or pour son site.

Pour répondre à ces 2 problèmes, il faut indiquer 2 attributs à la balise <form> :

method : cet attribut indique par quel moyen les données vont être envoyées. Il existe 2 moyens 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://…), mais ce détail ne nous intéresse pas vraiment pour le moment. La plupart du temps, mieux vaut utiliser l'autre méthode : "post".
- method="post": c'est la méthode la plus utilisée pour les formulaires car on peut rentrer un grand nombre d'informations grâce à elle.
action: c'est l'adresse de la page ou du programme qui va traiter les informations. Cette page se chargera d'envoyer un mail avec le message si c'est ce que l'on veut, ou bien d'enregistrer le message avec tous les autres dans une base de données.
Cela ne peut pas se faire en XHTML / CSS, on utilisera en général un autre langage : le PHP.

Le code devient :

Code : HTML

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>

Haut de page

Les zones de saisie

Les balises XHTML permettant de rentrer du teste dans un formulaire.
On distingue 2 zones de texte différentes :

La zone de texte à une ligne : sert pour rentrer des textes courts.
La zone de texte multiligne : permet d'écrire une quantité importante de texte sur plusieurs lignes.

Zone de texte à une ligne

Pour insérer une zone de texte à une ligne, on utilise la balise <input/>.

Elle est accompagnée de deux attributs :
type qui définit le type de champ de formulaire.

Zone de texte à une ligne

Différents types de champ :

<input type="text" /> 
<input type="password" /> 
<input type="file" /> 
<input type="checkbox" /> 
<input type="radio" /> 
<input type="submit" /> 
<input type="reset" /> 
<input type="hidden" />

name qui est le nom de la zone de texte et qui permettra par la suite (dans le langage PHP) que tel texte correspond à tel nom de zone de texte.
Ce qui donne :

Code : HTML

1 <form method="post" action="traitement.php">
2 <p><input type="text" name="pseudo" /></p>
3 </form>

Penser à entourer la balise <input /> par une balise block comme <p></p> car sinon la page web ne sera pas valide (cela est expliqué dans l'annexe "Le W3C et les standards du web").

Les labels
Quand on tombe sur une zone de texte, il faut savoir quoi mettre dedans. Pour indiquer cela, on utilise la balise <label> qui entoure le libellé de ce qu'il faut mettre.
En plus, il faut lier le label avec la zone de texte.
Pour cela, il faut donner un nom à la zone de texte, non pas avec l'attribut name mais avec l'attribut id (que l'on peut utiliser sur toutes les balises).
Comme name et id font un peu double emploi, on peut leur donner le même nom.
Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur que l'id du champ…

Par exemple, si on demande "Votre pseudo" :

Code : HTML

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>

Voir page test : exemple 1

Remarque : si on clique sur le texte "Votre pseudo" : on voit que le curseur se place automatiquement dans la zone de texte correspondante. On a ":lié" le label avec sa zone de texte pour qu'on sache à quoi il correspond et c'est un aide aux personnes atteintes d'un handicap.

Quelques attributs supplémentaires
- Si on a besoin de donner une valeur par défaut à notre zone de texte, on rajoute l'attribut value.
Exemple : <input type="text" name="pseudo" value="@lain33": />
- Modifier la largeur de la zone de texte qui se définit avec size.
- Modifier le nombre maximal de caractères qui se définit avec maxlength.

Examinons cet exemple :

Code : HTML

1 <form method="post" action="traitement.php">
2 <p>
3 <label for="pseudo">Votre pseudo :</label>
4 <input type="text" name="pseudo2" id="pseudo2" value="@lain33" size="30" maxlength="10" />
5 <br />
6 <label for="pass">Votre mot de passe :</label>
7 <input type="password" name="pass" id="pass" />
8 </p>
9 </form>

Voir page test : exemple 2

Remarques :
- J'ai délimité la zone de saisie du pseudo à 30 caractères de long, mais on ne peut mettre que 10 caractères maximum.
- Par contre dans ce cas, si je clique sur le texte "Votre pseudo", le curseur va se placer dans la zone de saisie de l'exemple 1 (ce qui n'est pas l'effet recherché ??). (J'ai essayé de changer le name mais sans effet. Peut-être parceque zone préremplie ? …)
- La zone de saisie du mot de passe se comporte comme une zone "mot de passe" grâce à l'attribut type=password.

Zone de texte multiligne

La zone de texte multiligne est une balise existant par paire (contrairement à <input />). C'est la balise <textarea></textarea>.
La raison de cette balise par paire, c'est de pouvoir pré-remplir la zone de texte comme avec value, sauf que là, on peut le faire sur plusieurs lignes.

Pour elle aussi, 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.

Zone de texte multiligne

On peut modifier la taille du textarea de 2 façons différentes :

En CSS : il suffit d'appliquer les propriétés CSS width et height au textarea. Malheureusement cette méthode ne marche pas sur Internet Explorer.
Avec des attributs : on peut ajouter les attributs rows et cols à la balise <textarea>. Le premier indique le nombre de lignes du textarea, et le second le nombre de colonnes.

Exemple :

Code : HTML

1 <form method="post" action="traitement.php">
2 <p>
3 <label for="montrer">Voici une zone de texte :</label><br />
4 <textarea name="montrer" id="montrer" rows="5" cols="40">
5 Ceci est une zone de texte multilignes. 
6 Elle est pré-remplie. On peut écrire sur plusieurs lignes.
7 </textarea>
8 </p>
9 </form>

Voir page test : exemple 3. Voir "Nota" ligne 5 du code HTML.

Haut de page

Elements d'options

Les cases à cocher

Avec la balise <input /> et l'attribut checkbox.
Avec les labels, on n'est pas obligé de cliquer directement sur la case. Cliquer sur le texte à côté suffit (sauf pour IE !)
On peut cocher une case par défaut. Pour cela, rajouter l'attribut checked="checked".
Le visiteur pourra cocher autant de cases qu'il voudra.

Cases à cocher

Exemple :

Code : HTML

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" checked="checked" /> <label for="epinards">Epinards</label><br />
7 <input type="checkbox" name="huitres" id="huitres" /> <label for="huitres">Huitres</label>
8 </p>
9 </form>

Voir page test : exemple 4.

Les zones d'options

Les zones d'options permettent de faire un choix (et un seul) parmi une liste de possibilités.
Avec la balise <input /> et l'attribut radio.
La différence avec les cases à cocher, c'est que les zones d'options fonctionnent par "groupe". Tout un groupe d'options a le même nom, mais un attribut value différent à chaque fois.
D'avoir le même nom permet au navigateur de savoir à quel "groupe" appartient tel bouton. Si on enlève l'attribut name, l'élément devient sectionnable. C'est pour cela qu'on "lie" les éléments entre eux en leur donnant un nom identique.

Zones d'options

Noter que pour les zones d'options, on choisit un id différent de name. En effet, les name étant identiques, on ne pourrait pas les différencier (et un id doit être unique !). Voilà donc pourquoi on choisit de mettre à l'id la même valeur que value.

Si on a 2 zones d'options différentes, on donne un nom unique à chaque groupe.
Si on veut qu'une des options soit cochée par défaut, on rajoute un checked="checked".

Exemple :

Code : HTML

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>
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">Amérique</label><br />
15 <input type="radio" name="continent" value="australie" id="australie" /> <label for="australie">Australie</label>
16 </p>
17 </form>

Voir page test : exemple 5.

Les listes déroulantes

Les listes déroulantes sont un autre moyen élégant de faire un choix entre plusieurs possibilités.
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.
Ensuite, à l'intérieur de <select></select>, on va mettre plusieurs balises <option></option> (une par choix possible).
On rajoute un attribut value pour pouvoir identifier ce que le visiteur a choisi.
Si on veut sélectionner une valeur par défaut, dans ce cas, on ne peut plus utiliser checked="checked", on utilise à la place le selected="selected".

Listes déroulantes

Exemple :

Code : HTML

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" selected="selected">Canada</option>
10 <option value="etats-unis">Etats-Unis</option>
11 <option value="chine">Chine</option>
12 <option value="japon">Japon</option>
13 </select>
14 </p>
15 </form>

Voir page test : exemple 6.

On peut créer des groupes d'options à l'intérieur de la liste, grâce à la balise <optgroup></optgroup>.
Il faut lui ajouter l'attribut label qui permet de donner un nom au groupe (à ne pas confondre avec la balise <label> !).
Reprenons l'exemple précédent, en séparant les pays par continent :

Code : HTML

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">Etats-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>

Voir page test : exemple 7.

Haut de page

Un formulaire accessible et design ?

Comment faire pour notre formulaire soit accessible (= compréhensible) et design.

On va le voir en quatre étapes :

Définir un ordre de tabulation (accessibilité)
Définir des touches de raccourci (accessibilité)
Organiser le formulaire en plusieurs zones (accessibilité et design)
Rajouter du CSS (design)

Définir un ordre de tabulation
On ne peut se déplacer dans un formulaire uniquement grâce à la touche "Tab" (tabulation) située à gauche du clavier. A chaque fois qu'on appuie sur Tab, on va au champ suivant. A chaque fois qu'on fait Maj + Tab, on retourne au champ précédent.

Le but est de dire en XHTML dans quel ordre on doit se déplacer dans le formulaire. Par exemple, après le champ "nom" si je tape Tab je dois tomber sur le champ "prénom", puis sur "e-mail" etc…

On utilise l'attribut tabindex qui peut se rajouter sur toutes les balises du formulaire qu'on vient de voir.
On doit lui mettre un nombre pour valeur. Chaque champ du formulaire doit avoir un nombre différent.
Les nombres indiquent dans quel ordre on se déplace dans le formulaire : d'abord le n°1, puis le n°2, le n°3 etc…

On n'est pas obligé de mettre des nombres qui se suivent. Il est même conseillé de laisser des "espaces" entre les nombres au cas où on aurait besoin de rajouter plus tard des champs.
Ainsi, il est tout à fait possible de compter 10 par 10 : n°10, n°20, n°30 etc… Ça ne coûte pas plus cher de compter de 10 en 10, et si plus tard on a besoin de créer un champ n°25, on n'aura aucun problème

Exemple :

Code : HTML

1 <form method="post" action="traitement.php">
2 <p>
3 <label for="nom">Quel est votre nom ?</label><br />
4 <input type="text" name="nom" id="nom" tabindex="10" /><br />
5
6 <label for="prenom">Quel est votre prénom ?</label><br />
7 <input type="text" name="prenom" id="prenom" tabindex="20" /><br />
8
9 <label for="email">Quel est votre e-mail ?</label><br />
10 <input type="text" name="email" id="email" tabindex="30" /><br />
11
12 <label for="pays">Dans quel pays habitez-vous ?</label><br />
13 <select name="pays" id="pays" tabindex="40">
14 <optgroup label="Europe">
15 <option value="france">France</option>
16 <option value="espagne">Espagne</option>
17 <option value="italie">Italie</option>
18 <option value="royaume-uni">Royaume-Uni</option>
19 </optgroup>
20 <optgroup label="Amérique">
21 <option value="canada">Canada</option>
22 <option value="etats-unis">Etats-Unis</option>
23 </optgroup>
24 <optgroup label="Asie">
25 <option value="chine">Chine</option>
26 <option value="japon">Japon</option>
27 </optgroup>
28 </select>
29 </p>
30 </form>

Voir page test : exemple 8.

Pratique si pas de souris.

Par défaut, si aucun tabindex n'est mis, le navigateur dira que le premier champ est celui tout en haut, et que le dernier celui tout en bas de la page.
Cependant, il est conseillé de toujours mettre les tabindex, car si le formulaire se complexifie par la suite cela sera très utile.

Définir des touches de raccourci
Savoir que ça existe pour aller directement sur un champ précis.
Organiser le formulaire en plusieurs zones
Il est possible en XHTML de grouper plusieurs champs ayant un thème entre eux. Cela permet :

de rendre le formulaire plus clair, donc plus accessible.
d'améliorer le design du formulaire.

On utilise la balise <fieldset></fieldset> pour délimiter un groupe de champs.
A l'intérieur de cette balise, on met nos champs (<input />…) ainsi qu'une autre balise : <legend></legend>. Celle-ci permet de donner le nom du groupe.

Exemple :

Code : HTML

1 <form method="post" action="traitement.php">
2
3 <fieldset>
4 <legend>Vos coordonnés</legend>
5
6 <label for="nom">Quel est votre nom ?</label><br />
7 <input type="text" name="nom" id="nom" tabindex="10" /><br />
8
9 <label for="prenom">Quel est votre prénom ?</label><br />
10 <input type="text" name="prenom" id="prenom" tabindex="20" /><br />
11
12 <label for="email">Quel est votre e-mail ?</label><br />
13 <input type="text" name="email" id="email" tabindex="30" /><br />
14 </fieldset>
15
16 <fieldset>
17 <legend>Votre souhait</legend>
18
19 <p>
20 Faites un souhait que vous voudriez voir exaucé :<br />
21 <input type="radio" name="souhait" value="riche" id="riche" tabindex="40" /> <label for="riche">Etre riche</label><br />
22 <input type="radio" name="souhait" value="celebre" id="celebre" tabindex="50" /> <label for="celebre">Etre célèbre</label><br />
23 <input type="radio" name="souhait" value="intelligent" id="intelligent" tabindex="60" /> <label for="intelligent">Etre <strong>encore</strong> plus intelligent</label><br />
24 <input type="radio" name="souhait" value="autre" id="autre" tabindex="70" /> <label for="autre">Autre…</label><br />
25 </p>
26
27 <p>
28 <label for="precisions">Si "Autre", veuillez préciser :</label><br />
29 <textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="80"></textarea>
30 </p>
31 </fieldset>
32 </form>

Voir page test : exemple 9.

A l'intérieur des <fieldset></fieldset>, l'utilisation de balises de paragraphe <p></p> n'est plus obligatoire comme c'était le cas avant.

Encore plus beau avec du CSS
Dans l'exemple précédent :

Code : CSS

input:focus, textarea:focus /* Quand le curseur est sur un champ (ne marche pas sur IE) */
{background-color: #ff9;}
label
{color: blue;}
legend
{color: #f93; font-weight: bold;}
fieldset
{margin-bottom: 15px; background-color: #ffc;} /* Une marge pour séparer les fieldset */

Voir page test : exemple 10.

Haut de page

Y'a plus qu'à appuyer sur le bouton !

Il y a trois types de bouton :

Le bouton d'envoi : il déclenche l'envoi du formulaire. Le visiteur se retrouve automatiquement télétransporté à la page indiquée dans l'attribut action du formulaire (vu au début de ce chapitre).
Un bouton d'envoi se crée avec l'attribut type="submit". On peut lui ajouter un attribut value pour changer le texte à l'intérieur du bouton, mais on peut laisser la valeur par défaut, c'est aussi clair : <input type="submit" />
Le bouton de remise à zéro : il remet à zéro automatiquement toutes les valeurs du formulaire. On doit utiliser cette fois l'attribut type="reset"
<input type="reset" />
Le bouton qui-sert-à-rien : c'est un bouton "générique" qui n'effectue aucune action particulière. Le formulaire n'est pas envoyé, il n'est pas remis à zéro, non rien ne se passe.
Quel intérêt ? Ça servira principalement à lancer des scripts en Javascript (un autre langage qu'on peut utiliser sur une page web).Il faut savoir que ça existe au cas où.
Pour celui-ci, il est recommandé de mettre l'attribut value pour que l'on sache à quoi sert le bouton :
<input type="button" value="Je sers à rien" />


     Application avec le précédent exemple :
    Code : HTML
    
         1     <form method="post" action="traitement.php">

         2

         3         <fieldset>

         4             <legend>Vos coordonnés</legend>

         5

         6             <label for="nom">Quel est votre nom ?</label><br />

         7             <input type="text" name="nom" id="nom" tabindex="10" /><br />

         8

         9             <label for="prenom">Quel est votre prénom ?</label><br />

        10             <input type="text" name="prenom" id="prenom" tabindex="20" /><br />

        11

        12             <label for="email">Quel est votre e-mail ?</label><br />

        13             <input type="text" name="email" id="email" tabindex="30" /><br />

        14         </fieldset>

        15

        16         <fieldset>

        17             <legend>Votre souhait</legend>

        18

        19             <p>

        20                 Faites un souhait que vous voudriez voir exaucé :<br />

        21                 <input type="radio" name="souhait" value="riche" id="riche" tabindex="40" /> <label for="riche">Etre riche</label><br />

        22                 <input type="radio" name="souhait" value="celebre" id="celebre" tabindex="50" /> <label for="celebre">Etre célèbre</label><br />

        23                 <input type="radio" name="souhait" value="intelligent" id="intelligent" tabindex="60" /> <label for="intelligent">Etre <strong>encore</strong> plus intelligent</label><br />

        24                 <input type="radio" name="souhait" value="autre" id="autre" tabindex="70" /> <label for="autre">Autre…</label><br />

        25             </p>

        26

        27             <p>

        28                 <label for="precisions">Si "Autre", veuillez préciser :</label><br />

        29                 <textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="80"></textarea>

        30             </p>

        31         </fieldset>

        32

        33         <p>

        34             <input type="submit" /> <input type="reset" />

        35         </p>

        36     </form>
    
    Voir page test : exemple 11.

    
     
    Mais pour traiter les données (les enregistrer ou les envoyer par mail), il faut passer par le langage PHP…



Haut de page

Sites à consulter

        - http://www.aliasdmc.fr/coursxhtml/cours_xhtml145.html

        - http://www.siteduzero.com/tutoriel-3-13596-les-formulaires.html

        - http://www.aliasdmc.fr/coursjavas/cours_javascript84.html

        - http://css.mammouthland.net/formulaire_css.php

        - 


Haut de page