Formulaires, tableaux et médias en HTML

Un formulaire recueille des réponses liées et les envoie à une URL. L’élément <form> entoure ses contrôles et son bouton d’envoi. Garde les formulaires distincts séparés : HTML n’autorise pas un formulaire à l’intérieur d’un autre.

Choisir la destination et la méthode

action indique l’URL destinataire. Sans cet attribut, la requête va à la page courante. method choisit comment le navigateur envoie les données ; la méthode par défaut est GET.

Les données GET peuvent apparaître dans l’historique, les favoris et les journaux du serveur. POST ne les place pas dans la chaîne de requête, mais ne les chiffre pas. Utilise HTTPS pour protéger les données pendant leur transfert. Le programme sur le serveur reçoit et traite la requête ; le formulaire HTML n’enregistre pas et n’envoie pas lui-même les réponses par e-mail.

Suivre une requête de recherche

<form action="/search" method="get">
  <label for="query">Search</label>
  <input id="query" type="search" name="q">
  <label for="language">Language</label>
  <select id="language" name="lang">
    <option value="en">English</option>
  </select>
  <button type="submit">Search</button>
</form>

Si l’utilisateur saisit « html tables », le navigateur demande /search?q=html+tables&lang=en. Il prend le nom du champ q et sa valeur actuelle, encode l’espace par + et relie les deux paires avec &. Le ? marque le début de la chaîne de requête.

Un contrôle a besoin d’un name pour envoyer des données. Son id a un autre rôle : identifier l’élément sur la page, notamment pour lui associer une étiquette. Un champ avec id="query" mais sans name peut sembler fonctionner normalement sans envoyer de réponse dans la requête.

Savoir quels contrôles envoient des données

Un champ de texte vide qui a un nom envoie une valeur vide, comme comment=. Une case cochée envoie sa value ; sans valeur, elle envoie on. Une case non cochée n’envoie rien. Un contrôle désactivé est inutilisable et omis. Un champ readonly qui prend en charge cet attribut ne peut pas être modifié, mais envoie tout de même sa valeur.

Un champ caché, comme <input type="hidden" name="source" value="newsletter">, envoie une valeur sans contrôle visible. Cette valeur n’est pas secrète : les visiteurs peuvent l’inspecter et la modifier dans les outils de développement.

Préciser le comportement des boutons

Dans un formulaire, un <button> ordinaire soumet le formulaire par défaut. Écris type="submit" pour le bouton d’envoi et type="button" pour un bouton qui nécessite un script. type="reset" rétablit les valeurs initiales et peut effacer le travail d’un utilisateur. Appuyer sur Entrée dans un champ sur une ligne soumet aussi souvent le formulaire. <input type="submit" value="Send"> est un autre contrôle d’envoi ; un <button> peut aussi contenir du contenu en ligne comme une icône.

Envoyer le contenu d’un fichier

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="attachment">Attachment</label>
  <input id="attachment" type="file" name="attachment">
  <button type="submit">Upload</button>
</form>

POST et enctype="multipart/form-data" sont tous deux nécessaires pour un envoi de fichier ordinaire. Avec l’encodage par défaut du formulaire, les noms des fichiers sont envoyés sous forme de texte, mais pas leur contenu.

Un <input> est un élément vide : il n’a donc ni contenu ni balise de fermeture. Son type choisit le contrôle et l’aide fournie par le navigateur. Les types absents ou non reconnus produisent un champ de texte.

Adapter le texte à sa fonction

Un champ d’e-mail vérifie la syntaxe, mais pas l’existence d’une boîte mail. Même « ana@example » passe la vérification de syntaxe de base. Ajoute multiple pour accepter une liste d’adresses séparées par des virgules. Un champ d’URL attend un schéma d’URL : « https://example.com » est accepté, mais pas « example.com ». Les formats de téléphone varient, donc tel n’impose aucune règle de format. Le masquage du mot de passe empêche les personnes à proximité de le lire à l’écran ; HTTPS assure toujours le chiffrement pendant la transmission.

Distinguer les quantités des codes composés de chiffres

Utilise number pour une quantité, comme un nombre d’éléments ou une masse. Ce type comporte souvent des boutons pour augmenter ou diminuer la valeur. Utilise range pour un réglage approximatif comme le volume ; son intervalle par défaut va de 0 à 100 et sa valeur par défaut est 50.

Un code d’adhérent n’est pas une quantité. Utilise <input type="text" inputmode="numeric"> pour un code composé de chiffres afin que les zéros initiaux restent du texte et que les boutons d’incrémentation ne le modifient pas. inputmode suggère seulement un clavier à l’écran : il ne valide pas la saisie. decimal, tel, email et url sont d’autres indications utiles pour le clavier.

Distinguer les formats affichés des formats envoyés

Les sélecteurs de date suivent les paramètres régionaux de l’utilisateur. Le 15 mars 2026 peut apparaître sous la forme « 03/15/2026 » ou « 15/03/2026 », mais la date envoyée est 2026-03-15.

Ces contrôles ne stockent pas de fuseau horaire. Il faut donc préciser séparément le lieu ou le fuseau d’un rendez-vous à une heure locale lorsque cela compte.

Proposer des choix indépendants ou un choix unique

Les cases à cocher sont indépendantes : plusieurs peuvent être cochées. Les boutons radio forment un groupe à choix unique lorsque leurs valeurs name correspondent. Donne à chaque bouton radio une value distincte et utilise checked pour un choix par défaut.

<label><input type="radio" name="size" value="S"> Small</label>
<label><input type="radio" name="size" value="M" checked> Medium</label>
<label><input type="radio" name="size" value="L"> Large</label>

La sélection par défaut envoie size=M. Des noms différents créeraient des groupes distincts et permettraient plusieurs sélections.

Choisir des couleurs et des fichiers

