Blog
Aller au contenu

Guillaume Duverger

Développement & graphisme


Accueil » Développement » Apprendre HTML

Sommaire
  1. Le HTML c'est quoi ?
  2. Le HTML pour quoi faire ?
  3. Structure d’un document HTML
    1. Balises et attributs
    2. Exemple basique d'un document HTML
      1. Le doctype (type de document)
      2. L'élément html
      3. Eléments head et body
      4. L'élément title
      5. L'élément meta
      6. L'élément link
    3. L’imbrication
    4. Les commentaires
  4. Les titres
  5. Les hyperliens
    1. Liens internes
    2. Liens externes
    3. Les ancres
    4. Lien d'envoi d'email
    5. Lien de téléchargement
    6. Lien de contact téléphonique
  6. Les tableaux
    1. Les éléments d'un tableau
    2. Exemple simple d'un tableau
    3. Tableaux complexes
    4. Rendre un tableau responsive
  7. Les formulaires
    1. L'élément form
    2. Les éléments de formulaire
      1. Les éléments fieldset et legend
      2. L'élément input
      3. L'élément textarea
      4. L'élément label
      5. L'élément select
      6. L'envoi des informations
      7. Styliser les éléments de formulaire avec CSS
  8. Les listes
    1. Listes non ordonnées
    2. Listes ordonnées
    3. Listes de description
Télécharger ce cours en pdf

Le HTML c'est quoi ?

Inventé pour permettre de rédiger des documents web reliés les uns aux autres grâce aux liens hypertexte, le langage HTML est lui-même basé sur le langage SGML. HTML est donc ce que l'on nomme un langage de balisage (ou langage descriptif).

Après une évolution difficile, vient la version stable : HTML4.0 publiée par le W3C. Et puis, courant 2000, revirement de situation. Le langage HTML est abandonné pour le XHTML, extension du langage XML.

En 2007, alors qu'une deuxième version de XHTML est en cours (définitivement enterrée en 2009, mais la version XTML1.1 est restée -pour l'instant-), apparaît HTML5.

La vie des langages web n'est pas un long fleuve tranquille.

👉 Le HTML pour quoi faire ?

Comme dit dans l'introduction, le langage HTML va permettre de rédiger un document web pour qu'il soit interprété par un navigateur. Comme pour tout langage, nous aurons besoin d'un éditeur de texte pour écrire du code HTML.

Le fonctionnement du HTML repose sur un système de balisage, autrement dit sur des balises renfermant des éléments. Pour exemple :

<html> est une balise et html un élement.

<p> est une balise réprésentant un paragraphe et p un élément.

💡 Il ne faut donc pas confondre balise et élément.

Justement, nous allons voir ces balises, éléments et autres attributs qui vont permettre de structurer un document HTML.

👉 Structure d'un document HTML

Balises et attributs :

