Tutorial XHTML Introduction Les Bases Avancés CSS Codages Biblioliens LeDide
Block et Inline
Les Listes
Les Tableaux
Les Formulaires

Block et Inline

Si vous n'êtes pas capables de faire la différence entre une balise inline et une balise block, vous allez être facilement largués.
Bon, de quoi parle-t-on ici ? On parle des balises. On peut classer les balises XHTML dans une des 2 catégories suivantes : inline et block (en français : "En ligne" et "Bloc").
Ce que j'attends de vous, c'est que vous sachiez reconnaître si une balise est inline ou block.

Par exemple, <p></p> ? Oui, c'est une balise block.

Et <a></a> ? Ca c'est une balise inline.

Mais comment je reconnais une balise inline d'une balise block ? C'est en fait assez facile :

  • block : une balise de type "block" sur votre page web crée automatiquement un retour à la ligne avant et après. Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait constituée d'une série de blocks à la suite les uns des autres. Mais vous verrez qu'en plus, il est possible de mettre un block à l'intérieur d'un autre, ce qui va augmenter considérablement nos possibilités pour créer le design de notre site !


  • inline : une balise de type "inline" se trouve obligatoirement à l'intérieur d'une balise "block". Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne (c'est pour cela que l'on parle de balise "en ligne").

Est-ce que <p></p> crée un retour en la ligne ? Oui, c'est donc une balise de type block.

Est-ce que <a></a> crée un retour à la ligne ? Non, le texte contenu dans cette balise s'écrit à la suite du texte précédent, il reste sur la même ligne. C'est donc une balise de type inline.

Quelques exemples

Afin de mieux vous aider à assimiler quelles balises sont inline et quelles balises sont block, voici un petit tableau listant quelques balises courantes.

Balises blocks Balises inline
<p> <em>
<blockquote> <strong>
<h1> <q>
<h2> <a>
<ul> <sup>
<ol> <img />
... ...

Ce tableau n'est pas complet, loin de là. Si vous voulez avoir la liste complète des balises qui existent, et savoir si elles sont inline ou block, reportez-vous au chapitre d'introduction donnant la liste de toutes les balises XHTML.

Les balises universelles

Ce sont des balises qui n'ont aucun sens particulier (contrairement à <p> qui veut dire "paragraphe", <strong> "important" etc...).
Le principal intérêt de ces balises c'est de pouvoir appliquer une class (ou un id) pour le css quand aucune autre balise ne convient.

Il existe 2 balises génériques, et comme par hasard la seule différence entre les deux c'est que l'une d'elle est inline, l'autre est block :

  • <span></span> (inline) :

    <p>Comme l'a dit <span class="nom">Neil Armstrong</span> un certain 20 juillet 1969...</p>

    S'il existait une balise XHTML <nom></nom>, je l'aurais utilisée. Mais comme ce n'était pas le cas, j'ai dû me rabattre sur un <span> et lui appliquer une class que j'ai inventée ("nom").


  • <div></div> (block) : c'est aussi une balise qui n'a aucun sens, comme span, sauf que celle-là est de type block. On va pas mal s'en servir pour créer le design d'un site. Vous allez voir qu'un design, en fait, c'est une série de blocks qu'on dispose comme on veut.


Différents types de listes (XHTML)

Dans ce chapitre nous apprendrons à créer des listes à puces d'un point de vue XHTML. Tout d'abord, il faut savoir qu'il existe 3 types de listes à puces :

  • Les listes non ordonnées
  • Les listes ordonnées
  • Les listes de définitions (plus rares)

Nous allons voir comment on crée chacune de ces listes à puces. C'est facile, mais soyez attentifs quand même. En effet, contrairement à ce qu'on pourrait croire les listes à puces sont très utilisées : elles servent notamment à créer le menu de votre site web !

Liste non ordonnée

Une liste non ordonnée ressemble à ceci :

  • Fraises
  • Framboises
  • Cerises

C'est un système qui nous permet de faire une liste d'éléments, sans notion d'ordre (il n'y a pas de "premier" ni de "dernier"). Créer une liste à puce non ordonnée est très simple. Il suffit d'utiliser la balise <ul> que l'on referme un peu plus loin avec un </ul>.
Commencez donc à taper ceci :

<ul></ul>

Et maintenant, voilà ce qu'on va faire : on va écrire chacun des éléments de la liste entre 2 balises <li></li>. Toutes ces balises doivent se trouver entre <ul> et </ul>. Vous allez comprendre de suite avec cet exemple :

<ul>
   <li>Fraises</li>
   <li>Framboises</li>
   <li>Cerises</li>
</ul>

<ul></ul> indique le début d'une liste à puce
<li></li> indique un nouvel élément de la liste à puce.

Vous pouvez mettre autant d'éléments que vous voulez dans la liste à puces, vous n'êtes pas limité à 3 éléments bien entendu.

Et voilà, vous savez créer une liste à puce non ordonnée !

Pour ceux qui ont besoin de faire des listes complexes, sachez que vous pouvez imbriquer des listes à puces (créer une liste à puce DANS une liste à puces). Si vous voulez faire ça, ouvrez une seconde balise <ul> à l'intérieur d'un élément <li></li>
Si vous fermez les balises dans le bon ordre, il ne devrait pas y avoir de problème.

Liste ordonnée

Pour faire une liste ordonnée, on va pas se fouler. On ne change que la balise <ul></ul> qui devient cette fois <ol></ol>
A l'intérieur, on ne change rien : on utilise toujours des balises <li></li>.

