Aller au contenu

Cours 5

Listes

Les listes permettent d’organiser du contenu de manière hiérarchique ou séquentielle. Elles sont très fréquentes sur le Web : menus de navigation, recettes, FAQ, glossaires, etc.

En HTML, il existe 3 types de listes :

  1. Les listes à puces
  2. Les listes ordonnées
  3. Les listes de définitions

On peut aussi imbriquer des listes (une liste dans une autre).

Listes à puces

Utilisées pour représenter des éléments sans ordre particulier.

Balises :

  • <ul> : Pour unordered list
    • <li> : Pour list item

Le navigateur ajoutera automatiquement des puces (bullet points) devant chaque item.

Listes ordonnées

Utilisées quand l’ordre des éléments a de l’importance.

Balises :

  • <ol> : Pour ordered list
    • <li> : Pour list item

Le navigateur ajoutera automatiquement des chiffres devant chaque item.

Ici, l’ordre est essentiel : on ne peut pas cuire avant d’avoir mélangé 🤪!

Listes imbriquées

Les listes (ordonnées, comme non-ordonnées) peuvent s'imbriquer !

Par défaut, chaque sous-liste sera indentée par le navigateur.

C'est pratique pour représenter une hiérarchie, comme un menu de site par exemple.

Listes de définitions

Servent à présenter des termes et leur définition ou description. Utilisées pour des glossaires ou des FAQ.

Balises :

  • <dl> : Pour description list
    • <dt> : Pour description term
    • <dd> : Pour description details

Contrairement aux autres listes, celle-ci n’a pas de puces ou de numéros : elle fonctionne en paires terme + définition.

Tableaux

Les tableaux permettent d’organiser des données sous forme de grille (lignes et colonnes).

Ils sont utiles pour représenter de l’information tabulaire : horaires, résultats sportifs, statistiques, prix, etc.

Ils ne doivent jamais être utilisés pour la mise en page.

Tableau simple

Balises :

  • <table>
    • <tr> : Pour ligne ou table row
      • <td> : Pour cellule ou table data
Exemple
<h2>Notes des étudiants</h2>

<table>
  <tr>
    <td>Robin</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Stella</td>
    <td>92</td>
  </tr>
</table>

Titre de tableau

Un tableau peut avoir un titre descriptif avec <caption>. Ça améliore la compréhension et l’accessibilité.

<h2>Notes des étudiants</h2>

<table>
  <caption>Résultats de l'oral de français</caption>
  <tr>
    <td>Robin</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Stella</td>
    <td>92</td>
  </tr>
</table>

Organisation d’un tableau

Un tableau peut être découpé en 3 sections sémantiques :

  • <thead> : en-tête du tableau
  • <tbody> : corps principal
  • <tfoot> : pied du tableau
<table>

  <thead>
    <tr>
      <th>Session</th>
      <th>Moyenne</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Automne 2029</td>
      <td>85</td>
    </tr>
    <tr>
      <td>Hiver 2029</td>
      <td>89</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Moyenne générale</td>
      <td>87</td>
    </tr>
  </tfoot>

</table>

Fusion

Fusion de colonnes

Deux attributs nous permettent de fusionner des cellules :

  • colspan="x" : fusionne une cellule sur plusieurs colonnes.
  • rowspan="x" : fusionne une cellule sur plusieurs lignes.
Exemple
<table>
  <thead>
    <tr>
      <th>Vêtement</th>
      <th colspan="3">Tailles disponibles</th>
      <!-- <th></th> -->
      <!-- <th></th> -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Chandail</td>
      <td></td>
      <td>M</td>
      <td></td>
    </tr>
    <tr>
      <td>Coton ouaté</td>
      <td>P</td>
      <td></td>
      <td>L</td>
    </tr>
    <tr>
      <td>Chemise</td>
      <td>P</td>
      <td>M</td>
      <td>L</td>
    </tr>
  </tbody>
</table>

Fusion de rangé

<table>
  <thead>
    <tr>
      <th>Session</th>
      <th>Cours</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Automne</td>
      <td>Math</td>
    </tr>
    <tr>
      <!-- <td>Automne</td> -->
      <td>Français</td>
    </tr>
    <tr>
      <td rowspan="2">Hiver</td>
      <td>Philo</td>
    </tr>
    <tr>
      <!-- <td>Hiver</td> -->
      <td>Gym</td>
    </tr>
  </tbody>
