L'acronyme XHTML signifie eXtensible HyperText Markup Language. C'est un langage de balisage défini par le World Wide WebConsortium (W3C) servant à la création de documents destinés à être publiés sur Internet.
Il existe de nombreux avantages au XHTML ; la plupart d'entre eux sont intimement liés au principe de séparation de la forme et du contenu.
Le premier avantage est que les documents sont simplifiés car aucune information de présentation n'est présente. Cette simplification de la structure permet une meilleure maintenance.
Deuxièmement, le poids des documents sera moins important et donc améliorera le téléchargement par les navigateurs. Cette réduction de poids entraînera également une réduction d'utilisation de la bande passante nécessaire pour la transmission du document depuis les serveurs qui pourront alors prendre en charge plus de connexion.
Le web et les besoins techniques pour créer des documents et des applications évoluent en permanence, les langages associés au web (HTML, XHTML, CSS) évoluent donc également et c'est pourquoi il existe plusieurs version de XHTML tout comme il existait plusieurs version du HTML.
Le XHTML 1.0 est la première version du langage publiée par le W3C. C'est en réalité une simple conversion du HTML 4 avec la syntaxe XML et c'est pourquoi il existe tout comme pour le HTML 4 trois types de XHTML 1.0 différents et que cette version comporte encore quelques balises dédiées à la présentation comme b pour la mise en gras ou i pour la mise en italique. Les différentes sous-versions de ces langages ont été mises en place pour permettre une évolution progressive des habitudes des créateurs de contenu et de document :
le XHTML 1.0 strict est la version la plus claire (elle est également souvent considérée comme la plus propre), elle ne comprend que très peu balise de présentation ;
le XHTML 1.0 transitionel est une version plus permissive que la précédente, elle reprend les balises de la version STRICT et permet l'utilisation en plus de quelques balises et attributs de présentation ;
le XHTML 1.0 frameset étend à son tour le XHTML 1.0 transitionel pour permettre l'utilisation des frames.
Le XHTML 1.1 est la dernière version du langage publiée par le W3C. Elle ne comporte plus aucune balise de présentation. Cette version est encore relativement peu utilisée sur Internet car elle nécessite l'envoi des entêtes application/xhtml+xml lors de la transmission du document aux navigateurs et que certains d'entre eux ne le supportent pas encore (c'est le cas par exemple d'Internet Explorer). De plus, ces documents se comportent comme de vrais documents XML et peuvent poser problèmes avec certaines fonctions et script javascript.
Le XHTML 2.0 était censé être la prochaine grande évolution du langage. Cette nouvelle version devait apporter de profonds changements dans la structure des documents mais fut finalement supplantée par le HTML5.
La neuvième version de développement était attendue en 2009, mais le 2 juillet 2009, le W3C a décidé de laisser le groupe de travail du XHTML 2.0 expirer au terme de l'année. Le XHTML 2.0 et ses documents relatifs sont maintenant consultables en tant que notes du W3C.
La version d'un document XHTML est définie par sa déclaration DTD ou Doctype (Type de Document). Il existe donc une DTD pour chaque version et celle-ci doit obligatoirement figurer en tête du document.
Ce n'est pas parce que des versions plus récentes du langage existent que les plus anciennes ne sont plus valides et utilisables. Il faut choisir la version de son document en fonction de l'objectif à atteindre.
Voici les différentes DTD pour les différentes versions du XTHML :
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
La DTD est un donc élément très important : elle indique au navigateur le langage et la version dans laquelle est écrite le document. L'affichage du document peut varier en fonction de la version utilisée car les éléments du langage ne s'interprètent pas de la même façon.
Le XHTML (comme le HTML) est appelé langage de balisage car les informations contenues dans les documents sont encadrées (structurés) par des éléments particuliers appelés balises.
Les balises vont par deux : une balise ouvrante : <p> et une balise fermante </p> afin de pouvoir délimiter leur contenu. Il existe une syntaxe particulière pour les balises sans contenu, celles-ci sont appelées balises auto-fermantes car elles s'ouvrent et se ferment dans le même élément ; c'est le cas par exemple de la balise désignant un saut de ligne : <br />.
L'ensemble délimité par des balises est appelé un élément. Lorsque l'on parle de l'élément p d'une page, cela désigne la balise ouvrante et la balise fermante ainsi que leur contenu. Il est possible d'ajouter des informations complémentaires aux balises grâce à des attributs. Les attributs s'insèrent dans la balise ouvrante et se décomposent en deux parties : le nom de l'attribut et sa valeur. La valeur doit être encadré par des guillemets et le nom et la valeur de l'attribut sont liés par le signe "=".
Par exemple, le code pour afficher une info-bulle lors du passage de la souris sur notre paragraphe utiliserait l'attribut title :
<p title="titre de mon paragraphe">Texte de mon paragraphe.</p>
Certains attributs sont obligatoires lorsque l'on utilise certaines balises ; c'est le cas par exemple de l'attribut alt pour la balise image :
<img src="mon_image.png" alt="description de mon image" />
Le XHTML étant basé sur une syntaxe XML, il est nécessaire de respecter les règles d'écritures XML pour faire un document XHTML :
les noms des balises et des attributs doivent être écrits en minuscules ;
toutes les balises utilisées doivent être fermées (par exemple : <p> </p>, ou <br />) ;
les balises ne doivent jamais se chevaucher ;
la valeur d'un attributs doit être écrite entre guillemets.
Un document ou une page XHTML a une structure bien particulière qui doit être respectée. Voici un exemple représentant le strict minimum d'un document XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Titre du document</title> </head> <body> </body> </html>
La première information du document est la DTD qui indique le langage et la version utilisés.
La seconde information est présentée par la balise <html> qui englobe tout le reste du document. Il ne peut y avoir aucune autre information en dehors des balises <html> et celle-ci doit obligatoirement contenir deux autres éléments :
le premier et défini par la balise <head> ;
le second est l'élément body ;
L'élément head représente l'en-tête du document. Il doit obligatoirement contenir l'élément title qui représente le titre du document mais peut également contenir beaucoup d'autres informations comme des mots clés définissant le document pour le référencement (à l'aide des balises meta), des scripts javascript (à l'aide de balise script), des références aux feuilles de styles CSS à utiliser avec le document, etc.)
L'élément body est le corps du document, il contiendra toutes les informations structurées qui seront affichées dans le navigateur de l'utilisateur.
Voici un autre exmple XHTML un peu plus complet :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Titre du document</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="description" content="Description rapide du document"/>
<meta name="keywords" content="mot clés représentant le document"/>
<meta name="author" content="auteur du document"/>
<meta name="publisher" content="Imaginance"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
alert('Hello World');
</script>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
Tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</body>
</html>
Cet exemple vous montre l'utilisation des balises meta qui permettent de définir différentes informations sur le document comme son type et son encodage de caractère, une description rapide, l'auteur.
La balise link permet de faire référence à un document CSS pour la mise en page. Nous étudierons les différentes méthodes d'utilisation des CSS dans le cours dédié à ce langage de mise en page.
La balise script permet d'insérer du code javascript, par exemple, pour effectuer différents traitement sur le document.
Comme on l'a vu précedemment, il existe en XHTML deux types de balises :
les balises block,
les balises inline.
Les éléments de type bloc provoquent un retour à la ligne avant et après leur utilisation. C’est le cas par exemple du paragraphe : si l'on insére deux paragraphes à la suite dans le document ils apparaîtront l’un sous l’autre.
Les éléments de type en ligne, au contraire ne provoquent aucun retour à la ligne et peuvent donc être utilisés dans une phrase. C’est par exemple le cas du lien hypertexte.
L’attribut id permet de donner un identifiant unique à un élément du document. La valeur de cet attribut doit être unique, deux éléments d’un même document ne peuvent pas avoir la même valeur d’attribut id.
Donner un identifiant à un élément du document permettra :
d’y faire référence dans une feuille de style CSS pour le mettre en forme ;
d’y faire référence dans des scripts javascript pour en modifier le comportement ;
d’être désigné par d’autres éléments du document ;
d’y faire référence directement dans l’url du document.
<h1 id="titre_edito">Lorem ipsum</p>
Il est conseillé de donner un nom clair et explicite à la valeur de l’attribut id.
L’attribut class permet d’associer une ou plusieurs classes de présentation à l’élément XHTML. Ces classes nous permettrons par la suite de faire référence aux éléments avec CSS. Contrairement à ce qui peut être fait pour l’attribut id, vous pouvez donner la même classe à plusieurs éléments du documents.
<p class="resume">Lorem ipsum</p>
Si l'on désire associer plusieurs classes de présentation, celles-ci devront être séparées par un espace.
<p class="resume article">Lorem ipsum</p>
Il est déconseillé de nommer la classe en fonction du rendu que l’on souhaite obtenir. Par exemple nommer une classe de présentation resume_rouge par ce qu’on souhaite que l’élément s’affiche en rouge n’est pas une bonne idée ; cela créera une incohérence si vous souhaitez créer d’autres présentations en utilisant d’autres couleurs. Il faut donc garder à l’esprit qu’avoir le moins de référence de présentation dans le document est une bonne chose pour conserver tous les avantages de la séparation forme/fond.
L’attribut style permet d’associer des informations de présentation CSS directement dans l’élément XHTML. Ce n’est pas la meilleure façon pour créer un document web. Nous y reviendrons bien lors de l’étude du langage CSS.
<p style="color: red;">Lorem ipsum</p>
L’attribut title permet de définir un titre à un élément XHTML. Ce titre s’affichera la plupart du temps sous forme d’une info-bulle lorsque la souris se positionnera sur l’élément quelques secondes.
Les balises h1, h2, h3, h4, h5 et h6 représentent six niveaux de titre. La balise h1 représente le niveau le plus important et h6 le moins important.
<h1>Titre principal</h1> <h2>Premier sous titre</h2> <h2>Second sous titre</h2>
Il existe deux types d’emphases : l’emphase simple et l’emphase forte. L’emphase simple est représentée par la balise em. Elle est généralement représenté par les navigateurs par une mise en italique du terme désigné.
<em>Lorem ipsum</em>
L’emphase forte est représentée par la balise strong. Les navigateurs représentent ce type d’emphase en gras.
La balise cite vous permet de désigner la source d’une information. Par exemple pour faire référence à un livre en citant son titre ou faire référence à une phrase en citant son auteur.
Le livre <cite>titre du livre</cite> est vraiment passionnant.
La balise dfn permet de marquer un terme particulier. Elle est généralement utilisée pour marquer le premier terme particulier d’un document.
<dnf>XHTML</dfn> est un langage simple.
En général, les navigateurs affiches cet élément en italique.
Les deux balises désignant une citation de texte sont blockquote et q. La balise blockquote doit être utilisée pour les citations longues ; elle créera un nouveau paragraphe de texte.
<blockquote> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </blockquote>
Les navigateurs mettent ce genre d’élément en retrait pour bien le marquer par rapport au reste du document. La balise q peut être utilisée dans une phrase car elle ne provoque pas de coupure de ligne.
<q>Alea jacta est</q> est une célèbre citation de Jules César.
Les navigateurs mettent ce genre de citation entre guillemets. Les deux balises de citation peuvent contenir un attribut particulier : cite. Cet attribut permet d’indiquer l’url de la source de l’information ou de la citation.
<blockquote cite="http://www.exemple.net"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </blockquote>
Le saut de ligne ne comporte aucun contenu, c’est donc une balise auto-fermante notée de cette façon : <br />.
La règle est également une balise auto-fermante, elle s’écrit <hr />. Cette balise sert à insérer un trait horizontal jouant le rôle de séparateur.
La balise code permet de faire référence à du code informatique.
<p>Veuillez créer le script PHP contenant <code>echo "Hello World";</code>.</p>
La balise samp désigne le résultat d’un script ou d’un programme.
<p>Votre premier programme écrit en php va afficher <samp>Hello World</samp> sur votre écran.</p>
La balise kbd indique une information devant être saisie par l’utilisateur.
<p>Veuillez saisir la commande <kbd>ls</kbd> pour afficher la liste de vos fichiers.</p>
La balise var permet de désigner une variable.
Le programme initialise la variable <var>int myVar</var>.
La balise abbr permet l’affichage d’une abréviation.
<p>Le <abbr>XHTML</abbr> est un langage d’avenir.</p>
Il est généralement conseillé de faire figurer la désignation de l’abréviation dans l’attribut title de cette manière l’utilisateur peut obtenir l’information dans une info-bulle.
Il est possible d’écrire un acronyme grâce à la balise acronym. Tout comme pour l’abréviation, il est également conseillé de faire figurer la désignation de l’acronyme dans l’attribut title.
Un indice peut être indiqué grâce à la balise sub ; l’exposant est quant-à lui désigné par la balise sup.
<p>Le symbole de l’eau est H<sub>2</sub>O.</p> <p>M<sup>lle</sup> Dupond a encore téléphoné ce matin.</p>
Les liens hypertextes sont représentés par la balise a.
Le contenu de l’élément représente le libellé du lien qui sera affiché dans le navigateur et l’attribut href permet de marquer l’adresse du site ou du document de destination.
<a href="http://www.exemple.net">Site internet d’exemple</a>
Il est possible de marquer l’insertion et la suppresion de texte d’un document. C’est utile lorsque l’on désire marquer les changements effectués dans un texte par exemple tout en indiquant au lecteur ce qui a été modifié.
L’insertion de texte se marque grâce à la balise ins et la suppression grâce à la balise del. En général, les navigateurs marquent l’insertion de texte en soulignant l’ajout et la suppression d’un texte en le barrant.
La balise pre permet d’afficher du texte pré-formaté. Tous les espaces et les retours à la ligne seront donc pris en compte lors de l’utilisation de cette balise.
Personnellement, j'ai beaucoup utilisé cette balise en PHP, surtout pour visionner le contenu des tables de hashages. Vraiment très pratique quand elle est couplé avec un var_dump.
<?php echo "<pre>"; var_dump($ma_variable); echo "</pre>"; ?>
Il existe une balise faite pour désigner une adresse, il s’agit de address. Le texte de cet élément sera mis en italique par le navigateur.
<address> prénom nom, <br /> numéro, rue<br /> code postal, ville </address>
Il existe trois types de liste répondant à différents besoins :
les listes simples ;
les listes ordonnées ;
les listes de définitions.
La liste simple permet de lister des informations sans relations d’ordre ; c’est par exemple le genre de liste qui peut être utilisée pour représenter une liste de course. Cette liste est définie par la balise ul et chaque élément de la liste par la balise li.
<ul> <li>un premier élément</li> <li>un second élément</li> </ul>
Les navigateurs affichent généralement une puce devant chaque information.
La liste ordonnée permet de lister des informations dont l’ordre d’affichage a une importance ; par exemple la liste des titres d’un document pour construire un sommaire. Ce genre de liste est définie par la balise ol et chaque élément par la balise li.
<ol> <li>premier élément</li> <li>second élément</li> <li>dernier élément</li> </ol>
Les navigateurs numéroteront chaque ligne pour représenter l’ordre de chaque élément.
Les listes de définitions permet d’associer des définitions à des termes ; par exemple pour écrire un glossaire. Elle est définie par la balise dl. Les termes sont contenus entre les balises dt et les définitions associées par la balise dd.
<dl> <dt>Terme 1</dt> <dd>Première description pour le terme 1</dd> <dd>Seconde description pour le terme 1</dd> <dt>Terme 2</dt> <dd>Description pour le terme 1</dd> </dl>
Il est admis que cette balise peut également être utilisée pour marquer la relation entre deux éléments. Par exemple elle pourrait être utilisée pour retranscrire un dialogue :
<dl> <dt>M. X</dl> <dd>Bonjour</dd> <dt>M. Y</dl> <dd>Comment aller vous ?</dd> </dl>
ou faire la relation entre une image et son libellé :
<dl> <dt><img src="image.png" alt="description"></dt> <dd>Description de l’image</dd> </dl>
Les tableaux sont des éléments complexes, ils sont composés de nombreux éléments (ligne, cellule, etc.) et donc plusieurs balises sont nécessaires pour les représenter.
La balise principale d’un tableau est table ; elle représente l’ensemble du tableau. Il est possible de définir une légende pour le tableau à l’aide de la balise caption. Les lignes du tableau sont représentées par la balise tr, les cellules par la balise td.
<table> <caption>Légende du tableau</caption> <tr> <td>cellule 1 - ligne 1</td><td>cellule 2 - ligne 1</td><td>cellule 3 - ligne 1</td> </tr> <tr> <td>cellule 1 - ligne 2</td><td>cellule 2 - ligne 2</td><td>cellule 3 - ligne 2</td> </tr> </table>
Il est possible de définir les libellés des colonnes et des lignes grâces aux balises th. Ces balises remplacent les balises td dans les lignes correspondantes.
<table> <caption>Légende du tableau</caption> <tr> <th>Libellé colonne 1</th><th>Libellé colonne 2</th><th>Libellé colonne 3</th> </tr> <tr> <td>cellule 1 - ligne 1</td><td>cellule 2 - ligne 1</td><td>cellule 3 - ligne 1</td> </tr> <tr> <td>cellule 1 - ligne 2</td><td>cellule 2 - ligne 2</td><td>cellule 3 - ligne 2</td> </tr> </table>
En général, les navigateurs affichent le libellé th en gras et en italique. Si nécessaire, il est possible de regrouper différentes lignes en trois type de sections :
thead pour les lignes d’entête ;
tbody pour les lignes contenant l’information ;
tfoot pour les lignes de pieds de tableau.
<table> <caption>Légende du tableau</caption> <thead> <tr> <th>Libellé colonne 1</th><th>Libellé colonne 2</th><th>Libellé colonne 3</th> </tr> </thead> <tbody> <tr> <td>cellule 1 - ligne 1</td><td>cellule 2 - ligne 1</td><td>cellule 3 - ligne 1</td> </tr> <tr> <td>cellule 1 - ligne 2</td><td>cellule 2 - ligne 2</td><td>cellule 3 - ligne 2</td> </tr> </tbody> </table>
Des attributs particuliers sont disponibles pour les tableaux afin d’en modifier ou d’en préciser la structure sémantique.
L’attribut scope permet de définir le sens d’affectation des libellés d’information. L’exemple suivant indique que le libellé th porte sur la colonne.
<table> <tr> <th scope= "col">Libellé colonne 1</th><th scope="col">Libellé colonne 2</th> </tr> <tr> <td>cellule 1 - ligne 1</td><td>cellule 2 - ligne 1</td><td>cellule 3 - ligne 1</td> </tr> <tr> <td>cellule 1 - ligne 2</td><td>cellule 2 - ligne 2</td><td>cellule 3 - ligne 2</td> </tr> </table>
Dans cet autre exemple, le libellé désigne la ligne.
<table> <tr> <th scope="row">Jour : </td><td>Lundi</td><td>Mardi</td> </tr> </table>
Il est possible de fusionner plusieurs cellules horizontalement ou verticalement à l’aide des attributs colspan et rowspan.
<table> <tr> <td>cellule 1 - ligne 1</td><td>cellule 2 - ligne 1</td><td>cellule 3 - ligne 1</td> </tr> <tr> <td colspan="2">cellule 1 et 2 - ligne 2</td><td>cellule 3 - ligne 2</td> </tr> </table>
Vous pouvez enfin faire apparaître une bordure sur votre tableau à l’aide de l’attribut border dont la valeur définira la taille de la bordure et gérer l’espacement des cellules ou de leur contenu avec les attributs cellspacing et cellpadding.
La balise img permet d’intégrer des images dans votre document. Elle ne contient aucune information, c’est une balise auto-fermante. Deux attributs sont obligatoires lors de son utilisation :
l’attribut src qui permet de définir le chemin physique de l’image à afficher ;
l’attribut alt qui indique ce que représente l’image. Cette information sera affichée à la place de l’image si celle ci n’est pas trouvée à l’endroit indiqué par l’attribut src. C’est également le moyen d’indiquer ce que représente l’image au logiciel de synthèse vocal ou aux moteurs de recherche par exemple.
<img src="/images/mon_image.png" alt="description" /> <img src="http://www.exemple.net/mon_image.jpg" alt="description" />
D’autres attributs optionnels sont disponibles pour spécifier les dimensions désirées pour l’affichage de l’image : l’attribut width vous permet ainsi de spécifier sa largeur et l’attribut height sa hauteur en pixel.
<img src="http://www.exemple.net/mon_image.jpg" alt="description" width="250" height="100" />
La balise object permet d’insérer tout type de contenu (un autre document XHTML, une image, un son, une vidéo, du contenu flash, etc.). Voici le code qui vous permettra d’insérer une animation flash :
<object type="application/x-shockwave-flash" data="animation.swf" width="604" height="20"> <param name="movie" value="animation.swf" /> <param name="wmode" value="transparent" /> <p>Information de description du contenu</p> </object>
L’élément object est complexe, il fait intervenir plusieurs balises et attributs :
l’attribut type permet de définir le type d’attribut pour que le navigateur sache comment présenter l’information ;
l’attribut data représente l’url du document à utiliser (vidéo, image, son, etc.) ;
tout comme pour l’image, les attributs width et height permettent de définir les dimensions de l’élément multimédia à afficher
Cette balise peut également en contenir d’autres :
la balise param pourra être utilisée pour spécifier certains paramètres aux "plugins" qu’utilisera le navigateur pour afficher l’élément ;
du contenu mis en forme pour permettre d’afficher du texte (ou image) alternatif dans le cas ou le navigateur ne sera pas capable d’afficher l’élément.
L’exemple suivant tentera par exemple d’afficher la page web "http ://www.exemple.com" et si le navigateur de la personne n’était pas en mesure de prendre ce genre de document alors le texte alternatif serait affiché.
<object type="text/html" data="http://www.exemple.net" width="600" height="300"> <p>Texte alternatif décrivant le contenu de la page.</p> </object>
Les formulaires sont des éléments importants dans les documents et site web. C’est grâce à eux qu’il est possible de communiquer des informations aux applications web qui pourront alors les traiter par l’intermédiaire de scripts PHP, ASP, Python, etc.
Un formulaire est délimité par la balise form dans laquelle est stipulée un certain nombre d’informations :
l’attribut action permet de donner l’url du script (PHP, ASP, JSP, ...). qui prendra en charge les informations saisies par l’utilisateur ;
l’attribut method permet de définir la manière dont les informations seront transmises (valeur get pour être affichées dans l’url ou post pour être masquées à l’utilisateur) ;
Les formulaires peuvent contenir une multitudes d’éléments différents, nous allons les lister et nous verront comment les utiliser.
Le libellé d’un élément de formulaire est défini par la balise label.
<label for="nom">Votre nom</label>
L’attribut for permet d’indiquer à quelle zone de saisie se rapporte le libellé. Dans l’exemple donnée la valeur nom représente l’identifiant (attribut id) du champ de saisie.
La balise input est multi-usages ; elle permet de définir plusieurs types de zones de saisies ou de sélection. C’est une balise auto-fermante.
<input type="text" id="nom" name="nom" value="valeur par défault" />
Elle doit contenir différents attributs par défaut :
type permet d’indiquer le type d’élément de formulaire. Cet attribut peut prendre plusieurs valeurs en fonction de ce que l’on désire obtenir comme élément :
text pour une zone de saisie ;
radio pour afficher des boutons radio ;
checkbox pour afficher des cases à cocher ;
password pour afficher une zone de saisie de mot de passe (qui sera masqué par des * lors de la saisie) ;
submit pour créer un bouton de validation du formulaire ;
reset pour créer un bouton de remise à zéro du formulaire ;
button pour créer un bouton dont l’action devra être définir en javascript par exemple ;
image pour créer un bouton en se basant sur une image ;
file pour créer une zone de sélection d’un fichier ;
hidden qui permet de définir une information qui sera invisible pour l’utilisateur ;
name permet de donner un nom à notre élément (ce sera également le nom de la variable transmise aux scripts qui recevra les informations sur le serveur) ;
value contient la valeur que vous désirez donner à cet élément de formulaire.
La balise textarea permet de créer une zone de saisie de texte multi-lignes. Elle s’utilise avec les attributs cols pour définir le nombre de caractères à afficher en largeur et rows pour définir le nombre de lignes.
La balise select permet de créer une liste déroulante de choix. Elle s’utilise avec des balises option pour définir les choix possibles.
<select name="civilite> <option value="M.">Monsieur</option> <option value="Mme">Madame</option> </select>
Les éléments d’un formulaire peuvent être regroupés en section.
La balise fieldset vous permet de regrouper les éléments de formulaire. Le navigateur marquera ce regroupement en créant une bordure autour des éléments. La balise legend va de pair avec la précédente, elle permet de donner un titre au regroupement.
Voici un exemple de formulaire assez complet :
<form action="http://www.exemple.net/enregistrement.php" method="post"> <fieldset> <legend>Information personnelle</legend> <p> civilité :<br /> <input type="radio" name="civilite" value="M."> <label>Monsieur</label><br /> <input type="radio" name="civilite" value="Mme"> <label>Madame</label> </p> <p> <label>nom</label> <input type="text" name="nom" value=""> </p> <p> <label for="pays">pays</label> <select id="pays" name="pays"> <option value="france">France</option> <option value="autre">Autre pays</option> </select> </p> <p> <input type="checkbox" id="newsletter" name="newsletter" value="ok"> <label for="newsletter">Je désire recevoir la lettre d’information</label> </p> </fieldset> </form>
Les deux derniers éléments que nous allons voir sont particuliers, ils ne comportent aucune notion de sémantique (ils ne représentent rien en particulier) mais sont pourtant très utiles et très utilisés dans les documents et pages web.
Le premier, défini par la balise span est un élément de type inline, le second, défini par la balise div est un élément de type block. Ces deux balises vous permettent de regrouper d’autres éléments de votre page afin de pouvoir y appliquer, par exemple, un graphisme particulier lors de l’utilisation des feuilles de style pour la mise en page.
<div class="articles\_liste"> <h1>titre d’un premier article</h1> <p> Epsum factorial non deposit quid pro quo hic escorol. <span class="designation">Olypian quarrels</span> et gorilla congolium sic ad nauseum. </p> <h1>titre d’un second article</h1> <p> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. </p> </div>