L'ordre dans lequel vous mettez les éléments de la liste est important. Le premier <li></li> sera l'élément n°1, le second sera le n°2 etc...

Comme c'est particulièrement intuitif, je vous laisse admirer la simplicité de cet exemple :

<ol>
   <li>Je me lève</li>
   <li>Je mange et je bois</li>
   <li>Je retourne me coucher</li>
</ol>

Par rapport à l'exemple précédent, tout ce qu'on a eu à changer donc c'est la balise <ol>

Liste de définitions

Là par contre, c'est différent des exemples précédents. C'est "un peu" plus difficile.
Le principe de base est le même. On indique le début et la fin de la liste à l'aide d'une balise. Ici il ne s'agit pas de <ul>, ni de <ol> mais de <dl> (c'est l'abréviation de "Definition List")

Commençons donc par taper ceci :

<dl>
</dl>

Bien, maintenant la petite différence c'est qu'on n'utilise plus la balise <li> pour indiquer les différents éléments de la liste.
En effet, dans le cas d'une liste de définitions, il y a 2 types d'éléments différents :

  • Les mots
  • Et leur définition

Les mots se trouvent entre <dt></dt>, et les définitions entre <dd></dd>.
Ce qu'il faut bien comprendre, c'est qu'on doit mettre d'abord le mot (<dt>), ensuite sa définition (<dd>). Si vous voulez mettre une seconde définition, il faut recommencer : un dt et ensuite un dd.

Regardez bien cet exemple :

<dl>
   <dt>Chat</dt>
       <dd>Animal à 4 pattes qui fait "Miaou !"</dd>
   <dt>Chien</dt>
       <dd>Animal à 4 pattes qui fait "Ouaf Ouaf !"</dd>
   <dt>Prof de maths</dt>
       <dd>Extraterrestre venu d'une autre planète qui enseigne des choses que personne ne comprend</dd>
</dl>

Comme vous pouvez le voir, les définitions sont mises légèrement en retrait par rapport aux mots.

Les éléments de la liste à puce fonctionnent donc ici par paire. Une fois qu'on a compris qu'il faut taper d'abord le mot, puis sa définition, on sait se servir des listes de définitions.



Les tableaux

Un tableau se construit â l'aide de balises XHTML. Commençons par voir la structure de base...

Un tableau simple

Première balise â connaître : <table> </table>. C'est cette balise qui permet d'indiquer le début et la fin d'un tableau.
Cette balise est de type block, donc il faut la mettre en dehors d'un paragraphe.

Exemple :

<p>Ceci est un paragraphe avant le tableau.</p>

<table>
   <!-- Ici, on mettra le contenu du tableau -->
</table>

<p>Ceci est un paragraphe après le tableau.</p>

Bon, et que met-on â l'intérieur du tableau ?

Alors lâ, préparez-vous â recevoir une avalanche de nouvelles balises
Pour commencer en douceur, voici 2 nouvelles balises très importantes :

  • <tr> </tr> : indique le début et la fin d'une ligne du tableau.
  • <td> </td> : indique le début et la fin du contenu d'une cellule.

En XHTML, votre tableau se construit ligne par ligne. Dans chaque ligne (<tr>), on indique le contenu des différentes cellules (<td>).
Schématiquement, notre tableau de tout â l'heure se construit comme suit.

On a une balise de ligne (<tr>) qui "entoure" chacune des cellules (<td>).
Par exemple, si je veux faire un tableau â deux lignes, avec 3 cellules par lignes (donc 3 colonnes), je devrai taper ceci :

<table>
   <tr>
       <td>Carmen</td>
       <td>33 ans</td>
       <td>Espagne</td>
   </tr>
   <tr>
       <td>Michelle</td>
       <td>26 ans</td>
       <td>Etats-Unis</td>
   </tr>
</table>

La ligne d'en-tête

Maintenant que l'on a ce qu'on voulait, on va rajouter la ligne d'en-tête du tableau. Dans notre exemple, les en-têtes sont "Nom", "Age" et "Pays".
La ligne d'en-tête se crée avec un <tr> comme on a fait jusqu'ici, mais les cellules â l'intérieur sont cette fois des <th> et non pas des <td> !

<table>
   <tr>
       <th>Nom</th>
       <th>Age</th>
       <th>Pays</th>
   </tr>

   <tr>
       <td>Carmen</td>
       <td>33 ans</td>
       <td>Espagne</td>
   </tr>
   <tr>
       <td>Michelle</td>
       <td>26 ans</td>
       <td>Etats-Unis</td>
   </tr>
</table>

La ligne d'en-tête est très facile â reconnaître pour 2 raisons :

  • Les cellules sont des <th> au lieu des <td> habituels.
  • C'est la première ligne du tableau.

Titre du tableau

Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau.
Dans notre exemple, on a une liste de personnes... oui mais alors ? Qu'est-ce que ça représente ? Sans titre de tableau, vous le voyez, on est un peu perdus

Heureusement, il y a <caption> !
Cette balise se met tout au début du tableau, juste avant l'en-tête. C'est elle qui indique le titre du tableau :

<table>
   <caption>Passagers du vol 377</caption>

   <tr>
       <th>Nom</th>
       <th>Age</th>
       <th>Pays</th>
   </tr>
   <tr>
       <td>Carmen</td>
       <td>33 ans</td>
       <td>Espagne</td>
   </tr>
   <tr>
       <td>Michelle</td>
       <td>26 ans</td>
       <td>Etats-Unis</td>
   </tr>