color fournit un sélecteur et peut envoyer une couleur RVB comme #ff8800. file ouvre un sélecteur de fichiers ; accept=".pdf,image/*" suggère les PDF et les images, et multiple autorise plusieurs fichiers. Le filtre aide les utilisateurs à choisir ; le serveur doit tout de même vérifier le type et le contenu du fichier reçu. Pour les contrôles qui l’utilisent, value définit la valeur initiale, qui reste la valeur envoyée si l’utilisateur ne fait aucun changement.

Un champ sur une ligne ne convient pas à toutes les réponses. Un texte plus long nécessite de l’espace, tandis qu’un ensemble de choix fixes nécessite des contrôles qui montrent ce qui est autorisé. Avant de choisir l’élément, décide si l’utilisateur peut saisir autre chose que les choix proposés.

Prévoir une zone pour les textes plus longs

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

rows indique le nombre de lignes visibles et cols la largeur approximative en caractères. Aucun des deux ne limite la quantité de texte saisissable ; utilise maxlength pour limiter la longueur. Le texte initial se place entre les balises, et non dans un attribut value. Les espaces et les sauts de ligne à cet endroit font partie de la valeur initiale : des balises d’ouverture et de fermeture adjacentes produisent donc une zone vraiment vide.

Envoyer une valeur depuis une liste déroulante

<label for="delivery">Delivery</label>
<select id="delivery" name="delivery" required>
  <option value="">Choose delivery</option>
  <option value="standard">Standard (3–5 days)</option>
  <option value="express">Express (next day)</option>
</select>

Choisir « Express (next day) » envoie delivery=express. Le texte visible peut expliquer un choix tandis que sa value reste courte et stable. Si une option n’a pas de value, son texte est envoyé. Ajoute selected pour présélectionner une option. Ici, la première option a une valeur vide : la liste à choix unique obligatoire ne peut donc pas être soumise tant que l’utilisateur n’a pas choisi un mode de livraison.

Regrouper ou autoriser plusieurs options

Un <optgroup label="Hot drinks"> donne un titre à des options liées. Ce titre n’est pas lui-même un choix. Un élément select avec multiple permet de sélectionner plusieurs options, et size définit ses lignes visibles. Chaque valeur sélectionnée devient une paire distincte avec le même nom : topics=html&topics=css.

Sur ordinateur, la sélection multiple nécessite souvent un Ctrl-clic ou un Cmd-clic. Pour une courte liste de choix indépendants, les cases à cocher rendent généralement la sélection plus claire. Pour une courte liste à choix unique, les boutons radio gardent toutes les options visibles. Un élément select convient bien à une longue liste fixe.

Suggérer sans restreindre

<label for="city">City</label>
<input id="city" name="city" list="cities">
<datalist id="cities">
  <option value="Nairobi">
  <option value="Osaka">
</datalist>

Le list du champ correspond à l’id de la liste de suggestions. Les utilisateurs voient des suggestions mais peuvent toujours saisir une autre ville. Une liste de suggestions est donc utile pour les réponses courantes à une question ouverte. Remplacer un élément select par une liste de suggestions modifie les choix acceptés ; cela ne change pas simplement l’apparence d’une même liste fixe.

Afficher une progression ou une mesure

<progress> et <meter> affichent des valeurs au lieu de recueillir des réponses. Un indicateur de progression suit l’avancement d’une tâche, comme <progress value="70" max="100">70%</progress>. Une jauge affiche une mesure dans un intervalle connu : <meter value="0.6">60%</meter> peut représenter l’espace de stockage utilisé. Par défaut, une jauge va de 0 à 1, sauf si min et max modifient cet intervalle. Le texte à l’intérieur de ces éléments fournit un contenu de repli lorsque la barre ne peut pas être dessinée. Garde une étiquette explicative à côté de chacun de ces affichages pour que les utilisateurs sachent ce que mesure le nombre.

Un champ a besoin d’un nom qui reste visible pendant que l’utilisateur le remplit. Un <label> associé donne aussi au contrôle un nom accessible pour les lecteurs d’écran et fait de son texte une cible cliquable plus grande. Les consignes expliquent les règles que l’étiquette seule ne peut pas transmettre.

Associer l’étiquette au contrôle

<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email">

Le for de l’étiquette correspond à l’id du champ, casse comprise. Le name sert à l’envoi et n’a pas besoin d’être identique. Chaque id doit être unique sur la page. Si for="email" pointe vers un name mais qu’aucun id ne correspond, l’étiquette semble normale mais n’est pas associée au champ.

Une autre possibilité consiste à placer le champ dans l’étiquette :

<label>
  <input type="checkbox" name="news">
  Send me the monthly newsletter
</label>

Cette association implicite est utile pour une courte étiquette de case à cocher. Une paire explicite for et id fonctionne aussi lorsque l’étiquette et le contrôle sont séparés dans le HTML.

Distinguer les étiquettes des exemples

Un texte indicatif comme « name@example.com » disparaît dès que la saisie commence. Il peut aussi être difficile à lire et ne constitue pas un nom accessible fiable. Garde l’étiquette visible ; utilise le texte indicatif uniquement comme court exemple lorsqu’il est utile.

Indique les champs obligatoires avec des mots, comme « Nom (obligatoire) », ou explique un astérisque une fois au-dessus du formulaire. La couleur seule ne permet pas à tout le monde de savoir ce qui est obligatoire. Explique un format avant que les utilisateurs essaient de soumettre leur réponse.

<label for="pw">Password (required)</label>
<input id="pw" name="password" type="password"
       required minlength="8" aria-describedby="pw-hint">
<p id="pw-hint">Use at least 8 characters.</p>

aria-describedby pointe vers l’id de l’aide. Il ajoute la consigne comme description après le nom du champ ; il ne remplace pas l’étiquette.

Nommer un groupe de contrôles

<fieldset>
  <legend>Delivery speed</legend>
  <label><input type="radio" name="speed" value="standard"> Standard</label>
  <label><input type="radio" name="speed" value="express"> Express</label>
  <label><input type="radio" name="speed" value="pickup"> Pickup</label>