Le langage HTML repose sur des éléments (ou balises) pour générer du contenu. Les balises peuvent être écrites soit en minuscules soit en majuscules (mais l'usage le plus courant est en minuscule). Elle n'apparaissent pas à l'écran, seul le contenu se trouvant à l'intérieur est affiché.

Il existe deux types de balises :

Les balises les plus courantes fonctionnant par paires qui s'ouvrent puis se referment. Cela est essentiel pour l'imbrication. Un exemple ci-dessous :



<p>Exemple utilisant une balise qui s'ouvre et se ferme</p>


Les balises autofermantes (ou balises orphelines ou éléménts vides) comme par exemple avec la balise <img> :



<img src="monImage.jpg" alt=""/>

/* peut s'écrire sans le slash */

<img src="monImage.jpg" alt="">


💡 Vous pouvez retrouver dans cet article toutes les balises HTML.

Certains éléments peuvent se passer d'attributs, d'autres non. Un attribut se déclare dans la balise ouvrante comme ceci :



/* l'élément a requiert l'attribut href */

<a href="lien"></a>

/* l'élément img requiert deux attributs src et alt */

<img src="monImage.jpg" alt="Description de mon image"/>


💡 Vous pouvez retrouver dans cet article tous les attributs HTML.


Exemple basique d'un document HTML :

Pour afficher une page HTML dans un navigateur, il faut renseigner certaines informations essentielles. Ci-dessous, le minimum requis pour un document HTML valide (pour savoir si votre document respecte les standards, rendez-vous sur le validateur W3C) :



<!doctype html>
<html>
<head>
</head>
<body>
<p>Voici une structure HTML valide. Finalement c'est assez simple, non ?</p>
</body>
</html>


voir la page

💡 Vous devez enregistrer votre page avec l'extension .html ou .htm.

Le doctype :

C'est la première chose à déclarer. On indique ainsi au navigateur de quel type de document il s'agit et comment il doit analyser la syntaxe.

💡 Pensez bien à déclarer le point d'exclamation devant l'élément.

L'élément html :

Puisque l'on vient de déclarer un document HTML grâce au doctype, on place ensuite cet élément dans une balise. Généralement, on indique dans cette balise la langue du document via l'attribut lang.

Un document HTML est séparé par un en-tête (head) et un corps (body).

L'en-tête contiendra des informations relatives au document : le titre, la description du contenu de la page, le type d’encodage, le nom de l'auteur du document... Il existe un grand nombre de données (métadonnées).

💡 NB : ces informations n'apparaissent pas sur la page, elles sont destinées au navigateur et aux moteurs de recherche.

Le corps est l'espace réservé au contenu du document qui, lui, sera visible des internautes : textes, liens hypertexte, images, audios, vidéos...

Elément title :

Cet élément, bien qu'optionnel, a son importance car il va contenir le titre de la page. Celui-ci est affiché généralement dans l'onglet de la page. Il est bien évident que le titre doit être en rapport avec le contenu du document.

L'élément title se présente ainsi :



<title>Titre de la page</title>


💡 Attention à ne pas confondre l'élément et l'attribut du même nom.

L'élément meta :

On écrira des données dans des balises <meta>. Voici comment cette balise se présente :



<head>

/*exemple permettant de décrire le contenu de la page */
<meta name="description" content="description du contenu de la page...">

/*exemple permettant de rafraîchir le contenu de la page toutes les 30 secondes */

<meta http-equiv="refresh" content="30">

</head>

L'élément meta peut être utilisé avec de nombreux attributs dont voici les principaux :

  • charset : permet de déclarer l'encodage de la page. Bien que cela ne soit pas obligatoire, il est fortement recommandé d'utiliser l'encodage UTF-8.
  • name : définit le nom d'une métadonnée du document (comme dans le code ci-haut).
  • content : définit la valeur associée avec l'attribut http-equiv ou l'attribut name suivant le contexte.
  • http-equiv : définit un objet pouvant modifier le comportement des serveurs ou des agents utilisateur (comme dans le code ci-haut).
  • viewport : permet de définir la taille du viewport (vue virtuelle) à destination des terminaux mobiles.

Cet élément, placé à l'intérieur de l'entête du document, permet d'importer une ressource extérieure comme une feuille de style, une police de caractère hébergée sur un serveur.... Pour cela, il existe l'attribut rel qui va indiquer le type de relation entre le document et la ressource, et l'attribut href qui va pointer vers la ressource :



<link href="style.css" rel="stylesheet" type="text/css">	


L'élément link permet également d'indiquer au navigateur la priorité d'une ressource à charger. Pour cela, nous aurons besoin de déclarer dans l'élément rel la valeur preload (pré-chargement) conjointement à l'élément as dans lequel on indique le type de document.



<link rel="preload" as=script href='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>	


Par ailleurs, l'élément link, via l'attribut rel et les valeurs prev et next, permet de décrire la position d'un document par rapport à une série de documents. Voir aussi sur ce blog l'attribut HTML5 rev.



<head>
<title>Chapitre 2</title>
<link rel="prev" href="chapitre1.html">
<link rel="next" href="chapitre3.html">
</head>



L’imbrication :

On ne peut pas imbriquer, autrement dit placer des éléments à l'intérieur d'autres éléments de n'importe quelle manière. Il faut suivre certaines règles.

Par exemple, cette imbrication n'est pas valide, l'élément div n'étant pas autorisé en tant qu'enfant direct de l'élément ul :



<ul>
<li>
<div></div>
</li>
</ul>


En effet, il existe une hiérarchie des balises à respecter. De même que le chevauchement n'est pas permis, sauf cas exceptionnel. Un exemple d'erreur de chevauchement de balises ci-dessous :



<p>

début du paragraphe

<span>

on met du texte dans une nouvelle balise pour le styler par exemple

</p>

<p>

On commence un nouveau paragraphe

</span>

</p>


Nous avons refermé la balise <span> dans le second paragraphe. Or, il aurait fallu le faire dans le premier, produisant ainsi une erreur.

💡 Soyez vigilants dans l'ouverture et la fermeture des balises ainsi qu'à l'imbrication, ne serait-ce par souci de clarté. Si dans la plupart des cas, le navigateur est capable d'interpréter un code mal écrit, il peut parfois y avoir des résultats inattendus.


Les commentaires :

Les commentaires se présentent sous forme de ligne et peuvent s'insérer partout dans le document :



<!-- Un commentaire monoligne en HTML -->

<!-- Un commentaire 

multilignes en HTML -->


💡 Attention à la syntaxe. Pensez bien au point d'exclamation au début. Il n'y en a pas à la fin.

Invisibles de l'utilisateur, les commentaires servent surtout d'indication pour le développeur (et éventuellement à d'autres dans un projet participatif). Ils servent également (mais beaucoup moins aujourd'hui) à insérer du code pour les anciennes versions d'Internet Explorer (jusqu'à la version 9 incluse).

Ainsi, en inspectant le code HTML d'un site, ne vous sera t-il pas rare de voir ce type de commentaires :



<!--[if IE]> instruction pour les navigateurs Internet Explorer -->


💡 Sachant qu'il est possible à l'utilisateur de voir ces commentaires, faites attention aux informations contenues à l'intérieur.

👉 Les titres :