</table>

Formulaires

Un formulaire permet à l’utilisateur de saisir des informations et de les envoyer à un serveur.

Exemples : formulaire d’inscription, de connexion, de recherche, de sondage, etc.

Balises :

  • <form>
    • <label>
    • <input>
    • <textarea>
    • <select>

Structure de base

La balise <form> regroupe les champs d'un formulaire.

Elle est obligatoire pour mettre en place un formulaire Web.

<form>
  <!-- Ici on place les champs -->
</form>

Les champs de formulaire utilisent soit les balises <input>, <textarea> ou <select>.

Chaque champ doit être accompagné d'une balise <label>. Elle sert à identifier clairement la fonction du champ.

Balise <input>

La balise <input> utilise l'attribut type pour spécifier le type de champ.

Elle utilise également l'attribut id afin de pouvoir l'associer à son libellé (<label>).

<form>
  <label for="pwd">Étiquette du champ</label>
  <input id="pwd">
</form>

À propos de la balise <label>

L'attribut for de la balise <label> doit correspondre à l'attribut id du champ.

C'est important de spécifier cette valeur, car elle influence l'interactivité. En effet, si je clic sur le libellé, ça positionne le curseur sur le champ associé.

Texte

L'attribut placeholder="..." affiche un texte temporaire d’exemple dans un champ.

L'attribut value="..." permet d'assigner une valeur par défaut dans un champ texte.

L'attribut disabled permet de désactiver un champ de formulaire.

L'attribut readonly ne désactive pas le champ, mais il ne permet plus d'éditer le champs. On peut faire un copier/coller du contenu, ce que disabled ne permet pas.

Bouton de soumission

L'attribut value="..." permet de changer le texte du bouton.

L’attribut required indique qu’un champ doit obligatoirement être rempli. Si l’utilisateur tente de soumettre le formulaire sans le compléter, le navigateur affichera automatiquement un message d’erreur.

Courriel

Mot de passe

Case à cocher

L'attribut checked permet de présélectionner une case au chargement de la page.

Bouton radio

L'attribut checked permet de présélectionner un bouton radio au chargement de la page.

Champ nombre

Les attributs min="0" et max="100" permettent de spécifier des limites au champ nombre

Champ date

Champ file

Champ plage

Liste de sélection

L'attribut selected sur une option permet de la présélectionner au chargement de la page.

Liste de sélection multiple

Zone de texte

Attributs communs à plusieurs balises

Les attributs required, disabled et readonly ne sont pas exclusifs à un type de champ en particulier.

Exemple
<input type="text" required>

<textarea required></textarea>

<select required>
  <option value="">-- Choisir une option --</option>
  <option value="1">Option 1</option>
</select>

L'attribut name

Un autre attribut essentiel au fonctionnement d’un formulaire est l’attribut name="". Il sert à identifier les champs quand le formulaire est traité par un serveur. Toutefois, pour alléger la compréhension (et aussi parce qu’il ne nous sera pas utile dans ce cours), nous le mettons de côté.

Fieldset

Permet de grouper plusieurs champs de formulaire en un seul bloc visuel et logique. Cela rend le formulaire plus clair et améliore l’accessibilité.

Balises :

  • <fieldset>
    • <legend>

Il est recommandé d'utiliser <legend> à l’intérieur pour donner un titre au groupe.

Exemple
<form>
  <fieldset>
    <legend>Informations personnelles</legend>

    <label for="nom">Nom</label>
    <input id="nom" type="text" required>

    <label for="courriel">Courriel</label>
    <input id="courriel" type="email" required>
  </fieldset>

  <fieldset>
    <legend>Préférences</legend>

    <label>
      <input type="checkbox" name="newsletter">
      S’abonner à l’infolettre
    </label>
  </fieldset>

  <input type="submit" value="Envoyer">
</form>

Quelques outils

Générer des images :

Pour retirer un élément d'une image :

Upscaler :

Images libre de droit :

Audio libre de droit :

Modification de format

Exercices

Exercice - Tableaux HTML
Tierlist

Exercice - Tableaux et listes HTML
Manga

Exercice - Tableaux HTML
Uzumaki

Exercice - Formulaire HTML
L'inscription

TP

TP1 - Deuxième partie
Développement