</table>

Des tableaux plus élaborés

Nous avons appris â faire des petits tableaux simples. Ces petits tableaux suffisent dans la plupart des cas, mais il arrivera que vous ayez besoin de faire des tableaux plus complexes.
Nous allons voir 2 techniques particulières :

  • Pour les gros tableaux, il est possible de les diviser en 3 parties :

    • En-tête
    • Corps du tableau
    • Pied de tableau

  • Pour certains tableaux, il se peut que vous ayez besoin de fusionner des cellules entre elles.

Commençons par le premier point : vous avez un gros tableau, et vous devez le diviser en plusieurs parties.

Diviser un gros tableau

Si votre tableau est assez gros, vous aurez tout intérêt â lea découper en plusieurs parties. Pour cela, il existe des balises XHTML qui permettent de définir les 3 "zones" du tableau :

  • L'en-tête (en haut) : il se définit avec les balises <thead></thead>
  • Le corps (au centre) : il se définit avec les balises <tbody></tbody>
  • Le pied du tableau (en bas) : il se définit avec les balises <tfoot></tfoot>

Que mettre dans le pied de tableau ? Généralement, si c'est un long tableau, vous recopiez les cellules d'en-tête. Ca permet de voir même en bas du tableau â quoi se rapporte chacune des colonnes.

La seule chose un peu déroutante, c'est qu'il faut mettre les balises dans l'ordre suivant :

  1. <thead>
  2. <tfoot>
  3. <tbody>

On met donc dans le code d'abord la partie du haut, ensuite la partie du bas, et enfin la partie principale (tbody). Le navigateur se chargera d'afficher les éléments au bon endroit, ne vous inquiétez pas

Voici donc le code â écrire pour faire le tableau en 3 parties :

<table>
   <caption>Passagers du vol 377</caption>

   <thead> <!-- En-tête du tableau -->
       <tr>
           <th>Nom</th>
           <th>Age</th>
           <th>Pays</th>
       </tr>
   </thead>

   <tfoot> <!-- Pied de tableau -->
       <tr>
           <th>Nom</th>
           <th>Age</th>
           <th>Pays</th>
       </tr>
   </tfoot>

   <tbody> <!-- Corps du tableau -->
       <tr>
           <td>Carmen</td>
           <td>33 ans</td>
           <td>Espagne</td>
       </tr>
       <tr>
           <td>Michelle</td>
           <td>26 ans</td>
           <td>Etats-Unis</td>
       </tr>
       <tr>
           <td>François</td>
           <td>43 ans</td>
           <td>France</td>
       </tr>
       <tr>
           <td>Martine</td>
           <td>34 ans</td>
           <td>France</td>
       </tr>
       <tr>
           <td>Jonathan</td>
           <td>13 ans</td>
           <td>Australie</td>
       </tr>
       <tr>
           <td>Xu</td>
           <td>19 ans</td>
           <td>Chine</td>
       </tr>
   </tbody>
</table>

Il n'est pas obligatoire d'utiliser ces 3 balises (thead, tbody, tfoot) sur son tableau. En fait, vous vous en servirez surtout si votre tableau est assez gros et que vous avez besoin de l'organiser plus clairement
Pour les "petits" tableaux vous pouvez garder l'organisation qu'on a vu au début (un peu plus simple), il n'y a pas de problème.

Fusion

Sur certains tableaux complexes, vous aurez besoin de "fusionner" des cellules entre elles.

Pour effectuer une fusion, il faut rajouter un attribut â la balise <td>. Il faut savoir qu'il existe 2 types de fusion :

  • La fusion de colonnes : La fusion s'effectue horizontalement. On utilisera l'attribut colspan.


  • La fusion de lignes : lâ, deux lignes seront groupées entre elles. La fusion s'effectuera verticalement. On utilisera l'attribut rowspan.

Comme vous le savez, vous devez donner une valeur â l'attribut (que ce soit colspan ou rowspan).
Cette valeur, c'est le nombre de cellules â fusionner entre elles.
On devra donc écrire :

    <td colspan="2">

Qui signifie : "Cette cellule est la fusion de 2 cellules"
Il est possible de fusionner plus de cellules â la fois (3, 4, 5... tant que vous voulez).

Voilâ le code XHTML qui me permet de réaliser la fusion de tout â l'heure :

<table>
   <tr>
       <th>Titre du film</th>
       <th>Pour enfants ?</th>
       <th>Pour adolescents ?</th>
   </tr>
   <tr>
       <td>Massacre â la tronçonneuse</td>
       <td >Non, trop violent</td>
       <td>Oui</td>
   </tr>
   <tr>
       <td>Les bisounours font du ski</td>
       <td>Oui, adapté</td>
       <td>Pas assez violent...</td>
   </tr>
   <tr>
       <td>Lucky Luke, seul contre tous</td>
       <td colspan="2">Pour toute la famille !</td>
   </tr>
</table>