Les titres sont très importants dans le langage HTML puisqu'ils permettent de structurer et de hériarchiser du contenu dans un document. Ils sont au nombre de six. L'élément h1 étant par définition celui qui a le plus d'importance. Par défaut, le navigateur l'affichera en gros et en gras. Plus nous irons vers l'élément h6, plus la taille et l'épaisseur diminueront.



<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>


Il est nécessaire, tant au niveau de l'accessibilité que de la structure, de ne pas sauter de niveau de titre. On commence par le titre générique avec l'élément h1, généralement placé dans l'élément header (entête) du document, puis h2, h3 et ainsi de suite.

👉 Les hyperliens

Les hyperliens sont l'essence même d'un document HTML. Ils servent à relier les documents les uns aux autres via l'élément a et ses attributs. Il existe plusieurs types de liens.

Liens internes :

Il s'agit tout simplement d'un lien dont la cible est un document interne d'un site. On y indique en toute logique le lien, dossier ou répertoire où se trouve la cible. Notez la présence de l'attribut href, indispensable pour cibler un lien :



<a href="ma-page-cible.html">Lien menant vers une page interne</a>


Selon l'emplacement des fichiers, dossiers et autres répertoires de votre site, il faudra reculer dans l'arborescence du site de cette manière :



<a href="../ma-page-cible.html">Lien menant vers une page interne</a>


Liens externes :

Pour créer un lien externe, c'est-à-dire une cible extérieure, nous allons utiliser le même élément ainsi que le même attribut.



<a href="https://www.google.com/">Lien menant vers la page d'accueil de Google</a>


On associe souvent l'attribut target à un lien externe avec sa valeur _blank, créant un nouveau contexte de navigation. Autrement dit, lorsque l'on clique sur le lien, cela ouvre un nouvel onglet. Pour des raisons de sécurité et d'accessibilité, il est préférable d'occulter l'attribut target ou alors de l'utiliser en corrélation avec l'attribut rel et la valeur noopener.



<a href="https://www.google.com/" target="_blank" rel="noopener">Lien menant vers la page d'accueil de Google</a>


Un autre attribut que vous pourrez rencontrer dans les liens internes ou externes est title. Comme l'attribut target, il est à utiliser avec parcimonie dans le sens où dans bien des cas il est redondant (souvent il répète le texte du lien) provoquant des problèmes d'accessibilité.

Les ancres :

Les ancres permettent de créer des raccourcis. C'est souvent le cas de longues pages proposant un sommaire. On peut alors directement cliquer sur un lien qui va mener vers une partie précise de la page au moyen d'un identifiant (attribut id) possédant un nom unique (celui que vous voudrez) :



<ul>
<li><a href="#ancre1">Lien</a></li>
<li><a href="#ancre2">Lien</a></li>
<li><a href="#ancre3">Lien</a></li>
</ul>

<p id=ancre1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec felis nec dui varius dictum. Morbi in orci ac tellus molestie condimentum. Integer bibendum, libero nec accumsan pharetra, turpis quam imperdiet velit, sit amet rhoncus turpis nibh at erat.</p>
<p id=ancre2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec felis nec dui varius dictum. Morbi in orci ac tellus molestie condimentum. Integer bibendum, libero nec accumsan pharetra, turpis quam imperdiet velit, sit amet rhoncus turpis nibh at erat.</p>
<p id=ancre3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec felis nec dui varius dictum. Morbi in orci ac tellus molestie condimentum. Integer bibendum, libero nec accumsan pharetra, turpis quam imperdiet velit, sit amet rhoncus turpis nibh at erat.</p>


Lien d'envoi d'email :

Il est possible de permettre à l'utilisateur de vous contacter par message électronique en cliquant sur un lien hypertexte. Pour ce faire, il faut une fois de plus utiliser l'attribut href ainsi que la valeur mailto.



<a href="mailto:contact@guyom-design.com">Envoyer un courriel à personne</a>


Vous pouvez également fournir d'autres informations comme le sujet du message par exemple. Plus d'informations à ce sujet.

Lien de téléchargement :

Vous pouvez permettre à vos visiteurs de télécharger un document (un pdf par exemple), une image, un fichier texte... avec l'attribut HTML5 download. Cet attribut indique au navigateur de télécharger la ressource à disposition, au lieu de simplement l'afficher, comme c'est le cas si la ressource se trouve dans un simple lien interne.

Ci-dessous, un exemple avec un lien classique, puis avec l'attribut download :

Télécharger l'image Télécharger l'image


<a href="image.jpg">Télécharger l'image</a>

<a href="image.jpg" download="nomImage.jpg">Télécharger l'image</a>
	

L'attribut download n'est pas compatible, entre autres, avec Internet Explorer (toutes versions confondues) et iOS Safari. Par ailleurs, Firefox empêche le téléchargement vers une ressource extérieure. Le navigateur affiche simplement la ressource.

Lien de contact téléphonique :

