Les bases du HTML

Pour mettre le texte en gras on l'encadre de la balise <b> :

<b>Ce texte s'affichera en gras.</b>

Pour mettre le texte en italique on l'encadre de la balise <i> :

<i>Ce texte s'affichera en italique.</i>

Pour souligner le texte on l'encadre de la balise <u> :

<u>Ce texte sera souligné.</u>

Pour barrer le texte on l'encadre de la balise <s> :

<s>Ce texte sera barré.</s>

Pour placer le texte en exposant on l'encadre de la balise <sup> :

<sup>Ce texte sera en exposant.</sup>

Pour placer le texte en indice on l'encadre de la balise <sub> :

<sub>Ce texte sera en indice.</sub>

Pour modifier la couleur du texte on utilise l'attribut color de la balise <font> :

<font color="#ff0000">Ce texte sera en rouge.</font>

Les couleurs peuvent être écrites de deux manières :

• En hexadécimal de type RVB et précédées d'un dièse (#) ; Exemples : #ff0000 => rouge, #00ff00 => vert, #0000ff => bleu.
• Textuelles en anglais US ; Exemples : red, yellow, pink.

Pour modifier la police du texte on utilise l'attribut face de la balise <font> :

<font face="verdana">Ce texte sera en verdana.</font>

On a tendance à écrire des familles de polices plutôt qu'une seule police. En effet, il se peut que sur un système différent du vôtre la police choisie ne soit pas installée et il faut qu'il puisse alors afficher le texte dans une police proche de celle que vous vouliez avoir.
On sépare alors les différentes polices par une virgule dans l'ordre de sélection le cas où la précédente ne peut pas être affichée.

<font face="verdana,sans-serif">Ce texte sera en verdana ou en sans-serif si verdana n'est pas installée.</font>

Pour modifier la taille du texte on utilise l'attribut size de la balise <font> :

<font size="5">Ce texte sera en taille 5.</font>

Par défaut, la valeur de l'attribut size vaut "3".
Il y a deux manières de modifier la valeur de cet attribut : et les valeurs possibles sont les entiers de "1" à "7".

• En absolu : Les valeurs possibles sont les entiers de "1" à "7".
• En relatif : Les valeurs possibles les entiers de "-2" à "+4".

Et il est bien évidemment possible de renseigner ces trois attributs (color, face, size) à la fois dans la même balise <font>.



Commentez l'article : Commentez

Pour afficher une image en HTML, on utilise la balise <img>. Elle admet différents attributs, dont les plus importants sont src et alt.
L'attribut src permet de renseigner le chemin de l'image, qui peut être absolu HTTP ou relatif, très utile pour pouvoir l'afficher.
L'attribut alt affiche un texte alternatif à la place de l'image dans le cas où, pour une raison ou autre, celle-ci ne peut pas être chargée. Il aide de plus les moteurs de recherche à référencer l'image et les déficients visuels à savoir ce que l'image représente.

<img src="adresse/de/l/image" alt="Description de l'image">

L'attribut alt n'est pas censé créer une infobulle lors du survol de l'image, qui est le rôle de l'attribut title, cependant sur Internet Explorer le alt affiche cette infobulle.

Les différents formats d'image supportés par cette balise sont :

• GIF
• JPG
• PNG
• BMP (à éviter)

Le HTML permet de créer des zones réactives sur les images, afin de définir plusieurs liens différents sur une seule et même image, ou de ne rendre qu'une seule partie de l'image cliquable. On appelle l'ensemble de ces zones une carte, ou map.
Les balises qui permettent de faire ces zones réactives sont <map> et <area> étroitement liées avec la balise <img>. En effet, on doit forcément préciser sur quelle image ces zones vont être présentes.
L'attribut de la balise <img> qui va contenir le nom de la map dont elle fait référence est usemap. Le nom de cette map est précédé du signe dièse (#).

<img src="adresse/de/l/image" alt="Description de l'image" usemap="#nomDeLaMap">

La balise qui va contenir l'ensemble de nos zones réactives pour cette image est la balise <map>, qui doit obligatoirement avoir l'attribut name renseigné et qui aura pour valeur le nom de la map, le même renseigné dans l'attribut usemap de notre image.
Comme vous l'aurez sans doute deviné et comme son nom l'indique, la balise <area> sera une zone réactive dans notre map. Il y a une balise area par zone.

<map name="nomDeLaMap">
    <!-- Ici nous allons mettre nos différentes zones réactives -->
    <area ...>
    <area ...>
</map>

Les différents attributs de la balise <area> nécessaires à son bon fonctionnement sont :