</fieldset>

La légende donne la question commune ; chaque étiquette nomme une réponse. Un groupe de champs peut aussi réunir des champs d’adresse liés. Place la légende en premier. disabled sur un groupe de champs désactive ses contrôles descendants, sauf ceux situés dans sa première légende. Garde les contrôles de formulaire ordinaires hors de la légende pour éviter les surprises dues à cette exception.

Aider les navigateurs à remplir les informations connues

autocomplete décrit la finalité des informations concernant l’utilisateur. Ses valeurs comprennent name, email, tel, street-address, postal-code, country-name, bday, new-password, current-password et one-time-code. Des finalités exactes facilitent la saisie à partir de données enregistrées et contribuent au respect du critère 1.3.5 des WCAG 2.2, Identifier la finalité de la saisie (AA). autocomplete="off" est une demande ; les navigateurs peuvent tout de même proposer des mots de passe enregistrés.

Pour un champ de téléphone facultatif, utilise l’étiquette « Numéro de téléphone (facultatif) » avec type="tel", name="phone" et autocomplete="tel". Clique sur son étiquette pour vérifier le focus, puis parcours le formulaire avec Tabulation. Teste ainsi chaque étiquette, y compris celles des cases à cocher et des boutons radio.

La validation intégrée vérifie les contrôles d’un formulaire lorsque l’utilisateur le soumet. Un contrôle invalide bloque la soumission ; le navigateur donne le focus au premier champ invalide et fournit un message dans sa propre langue. Le texte exact est choisi par le navigateur. Pour le modifier, il faut utiliser JavaScript.

Exiger une réponse

required signifie qu’un contrôle doit avoir une valeur. Pour un champ de texte, une chaîne vide est refusée. Sur une case à cocher, required signifie que cette case précise doit être cochée, comme pour accepter des conditions. Pour des boutons radio de même nom, placer required sur l’un d’eux signifie qu’un bouton du groupe doit être sélectionné. Une liste à choix unique obligatoire avec une première option vide nécessite la sélection d’une option non vide.

<label for="username">Username (required)</label>
<input id="username" name="username"
       required minlength="4" maxlength="12">

Le navigateur combine ces règles. Le champ doit contenir une réponse, et le texte saisi par l’utilisateur doit respecter les limites de longueur. Omettre type produit un champ de texte ordinaire.

Compter les caractères saisis

minlength définit la longueur minimale autorisée et maxlength la longueur maximale. Les espaces et la ponctuation comptent. La longueur est mesurée en unités de code UTF-16 : certains émojis comptent donc pour deux ; les lettres latines ordinaires comptent chacune pour un.

Dans cet exemple, « Li » comporte deux caractères et ne satisfait pas au minimum. « Lina » en comporte quatre et est accepté. « mountainhiker » comporte 13 caractères. Lors d’une saisie ordinaire, le navigateur s’arrête après le douzième, laissant « mountainhike ». La largeur d’une zone de texte ne définit pas cette limite.

Distinguer les règles de présence et de longueur

Un champ facultatif avec minlength="4" peut être vide. La longueur minimale est vérifiée dès que l’utilisateur fournit une valeur. Ajouter required fait aussi échouer une saisie vide. Cela compte pour un pseudonyme facultatif : l’utilisateur peut l’omettre, mais un pseudonyme fourni doit tout de même comporter suffisamment de caractères.

required est un attribut booléen. Sa présence l’active, y compris avec required="false". Pour rendre le champ facultatif, supprime l’attribut. La même règle de présence s’applique à de nombreux autres attributs HTML qui activent une fonction.

Comprendre ce que ces vérifications ne décident pas

Une chaîne d’espaces constitue tout de même du contenu dans un champ de texte. required l’accepte donc, et les espaces comptent aussi dans la longueur. Une règle exigeant un caractère visible nécessite un motif adapté ou une vérification côté serveur. N’indique pas aux utilisateurs que required seul garantit une réponse qui a un sens.

Les contraintes de longueur dépendent aussi de la manière dont la valeur a été saisie. Une valeur initiale écrite dans le HTML, ou affectée par un script, n’est pas signalée par minlength ou maxlength simplement parce qu’elle est trop courte ou trop longue. Une valeur par défaut correcte reste importante même lorsque la saisie ordinaire est limitée.

Pour vérifier ce champ, essaie une soumission vide, puis saisis deux lettres, quatre lettres et plus de 12 lettres. Chaque essai isole une règle différente. Lorsque le navigateur arrête la saisie à la limite, lis la valeur effectivement présente dans le champ au lieu de supposer que toute la saisie tentée a été acceptée.

Une valeur numérique ou une date peut avoir le bon format tout en étant inadaptée. min et max définissent ses bornes ; step définit les incréments autorisés entre elles. Un nombre doit satisfaire aux deux vérifications.

Définir l’intervalle

<label for="weight">Parcel weight (kg)</label>
<input id="weight" name="weight" type="number"
       min="0.5" max="30" step="0.5">

Les bornes sont incluses. Les valeurs de 0,5 à 30 kg sont dans l’intervalle, mais elles doivent aussi correspondre à des pas d’un demi-kilogramme. En partant de 0,5, on obtient 0,5, 1, 1,5 et ainsi de suite jusqu’à 30 : 60 valeurs autorisées. Une saisie de 31 dépasse le maximum ; 2,25 est dans l’intervalle mais ne respecte pas le pas.

Trouver le point de départ avant de compter

Les pas sont comptés à partir de min lorsqu’il est présent. Sinon, ils sont comptés à partir d’un attribut HTML value valide, puis à défaut à partir de la base par défaut du type. Pour number, cette base par défaut est 0. Le pas par défaut est 1.