Pour créer un lien pointant vers un numéro de téléphone, il nous faudra utiliser la valeur tel: à l'intérieur de l'attribut href. Il nous faudra également déclarer un indicatif qui varie selon les pays (en France il s'agit de +33).



<a href="tel:+330110011001">Me contacter par téléphone</a>
	

💡 Ne négligez pas ce type de lien, il est facile à mettre en place et s'avère très pratique sur les terminaux mobiles.

👉 Les tableaux

Les éléments d'un tableau :

L'élément HTML table permet de représenter un tableau de données. Il fut un temps, pas si lointain, où les tableaux servaient de structure à un site web. Or, leur vocation se résume uniquement à présenter des informations.

💡 Attention : de nombreux attributs en HTML4 sont dépréciés ou obsolètes. Parmi eux, l'attribut align qui définissait l'alignement horizontal du contenu d'une cellule, l'attribut bgcolor qui définissait la couleur d'arrière-plan d'une cellule ou d'un tableau, l'attribut valign qui définissait l'alignement vertical du contenu d'une cellule... Dans tous les cas, il est recommandé aujourd'hui de styliser tous les éléments d'un tableau avec CSS.

Parmi les éléments permettant de construire un tableau, on notera :

  • table : c'est l'élément qui définit le tableau. Il accepte de nombreuses propriétés CSS :
    • width : pour la largeur du tableau.
    • border, border-style, border-color, border-width, border-collapse, border-spacing : pour styliser les bordures du tableau.
  • caption : il s'agit de la légende (ou titre) qui est facultatif. Il doit se placer juste après l'ouverture du tableau. Les propriétés CSS pouvant mettre en forme cet élément sont :
  • col : définit une colonne du tableau. Se trouve au sein de l'élément colgroup. Elle admet quelques propriétés CSS :
    • border : cette propriété raccourcie s'applique si la propriété border-collapse vaut collapse (bordures fusionnées) et non separate (valeur par défaut).
    • background
    • width
    • visibility
  • colgroup : définit un groupe de colonnes du tableau. Cet élément peut être stylisé en CSS :
    • width
    • :nth-child : cette pseudo-classe va permettre de définir l'alignement des cellules d'une colonne
    • text-align
  • tbody : regroupe un ou plusieurs éléments tr formant le corps du tableau. Accepte la pseudo-classe :nth-child et la propriété text-align.
  • td : définit une cellule du tableau contenant des données.
  • tfoot : il s'agit du pied du tableau.
  • th : définit une cellule du tableau comme étant une cellule d'en-tête pour un groupe de cellule. Il possède plusieurs attributs (voir tableaux complexes plus bas) :
    • abbr
    • colspan
    • headers
    • rowspan
    • scope
  • thead : il s'agit de l'ensemble de lignes qui définit l'en-tête des colonnes du tableau.
  • tr : il s'agit d'une ligne d'une cellule du tableau. Accepte la pseudo-classe :nth-child et la propriété text-align.
Exemple simple d'un tableau :
Exemple table


<table>
<caption>Marques de voitures</caption>
<thead>
<tr>
<th>Nom</th>
<th>Nationalité</th>
<th>Date création</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nom</th>
<th>Nationalité</th>
<th>Date création</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Chevrolet</td>
<td>États-Unis</td>
<td>1911</td>
</tr>
<tr>
<td>Citroën</td>
<td>France</td>
<td>1919</td>
</tr>

...

</tbody>
</table>




table{
	
margin: 1rem auto;
text-align: center;
width: 100%;
max-width: 100%;
border-collapse: collapse;
border: 1px solid

}
	
tbody tr td:nth-child(2){
	
border-left:1px solid;
border-right: 1px solid
	
	}	
	
thead,
tfoot {

background-color: purple;
color: white

}
	
caption{text-transform:uppercase}

th,td{padding:8px 0}

tbody tr:nth-child(even) {
	
background-color: #ddd
	
}
	
tbody tr td:first-child {
	
font-weight: bold
	
}



💡 NB : on écrira les éléments thead, tfoot et tbody dans cet ordre. Autrement dit le pied se trouve avant le corps dans un tableau. Le navigateur se chargera de restituer correctement les données.

Tableaux complexes :

Dans certains cas, vous aurez besoin d'arranger votre tableau en fonction des données, en fusionnant des colonnes ou des lignes.

Il existe deux attributs qui vont nous permettre la fusion.

  • colspan : la fusion s'effectue horizontalement.
  • rowspan : la fusion s'effectue verticalement.

💡 Pour les deux attributs, on indiquera le nombre de cellules (élément td) à fusionner entre elles avec un chiffre correspondant.

Exemple avec l'attribut colspan :

Exemple table complexe


<table>
<thead>
<tr>
<th>Titre du jeu</th>
<th>Enfants</th>
<th>Adolescents/Adultes</th>
</tr>
</thead>
<tr>
<td>Call of duty black ops 4</td>
<td>Non adapté</td>
<td>Adapté</td>
</tr>
<tr>
<td>Grand Theft Auto IV</td>
<td>Non adapté</td>
<td>Adapté</td>
</tr>
<tr>
<td>The Legend of Zelda: Breath of the Wild</td>
<td colspan="2">Tout âge</td>
</tr>
</table>


Exemple table complexe


<table>
<thead>
<tr>
<th>Titre du jeu</th>
<td>Call of duty black ops 4</td>
<td>Grand Theft Auto IV</td>
<td>The Legend of Zelda: Breath of the Wild</td>
</tr>
</thead>
<tr>
<th>Enfants</th>
<td>Non adapté</td>
<td>Non adapté</td>
<td rowspan="2">Tout âge</td>
</tr>
<tr>
<th>Adolescents/Adultes</th>
<td>Adapté</td>
<td>Adapté</td>
</tr>	
</table>


Rendre un tableau responsive :

A la base les tableaux n'ont pas été conçu pour être optimisés sur les terminaux mobiles. Donc il a fallu s'adapter et trouver des solutions. Aucune n'est parfaite, que ce soit en utilisant la technique Flip Scroll table, No More tables ou encore RWD list to table... Je vous invite à lire cet article sur le sujet.

L'exemple ci-dessous utilise la technique "No More tables" qui s'appuie sur l'attribut HTML5 data- pour restituer les données.

Exemple table responsive Exemple table bureau


<table>
<thead>
<tr>
<th>Nom</th>
<th>Nationalité</th>
<th>Date création</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Nom">Chevrolet</td>
<td data-title="Nationalité">États-Unis</td>
<td data-title="Date création">1911</td>
</tr>
<tr>
<td data-title="Nom">Citroën</td>
<td data-title="Nationalité">France</td>
<td data-title="Date création">1919</td>
</tr>

...

</tbody>
</table>




table{
	
margin: 1rem auto;
text-align: center;
width: 100%;
max-width: 100%;
border-collapse: collapse;
border: 1px solid

}
		
	
thead{

background-color: purple;
color: white

}
	

th,td{padding:8px 0}

tbody tr:nth-child(even) {
	
background-color: #ddd
	
}
	
@media only screen and (max-width: 800px) {
		
table, 
thead, 
tbody, 
th, 
td, 
tr{ 
	
display: block
	
}
	
thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}
 
 
 
td { 
	
position: relative;
padding-left: 50%; 
white-space: normal;
text-align: left
	
	}
 
td:before { 
	
position: absolute;
top: 6px;
left: 6px;
width: 45%; 
padding-right: 10px; 
font-weight: bold;
white-space: nowrap;
text-align:left;
content: attr(data-title)
	
	}
}