• coords, qui va contenir les différentes coordonnées de notre zone.
• href, qui va définir l'adresse de destination du lien.
• shape, qui va renseigner le type de zone que l'on souhaite afficher.

On distingue trois types de zones :

• Les zones rectangulaires,
• Les zones circulaires,
• Les zones polygonales.

On peut bien évidemment avoir autant de zones que l'on veut sur une map, et on peut également combiner les différents types de zones sur une seule et même image.
Attention toutefois à ne pas faire se chevaucher les zones ! Le cas échéant, c'est la zone définie la première qui s'affichera au-dessus.

II-D-2-a. Les zones rectangulaires▲

<area shape="rect" coords="x1,x2,y1,y2" href="adresse/de/destination">

<area shape="rect" coords="10,50,60,60" href="adresse/de/destination">

II-D-2-b. Les zones circulaires▲

<area shape="circ" coords="x,y,rayon" href="adresse/de/destination">

<area shape="circ" coords="40,40,10" href="adresse/de/destination">

II-D-2-c. Les zones polygonales▲

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..,xn,yn" href="adresse/de/destination">

<area shape="poly" coords="0,0,40,50,78,101,17,150" href="adresse/de/destination">

Un lien externe est un lien hypertexte qui renvoie vers une autre page. Cette autre page peut être une page de votre site ou celle d'un site tiers.

Un lien interne est un lien qui renvoie vers la même page, mais pas forcément au même endroit de la page.

Attention à ne pas confondre "liens internes" avec "lien interne au site" !
Un lien interne au site est en général un lien externe à la page.

II-E-2-a. Les ancres▲

<a href="#motClef">Texte de mon ancre</a>
 
[...]
 
<h2 id="motClef">Texte vers lequel l'ancre est renvoyée</h2>

<a href="adresse/de/destination.html#motClef">Texte de mon ancre</a>

II-E-2-b. Les liens vers d'autres cadres▲

<a href="adresse/de/destination.html" target="cadrePrincipal">Lien de mon menu</a>

Vous pouvez permettre à vos visiteurs d'écrire sur votre adresse e-mail avec la syntaxe "mailto:" :

<a href="mailto:jwillette@monsite.com">Ecrivez-moi</a>

Ce type de liens ouvre le logiciel de messagerie par défaut de vos visiteurs.

Vous pouvez aussi renseigner un sujet par défaut de l'e-mail, ainsi qu'un corps voire même les deux :

<a href="mailto:jwillette@monsite.com?subject=Sujet du mail">Ecrivez-moi</a>

<a href="mailto:jwillette@monsite.com?body=Corps du mail">Ecrivez-moi</a>

<a href="mailto:jwillette@monsite.com?subject=Sujet du mail&body=Corps du mail">Ecrivez-moi</a>

Vous pouvez enfin mettre plusieurs destinataires ou mettre une personne en copie du mail :

<a href="mailto:destinataire1@monsite.com;destinataire2@monsite.com">Ecrivez-nous</a>

<a href="mailto:destinataire1@monsite.com?cc=destinataire2@monsite.com">Ecrivez-nous</a>

Un protocole est un moyen qu'ont deux ordinateurs de communiquer. Il diffère selon le type de données echangées.
Il existe de nombreux protocoles disponibles par lien hypertexte, en voici une liste non exhaustive :

• Pour éviter d'avoir le cadre bleu autour d'une image lorsqu'elle est dans un lien, il vous suffit de renseigner l'attribut border à "0" :

<a href="adresse/de/destination.html"><img src="adresse/de/l/image.gif" border="0"></a>

• Si vous voulez avoir une infobulle qui s'affiche sur votre lien lors du passage de la souris, vous pouvez renseigner l'attribut title :

<a href="adresse/de/destination.html" title="Description de la page cible">Texte du lien</a>

• Vous pouvez remplacer l'adresse du lien par l'appel d'une fonction Javascript qui s'exécutera au clic du lien.

<a href="javascript:maFonctionJavascript()">Texte du lien</a>

Commentez l'article : Commentez

Les cadres servent à séparer la fenêtre en différents morceaux indépendants qui peuvent chacun contenir une page HTML différente, ces morceaux ayant la capacité de communiquer entre eux.
On utilise au minimum deux cadres dans une fenêtre, en général un cadre pour le menu à gauche et un autre pour le contenu du site. Parfois un rajoute un cadre en haut pour un bandeau fixe.