Avec min="1" step="2", les valeurs acceptées sont 1, 3, 5, 7 et ainsi de suite. Quatre est refusé bien qu’il soit un multiple de deux, car la suite commence à un. Avec min="0.5" et sans attribut de pas, le pas reste de un : 0,5, 1,5 et 2,5 sont acceptés, mais pas 1 ni 2.

Si ni min ni un attribut value ne fournit une base différente, un champ numérique par défaut accepte les nombres entiers. Utilise step="0.01" pour des incréments d’un centième ou step="any" pour supprimer la vérification du pas. any ne supprime ni le minimum ni le maximum.

Utiliser les bonnes unités pour les dates et les heures

Un champ de date avec min="2026-06-01" max="2026-08-31" accepte les dates de cet intervalle, bornes comprises. Écris les attributs dans le format envoyé, même si le sélecteur affiche la date dans un autre ordre.

Pour les rendez-vous, type="time" min="09:00" max="17:00" step="900" utilise 900 secondes, soit 15 minutes, par pas. La suite commence à 09 h 00 et se termine à 17 h 00. Il y a 32 intervalles et 33 heures sélectionnables, les deux bornes comprises.

Distinguer la saisie de la valeur stockée

Certains navigateurs configurés pour une langue donnée autorisent la saisie décimale "2,5" mais envoient 2.5. Selon le navigateur, un texte qui n’est pas un nombre est bloqué ou laisse la valeur numérique vide. Un champ vide facultatif reste autorisé en l’absence de required.

Un curseur range reste dans son intervalle autorisé et se cale sur les pas : les utilisateurs ne rencontrent donc pas les mêmes erreurs de borne et de pas qu’avec un nombre saisi. Par ailleurs, les champs email et url non vides subissent des vérifications de type même sans required : rendre une réponse facultative ne rend pas valide une réponse fournie au mauvais format.

Un motif est utile lorsqu’une organisation définit un format de texte exact, comme un code produit. Le navigateur vérifie la valeur non vide dans son ensemble par rapport au motif. Explique le format à côté du champ pour que les utilisateurs puissent le respecter avant qu’une erreur apparaisse.

Construire un petit motif

<label for="code">Product code (required)</label>
<input id="code" name="code" required
       pattern="[A-Z]{3}-[0-9]{4}" aria-describedby="code-hint">
<p id="code-hint">Use 3 capital letters, a hyphen, and 4 digits (ABC-1234).</p>

[A-Z] correspond à une lettre latine majuscule et {3} la répète exactement trois fois. Le trait d’union hors des groupes de caractères est littéral. [0-9]{4} exige quatre chiffres. « ABC-1234 » est accepté. « abc-1234 », « ABC1234 » et « ABC-12345 » ne respectent chacun pas une partie différente de la règle.

Les motifs sont comparés à la valeur entière : tout texte supplémentaire au début ou à la fin est donc refusé. N’ajoute pas les barres obliques qui entourent les expressions régulières en JavaScript. pattern s’applique aux champs apparentés au texte comme text, search, tel, email, url et password, mais pas à une zone de texte multiligne. Les valeurs vides échappent à la vérification du motif ; required prend en charge l’absence de réponse.

Écrire soigneusement la ponctuation littérale

Les caractères comme ., + et ? ont des significations particulières. Fais-les précéder d’une barre oblique inverse lorsqu’ils doivent apparaître littéralement : \. correspond à un point. Dans un groupe de caractères, les motifs HTML modernes exigent aussi une barre oblique inverse devant des signes de ponctuation comme un trait d’union littéral : [a-z0-9\-]. Ce trait d’union diffère de celui qui définit l’intervalle a-z.

Un motif invalide est ignoré. Les autres règles, dont required et les vérifications de type, continuent de s’appliquer. Teste un motif avec des saisies qui doivent être acceptées et d’autres qui doivent être refusées ; un formulaire qui envoie une valeur attendue n’a pas encore montré que le motif refuse quoi que ce soit.

Expliquer la règle et l’erreur

Garde une aide visible à côté du contrôle. Un title peut contribuer à certains messages du navigateur ; garde la consigne de format visible à côté du champ. Évite les motifs rigides pour les noms, les téléphones ou les codes postaux, sauf si le format accepté est réellement fixe ; les réponses valides de différents pays peuvent beaucoup varier.

CSS propose :valid et :invalid pour l’état de validation actuel d’un champ. :user-invalid retarde l’état invalide jusqu’à une interaction de l’utilisateur, ce qui évite qu’un formulaire encore vierge soit couvert de marques d’erreur. Associe les couleurs à des mots ou à une icône pour que la distinction reste visible sans perception des couleurs.

Décider quand les vérifications s’exécutent

novalidate sur le formulaire ignore la validation du navigateur lors de la soumission. formnovalidate sur un bouton d’envoi l’ignore pour ce bouton, ce qui peut permettre d’ajouter « Enregistrer le brouillon » à côté d’un bouton « Envoyer » ordinaire. Les vérifications du navigateur peuvent aussi être supprimées par les outils de développement ou contournées par une requête directe. Le serveur doit vérifier à nouveau les données reçues avant de leur faire confiance.

Utilise un tableau lorsqu’une valeur dépend à la fois de sa ligne et de sa colonne : un carnet d’entraînement, un emploi du temps ou une comparaison de mesures. Utilise CSS pour la mise en page. Une mise en page créée à partir de cellules de tableau présente aux lecteurs d’écran des relations trompeuses entre lignes et colonnes et s’adapte mal aux écrans étroits.

Construire la structure à partir des données

<table> contient le tableau, <tr> une ligne, <th> une cellule d’en-tête et <td> une cellule de données. Les cellules sont écrites de gauche à droite dans chaque ligne. Une cellule de données en gras reste une cellule de données ; utilise <th> pour indiquer un en-tête.

<table>
  <caption>Running log, week 12</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Distance (km)</th>
      <th scope="col">Time (min)</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>5.0</td><td>28</td></tr>
    <tr><th scope="row">Wednesday</th><td>7.5</td><td>45</td></tr>
    <tr><th scope="row">Saturday</th><td>10.0</td><td>62</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>22.5</td><td>135</td></tr>
  </tfoot>