👉 Les formulaires

HTML permet de créer des zones de contrôles intéractifs afin qu'un utilisateur puisse envoyer des informations sur un serveur.

Autrement dit, il est possible de mettre en place un formulaire sur votre site, mais le traitement et l’enregistrement des données ne peut se faire en HTML. Il faudra passer par un autre langage comme PHP.

Dans ce chapitre, il ne sera donc question que d'apprendre les éléments qui permettent de structurer un formulaire et la possibilité de les styliser avec CSS.

L'élément form

Un formulaire est représenté par l'élément form. Celui-ci possède deux attributs :

  • method : indique la manière dont les données sont envoyées. Peut prendre deux valeurs :
    • get : méthode non recommendable. Les informations sont limitées et passent par la barre d'adresse du navigateur.
    • post : c'est la méthode la plus utilisée. En effet, elle permet d'envoyer de nombreuses informations. Les données saisies dans le formulaire ne transitent pas dans la barre d'adresse du navigateur.
  • action : indique l'adresse de la page (en php) ou programme se chargeant de traiter les informations saisies.

Ce qui nous donne :



<form method="post" action="infos-saisies.php">

</form>


Les éléments de formulaire :
Les éléments fieldset et legend :

L'élément fieldset permet de regrouper les éléments d'un formulaire afin de le structurer en le découpant en plusieurs parties.

L'élément legend représente une légende (autrement dit un titre) pour le contenu de son élément parent fieldset.

	

<form method="post" action="infos-saisies.php">
<fieldset>
<legend>Titre</legend>
	  
   ...
	  
</fieldset>

<fieldset>
<legend>Autre titre</legend>
	  
   ...
	  
</fieldset>

</form>


L'élément input :

L'élément input permet, selon la valeur de son attribut type, de saisir différents types d'informations.

Parmi les valeurs les plus utilisées de l'attribut type sur l'élément input qui recueillent du texte (zones de saisie), nous pouvons noter :

  • text : valeur par défaut. Permet d'éditer du texte. Il est posible d'omettre cette valeur.
  • password : permet d'éditer un mot de passe invisible à l'écran.
  • email : permet d'éditer une adresse email.
  • search : permet de saisir des requêtes de recherche.

Un exemple basique de l'élément input :



<input type=text>


💡 Il existe de nombreuses autres valeurs pour l'attribut type, dont certaines ont été introduites dans la cinquième version de HTML. Je vous invite à découvrir les éléments de formulaire HTML5 sur ce blog pour en savoir plus.

Par ailleurs, l'élément input possède d'autres attributs utiles.

  • name : permet, lors de l'envoi du formulaire vers un serveur, d'extraire les données saisies par l'utilisateur.
  • id : permet d'associer le champ avec un libellé (élément label).
  • value : permet de spécifier la valeur par défaut du champ.