Le document HTML qui va appeler les différents cadres ne pourra servir qu'à ça. Aucun texte ou aucune image inséré dans ce document ne sera affiché dans le navigateur du visiteur. Donc dans le cas où nous avons deux cadres, un pour le menu et un pour le contenu, nous aurons trois fichiers différents. Comme les deux pages du menu et du contenu sont des pages ordinaires, nous ferons l'impasse dessus. En revanche, la page qui appelle les cadres est tout à fait différente.
Ce sont les balises <frameset> et <frame> qui vont être utilisées pour la mise en oeuvre du jeu de cadres.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
    <title>Titre de la page</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<frameset>
 
<!-- Ici le contenu de la frameset principale -->
 
</frameset>
</html>

On remarque la présence de la balise <frameset> qui remplace d'ordinaire la balise <body> et le DOCTYPE approprié pour l'usage des cadres.
La balise <frameset> va désigner le nombre de cadres et leur taille.
Si on renseigne l'attribut cols, la page sera coupée verticalement, alors que si on renseigne l'attribut rows, la page sera coupée horizontalement. Ces attributs prennent pour valeur les tailles des différents cadres séparées par une virgule. Si une des valeurs est une étoile, ça signifie que le cadre en question prendra toute la place disponible restante dans la fenêtre. On ne peut évidemment pas utiliser ces deux attributs conjointement sur une seule et même balise <frameset>.

<frameset cols="20%, *">

<frameset cols="20%, *, 20%">

<frameset rows="100, *">

Dans cette balise <framset> nous allons mettre l'ensemble de nos cadres. Le nombre de cadres correspond au nombre de valeurs renseignées dans les attributs cols et rows.

<frameset cols="200, *">
    <frame>
    <frame>
</frameset>

C'est dans la balise <frame> que l'on va fixer la source de chacun des cadres, grâce à l'attribut src.
Un attribut important de cette balise est name. En effet, il va falloir dire à nos liens qui sont dans le menu, par exemple, d'aller changer la source d'un autre cadre. L'attribut target du lien prendra alors pour valeur le nom du cadre ciblé.
On peut aussi jouer sur les bordures avec l'attribut frameborder qui prend pour valeur "0" ou "1".
De plus, par défaut, les cadres peuvent être redimensionnés. Si on veut interdire cette fonctionnalité, on renseignera l'attribut noresize qui prend pour seule valeur "noresize".
Enfin, on peut éliminer les marges intérieures latérales avec les attributs marginwidth et marginheight renseignés à "0".

<frameset cols="200, *">
    <frame name="menu" src="menu.html">
    <frame name="contenu" src="page1.html">
</frameset>

<a href="page2.html" target="contenu">Aller à la page 2</a>

On peut aller encore plus loin, en imbricant différents cadres. Par exemple, on veut un bandeau en haut qui prend toute la largeur de l'écran. En-dessous, on veut deux cadres verticaux, un pour le menu et l'autre pour le contenu. Le code HTML ressemblera alors à quelque chose comme :

<frameset rows="100, *">
    <frame name="bandeau" src="bandeau.html">
    <frameset cols="200, *">
        <frame name="menu" src="menu.html">
        <frame name="contenu" src="page1.html">
    </frameset>
</frameset>

Le cadre local ou "iframe" permet également d'insérer une page externe dans notre site, à la différence qu'il sera à la suite du contenu de notre propre document et non pas séparé par un troisième fichier qui fait la jointure.
L'attribut de la balise <iframe> qui va servir à afficher le contenu d'une autre page est src. On lui renseigne l'adresse complète si le site est différent du nôtre, ou le chemin relatif ou absolu dans le cas où l'on veut afficher une de nos propres pages.
On peut supprimer les bordures de l'iframe pour lui donner l'impression de mieux s'intégrer à notre document en renseignant l'attribut frameborder à "0" ("1" par défaut).
Aussi, les marges intérieures sont assez gênantes quand on a une page qui doit faire exactement les dimensions données à cette balise. On peut alors les supprimer avec les attributs marginwidth et marginheight renseignés à "0".
Dans le cas où un navigateur ne peut pas afficher ce cadre local, il est intéressant de laisser un texte alternatif. C'est le texte que l'on écrit à l'intérieur de la balise.

<iframe frameborder="0" marginwidth="0" marginheight="0" src="http://adresse/d/une/page.html">
    Désolé, votre navigateur ne supporte pas les cadres locaux
</iframe>

De nos jours, il est fortement déconseillé d'utiliser ce genre de procédé. Voici une liste non-exhaustive des problèmes encourus de part l'utilisation des frames :

• Impossibilité d'ajouter aux favoris la page désirée.
• Mauvaise gestion de l'impression par les navigateurs.
• Perte du sens véritable de la nature d'un document HTML censé être identifié par une URL précise et unique.
• Référencement des pages du site impossible dans les moteurs de recherche.
• Technologie obsolète qui est totalement abandonnée dans les futures versions du (X)HTML.