</table>

Le titre est le premier élément à l’intérieur du tableau. Il indique aux lecteurs ce que décrit l’ensemble du tableau avant qu’ils ne découvrent ses valeurs. Un titre de section à proximité peut aider visuellement, mais le titre du tableau est associé au tableau lui-même.

Associer chaque valeur à ses en-têtes

scope="col" indique qu’un en-tête s’applique à une colonne. scope="row" indique qu’il s’applique à une ligne. La valeur numérique 7,5 appartient donc à la ligne « Wednesday » et à la colonne « Distance (km) ». Un lecteur d’écran peut annoncer ce sens complet au lieu d’un nombre isolé.

Place les unités dans les en-têtes de colonnes pour qu’elles s’appliquent partout de la même façon. Chaque distance est ici en kilomètres ; chaque durée est en minutes. La distance totale est obtenue à partir de 5,0, 7,5 et 10,0, soit 22,5 km. Les durées 28, 45 et 62 donnent 135 min.

Donner un rôle à chaque groupe

<thead> regroupe les lignes d’en-tête, <tbody> les données principales et <tfoot> le récapitulatif après le corps. Ces groupes décrivent la structure et fournissent des points d’appui à CSS. Les navigateurs insèrent un <tbody> autour des lignes ordinaires écrites directement dans un tableau : la structure affichée peut donc différer du code source sans groupes.

Vérifier le sens autant que l’apparence

Chaque ligne couvre ici trois colonnes. Omettre une cellule de données n’indique pas au navigateur quelle valeur intermédiaire manque : les cellules suivantes peuvent se retrouver sous le mauvais en-tête. Écris les cellules à leur place et utilise « 0 » pour un zéro connu ou « sans objet » lorsqu’une valeur ne s’applique pas. Une cellule vide sans explication laisse le lecteur dans l’incertitude.

Les tableaux n’ont pas de bordures par défaut. Pour tracer des lignes simples, applique border: 1px solid aux cellules et border-collapse: collapse au tableau. L’ancien attribut border est obsolète. Une bordure aide à montrer la grille, mais elle ne peut ni établir des relations manquantes avec les en-têtes ni corriger une valeur mal placée.

Les cellules fusionnées permettent à une entrée de couvrir plusieurs emplacements de la grille. Elles modifient le nombre de nouvelles cellules nécessaires dans une ligne : prévois donc les emplacements occupés avant d’écrire les balises.

Compter les cellules d’un emploi du temps fusionné

Considère trois colonnes : « Heure », « Lundi » et « Mardi ». À 09 h 00, le lundi contient « Formulaires » et le mardi « Tableaux ». À 10 h 00, le lundi commence « Validation », qui se poursuit sur la ligne de 11 h 00. Le mardi contient « Médias » à 10 h 00 et « Contenus intégrés » à 11 h 00. À 12 h 00, « Pause déjeuner » couvre les deux jours.

<tr>
  <th scope="row">10:00</th>
  <td rowspan="2">Validation</td><td>Media</td>
</tr>
<tr>
  <th scope="row">11:00</th><td>Embeds</td>
</tr>
<tr>
  <th scope="row">12:00</th><td colspan="2">Lunch break</td>
</tr>

À 11 h 00, l’emplacement du lundi est déjà occupé par la cellule de la ligne précédente. Les seules nouvelles cellules sont l’en-tête horaire et l’entrée du mardi. Ajouter une autre cellule pour le lundi pousserait la dernière valeur dans une quatrième colonne. À 12 h 00, l’en-tête horaire couvre une colonne et la cellule de la pause déjeuner en couvre deux, soit trois au total.

colspan étend une cellule horizontalement sur des colonnes ; rowspan l’étend verticalement sur des lignes. Leur valeur par défaut est un dans les deux cas. Pour vérifier une ligne, compte les emplacements remplis par de nouvelles cellules et par les cellules étendues depuis les lignes précédentes.

Décrire les groupes de colonnes

<colgroup> et <col> décrivent les colonnes et apparaissent après le titre du tableau mais avant les groupes de lignes. <col span="2"> représente deux colonnes. Seul un ensemble limité de styles s’applique par ces éléments, notamment les arrière-plans, la largeur, la visibilité et les bordures selon les règles de bordure applicables au tableau. Ils ne remplacent pas les en-têtes.

Pour placer « Distance (km) » au-dessus de deux colonnes nommées « Planned » et « Actual », définis ces deux colonnes comme un groupe. Donne à l’en-tête supérieur colspan="2" scope="colgroup" et aux en-têtes inférieurs scope="col". L’étendue règle la largeur, tandis que la portée indique la relation avec l’en-tête. Une portée de groupe de colonnes nécessite un groupe de colonnes correspondant dans la structure du tableau.

Associer explicitement les en-têtes si nécessaire

Pour les relations que scope ne peut pas exprimer clairement, donne aux en-têtes des identifiants uniques et énumère-les dans l’attribut headers de la cellule de données :

<table>
  <caption>Monday distance plan</caption>
  <colgroup></colgroup>
  <colgroup span="2"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col">Day</th>
      <th id="distance" colspan="2" scope="colgroup">Distance (km)</th>
    </tr>
    <tr>
      <th id="planned" scope="col">Planned</th>
      <th id="actual" scope="col">Actual</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="mon" scope="row">Monday</th>
      <td headers="mon distance planned">8</td>
      <td headers="mon distance actual">7.5</td>
    </tr>
  </tbody>
</table>

La valeur prévue de 8 renvoie à Monday, Distance (km) et Planned. La valeur réelle de 7,5 partage les en-têtes de ligne et de groupe, mais renvoie à Actual. Les noms séparés par des espaces doivent correspondre aux identifiants des en-têtes, et non à leur texte visible.