L'élément input sert donc à éditer du texte mais pas seulement. Il permet également de faire des choix (simples ou multiples). Pour cela, il faut utiliser des cases à cocher, des boutons radio ou encore des sélections avec l'élément select (voir plus bas).

💡 Tandis que les boutons radio permettent de sélectionner une seule et unique proposition, les cases à cocher, quant à elles, permettent de cocher/décocher plusieurs valeurs d'un groupe, voir de n'en cocher aucune.

Je vous invite à faire l'essai dans l'exemple ci-dessous :




<input id="un" type="radio" name="question1">
<label for="un">
<svg width="58" height="58" viewBox="0 0 58 57">
<circle fill="none" stroke=#ddd stroke-width=3 cx="29" cy="29" r="10"/>
<circle fill="purple" cx="29" cy="29" r="5"/>
</svg>choix1 
</label>
<input type=radio id="deux" name="question1">
<label for="deux">
<svg width="58" height="58" viewBox="0 0 58 57">
<circle fill="none" stroke=#ddd stroke-width=3 cx="29" cy="29" r="10"/>
<circle fill="purple" cx="29" cy="29" r="5"/>
</svg>choix2
</label>
<input type=radio id="trois" name="question1">
<label for="trois">
<svg width="58" height="58" viewBox="0 0 58 57">
<circle fill="none" stroke=#ddd stroke-width=3 cx="29" cy="29" r="10"/>
<circle fill="purple" cx="29" cy="29" r="5"/>
</svg>choix3
</label>


<input id="quatre" type="checkbox" name="question2">
<label for="quatre">
<svg width="58" height="58" viewBox="0 0 58 57">
<rect fill="none" stroke=#ddd width="29" height="29" x="13" y="13"/>
<path fill="purple" d="M20.687 38.332a5.308 5.308 0 0 1-7.505 0L1.554 26.704A5.306 5.306 0 1 1 9.059 19.2l6.928 6.927a1.344 1.344 0 0 0 1.896 0L36.642 7.368a5.308 5.308 0 0 1 7.505 7.504l-23.46 23.46z"/>
</svg>choix1 
</label>	
<input type="checkbox" id="cinq" name="question2">
<label for="cinq">
<svg width="58" height="58" viewBox="0 0 58 57">
<rect fill="none" stroke=#ddd width="29" height="29" x="13" y="13"/>
<path fill="purple" d="M20.687 38.332a5.308 5.308 0 0 1-7.505 0L1.554 26.704A5.306 5.306 0 1 1 9.059 19.2l6.928 6.927a1.344 1.344 0 0 0 1.896 0L36.642 7.368a5.308 5.308 0 0 1 7.505 7.504l-23.46 23.46z"/>
</svg>choix2
</label>
<input type="checkbox" id="six" name="question2">
<label for="six">
<svg width="58" height="58" viewBox="0 0 58 57">
<rect fill="none" stroke=#ddd width="29" height="29" x="13" y="13"/>
<path fill="purple" d="M20.687 38.332a5.308 5.308 0 0 1-7.505 0L1.554 26.704A5.306 5.306 0 1 1 9.059 19.2l6.928 6.927a1.344 1.344 0 0 0 1.896 0L36.642 7.368a5.308 5.308 0 0 1 7.505 7.504l-23.46 23.46z"/>
</svg>choix3
</label>


Dans les plus courants des cas, vous aurez plusieurs cases ou boutons à gérer. Comme l'élève assidu que vous êtes, vous avez certainement observé le code de l'exemple ci-dessus et vous avez remarqué, à juste titre, plusieurs particularités :

  1. Nous avons utilisé l'attribut name sur l'élément input.
  2. Nous avons ajouté un nouvel élément label lié avec l'élément input via un identifiant (attribut id).
  3. Nous avons placé du code SVG (couplé avec CSS) pour styliser les cases et boutons. Mais nous n'aborderons pas ce dernier point (voir plus bas pour styliser avec CSS) puisqu'il s'agit seulement de l'esthétique et non pas de la structure HTML.

Revenons donc sur les deux premiers points. Imaginons que vous proposiez un sondage à vos visiteurs avec une question quelconque en laissant trois possibilités de réponse (vous utiliserez des boutons radio). Celles-ci seront donc reliées entre elles.

C'est là que l'attribut name entre en jeu. Il va permettre de relier les input via la même valeur. Dans notre exemple, nous avons nommé chaque bouton radio avec la valeur "question1" (vous pouvez mettre la valeur que vous souhaitez). Si vous ne le faites pas, il y aura forcément un comportement inattendu.

Le second élément essentiel pour notre hypothétique sondage est la présence de l'élément label (voir plus bas) dans lequel nous avons ajouté l'attribut for. La valeur doit être la même que l'identifiant renseigné dans l'input qui s'y rattache. Dans le cas contraire, il n'y aura aucune intéraction. En clair, vous ne pourrez pas cocher le bouton.

Ne reste plus qu'à évoquer deux autres attributs relatifs aux cases à cocher et autres boutons radio pour clore le chapitre sur l'élément input.