Commentez l'article : Commentez

On distingue cinq types de listes différents, chacun prévu pour un usage bien précis :

• Les listes non ordonnées, ou à puces.
• Les listes ordonnées.
• Les listes de définitions.
• Les listes de répertoires.
• Les listes de menus.

II-G-1-a. Les listes non ordonnées▲

<p>Ma liste de courses :</p>
<ul>
    <li>Champignons</li>
    <li>Avocat</li>
    <li>Dentifrice</li>
    <li>Céréales</li>
</ul>

<p>Ma liste de courses :</p>
<ul type="circle">
    <li>Champignons</li>
    <li>Avocat</li>
    <li>Dentifrice</li>
    <li>Céréales</li>
</ul>

<p>Ma liste de courses :</p>
<ul type="square">
    <li>Champignons</li>
    <li>Avocat</li>
    <li>Dentifrice</li>
    <li>Céréales</li>
</ul>

<p>Ma liste de courses :</p>
<ul>
    <li>Champignons</li>
    <li>Avocat</li>
    <li>Dentifrice</li>
    <li>Céréales</li>
</ul>

li
{
    list-style-image : url(puce.gif);
}

II-G-1-b. Les listes ordonnées▲

<p>Top 3 du tiercé :</p>
<ol>
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

<p>Top 3 du tiercé :</p>
<ol type="I">
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

<p>Top 3 du tiercé :</p>
<ol type="i">
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

<p>Top 3 du tiercé :</p>
<ol type="A">
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

<p>Top 3 du tiercé :</p>
<ol type="a">
    <li>Jolly</li>
    <li>Tonnerre</li>
    <li>Tornade</li>
</ol>

<p>Top 3 inversé du tiercé :</p>
<ol type="I" start="8">
    <li>Tortue</li>
    <li>Escargot</li>
    <li>Limace</li>
</ol>

II-G-1-c. Les listes de définitions▲

<dl>
    <dt>Oreiller</dt>
    <dd>Pièce de literie bourrée de plumes, de duvet, de crin... destinée à soutenir la tête pendant le repos.</dd>
    <dt>Puce</dt>
    <dd>Insecte de très petite taille se déplaçant par sauts.</dd>
    <dd>Marché où l'on vend des objets d'occasion.</dd>
</dl>

II-G-1-d. Les listes de répertoires▲

<dir>
    <li>css</li>
    <li>fichiers</li>
    <li>images</li>
    <li>js</li>
</dir>

II-G-1-e. Les listes de menus▲

<menu>
    <li>Accueil</li>
    <li>Page 1</li>
    <li>Page 2</li>
</menu>

L'imbrication des listes permet une présentation claire et détaillée d'un menu ou d'un sommaire par exemple. On peut imbriquer les listes non ordonnées et ordonnées sans distinction et même les mélanger :

<ol type="I">
    <li>La genèse</li>
    <li>La vie
        <ol type="A">
            <li>L'enfance</li>
            <li>L'adolescence</li>
            <li>Le passage à l'âge adulte
                <ul>
                    <li>Le jeune adulte</li>
                    <li>La crise de la quarantaine</li>
                </ul>
            </li>
            <li>La vieillesse</li>
        </ol>
    </li>
    <li>La mort</li>
</ol>

Résultat :

La principale utilisation des listes de nos jours se fait par les listes non ordonnées pour la création de divers menus. L'imbrication de ces listes non ordonnées couplée avec un soupçon de CSS permet de faire des menus à multiples niveaux d'affichage, comme les menus déroulants.

D'autre part, on peut retrouver les listes ordonnées principalement pour la rédaction de sommaires, notamment destinés aux FAQ.

Voici quelques exemples de menus qui utilisent ces listes non ordonnées : Cours CSS : Menu et barre de navigation



Commentez l'article : Commentez

Un tableau qu'est-ce que c'est ? Tout simplement une suite de lignes et de colonnes qui forment un ensemble de cellules.
Les tableaux servent avant tout à présenter des données tabulaires dont voici un exemple :

Malgré cela, l'emploi le plus fréquent des tableaux reste la mise en page de documents. En effet, l'implémentation des tableaux étant assez intuitive, les débutants préfèreront en user ainsi. S'ajoute à cela les éditeurs WYSIWYG des logiciels de création de sites qui génèrent ce genre de code automatiquement.

Cependant, la mise en page par tableau devient dépréciée : Voir le paragraphe L'utilité des tableaux aujourd'hui.

II-H-2-a. Les bases d'un tableau▲

<table border="1">
    <tr>
        <td>Contenu de la cellule</td>
    </tr>