Remarque importante : vous voyez que la dernière ligne ne contient que 2 cellules au lieu de 3 (il n'y a que 2 balises <td>).
C'est tout â fait normal, car j'ai fusionné les deux dernières cellules entre elles. Le <td colspan="2"> indique que cette cellule prend la place de 2 cellules â la fois.

Et pour le rowspan, on fait comment ?

Ca complique un petit peu. Pour notre exemple, on va "inverser" l'ordre de notre tableau : au lieu de mettre les titres de films â gauche, on va les mettre en haut.
C'est une autre façon de voir le tableau : au lieu de le faire en hauteur, on peut le faire en longueur.

Du coup, le colspan n'est plus adapté, c'est un rowspan qu'il faut faire pour dire que Lucky Luke est pour toute la famille.
Prenez le temps de lire et de comprendre cet exemple.

<table>
   <tr>
       <th>Titre du film</th>
       <td>Massacre â la tronçonneuse</td>
       <td>Les bisounours font du ski</td>
       <td>Lucky Luke, seul contre tous</td>
   </tr>
   <tr>
       <th>Pour enfants ?</th>
       <td>Non, trop violent</td>
       <td>Oui, adapté</td>
       <td rowspan="2">Pour toute la famille !</td>
   </tr>
   <tr>
       <th>Pour adolescents ?</th>
       <td>Oui</td>
       <td>Pas assez violent...</td>
   </tr>
</table>

Ne mélangez pas tout quand même ! Si cet exemple vous embrouille, vous pouvez l'oublier pour le moment il n'est pas forcément "vital".
Vous pourrez toujours y revenir plus tard, quand vous vous serez déjâ habitués avec l'autre façon de faire les tableaux. Il n'y a pas de honte â remettre un exemple pour plus tard



Créer un formulaire

Lorsqu'il vous prend subitement l'envie d'insérer un formulaire dans votre page XHTML, vous devez obligatoirement créer une balise <form></form>. C'est la balise principale du formulaire, elle permet d'en indiquer le début et la fin.

<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 <p></p>) à l'intérieur de votre formulaire si vous avez besoin d'écrire du texte dedans.

Donc ça, c'était la structure de base.
Maintenant restez attentifs, parce que ce que j'ai à vous dire n'est pas évident vu qu'on est à la limite du XHTML.

Il faut savoir qu'un formulaire est fait pour être envoyé. On va prendre un exemple pour que les choses soient claires.
Supposons que votre visiteur vienne de taper un commentaire dans votre formulaire, comme par exemple "Chouette to site ". Ce message doit être envoyé pour que vous puissiez le recevoir, et afin que vous sachiez ce que le visiteur pense de votre site.

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 rentré 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 ? Cela revient d'ailleurs à faire un livre d'or pour votre site si vous avez bien suivi.

Vous devez indiquer 2 attributs à la balise <form> afin de donner les réponses à ces 2 problèmes :

  • method : cet attribut indique par quel moyen les données vont être envoyées (problème n°1). 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, je vous recommande d'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 (problème n°2). Cette page se chargera de vous envoyer un 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 XHTML / CSS, on utilisera en général un autre langage dont vous avez peut-être entendu parler : le PHP. (Demandez à Alain)

On va donc maintenant compléter la balise <form> avec les 2 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 spéciale en PHP ("traitement.php"). C'est cette page qui sera appelée lorsque le visiteur cliquera sur le bouton "Envoyer le formulaire".

<p>Texte avant le formulaire</p>

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

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

Pour le moment, on ne sait pas ce qu'il se passe à l'intérieur de la page "traitement.php" : je vous demande de me faire confiance et d'imaginer que cette page existe et fonctionne.

Notre priorité, c'est de voir comment en XHTML / CSS on fait pour insérer des zones de texte, des boutons et des cases à cocher dans votre page web.

Les zones de saisie

Nous allons voir quelles sont les balises XHTML qui nous permettent de rentrer du texte dans un formulaire.
Pour commencer, il faut savoir qu'il y a 2 zones de texte différentes :

  • La zone de texte à une ligne : comme son nom l'indique, on ne peut écrire qu'une seule ligne à l'intérieur. Elle sert pour rentrer des textes courts, comme par exemple : "Entrez votre pseudo".


  • La zone de texte multiligne : cette zone de texte permet d'écrire une quantité importante de texte sur plusieurs lignes, comme par exemple : "Faites une dissertation sur l'utilité du XHTML dans le développement des pays d'Asie du Sud-Est"

Zone de texte à une ligne

Pour insérer une zone de texte à une ligne, on va utiliser la balise <input />.
On la retrouvera plusieurs fois par la suite dans ce chapitre. A chaque fois, c'est son attribut type qui va changer.

Pour une zone de texte à une ligne, on doit taper :

<input type="text" />

Mais ce n'est pas tout ! Il manque un attribut qui sera très important : c'est le nom de votre zone de texte. En effet, cela vous permettra plus tard (dans le langage PHP) de reconnaître que tel texte est le pseudo du visiteur, tel texte est son mot de passe etc...
Il faut donc donner un nom à cette zone de texte, grâce à l'attribut name. Ici, on va supposer qu'on demande au visiteur de rentrer son pseudo :

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

Allez, on va déjà tester ça :

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

Pensez à entourer votre balise <input /> par une balise block comme <p></p> car sinon votre page web ne sera pas valide ("Le W3C et les standards du web").

Les labels

Cette zone de texte est bien jolie, mais si votre visiteur tombe dessus il ne sait pas trop ce qu'il doit mettre dedans. On va justement lui expliquer qu'il doit rentrer son pseudo.
Pour indiquer ce que signifie une zone de texte au visiteur, on utilise la balise <label> qui "entoure" le libellé ET la zone de texte, comme ceci :

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