L’attribut abbr d’un en-tête peut fournir une version plus courte à répéter, comme dans <th abbr="Distance">Distance covered in kilometers</th>. Certains lecteurs d’écran utilisent cette forme courte. Lorsque de nombreuses cellules étendues ou trois niveaux d’en-têtes rendent un tableau difficile à suivre, répartis les données dans des tableaux plus simples ayant chacun leur titre. Évite d’imbriquer un tableau dans la cellule d’un autre.

<video> et <audio> relient des fichiers multimédias à une page. Le navigateur télécharge ces fichiers distincts ; la vidéo ou le son n’est pas stocké dans le HTML. Ajouter controls affiche les commandes de lecture, de pause, de progression et de volume du navigateur.

<video src="intro.mp4" controls width="640" height="360"
       poster="intro-poster.jpg" preload="metadata"></video>
<audio src="episode-12.mp3" controls></audio>

Sans commandes, un élément audio n’a pas de lecteur visible et une vidéo n’a pas de bouton de lecture visible. La page aurait besoin de commandes programmées pour donner cet accès aux utilisateurs. Pour une page simple, conserve les commandes de lecture natives.

Réserver un espace aux bonnes proportions

width et height acceptent des nombres simples en pixels CSS. Ils réservent de l’espace pendant le chargement d’une vidéo et réduisent les mouvements de la page. Une vidéo de 1 920 × 1 080 affichée à une largeur de 640 a une hauteur correspondante de 360 : la largeur a été divisée par trois, donc la hauteur doit aussi être divisée par trois. Une boîte de lecteur de proportions différentes conserve celles de l’image et ajoute des bandes vides.

poster fournit une image fixe avant la lecture. Sans image d’affiche, le navigateur attend des données multimédias avant de pouvoir afficher la première image. L’image d’affiche est utile lorsque peu ou pas de vidéo est préchargée.

Décider de la quantité à précharger

Ce sont des indications : le navigateur peut les ignorer. La lecture automatique prend aussi le dessus sur le préchargement. none est utile pour les médias longs que beaucoup de visiteurs ne regarderont pas ; les métadonnées permettent d’afficher la durée sans demander intentionnellement le téléchargement du clip entier.

Comprendre les attributs qui activent la lecture

controls, autoplay, muted, loop et playsinline sont des attributs booléens. Leur présence les active : muted="false" démarre tout de même sans son. Supprime l’attribut pour le désactiver.

La lecture automatique avec du son est généralement bloquée jusqu’à une interaction de l’utilisateur, selon les autorisations et les réglages du navigateur. Une vidéo muette est plus souvent autorisée ; Safari sur iPhone nécessite aussi playsinline dans ce cas. Un clip silencieux en boucle peut utiliser autoplay muted loop playsinline. loop relance le clip lorsqu’il se termine. Ne compte pas sur la lecture automatique pour transmettre des informations essentielles.

Un son automatique peut gêner l’écoute d’un lecteur d’écran et un mouvement peut distraire. Le critère 1.4.2 des WCAG 2.2 (A) exige un moyen de mettre en pause ou d’arrêter un son automatique de plus de trois secondes, ou de régler son volume indépendamment. Le critère 2.2.2 (A) concerne les contenus animés automatiquement qui durent plus de cinq secondes à côté d’autres contenus, sauf s’ils sont essentiels. Prévois un mécanisme de pause accessible ; les commandes natives en fournissent un pour ces lecteurs multimédias.

Estimer le volume de données

Un clip de deux minutes à 5 mégabits par seconde contient 600 mégabits. En divisant par huit, on obtient environ 75 mégaoctets avant les données supplémentaires. Des clips plus courts et une indication de préchargement adaptée réduisent les transferts inutiles. Le lecteur iframe d’une plateforme hébergée peut transférer la diffusion hors du serveur de ton site, mais les visiteurs téléchargent toujours le média lorsqu’ils le regardent.

L’extension d’un fichier multimédia identifie son conteneur, la structure du fichier qui contient l’image et le son. Les codecs compressent et décodent les flux qu’il contient. Un navigateur doit prendre en charge à la fois le conteneur et ses codecs ; une extension .mp4 seule ne permet pas de connaître son contenu.

Choisir des formats adaptés

MP4 avec la vidéo H.264 et l’audio AAC offre une large compatibilité sur les systèmes actuels courants. WebM avec la vidéo VP9 ou AV1 et l’audio Opus est aussi largement pris en charge et peut réduire la taille à qualité égale. Pour l’audio, MP3 est un choix unique largement pris en charge. La prise en charge dépend toujours du codec réel et du système de l’utilisateur : teste donc les fichiers eux-mêmes.

Proposer les sources par ordre de priorité

<video controls width="640" height="360" poster="tour.jpg">
  <source src="tour.webm" type="video/webm">
  <source src="tour.mp4" type="video/mp4">
  <p>Your browser cannot play this video.
    <a href="tour.mp4">Download the tour video (MP4)</a>.
  </p>
</video>
<p><a href="tour.mp4">Download the tour video (MP4)</a></p>

Le navigateur essaie les sources enfants dans l’ordre et utilise la première qu’il peut lire. WebM est préféré ici ; MP4 offre une autre possibilité si WebM ne peut pas être lu. Omets src sur le <video> lui-même lorsque tu utilises des sources enfants. Un src sur l’élément multimédia est prioritaire et la liste des sources enfants est ignorée.

Le type est un type MIME qui décrit le fichier. Il permet au navigateur d’ignorer un format non pris en charge sans récupérer d’abord des données multimédias. Un type incorrect peut faire ignorer un fichier lisible : la déclaration doit donc correspondre au fichier réel. Présenter le même encodage incompatible sous un autre nom ne crée pas une solution compatible.

Placer la solution de repli là où elle reste accessible