</table>

<table border="1">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
</table>

<table border="1" cellpadding="0" cellspacing="0" summary="Résumé du tableau pour les personnes malvoyantes">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
</table>

II-H-2-b. Le titre d'un tableau▲

<table border="1">
    <caption align="bottom">Notes de la classe de 3èmeB</caption>
    <tr>
        <td>Elèves</td>
        <td>Français</td>
        <td>Mathématiques</td>
        <td>Histoire</td>
        <td>Sport</td>
    </tr>
    <tr>
        <td>Laure</td>
        <td>14</td>
        <td>10</td>
        <td>11</td>
        <td>11</td>
    </tr>
    <tr>
       [...]
    </tr>
</table>

II-H-2-c. La ligne d'en-tête d'un tableau▲

<table border="1">
    <caption align="bottom">Notes de la classe de 3èmeB</caption>
    <tr>
        <th>Elèves</th>
        <th>Français</th>
        <th>Mathématiques</th>
        <th>Histoire</th>
        <th>Sport</th>
    </tr>
    <tr>
        <td>Laure</td>
        <td>14</td>
        <td>10</td>
        <td>11</td>
        <td>11</td>
    </tr>
    <tr>
       [...]
    </tr>
</table>

II-H-2-d. Les différentes parties d'un tableau▲

<table border="1">
    <caption align="bottom">Notes de la classe de 3èmeB</caption>
 
    <thead>
        <tr>
            <th>Elèves</th>
            <th>Français</th>
            <th>Mathématiques</th>
            <th>Histoire</th>
            <th>Sport</th>
        </tr>
    </thead>
 
    <tfoot>
        <tr>
            <th>Elèves</th>
            <th>Français</th>
            <th>Mathématiques</th>
            <th>Histoire</th>
            <th>Sport</th>
        </tr>
    </tfoot>
 
    <tbody>
        <tr>
            <td>Laure</td>
            <td>14</td>
            <td>10</td>
            <td>11</td>
            <td>11</td>
        </tr>
        <tr>
           [...]
        </tr>
    </tbody>
</table>

II-H-2-e. La fusion de lignes et de colonnes d'un tableau▲

<table border="1">
    <tr>
        <td colspan="5">Cellule qui se répend sur 5 colonnes</td>
    </tr>
    <tr>
        <td>Colonne 1</td>
        <td>Colonne 2</td>
        <td>Colonne 3</td>
        <td>Colonne 4</td>
        <td>Colonne 5</td>
    </tr>
</table>

<table border="1">
    <tr>
        <td rowspan="2">Cellule sur deux lignes</td>
        <td>Ligne 1 - Colonne 2</td>
        <td>Ligne 1 - Colonne 3</td>
        <td>Ligne 1 - Colonne 4</td>
    </tr>
    <tr>
        <td>Ligne 2 - Colonne 2</td>
        <td>Ligne 2 - Colonne 3</td>
        <td>Ligne 2 - Colonne 4</td>
    </tr>
</table>

<table border="1">
    <tr>
        <td colspan="3">Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td rowspan="3">Cellule 3</td>
        <td>Cellule 4</td>
        <td>Cellule 5</td>
        <td>Cellule 6</td>
    </tr>
    <tr>
        <td>Cellule 7</td>
        <td colspan="2" rowspan="2">Cellule 8</td>
    </tr>
    <tr>
        <td>Cellule 9</td>
    </tr>
</table>

Grâce aux techniques de fusion vues précédemment, la tendance il y a quelques années, était de profiter de ce système pour mettre en page assez rapidement l'ensemble de son site web. Cependant, si cette méthode peut séduire, elle est fortement déconseillée.
En effet, les tableaux sont censés (et doivent) être utilisés uniquement pour l'affichage de données tabulaires.
Dans le cas d'une mise en page, préférez la solution du couple "DIV + CSS". Voir l'article : Une mise en page rapide et facile avec des div et du CSS.

On peut facilement voir dans notre dernier exemple où l'on combine les deux techniques de fusion, que notre code sera difficilement maintenable dans le cas d'une retouche ou de l'ajout d'une nouvelle cellule.

Voici quelques raisons pour lesquelles il ne faut pas utiliser les tableaux pour la mise en page :

• Ils alourdissent les pages HTML : beaucoup de balises pour finalement y mettre peu de contenu.
• Ils sont très difficiles à maintenir dans le cas d'une retouche.
• Ils nuisent à l'accessibilité : problème d'interprétation des navigateurs spécialisés destinés aux malvoyants par exemple.
• Ils sont mal gérés par les navigateurs à l'impression dans le cas de tableaux complexes.