Si votre navigateur n'est pas Internet Explorer, essayez de cliquer sur le texte "Votre pseudo" : vous allez voir 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.

Bon, c'est dommage parce que ça ne marche pas sur Internet Explorer. Il faut savoir qu'il existe une méthode qui fonctionne sur IE, mais elle est un peu compliquée pour pas grand chose.
Je préfère donc volontairement ne pas vous en parler, vous ne perdrez pas grand chose de toute manière.

Mais... Ca sert juste à ce que la zone de texte soit sélectionnée si on clique sur "Votre pseudo" ?

Non, justement. Cela permet aussi aux personnes atteintes d'un handicap de pouvoir se repérer plus facilement dans votre formulaire. On n'y pense pas assez souvent, mais parfois les formulaires sont tellement gros et mal construits qu'il est difficile de savoir à quoi se rapporte chaque zone de texte.
Ici, les non-voyants par exemple sauront que la zone de texte correspond au label "Votre pseudo" à coup sûr, et ils vous seront reconnaissants d'avoir pris le temps de rendre votre formulaire plus clair grâce aux labels.

Quelques attributs supplémentaires

Il existe quelques autres attributs sur la balise <input /> qui vous intéresseront sûrement.

Il est ainsi possible, si vous en avez besoin, de donner une valeur par défaut à votre zone de texte.
Pour faire cela, il vous suffit d'ajouter l'attribut value à <input /> en indiquant quelle valeur vous voulez mettre au départ. Exemple :

<input type="text" name="pseudo" value="M@teo21" />

Autre chose : vous pouvez modifier la largeur de votre zone de texte ainsi que le nombre maximal de caractères que l'on peut mettre dedans.
La largeur se définit avec size.
Le nombre maximal de caractères se définit avec maxlength.

Dans l'exemple suivant, la zone de texte contient le pseudo "M@teo21" par défaut, elle fait 30 caractères de long mais on ne peut mettre que 10 caractères maximum à l'intérieur :

<form method="post" action="traitement.php">
   <p>
       <label>
           Votre pseudo :
           <input type="text" name="pseudo" value="M@teo21" size="30" maxlength="10" />
       </label>
   </p>
</form>

Zone de mot de passe

Vous pouvez facilement faire en sorte que la zone de texte se comporte comme une zone "mot de passe", c'est-à-dire une zone où on ne voit pas à l'écran ce qui est tapé dedans.
La seule chose que vous avez besoin de changer, c'est l'attribut type de <input />. Mettez type="password", et le tour est joué !

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

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

Zone de texte multiligne

On arrive aux zones de texte multilignes. Rassurez-vous, ça va aller plus vite maintenant que vous connaissez les labels.

La zone de texte multiligne est une balise existant par paire (contrairement à <input />). C'est la balise <textarea></textarea>
A elle aussi, comme à 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.

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

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.

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

Mais euh, au fait : pourquoi on ouvre <textarea> pour le fermer juste après ? Une balise simple comme <input /> aurait suffit non ?

En fait, cela sert à pré-remplir le textarea. C'est un peu ce qu'on faisait tout à l'heure avec value, sauf que là on peut le faire sur plusieurs lignes.
Vous pouvez donc mettre la valeur par défaut du textarea comme ceci :

<form method="post" action="traitement.php">
   <p>
       <label>
           Comment pensez-vous que je pourrais améliorer mon site ?<br />
<textarea name="ameliorer" rows="10" cols="50">
Améliorer ton site ?!
Mais enfin ! Il est tellement génialissime qu'il n'y a pas besoin de l'améliorer !
</textarea>
       </label>
   </p>
</form>

Elements d'options

En plus des zones de saisies, le XHTML vous offre une ribambelle d'éléments d'options à utiliser dans votre formulaire.
On va voir dans cette partie :

  • Les cases à cocher, que vous connaissez sûrement...
  • Les zones d'options, que vous connaissez aussi...
  • Les listes déroulantes, que vous avez déjà dû voir...

Ou plutôt : vous avez déjà vu tous ces éléments, mais je parie que vous ne savez pas comment on les crée en XHTML !

Les cases à cocher

La balise à utiliser vous la connaissez déjà : c'est <input />
On va seulement changer la valeur de son attribut type pour mettre "checkbox" :

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

Rajoutez un <label> bien placé, et le tour est (déjà ?) joué !

<form method="post" action="traitement.php">
   <p>
       Cochez les aliments que vous aimez manger :<br />
       <label><input type="checkbox" name="frites" /> Frites</label><br />
       <label><input type="checkbox" name="steak" /> Steak haché</label><br />
       <label><input type="checkbox" name="epinards" /> Epinards</label><br />
       <label><input type="checkbox" name="huitres" /> Huitres</label>
   </p>
</form>

Qu'est-ce que je peux rajouter ?
Grâce aux label, vous n'êtes pas obligés de cliquer directement sur la case, vous pouvez aussi cliquer sur le texte juste à côté (enfin, ça ne marche pas sur IE comme je vous l'ai dit...).
N'oubliez pas aussi de donner un nom à chaque case à cocher, cela vous permettra d'identifier plus tard quelles cases le visiteur a coché.

Ah si, j'allais oublier. Vous pouvez faire en sorte qu'une case soit déjà cochée par défaut. Pour faire cela, il faut rajouter l'attribut checked="checked".
Cela nous permet d'influencer les choix dans notre exemple.