Généralement, que ce soit pour les cases ou les boutons, on présente une option déjà sélectionnée avec l'attribut checked, ne serait-ce que pour montrer à l'utilisateur qu'il est possible de faire une sélection. A contrario, vous avez la possibilité de désactiver une case ou un bouton avec l'attribut disabled.

L'élément textarea

Cet élément, tout comme l'élément input dans le cas des zones de saisie, permet d'éditer du texte. Mais contrairement à un input de type text par exemple, l'élément textarea donne la possibilité d'écrire sur plusieurs lignes (on parle de multilignes).

Dans sa forme brute, l'élément se présente comme ceci (varie selon le navigateur) :



<textarea></textarea>	


L'élément textarea comprend de nombreux attributs, dont les plus utilisés sont :

  • name : même fonction qu'avec l'élément input. Permet de pouvoir effectuer un contrôle.
  • cols : permet de contrôler la largeur du champ. Il s'agit de la largeur selon les caractères. La largeur par défaut vaut 20.
  • rows : définit le nombre de lignes de texte.

Exemple ci-dessous regroupant ces attributs :



<textarea name="textarea" rows="10" cols="50"></textarea>	


NB : En définissant l'attribut rows à 10, cela signifie qu'à partir de la onzième ligne, nous verrons apparaître un scroll dans l'élément textarea si celui-ci n'a pas été redimmensionné bien entendu.

💡 Comme pour l'élément input, de nouveaux attributs ont été introduits en HTML5 comme maxlength et minlength qui permettent de contrôler le nombre minimal ou maximal de caractères au sein du champ texte.

L'élément label :

Nous avons évoqué l'élément label plus haut qui sert au fonctionnement des cases à cocher et boutons radio. Mais sa fonction première est de délivrer une information quant à la nature du renseignement à fournir dans un élément input (peut importe sa nature) ou un textarea. C'est pourquoi on parle de libellé (ou étiquette) pour un élément label.

L'élément label est important au niveau de l'accessibilité. Au possible, évitez d'utiliser seul ou à la place d'un label l'attribut HTML5 placeholder. En effet, il peut s'avérer difficile à lire pour les personnes ayant des déficiences visuelles. De plus, cela peut être désavatageux pour les personnes rencontrant des problèmes de mémoire qui peuvent oublier le texte qui se trouvait dans le champ après avoir cliqué dessus. Les utilisateurs peuvent également penser que le champ est déjà rempli. Enfin, les lecteurs d'écran ne reconnaisent pas cet attribut.

L'élément select :

Nous avons brièvement évoqué cet élément en parlant des cases à cocher et des boutons radio dans la mesure où l'élément select permet de faire une sélection parmi plusieurs propositions.

Un exemple ci-dessous :



<select>
<option value="1">Choix 1</option>
<option value="2">Choix 2</option>
<option value="3">Choix 3</option>
</select>


L'élément select possède plusieurs attributs dont les plus utiles sont :

  • name : permet de pouvoir effectuer un contrôle.
  • multiple : permet de choisir plusieurs options (en faisant ctrl + clic ou cmd + clic)
  • size : indique le nombre de lignes visibles dans la liste. Un scroll apparaît alors.

Exemple utilisant ces trois attributs :



<select multiple size=6 name=selection>
<option value="1">Choix 1</option>
<option value="2">Choix 2</option>
<option value="3">Choix 3</option>
<option value="4">Choix 4</option>
<option value="5">Choix 5</option>
<option value="6">Choix 6</option>
<option value="7">Choix 7</option>
<option value="8">Choix 8</option>
<option value="9">Choix 9</option>
<option value="10">Choix 10</option>
</select>


Pour créer des options dans l'élément select, nous allons utiliser l'élément option qui comprend les attributs suivants :

  • disabled: l'option ne peut pas être sélectionnée.
  • label : attribut dont la valeur correspond au texte affiché dans l'option.
  • selected : indique que l'option est sélectionnée(*).
  • value : indique le contenu qui sera envoyé au formulaire lorsque l'option est sélectionnée.

*Si l'élément option est un élément descendant d'un élément select dont l'attribut multiple n'est pas déclaré, vous ne pourrez pas utiliser l'attribut selected. Il faut alors entourer l'option de l'élément optgroup dont nous allons parler ci-dessous.

L'élément optgroup donne la possibilité de créer plusieurs groupes d'option dans un seul et même élément select. Un exemple ci-dessous :



<label for="produit">Choisir parmi nos produits disponibles :</label>	
<select id=produit>
<optgroup label="vêtements">
<option>T-shirt</option>
<option disabled>Polo</option>
<option>Chemise</option>
<option>Pull</option>
</optgroup>
<optgroup label="chaussures">
<option>Baskets basses</option>
<option>Baskets hautes</option>
<option disabled>Sandales</option>
</optgroup>
<optgroup label="accesoires">
<option>Sacs</option>
<option>Cravates</option>
<option>Ceintures</option>
</optgroup>
</select>


Voir également sur ce blog l'élément datalist en HTML5.

L'envoi des informations :

Nous avons fait le tour des différents (et principaux) éléments composant un formulaire. Mais quid de l'envoi des données que l'utilisateur entre dans les champs ?