J'espère avoir réussi à vous convaincre de ne pas/plus utiliser les tableaux à mauvais escient.



Commentez l'article : Commentez

Les formulaires servent à envoyer des données au serveur, données remplies en général par un visiteur, que ce soit pour l'inscription sur un site ou un formulaire de contact par exemple.
Les formulaires sont dotés de divers contrôles comme des champs de saisie, des boutons, des listes, etc, qui permettent au visiteur d'interagir avec la page qu'il est en train de consulter.

Tous les champs de formulaires quels qu'ils soient doivent se trouver dans cette balise <form>.
C'est cette balise qui va permettre de renseigner la page de destination du formulaire, à l'aide de l'attribut action, qui peut prendre pour valeurs une URL en absolu ou en relatif, voire même une adresse e-mail.
Elle est aussi utilisée pour préciser le mode d'envoi des données. C'est avec l'attribut method que l'on va le préciser. Cet attribut prend deux valeurs différentes qui sont "get" et "post". Les valeurs envoyées en "GET" passent par l'URL alors qu'en "POST" elles sont envoyées de manière transparente, aussi, on préfèrera l'utilisation de la méthode d'envoi "POST".
L'attribut enctype, quant à lui, sert à indiquer le type de données envoyées au serveur dans le cas d'utilisation de la méthode "POST". La valeur généralement utilisée pour cet attribut est "multipart/form-data" qui sert lors de l'envoi de fichiers chargés avec un champ de type "file".

Voyons maintenant à quoi pourrait ressembler notre balise <form> :

<form action="envoi-formulaire.php" method="post">
    <!-- Contenu du formulaire -->
</form>

Si vous pouvez bien entendu mettre plusieurs formulaires dans un même document, ceux-ci doivent en aucun cas être imbriqués.

De plus, il est déconseillé d'utiliser des espaces dans l'attribut name de tous les champs utilisés dans un formulaire, puisque celui-ci sera retranscrit en caractère de soulignement "_" lors de la soumission du formulaire et peut donc induire en erreur lors de la récupération des données dans vos scripts.

On distingue deux types de champs texte monolignes : les champs de type "texte" et les champs de type "mot de passe".
Le champ de type "texte" est l'élément de base d'un formulaire, il permet d'entrer du texte court sur une ligne, comme un login, un e-mail, ou autres alors que le champ de type "mot de passe" permet de renseigner un mot de passe, dont l'affichage sera camouflé aux yeux des autres personnes.
Le champ de texte monoligne est caractérisé par la balise <input> et l'attribut type dont la valeur sera "text" ou "password".
On renseignera aussi l'attribut name qui sera le nom du champ, celui qui va nous permettre de retrouver la valeur lors de l'envoi du formulaire.
D'autres attributs sont disponibles, comme value qui permet d'attribuer une valeur par défaut au champ, size qui permet de préciser la taille du champ en nombre de caractères, maxlength qui sert à limiter le nombre de caractères possibles, readonly qui prend pour seule valeur "readonly" et verrouille le champ, disabled qui prend pour seule valeur "disabled" et permet de désactiver le champ.

Lorsqu'un champ est défini en "disabled", sa valeur n'est pas envoyée au serveur.

Voici quelques exemples de champs texte :

<input type="text" size="5" name="code_postal" maxlength="5">
 
<input type="text" name="nom_champ" readonly="readonly" value="Champ vérouillé">
 
<input type="text" name="login" value="Entrez ici votre login" size="20">
 
<input type="password" name="mdp">

Si vous souhaitez que vos visiteurs puissent saisir de longs textes, comme des champs de commentaires pour des articles d'un blog par exemple, il faudra se tourner vers l'utilisation de la balise <textarea>.
Contrairement au champ de texte monoligne, le textarea est une balise double et son contenu est écrit entre les balises ouvrante et fermante et non dans un attribut value.
Deux attributs sont nécessaires au <textarea> : rows qui contient le nombre de lignes et cols qui contient le nombre de colonnes.
On peut, tout comme le champ de texte monoligne, rajouter les attributs name, readonly et disabled.
L'attribut maxlength n'existe pas pour cette balise, et pour en limiter le nombre de caractères il est possible de passer par du JavaScript.

Voici quelques exemples de <textarea> :

<textarea name="commentaire" rows="5" cols="80"></textarea>
 
<textarea name="sujet" rows="6" cols="100">Texte par défaut</textarea>