<form method="post" action="traitement.php">
   <p>
       Cochez les aliments que vous aimez manger :<br />
       <label><input type="checkbox" name="frites"/> Frites</label><br />
       <label><input type="checkbox" name="steak" /> Steak haché</label><br />
       <label><input type="checkbox" name="epinards" checked="checked" /> Epinards</label><br />
       <label><input type="checkbox" name="huitres" /> Huitres</label>
   </p>
</form>

Les zones d'options

Les zones d'options vous permettent de faire un choix (et un seul) parmi une liste de possibilités :

Ca ressemble aux cases à cocher, avec juste une petite difficulté supplémentaire, vous allez voir.

La balise à utiliser est toujours un <input />, avec cette fois la valeur "radio" pour l'attribut type.
La grosse 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.

Les choses seront plus claires sur l'exemple ci-dessous :

<form method="post" action="traitement.php">
   <p>
       Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
       <label><input type="radio" name="age" value="moins15" /> Moins de 15 ans</label><br />
       <label><input type="radio" name="age" value="15-25" /> 15-25 ans</label><br />
       <label><input type="radio" name="age" value="25-40" /> 25-40 ans</label><br />
       <label><input type="radio" name="age" value="plus40" /> Encore plus vieux que ça ?!</label>
   </p>
</form>

Pourquoi avoir mis le même nom pour chaque option ? Tout simplement pour que le navigateur sache dans quel "groupe" le bouton fait partie.
Essayez d'enlever les attributs name, vous verrez que chaque élément d'option deviendra sélectionnable. Or, ce n'est pas ce que l'on veut, c'est pour ça qu'on les "lie" entre eux en leur donnant un nom identique.

Si vous avez 2 zones d'options différentes, il faut donner un nom unique à chaque groupe comme ceci :

<form method="post" action="traitement.php">
   <p>
       Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
       <label><input type="radio" name="age" value="moins15" /> Moins de 15 ans</label><br />
       <label><input type="radio" name="age" value="15-25" /> 15-25 ans</label><br />
       <label><input type="radio" name="age" value="25-40" /> 25-40 ans</label><br />
       <label><input type="radio" name="age" value="plus40" /> Encore plus vieux que ça ?!</label>
   </p>
   <p>
       Sur quel continent habitez-vous ?<br />
       <label><input type="radio" name="continent" value="europe" /> Europe</label><br />
       <label><input type="radio" name="continent" value="afrique" /> Afrique</label><br />
       <label><input type="radio" name="continent" value="asie" /> Asie</label><br />
       <label><input type="radio" name="continent" value="amerique" /> Amérique</label><br />
       <label><input type="radio" name="continent" value="australie" /> Australie</label>
   </p>
</form>

Si, au lieu de mettre name="continent" on avait continué à mettre des name="age", le visiteur n'aurait pas pu sélectionner son âge ET son continent.
Essayez de changer les noms, vous verrez bien ce qu'il se passe.

Dernière petite précision : si vous voulez qu'une des options soit cochée par défaut, vous rajoutez un checked="checked" comme pour les cases à cocher, et le tour est joué !

Les listes déroulantes

Les listes déroulantes sont un autre moyen élégant de faire un choix entre plusieurs possibilités :

Cette fois, ça fonctionne un peu différemment. On va utiliser 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. Par exemple "pays" :

<select name="pays">

Et maintenant, à l'intérieur du <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.

<form method="post" action="traitement.php">
   <p>
       <label>
           Dans quel pays habitez-vous ?<br />
           <select name="pays">
               <option value="france">France</option>
               <option value="espagne">Espagne</option>
               <option value="italie">Italie</option>
               <option value="royaume-uni">Royaume-Uni</option>
               <option value="canada">Canada</option>
               <option value="etats-unis">Etats-Unis</option>
               <option value="chine">Chine</option>
               <option value="japon">Japon</option>
           </select>
       </label>
   </p>
</form>

Le principe est un peu différent de ce qu'on a vu jusqu'ici, mais ça se comprend néanmoins très bien.

Autre nouveauté, on ne peut plus utiliser le checked="checked" ici, on doit utiliser à la place le selected="selected". Il nous permet comme le checked de sélectionner une valeur par défaut :

<form method="post" action="traitement.php">
   <p>
       <label>
       Dans quel pays habitez-vous ?<br />
           <select name="pays">
               <option value="france">France</option>
               <option value="espagne">Espagne</option>
               <option value="italie">Italie</option>
               <option value="royaume-uni">Royaume-Uni</option>
               <option value="canada" selected="selected">Canada</option>
               <option value="etats-unis">Etats-Unis</option>
               <option value="chine">Chine</option>
               <option value="japon">Japon</option>
           </select>
       </label>
   </p>
</form>

On peut créer des groupes d'options à l'intérieur de la liste, grâce à la balise <optgroup></optgroup>. Vous devez lui ajouter l'attribut label qui permet de donner un nom au groupe (à ne pas confondre avec la balise <label> !).

Dans notre exemple, pourquoi ne pas séparer les pays en fonction de leur continent ?

<form method="post" action="traitement.php">
   <p>
       <label>
           Dans quel pays habitez-vous ?<br />
           <select name="pays">
               <optgroup label="Europe">
                   <option value="france">France</option>
                   <option value="espagne">Espagne</option>
                   <option value="italie">Italie</option>
                   <option value="royaume-uni">Royaume-Uni</option>
               </optgroup>
               <optgroup label="Amérique">
                   <option value="canada">Canada</option>
                   <option value="etats-unis">Etats-Unis</option>
               </optgroup>
               <optgroup label="Asie">
                   <option value="chine">Chine</option>
                   <option value="japon">Japon</option>
               </optgroup>
           </select>
       </label>
   </p>