Il existe pour cela une valeur dont nous n'avons pas parlé à propos de l'élement input et son attribut type. Il s'agit de la valeur submit. Voici comment il se présente :




<input type="submit" value="Envoyer le message">


Contrairement aux autres type d'input, celui de soumission s'apparente à un bouton. Il prend en charge la valeur value (si non renseignée, un texte propre au navigateur s'affiche) mais pas la valeur name puisqu'il ne s'agit pas d'un champ de saisie.

Styliser les éléments de formulaire avec CSS :

Styliser des éléments HTML de formulaire est une vraie sinécure. Comme il s'agit d'objets remplacés, c'est-à-dire des éléments ayant une largeur et une hauteur définies par le navigateur lui-même, ils n'ont pas été conçu pour être modifiables visuellement.

De plus, certains attributs ne sont pas encore implémentés, ce qui force à utiliser des pseudo-classes ou pseudo-éléments propriétaires qui ne sont pas standardisés. Il faut avoir recours à des astuces, parfois malheureuses, en CSS (niveau 3).

Ceci dit, point trop de misérabilisme. Bien qu'il existe des éléments rebelles comme select, option, optgroup ou encore datalist, certains sont faciles à mettre en forme. C'est le cas des champs de saisie. Ceux-ci prennent en compte le modèle de boite et appliquent les propriétés correspondantes (toujours selon le navigateur, il faut appliquer la propriété box-sizing pour obtenir le même rendu).

Par ailleurs, le texte présent dans les champs de saisie est propre au navigateur. Si vous souhaitez une police de caractères particulière ou celle que vous utilisez pour le reste de votre site, il faudra alors déclarer la valeur inherit sur certaines propriétés de texte et de taille comme ceci :




input, textarea, button{

font-family: inherit;
font-size: inherit

}


Si utiliser CSS pour styliser vos éléments de formulaire vous semble trop pénible, il reste la solution JavaScript et notamment les librairies comme JQuery par exemple.

Quelques petites astuces en CSS à voir sur ce blog ainsi que la propriété resize pour l'élément textarea.

👉 Les listes

Les listes sont également un élément essentiel dans la structure d'un document HTML. Elles vont permettre d'ordonner du contenu. C'est pourquoi on parle de liste ordonnée, non ordonnée ou encore de description.

Les listes non-ordonnées :

On nomme liste non-ordonnée une série de mots sans lien ni ordre. Un menu par exemple est une liste non-ordonnée. On peut très bien changer l'ordre des rubriques sans altérer le sens du menu.

On utilisera l'élément ul qui est l'élément parent, suivi de l'élément li. On pourra également imbriquer plusieurs listes comme ceci :

  • viande
  • boissons
    • soda
    • vin
    • eau
  • pain


<ul>
<li>viande</li>
<li>boissons
<ul>
<li>soda</li>
<li>vin</li>
<li>eau</li>
</ul>
</li>
<li>pain</li>
</ul>


On voit apparaître des puces (d'où le nom liste à puces). Celles-ci sont personnalisables avec la propriété CSS list-style-type (ou sa version raccourcie list-style) dont les valeurs les plus utilisées sont disc, circle, square ou encore none (pour n'afficher aucune puce). Il existe beaucoup d'autres valeurs mais il est peu probable que vous ayez à vous en servir.

Par ailleurs, vous pouvez personnaliser les puces avec une image, via la propriété list-style-image.

Les listes ordonnées :

Vous l'aurez sans doute compris, une liste ordonnée respecte l'ordre, dans le cas d'un sommaire par exemple. On utilise alors l'élément ol. Ce ne sont plus des puces qui apparaissent mais des chiffres, des lettres, des nombres... Tout comme une liste non-ordonnée, on peut imbriquer une liste ordonnée :

  1. Introduction
  2. Contenu principal
    1. Partie I
    2. Partie II
    3. Partie III
  3. Conclusion


<ol>
<li>Introduction</li>	
<li>Contenu principal
<ol>
<li>Partie I</li>
<li>Partie II</li>
<li>Partie III</li>
</ol>
</li>
<li>Conclusion</li>
</ol>


NB : le quatrième niveau de HTML a déprécié les attributs type et compact à l'élément ol. Deux attributs sont actuellement disponibles en HTML5, à savoir start et reversed.

Les listes de description :

Une liste de description va permettre de lister ainsi que donner une description à des termes. Pour ce faire, nous utilisons l'élément dl, élément parent de l'élément dt et de l'élément dd pour la description

HTML :
Langage permettant d'afficher du contenu sur un document web.
CSS :
Langage permettant de mettre en forme des éléments dans un document web.
JavaScript :
langage de programmation permettant l'intéraction d'éléments dans un document web.


<dl>
<dt><code class=code>HTML</code> :</dt>
<dd>Langage permettant d'afficher du contenu sur un document web.</dd>
<dt><code class=code>CSS</code> :</dt>
<dd>Langage permettant de mettre en forme des éléments dans un document web.</dd>
<dt><code class=code>JavaScript</code> :</dt>
<dd>langage de programmation permettant l'intéraction d'éléments dans un document web.</dd>
</dl>