Balises de service

8.1 La balise <datalist>

La balise <datalist> est utilisée pour fournir une liste d'options prédéfinies pour les éléments <input>. Cela permet aux utilisateurs de choisir des valeurs parmi une liste d'options proposées, facilitant ainsi la saisie des données et assurant une saisie plus précise et prévisible.

Synthèse

    
      <datalist id="list-id">
        <option value="Option 1">
        <option value="Option 2">
        <option value="Option 3">
      </datalist>
      <input list="list-id">
    
  

La balise <datalist> n'a pas d'attributs spécifiques, mais son aspect important est la liaison avec l'élément <input> via l'attribut list de ce dernier. L'attribut id de la balise <datalist> doit correspondre à la valeur de l'attribut list de l'élément <input>.

Exemple d'utilisation :

    
      <form>
        <label for="browser">Choisis un navigateur :</label>
        <input list="browsers" id="browser" name="browser">
        <datalist id="browsers">
          <option value="Chrome">
          <option value="Firefox">
          <option value="Safari">
          <option value="Opera">
          <option value="Edge">
        </datalist>
        <button type="submit">Envoyer</button>
      </form>
    
  

Explication

• L'élément <datalist> : contient une liste de valeurs possibles pour l'entrée
• L'élément <input> : contient l'attribut list, qui le lie à l'élément <datalist> via l'identifiant browsers

Avantages de l'utilisation de <datalist>

• Commodité de l'utilisateur : proposer des options prédéfinies permet aux utilisateurs d'entrer des données plus rapidement et plus précisément
• Réduction des erreurs de saisie : en offrant des options prédéfinies, on peut réduire le nombre d'erreurs de saisie
• Amélioration de l'expérience utilisateur : les utilisateurs peuvent facilement choisir parmi les options proposées, rendant le formulaire plus interactif et convivial

Limitations de <datalist>

• Support de style limité : les options à l'intérieur de <datalist> ne peuvent pas être stylisées aussi facilement que les éléments normaux
• Différences d'implémentation : différents navigateurs peuvent afficher la liste des options différemment, ce qui peut affecter l'uniformité de l'expérience utilisateur

8.2 La balise <output>

La balise <output> est utilisée pour afficher le résultat des calculs ou des actions effectuées à l'aide de JavaScript. Cette balise est idéale pour afficher un contenu qui change dynamiquement, tel que les résultats des calculs, les données de formulaire ou d'autres valeurs qui peuvent changer en temps réel.

Synthèse

    
      <output name="result" for="input-id-1 input-id-2">Résultat</output>
    
  

Attributs

• name : définit le nom de l'élément <output>, qui peut être utilisé dans JavaScript pour obtenir ou changer la valeur
• for : contient la liste des identifiants des éléments avec lesquels la valeur actuelle de <output> est liée. Cela est utile pour lier la sortie à plusieurs éléments d'entrée

Exemple d'utilisation :

    
      <form oninput="calculateSum()">
        <label for="num1">Nombre 1:</label>
        <input type="number" id="num1" name="num1">
        <br>
        <label for="num2">Nombre 2:</label>
        <input type="number" id="num2" name="num2">
        <br>
        <output id="result" name="result" for="num1 num2">0</output>
      </form>
    
  

    
      function calculateSum() {
        const num1 = parseFloat(document.getElementById('num1').value) || 0;
        const num2 = parseFloat(document.getElementById('num2').value) || 0;
        const sum = num1 + num2;
        document.getElementById('result').value = sum;
      }
    
  

Explication

• Élément <output> : utilisé pour afficher le résultat des calculs
• Attributs for et name : lient l'élément <output> aux éléments d'entrée et permettent de l'identifier facilement dans JavaScript
• Fonction calculateSum() : appelée lors du changement des valeurs des éléments d'entrée et met à jour la valeur de <output>

Avantages de l'utilisation de <output>

• Confort d'affichage des résultats : la balise <output> fournit une façon sémantiquement correcte d'afficher les résultats des calculs ou d'autres données dynamiques
• Facilité d'intégration avec JavaScript : il est facile d'obtenir et de modifier les valeurs de <output> avec JavaScript, ce qui le rend idéal pour les applications web dynamiques
• Propreté du code : l'utilisation de <output> aide à garder le code HTML propre et sémantiquement correct, améliorant la maintenance et la lisibilité du code

Limitations de <output>

• Support de style limité : comme pour <datalist>, le stylisme de l'élément <output> peut être restreint par rapport à d'autres éléments
• Dépendance à JavaScript : dans la plupart des cas, <output> est utilisé en conjonction avec JavaScript, ce qui peut ne pas convenir à tous les scénarios

8.3 La balise <label>

La balise <label> est utilisée pour créer une étiquette de texte pour un élément de formulaire. Elle peut être liée à un élément de formulaire de deux manières : via l'attribut for ou en imbriquant l'élément de formulaire à l'intérieur de la balise <label>. Ces méthodes améliorent l'accessibilité du formulaire pour les utilisateurs handicapés, tels que ceux qui utilisent des logiciels de lecture d'écran.

L'attribut for associe l'étiquette à un élément de formulaire en utilisant l'identifiant de l'élément (valeur de l'attribut id). Cela permet aux utilisateurs de cliquer sur l'étiquette pour mettre en focus ou activer l'élément de formulaire associé.

Exemple d'utilisation de l'attribut for :

    
      <label for="username">Nom d'utilisateur :</label>
      <input type="text" id="username" name="username">
    
  

Élément de formulaire imbriqué

Un élément de formulaire peut être imbriqué à l'intérieur de la balise <label>, ce qui les lie également l'un à l'autre. Dans ce cas, l'attribut for n'est pas nécessaire.

Exemple d'utilisation d'un élément de formulaire imbriqué :

    
      <label>Nom d'utilisateur :
        <input type="text" name="username">
      </label>
    
  

Avantages de l'utilisation de la balise <label>

1. Amélioration de l'accessibilité : les étiquettes aident les utilisateurs utilisant des logiciels de lecture d'écran à comprendre quelles informations sont requises pour chaque élément de formulaire. Les logiciels de lecture d'écran lisent les étiquettes avec les éléments de formulaire, ce qui rend le formulaire plus accessible.
2. Confort d'utilisation : les utilisateurs peuvent cliquer sur l'étiquette pour mettre en focus ou activer l'élément de formulaire correspondant. C'est particulièrement utile pour les petits éléments comme les cases à cocher et les boutons radio.
3. Amélioration de la clarté : les étiquettes aident les utilisateurs à mieux comprendre quelles informations sont requises pour chaque élément de formulaire, réduisant ainsi le nombre d'erreurs de saisie.