</form>

C'est assez pratique, surtout quand on a une grande liste déroulante.

Un formulaire accessible et design ?

Maintenant, on va essayer d'aller encore plus loin.
Notre objectif sera double : faire en sorte que notre formulaire soit accessible (= compréhensible) et design (= pas trop moche)

Définir un ordre de tabulation

C'est le premier des points que nous allons voir censé nous faciliter la vie.
Comme vous le savez peut-être, on peut se déplacer dans un formulaire uniquement grâce à la touche "Tab" (tabulation) située à gauche de votre 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 va utiliser l'attribut tabindex qui peut se rajouter sur toutes les balises du formulaire qu'on a apprises.
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...

Vous n'êtes pas obligés de mettre des nombres qui se suivent. Il est même conseillé de laisser des "espaces" entre les nombres au cas où vous auriez 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... Ca 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

Sur ce formulaire, j'ai rajouté les tabindex à chaque champ. Comme on l'a vu, le premier champ est celui qui a le numéro le plus petit, et le dernier celui qui a le plus grand.

<form method="post" action="traitement.php">
   <p>
       <label>Quel est votre nom ?<br />
           <input type="text" name="nom" tabindex="10" />
       </label><br />

       <label>Quel est votre prénom ?<br />
           <input type="text" name="prenom" tabindex="20" />
       </label><br />

       <label>Quel est votre e-mail ?<br />
           <input type="text" name="email" tabindex="30" />
       </label><br />

       <label>
       Dans quel pays habitez-vous ?<br />
           <select name="pays" tabindex="40">
               <optgroup label="Europe">
                   <option value="france">France</option>
                   <option value="espagne">Espagne</option>
                   <option value="italie">Italie</option>
                   <option value="royaume-uni">Royaume-Uni</option>
               </optgroup>
               <optgroup label="Amérique">
                   <option value="canada">Canada</option>
                   <option value="etats-unis">Etats-Unis</option>
               </optgroup>
               <optgroup label="Asie">
                   <option value="chine">Chine</option>
                   <option value="japon">Japon</option>
               </optgroup>
           </select>
       </label><br />
   </p>
</form>

Essayez de taper plusieurs fois d'affilée sur "Tab", vous allez voir que vous vous déplacerez dans l'ordre que vous avez défini avec tabindex.
Cela est particulièrement utile pour les personnes qui ne peuvent pas se servir d'une souris (eh oui, ça existe !).

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, je vous conseille de toujours mettre vous-même les tabindex, car si votre formulaire se complexifie par la suite cela sera très utile.

Définir des touches de raccourci

Une touche de raccourci ("access key" en anglais) est une touche qui permet d'accéder directement à un champ de votre formulaire sans avoir à cliquer dessus avec la souris et sans avoir à appuyer plusieurs fois sur "Tab" comme un forcené avant de tomber sur le champ qui vous intéresse.

Ce qui est très pratique, c'est que le XHTML vous permet de choisir quelles touches du clavier serviront de raccourcis.
Ce qui l'est moins, c'est que les raccourcis s'utilisent de manière différente en fonction du navigateur :

  • >Firefox et Internet Explorer (Windows) : il faut faire la combinaison de touches Alt + Raccourci.


  • >Safari et IE-Mac (Macintosh) : il faut taper Ctrl + Raccourci.

Pour définir une touche de raccourci, vous utiliserez l'attribut accesskey qui, comme tabindex, peut se mettre sur tous les types de champs de formulaire qu'on a vus.
Vous devez lui mettre comme valeur la touche du clavier qui doit servir de raccourci pour le champ.

Sur cet exemple, le champ de recherche est accessible directement avec la touche R :

<form method="post" action="traitement.php">
   <p>
       <label>Quel est votre nom ?<br />
           <input type="text" name="nom" tabindex="10" />
       </label><br />

       <label>Quel est votre prénom ?<br />
           <input type="text" name="prenom" tabindex="20" />
       </label><br />

       <label>Quel est votre e-mail ?<br />
           <input type="text" name="email" tabindex="30" />
       </label><br />

       <label>
       Que recherchez-vous sur ce site ? <em>(raccourci : R)</em><br />
           <input type="text" name="recherche" tabindex="30" accesskey="R" />
       </label><br />
   </p>
</form>

Sous Windows, il faut donc faire Alt + R pour arriver directement sur le champ de recherche.
Sous Mac, il faut faire Ctrl + R.

Le gros problème des touches de raccourci est que certains caractères sont déjà utilisés par le navigateur. Si vous utilisez les mêmes, il y aura un conflit et vos visiteurs ne pourront plus utiliser les raccourcis auxquels ils sont habitués.
L'idéal est d'utiliser des chiffres en raccourci, ils sont en général très peu utilisés par les navigateurs.

N'oubliez pas d'indiquer quelque part sur la page quels sont les raccourcis utilisables, parce que vos visiteurs ne pourront pas les deviner.

Organiser le formulaire en plusieurs zones

La technique que nous allons voir à 2 avantages :

  • Elle permet de rendre le formulaire plus clair, donc plus accessible.


  • Elle permet d'améliorer le design de votre formulaire.