Le contenu dans <video> sert de repli pour un navigateur qui ne reconnaît pas l’élément vidéo. Un navigateur moderne qui le reconnaît mais ne peut lire aucune source n’affiche pas ce paragraphe interne comme message d’erreur général. Le lien de téléchargement distinct à l’extérieur du lecteur reste accessible dans ce cas. Un lien de repli et des sources de remplacement répondent à des échecs différents.

Appliquer le même principe à l’audio

<audio controls>
  <source src="episode-12.opus" type="audio/ogg; codecs=opus">
  <source src="episode-12.mp3" type="audio/mpeg">
  <p>Your browser cannot play this audio.</p>
</audio>
<p><a href="episode-12.mp3">Download episode 12 (MP3)</a></p>

Ce premier fichier utilise un conteneur Ogg avec de l’audio Opus. La solution MP3 utilise audio/mpeg, le type MIME correct pour le MP3. Le navigateur ne peut pas déduire du paragraphe de repli qu’il doit changer de fichier ; les éléments source permettent ce choix. Lors de la vérification de la page, contrôle les chemins, les formats réels des fichiers et la lecture, puis confirme séparément que le lien de téléchargement extérieur fonctionne.

Les informations d’un média doivent être accessibles autrement lorsqu’une personne ne peut pas les entendre ou les voir. Les sous-titres pour sourds et malentendants comprennent les paroles, les personnes qui parlent et les sons porteurs de sens. Les sous-titres transcrivent ou traduisent les dialogues pour les personnes qui entendent l’audio mais ont besoin d’aide pour le comprendre. Une transcription textuelle présente les paroles et les sons importants par écrit près du lecteur ou par un lien proche clairement nommé. L’audiodescription décrit les informations visuelles importantes.

Associer une piste de sous-titres

<video controls>
  <source src="intro.mp4" type="video/mp4">
  <track kind="captions" src="intro.en.vtt"
         srclang="en" label="English" default>
</video>
<p><a href="intro-transcript.html">Read the introduction transcript</a></p>

Place <track> après les sources. src pointe vers un fichier de piste de texte, kind indique sa fonction, srclang indique la langue et label fournit le texte du menu du lecteur. Une piste de sous-titres doit avoir srclang ; inclus-le aussi pour les sous-titres pour sourds et malentendants. Une seule piste devrait porter default. Sans kind, la valeur par défaut est subtitles.

Écrire le fichier de sous-titres

WebVTT est du texte UTF-8 enregistré avec une extension .vtt. La première ligne est WEBVTT, suivie d’une ligne vide. Chaque repère comporte ensuite une ligne de minutage et son texte, avec une ligne vide avant le repère suivant. Un identifiant facultatif peut précéder le minutage d’un repère.

WEBVTT

00:00:01.000 --> 00:00:04.500
MAYA: Welcome to the workshop.

00:00:05.000 --> 00:00:07.250
[door closes]

00:00:07.500 --> 00:00:11.000
MAYA: Let's build our first form.

Le premier repère dure 3,5 secondes, le deuxième 2,25 secondes et le troisième 3,5 secondes. Le repère sonore communique quelque chose qu’un auditeur entend alors que personne ne parle.

Respecter exactement la syntaxe du minutage

Les minutes et les secondes utilisent deux chiffres ; les millisecondes en utilisent trois après un point. Les heures peuvent être omises : 01:05.000 signifie une minute et cinq secondes. La fin doit être postérieure au début. Une ligne vide termine un repère : garde donc tout son texte ensemble sans ligne vide au milieu.

SRT utilise des horodatages avec une virgule comme 00:00:01,000 ; une piste nécessite à la place WebVTT. La conversion nécessite l’en-tête WebVTT et des horodatages avec un point, ainsi que la vérification de la syntaxe des autres parties des repères. Renommer une extension .srt ne convertit pas son contenu.

Vérifier la mise à disposition et l’accessibilité

Garde la piste à la même origine que la page : même schéma d’URL, même hôte et même port. Une piste d’une autre origine nécessite un réglage crossorigin adapté sur la vidéo et l’autorisation de ce serveur. Sinon, un fichier correct peut ne pas se charger.

Le critère 1.2.2 des WCAG 2.2 (A) exige des sous-titres pour sourds et malentendants pour les vidéos préenregistrées avec audio, sous réserve de son exception pour les médias de remplacement. Le critère 1.2.1 (A) exige une solution de remplacement pour les contenus préenregistrés uniquement audio, comme une transcription textuelle pour un podcast. Vérifie les noms, les termes techniques, les changements de locuteur et les sons dans les sous-titres automatiques avant publication.

Les autres types de pistes comprennent descriptions, chapters et metadata. Les lecteurs des navigateurs ne les affichent généralement pas comme des sous-titres ordinaires. Ne place pas de consignes visibles essentielles dans une piste de métadonnées en t’attendant à ce qu’elles apparaissent à l’écran.

Un <iframe> est un cadre intégré : il affiche une page web distincte dans la page courante. Ce document possède son propre HTML, son CSS et ses scripts. Les styles de ta page peuvent dimensionner le cadre, mais ne mettent pas en forme le contenu d’un autre document à l’intérieur.

Commencer par un cadre clair et dimensionné

<iframe src="https://maps.example.com/venue"
        title="Map of the venue"
        width="600" height="400" loading="lazy"></iframe>
<p><a href="https://maps.example.com/venue">Open the venue map</a></p>

src indique la page à charger. Le titre indique à une personne utilisant un lecteur d’écran ce que contient le cadre avant qu’elle y entre. « Map of the venue » décrit sa fonction ; « iframe » ou « contenu » ne le fait pas. Le lien direct offre un autre accès si le navigateur du visiteur bloque le cadre.

width et height acceptent des nombres simples en pixels CSS. Sans ces attributs, le cadre par défaut mesure 300 × 150 pixels CSS. Les navigateurs dessinent aussi une bordure par défaut. Mets-la en forme avec CSS plutôt qu’avec l’attribut obsolète frameborder.

Adapter le code d’intégration fourni