Il nous arrivera souvent de vouloir envoyer des données au serveur de manière transparente pour le visiteur. On utilisera alors un champ caché, qui ne sera pas affiché dans le navigateur du visiteur mais dont les données seront envoyées. Attention, cette balise apparaît tout de même dans le code source de la page.
Pour cela, on utilise la balise <input> avec "hidden" comme valeur de l'attribut type.
Il est aussi nécessaire de renseigner l'attribut name pour retrouver ces données cachées du côté du serveur ainsi que l'attribut value qui va contenir ces données.

Exemple de champ caché :

<input type="hidden" name="clef" value="a182f7d8e844d956a65b18e84f">

Pour permettre aux visiteurs d'envoyer des fichiers par l'intermédiaire du formulaire, que ce soit en pièce jointe d'un e-mail ou le chargement d'une image sur le serveur, on va utiliser la balise <input> dont l'attribut type est renseigné à "file".
Ceci fait, un champ avec un bouton "Parcourir" sera disponible.
Mais pour que le champ soit opérationnel, il faut impérativement renseigner l'attribut enctype de la balise <form> à "multipart/form-data".
Il est aussi plus qu'utile de préciser l'attribut name du champ "file". On peut aussi renseigner l'attribut size qui affecte la taille du champ dans lequel sera écrit le nom du fichier.

Exemple de champ "file" :

<input type="file" name="image">

Il est également possible de limiter le poids du fichier en rajoutant un champ caché dans le formulaire contenant le champ "file". Ce champ caché doit avoir pour name la valeur "MAX_FILE_SIZE" et pour value le poids maximum en octet.

<input type="hidden" name="MAX_FILE_SIZE" value="20000">

Cette limitation ne vous affranchit pas de faire la vérification côté serveur ! En effet, le code HTML peut facilement être modifié par les visiteurs, donc cette valeur aussi.

Les boutons radio sont utilisés lorsque vous voulez laisser aux visiteurs un choix et un seul parmi une liste de propositions. La balise est alors <input> dont l'attribut type est renseigné à "radio".
Ces boutons radio vont par groupe, c'est-à-dire qu'ils doivent avoir le même nom pour un groupe de propositions. Le nom est renseigné avec l'attribut name.
La valeur de l'attribut value va être transmise au serveur en fonction du bouton choisi. Vous pouvez aussi forcer un bouton radio d'un groupe à être coché au chargement de la page en lui mettant l'attribut checked dont la seule valeur est "checked".

Voyons maintenant des exemples de groupes de boutons radio :

<p>
    <input type="radio" name="civilité" value="mlle"> Mademoiselle
    <input type="radio" name="civilité" value="mme"> Madame
    <input type="radio" name="civilité" value="mr"> Monsieur
</p>
 
<p>
    <input type="radio" name="genre" value="homme" checked="checked"> Homme
    <input type="radio" name="genre" value="femme"> Femme
    <input type="radio" name="genre" value="et"> Alien
    <input type="radio" name="genre" value="indéfini"> Indéfini
</p>

Si vous donnez un nom différent aux boutons d'un groupe, le navigateur ne saura pas qu'ils appartiennent au même groupe (y a pas de miracle), donc plusieurs choix seront possibles et on perd toute l'utilité des boutons radio.

Les cases à cocher sont sensiblement identiques aux boutons radio, mais permettent un choix multiple pour un groupe de propositions. Les attributs sont identiques, à la différence que l'attribut type prend pour valeur "checkbox".
Un problème cependant, lorsque vous désignez un groupe de cases à cocher par le même nom, seule la dernière sera envoyée au serveur. Pour contrer cela, il suffit de rajouter des crochets ouvrant et fermant au nom du groupe. Il indiquera au serveur qu'il s'agit d'un tableau de valeurs à récupérer et non une seule valeur (comme dans le cas des boutons radio). En revanche, dans le cas d'utilisation d'une case à cocher unique (sans groupe), comme par exemple des CGU à valider, les crochets sont inutiles.

Voici un exemple de groupe de cases à cocher :

<input type="checkbox" name="qualite[]" value="intelligent"> Intelligent
<input type="checkbox" name="qualite[]" value="beau"> Beau
<input type="checkbox" name="qualite[]" value="serviable"> Serviable
<input type="checkbox" name="qualite[]" value="fort"> Fort
<input type="checkbox" name="qualite[]" value="généreux"> Généreux

Il existe deux balises différentes pour présenter les boutons : la balise <input> et la balise <button>. La différence entre les deux est que la balise <button> est double, donc qu'elle a une balise ouvrante et une balise fermante alors que la balise <input> est simple. Il est de plus possible des balises de mise en forme dans la balise <button>.

Il y a 4 types différents de boutons :

• Le bouton simple
• Le bouton d'envoi
• Le bouton image
• Le bouton effacer

II-I-9-a. Le bouton simple▲

<input type="button" name="addition" value="Additionner" onclick="addition();">
 