Concrètement, quelle est l'idée ?
Si vous avez un formulaire assez gros (et en général ce sera le cas), il est facile que le visiteur se perde dans la masse d'informations qu'il a à entrer. Il est possible en XHTML de grouper plusieurs champs ayant un thème entre eux.

On utilisera la balise <fieldset></fieldset> pour délimiter un groupe de champs.
A l'intérieur de cette balise, vous mettrez vos champs (vos <input /> entre autres...) ainsi qu'une autre balise : <legend></legend>. Celle-ci permet de donner le nom du groupe.

Ca ressemble étrangement aux <optgroup> qu'on vient de voir ça... Mais pourquoi tout à l'heure on a utilisé un attribut (label) pour donner un titre au groupe, et là on utilise une balise spéciale <legend> ?

Alors ça, ça fait partie des grands mystères du XHTML. Je n'en sais strictement rien, et pour ma part j'aurais préféré qu'on se mette d'accord : soit on utilise des attributs pour donner un titre, soit on utilise des balises.
Là, ça sera à vous de vous en souvenir.

Allez, trêve de bavardages, voici un exemple concret d'utilisation des <fieldset> :

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

   <fieldset>
       <legend>Vos coordonnées</legend> <!-- Titre du fieldset -->

       <label>Quel est votre nom ?<br />
           <input type="text" name="nom" tabindex="10" />
       </label><br />
       <label>Quel est votre prénom ?<br />
           <input type="text" name="prenom" tabindex="20" />
       </label><br />
       <label>Quel est votre e-mail ?<br />
           <input type="text" name="email" tabindex="30" />
       </label>   
   </fieldset>

   <fieldset>
       <legend>Votre souhait</legend> <!-- Titre du fieldset -->

       <p>
           Faites un souhait que vous voudriez voir exaucé :<br />
           <label><input type="radio" name="souhait" value="riche" tabindex="40" /> Etre riche</label><br />
           <label><input type="radio" name="souhait" value="celebre" tabindex="50" /> Etre célèbre</label><br />
           <label><input type="radio" name="souhait" value="intelligent" tabindex="60" /> Etre <strong>encore</strong> plus intelligent</label><br />
           <label><input type="radio" name="souhait" value="autre" tabindex="70" /> Autre...</label><br />
       </p>

       <p>
           <label>Si "Autre", veuillez préciser :<br />
           <textarea name="precisions" cols="40" rows="4" tabindex="80"></textarea></label>
       </p>
   </fieldset>
</form>

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

Le résultat est de toute évidence plus clair : on voit de suite quelles sont les grandes parties du formulaire. On y gagne forcément en clarté, et le visiteur vous en sera reconnaissant.

Le bouton

Nous y sommes presque.
Nous avons vu la plupart des éléments que l'on peut intégrer dans un formulaire, mais il manque le plus important : le bouton de validation !

Heureusement, c'est très facile à créer, d'autant plus que vous connaissez déjà la balise: <input />

Bon, bien sûr un seul type de bouton ne suffisait pas aux webmasters, il a fallu en créer 3 :

  • 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 (on l'a vu au début de ce chapitre).
    Un bouton d'envoi se crée avec l'attribut type="submit". Vous pouvez lui ajouter un attribut value pour changer le texte à l'intérieur du bouton, mais vous pouvez 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 ? Ca vous servira principalement à lancer des scripts en Javascript.
    Cette fois, je vous recommande de mettre l'attribut value pour que l'on sache à quoi sert le bouton :
  • <input type="button" value="Je sers à rien" />

On va tester les 2 premiers boutons (envoi et remise à zéro) dans un petit formulaire fictif :

<form method="post" action="cible_formulaire.php">
   <fieldset>
       <legend>Vos coordonnées</legend>
       <label>Quel est votre nom ?<br />
           <input type="text" name="nom" tabindex="10" />
       </label><br />
       <label>Quel est votre prénom ?<br />
           <input type="text" name="prenom" tabindex="20" />
       </label><br />
       <label>Quel est votre e-mail ?<br />
           <input type="text" name="email" tabindex="30" />
       </label>   
   </fieldset>
   <fieldset>
       <legend>Votre souhait</legend>
       <p>
           Faites un souhait que vous voudriez voir exaucé :<br />
           <label><input type="radio" name="souhait" value="riche" tabindex="40" /> Etre riche</label><br />
           <label><input type="radio" name="souhait" value="celebre" tabindex="50" /> Etre célèbre</label><br />
           <label><input type="radio" name="souhait" value="intelligent" tabindex="60" /> Etre <strong>encore</strong> plus intelligent</label><br />
           <label><input type="radio" name="souhait" value="autre" tabindex="70" /> Autre...</label><br />
       </p>
       <p>
           <label>Si "Autre", veuillez préciser :<br />
           <textarea name="precisions" cols="40" rows="4" tabindex="80"></textarea></label>
       </p>
   </fieldset>
   <p>
       <input type="submit" /> <input type="reset" />
   </p>
</form>

Dans le cas présent, le formulaire ne fait strictement rien. Rassurez-vous donc, aucune information n'a été enregistrée

Lorsque vous cliquez sur "Envoyer", le formulaire vous amène donc à une page "cible_formulaire.php", qui est une page fictive en PHP .
Comme je vous l'ai dit, c'est un peu là la limite : on sait construire un formulaire en XHTML / CSS, mais pour traiter les données (les enregistrer ou les envoyer par mail) on est obligés de passer par le langage PHP.




17/04/20006 Tutorial XHTML > Avancés By LeDide