Les services de cartographie et de vidéo proposent généralement un fragment de code d’intégration parmi leurs commandes de partage. Après l’avoir collé, inspecte l’URL, améliore le titre, vérifie les dimensions et supprime les attributs de présentation obsolètes. Une URL d’iframe est l’adresse d’une page ou d’un lecteur de service, pas nécessairement celle d’un fichier multimédia direct.

Utilise HTTPS pour l’adresse intégrée. Un cadre HTTP dans une page HTTPS est un contenu mixte actif et il est bloqué. Écrire un titre ou modifier les dimensions du cadre ne peut pas, à lui seul, faire charger une URL non sécurisée.

Charger au moment utile

loading="lazy" retarde le chargement d’un cadre jusqu’à ce qu’il soit proche de la zone d’affichage, ce qui évite du travail initial pour une carte située loin en bas de page. La valeur par défaut eager lance le chargement immédiatement. Utilise le chargement immédiat pour un contenu intégré bien visible en haut de page afin que les visiteurs n’attendent pas son contenu principal. Le chargement différé modifie le moment du chargement ; il ne supprime pas le contact réseau lorsque le cadre finit par se charger.

Pour adapter un lecteur à son conteneur, CSS peut fixer sa largeur à 100 % et conserver ses proportions :

iframe.video-player {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

Applique class="video-player" à l’iframe concerné. Les dimensions HTML fournissent toujours des informations initiales, tandis que CSS contrôle la taille affichée.

Reconnaître le refus d’un fournisseur

Un site peut interdire son intégration dans un cadre grâce au champ d’en-tête de réponse HTTP X-Frame-Options ou à une règle frame-ancestors de Content Security Policy. Le navigateur peut afficher un cadre vide ou une erreur. Ces restrictions aident à empêcher le détournement de clic, où une page intégrée trompeuse intercepte des clics destinés à autre chose.

Le HTML de ta page ne peut pas passer outre le refus de l’autre site. Utilise l’adresse d’intégration autorisée du fournisseur s’il en propose une ; sinon, fournis un lien ordinaire. Garde aussi ce lien en cas de problème ultérieur : si un fournisseur supprime ou déplace son contenu, un iframe inchangé sur ta page peut cesser de fonctionner.

Un contenu tiers intégré contacte son fournisseur lors de son chargement, même avant que le visiteur lance la lecture. Cette requête révèle des informations comme une adresse IP et peut impliquer des cookies. Décide si la page a besoin de ce contact immédiatement et de quels accès le document intégré a besoin.

Retarder le contact lorsque c’est approprié

Le chargement différé retarde le chargement d’un cadre hors écran jusqu’à ce qu’il soit proche de l’écran. Un aperçu qui ne charge le contenu intégré qu’après un clic donne aux visiteurs un choix plus direct. Certains services proposent aussi des modes renforçant la confidentialité. Un cadre du même site ne contacte pas nécessairement un autre fournisseur ; srcdoc intégré évite de récupérer une page distincte, même si les ressources auxquelles ce HTML fait référence peuvent toujours déclencher des requêtes réseau.

Limiter le comportement du document avec sandbox

<iframe src="https://quiz.example.com/start"
        title="Practice quiz"
        sandbox="allow-scripts allow-forms"></iframe>

Un sandbox vide applique toutes ses restrictions, notamment le blocage des scripts, de la soumission de formulaires et des fenêtres surgissantes, ainsi que l’attribution d’une origine opaque. Des jetons lèvent certaines restrictions. Ici, le questionnaire peut exécuter des scripts et soumettre des formulaires, mais allow-popups n’a pas été accordé. Ajoute uniquement les jetons dont le contenu a besoin ; sinon, une liste d’autorisations copiée peut annuler des limites utiles.

allow-same-origin permet au document de conserver son origine normale. Ne le combine pas avec allow-scripts pour du contenu intégré provenant de ta propre origine : cette combinaison peut permettre au document de supprimer son bac à sable. Un bac à sable ne signifie pas non plus qu’un cadre n’effectue aucune requête réseau.

Accorder séparément les fonctionnalités du navigateur

allow est une politique d’autorisations pour des fonctionnalités comme le plein écran, l’incrustation vidéo, la caméra et le microphone. Un lecteur vidéo peut demander allow="fullscreen; picture-in-picture". Il n’a pas besoin d’accéder à la caméra simplement parce qu’il contient de la vidéo. L’ancien attribut allowfullscreen accorde lui aussi l’accès au plein écran.

Les jetons du bac à sable régissent le comportement du document ; les autorisations de fonctionnalités répondent à une autre question. Accorder le plein écran ne permet pas à lui seul à une page en bac à sable de soumettre un formulaire ou d’exécuter un script.

Contrôler le référent et le contenu intégré directement

referrerpolicy="no-referrer" omet l’adresse de la page référente dans la requête. Avec la politique par défaut habituelle, une requête HTTPS vers une autre origine envoie l’origine plutôt que le chemin complet ; les requêtes vers une connexion moins sécurisée n’envoient aucun référent. Cela contrôle un champ d’en-tête, pas toutes les informations reçues par un fournisseur.

srcdoc fournit directement le HTML du cadre et prend le dessus sur src :

<iframe title="Message preview" sandbox
        srcdoc="<p>Preview of your message</p>"></iframe>

Le bac à sable maintient les restrictions sur ce petit aperçu. Les aperçus HTML plus généraux demandent de faire attention aux ressources et au balisage qu’ils autorisent.

Choisir l’élément selon la ressource

<object> peut contenir du contenu de repli, comme un lien de téléchargement, si la ressource ne peut pas être affichée. Les anciens contenus nécessitant un module externe, comme Flash, ne fonctionnent plus dans les navigateurs courants actuels ; Adobe a mis fin à la prise en charge de Flash Player à la fin de 2020. Garde des liens directs à côté des contenus intégrés importants et vérifie régulièrement que le fournisseur les met toujours à disposition.