<button type="button" name="multiplication" onclick="multiplication();"><b>Multiplier</b></button>

II-I-9-b. Le bouton d'envoi▲

<input type="submit" name="envoyer" value="Valider">
 
<button type="submit" name="soumettre">Soumettre<br>les réponses</button>

II-I-9-c. Le bouton image▲

<input type="image" name="envoyer" src="adresse/de/l/image">

II-I-9-d. Le bouton effacer▲

<input type="reset" name="effacer" value="Effacer toutes les valeurs">
 
<button type="reset" name="effacer">Réinitialiser</button>

Les listes permettent de laisser un choix aux visiteurs, au même titre que les boutons radio ou les cases à cocher, mais sont plus pratiques lorsqu'il s'agit de proposer un grand nombre de choix.
On distingue deux types de listes, les listes normales et les listes déroulantes.
Les deux sont introduites par la balise <select> qui comprend les différents choix sous forme de balise <option> dont on renseigne la valeur qui sera envoyée au serveur grâce à son attribut value.
On peut même suggérer une proposition par défaut en précisant l'attribut selected de la balise <option> de notre choix.
Par défaut, une liste est déroulante.
On peut (doit) renseigner le nom de la liste avec l'attribut name.

Continuons avec un exemple :

<select name="couleur_yeux">
    <option value="bleus">Bleus</option>
    <option value="bruns" selected="selected">Bruns</option>
    <option value="verts">Verts</option>
    <option value="noisettes">Noisettes</option>
    <option value="gris">Gris</option>
    <option value="vairons">Vairons</option>
</select>

Cette liste est donc une liste déroulante avec un seul choix possible parmi les six proposés.

On peut rendre cette liste non déroulante en rajoutant l'attribut size qui prend pour valeur le nom de choix à afficher, par exemple "3".

Ce qui donne :

<select name="couleur_yeux" size="3">
    <option value="bleus">Bleus</option>
    <option value="bruns">Bruns</option>
    <option value="verts" selected="selected">Verts</option>
    <option value="noisettes">Noisettes</option>
    <option value="gris">Gris</option>
    <option value="vairons">Vairons</option>
</select>

Ici encore, un seul choix est possible. Pour pouvoir proposer plusieurs choix, comme dans le cas de cases à cocher, il suffit de rajouter l'attribut multiple qui prend pour seule valeur "multiple".

Voyons pour l'exemple :

<select name="matieres_preferees" size="5" multiple="multiple">
    <option value="maths">Maths</option>
    <option value="français">Français</option>
    <option value="anglais">Anglais</option>
    <option value="histoire">Histoire</option>
    <option value="sport">Sport</option>
    <option value="dessin">Dessin</option>
    <option value="musique">Musique</option>
    <option value="physique">Physique</option>
    <option value="sciences naturelles">Sciences naturelles</option>
</select>

Le choix multiple ne peut pas se faire sur une liste déroulante. L'attribut size doit être renseigné pour que le multiple fonctionne.

Pour améliorer l'accessibilité de vos formulaires aux handicapés, malvoyants, quelques balises ont été créées et il est toujours bon de les utiliser, d'autant plus qu'elles ne perturbent pas l'utilisation pour les autres visiteurs et clarifient même la compréhension des formulaires.

Il s'agit d'une part de la balise <fieldset> qui permet de grouper logiquement des champs de formulaires de même nature. Par exemple, pour un formulaire d'inscription vous pouvez grouper tous les champs en rapport avec les informations personnelles du visiteur, puis grouper tous les champs concernant ses loisirs, etc.

La balise qui va permettre de donner ce nom au groupage de champs est <legend>.

Regardons quelques exemples :

<fieldset>
    <legend>Informations personnelles</legend>
 
    <!-- Ici divers champs sur les informations personnelles, comme la saisie du nom, prénom et adresse -->
</fieldset>
 
<fieldset>
    <legend>Loisirs</legend>
 
    <!-- Ici divers champs sur les loisirs du visiteur, comme la musique et les films qu'il aime etc -->
</fieldset>

Il y a d'autre part, la balise <label> qui permet de donner un libellé à un champ de formulaire en les associant à l'aide de l'attribut for de cette balise qui doit être identique à l'attribut id du champ auquel elle est rattachée. Le texte mis dans le label est alors cliquable.

Par exemple :

<label for="nom">Votre nom</label> <input type="text" name="nom" id="nom">
 
Aimez-vous la viande ?
<label for="oui">Oui</label> <input type="radio" name="viande" id="oui">
<label for="non">Non</label> <input type="radio" name="viande" id="non">

Commentez l'article : Commentez