Cours HTML / Ajouter un texte indicatif aux champs avec placeholder

Pour afficher un bref indice à l’intérieur d’un champ de formulaire HTML vide, utilisez l’attribut placeholder. Utilisez label pour le nom du champ et value pour une valeur initiale réelle. Séparer les indices des valeurs empêche que le texte d’exemple soit soumis comme données utilisateur.

La différence entre label, placeholder et value

Un label identifie un champ, tel que « E-mail » ou « Message ». Un placeholder est un petit indice affiché dans un champ lorsque sa valeur est vide. L'attribut value sur un input définit sa valeur initiale.

Par exemple, « E-mail » fonctionne comme étiquette de champ, tandis que « ex. alex@example.com » fonctionne comme indication de saisie. Mettre une adresse exemple dans value sur un formulaire de contact vide peut donner l’impression d’une adresse réelle, donc utilisez placeholder pour cet exemple. Un formulaire de modification de compte qui affiche une adresse enregistrée nécessite plutôt une valeur initiale réelle.

Ajouter un texte indicatif à un champ

Ajoutez placeholder="Votre indication" à la balise d’ouverture de l’entrée. Cet exemple montre une adresse e-mail comme indice lorsque le champ est vide.

<label for="email">E-mail</label>
<input type="email" id="email" name="email"
       placeholder="p. ex. alex@example.com">

Faites correspondre l’attribut for de l’étiquette avec id de l’entrée pour les associer. Le name identifie le champ dans les données soumises. Ces attributs ont des fonctions différentes : définir un id ne remplace pas la nécessité d’un name. Voir comment connecter correctement les étiquettes et les entrées pour plus d’exemples.

La norme HTML prend en charge placeholder sur ces types d'entrée : text, search, tel, url, email, password et number. Les champs de date ne prennent pas cet attribut en charge. Gardez les instructions importantes à l’extérieur des champs, y compris pour les nombres, afin qu’elles restent visibles pendant la saisie. La définition HTML de placeholder et tableau des attributs de type input expliquent son champ d'application.

Ajouter un texte indicatif à une zone de texte

L'élément textarea, qui accepte plusieurs lignes de texte, prend également en charge placeholder. Pour n'afficher qu'un indice, laissez l'espace entre ses balises d'ouverture et de fermeture vide. Combinez la saisie multi-lignes et un sélecteur de sujet en utilisant l'exemple complet dans Utilisez textarea, select, option et button.

<label for="message">Message</label>
<textarea id="message" name="message" rows="4"
          placeholder="p. ex. Quand ma commande arrivera-t-elle ?"></textarea>

La valeur initiale d'une zone de texte provient du texte entre ses balises, et non d'un attribut value. Dans l'exemple suivant, « Veuillez me dire quand ma commande arrivera. » est une valeur réellement éditable, et non un indice.

<textarea name="message">Veuillez me dire quand ma commande arrivera.</textarea>

Les espaces ou l'indentation entre les balises de la zone de texte peuvent faire partie de la valeur. Si une zone de texte supposée vide n'affiche pas son indice, vérifiez la présence de texte résiduel entre les balises. La spécification de la zone de texte HTML définit sa valeur initiale et le comportement du placeholder.

Gardez les instructions importantes visibles pendant la saisie

Un texte indicatif disparaît lorsque l'utilisateur saisit une valeur, il ne peut donc pas remplacer un nom de champ ou des instructions importantes. Conservez les noms comme « E-mail » dans les étiquettes visibles, et mettez les instructions dont les utilisateurs ont besoin pendant la saisie dans un texte séparé.

<label for="email">E-mail (obligatoire)</label>
<input type="email" id="email" name="email"
       placeholder="p. ex. alex@example.com"
       aria-describedby="email-help" required>
<p id="email-help">Indiquez l’adresse e-mail à laquelle vous souhaitez recevoir une réponse.</p>

L'attribut d'accessibilité aria-describedby associe l'entrée à un texte explicatif supplémentaire. Réglez-le sur l'élément d'explication id afin que la technologie d'assistance, telle qu'un lecteur d'écran, puisse utiliser cette description. Conservez également l'explication visible, comme dans cet exemple. Le Tutoriel W3C des instructions de formulaire démontre cette approche.

Exemple complet : e-mail obligatoire et message facultatif

Enregistrez le code suivant sous le nom form-guide.html en utilisant l'encodage UTF-8 et ouvrez-le dans un navigateur. Le champ e-mail est obligatoire et le message est facultatif. La couleur de l’indice est choisie pour un fond blanc, et les champs s’adaptent à la largeur du formulaire sur les écrans plus petits. Comparez l’obligation avec les contraintes de format et de plage en utilisant les cas limites dans Validation du formulaire avec Obligatoire, Longueur et Limites de plage.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exemple d’indications de saisie</title>
  <style>
    body {
      margin: 24px;
      color: #222;
      font-family: sans-serif;
      line-height: 1.6;
    }
    form { max-width: 440px; }
    label { display: block; font-weight: bold; }
    input, textarea {
      box-sizing: border-box;
      width: 100%;
      padding: 10px;
      border: 1px solid #777;
      border-radius: 4px;
      font: inherit;
    }
    input::placeholder, textarea::placeholder {
      color: #666;
      opacity: 1;
    }
    .help { margin-top: 4px; }
    button { padding: 8px 20px; font: inherit; }
  </style>
</head>
<body>
  <h1>Nous contacter</h1>
  <form method="get">
    <p>
      <label for="email">E-mail (obligatoire)</label>
      <input type="email" id="email" name="email"
             placeholder="p. ex. alex@example.com"
             aria-describedby="email-help" required>
    </p>
    <p id="email-help" class="help">Indiquez l’adresse e-mail à laquelle vous souhaitez recevoir une réponse.</p>
    <p>
      <label for="message">Message (facultatif)</label>
      <textarea id="message" name="message" rows="4"
                placeholder="p. ex. Quand ma commande arrivera-t-elle ?"></textarea>
    </p>
    <button type="submit">Envoyer</button>
  </form>
</body>
</html>

Les deux champs affichent initialement des indices. Une fois que vous saisissez une adresse e-mail, son exemple disparaît, mais « E-mail (obligatoire) » et l’explication en dessous restent visibles. Effacez complètement le champ et le texte indicatif réapparaît.

1. Laissez le champ e-mail vide et appuyez sur Envoyer. La soumission normale du navigateur est bloquée par la vérification required.
2. Entrez abc dans le champ e-mail et soumettez à nouveau. La vérification du format type="email" bloque la soumission.
3. Entrez une adresse correctement formatée telle que alex@example.com, en laissant le message vide. Le formulaire peut être soumis avec le champ optionnel vide.

required vérifie une valeur vide, et type="email" vérifie le format de l'e-mail. Une adresse correctement formatée n'est pas une preuve que l'adresse existe. Les messages d'erreur et leur apparence varient selon le navigateur et les paramètres de langue.

Cet exemple n'inclut pas de serveur qui enregistre les messages. Comme le formulaire GET omet action, l'envoi normal cible l'adresse du document actuel. Lorsque le fichier est servi par un serveur web, la chaîne de requête de son URL peut afficher les valeurs soumises. La gestion d'un fichier ouvert localement peut varier. Un service fonctionnel nécessite un point de terminaison serveur et une méthode de soumission appropriée.

Qu'est-ce qui est soumis : le texte indicatif ou la valeur ?

Le texte indicatif n’est pas soumis comme valeur d’entrée, mais une valeur vide peut toujours être incluse dans les données soumises. Par exemple, un champ activé avec name="email" peut produire email= lors d’une soumission GET lorsqu’il est vide et qu’aucune vérification de champ obligatoire ne bloque la soumission. Les champs sans name, ou avec disabled, sont omis des données de formulaire normales. Ces distinctions suivent les règles HTML pour la construction des données de formulaire .

<form id="compare-form">
  <label for="default-name">Valeur initiale</label>
  <input id="default-name" type="text" name="default_name" value="Alex">
  <label for="hint-name">Exemple indicatif</label>
  <input id="hint-name" type="text" name="hint_name" placeholder="p. ex. Alex">
</form>

Ouvrez ce code dans un fichier HTML séparé, puis exécutez le code suivant dans la console de développement de votre navigateur. FormData construit une liste des noms de champs du formulaire et de leurs valeurs actuelles. Ce code inspecte la liste sans l’envoyer à un serveur.

Array.from(new FormData(document.getElementById("compare-form")).entries())

Avec les deux champs inchangés, le résultat est le suivant. « Alex », fourni via value, est inclus. Le texte indicatif « par ex. Alex » ne l'est pas.

[["default_name", "Alex"], ["hint_name", ""]]

Tapez « Sam » dans le deuxième champ et exécutez de nouveau le code : la valeur pour hint_name devient « Sam ». Si l'utilisateur modifie le premier champ, sa valeur actuelle est incluse à la place de la valeur initiale.

Même avec required, un champ prérempli via value peut passer un simple contrôle de valeur vide. La création d'un objet FormData ne réalise pas non plus la validation des champs obligatoires. Traitez les vérifications de soumission du navigateur et la construction de la liste de données comme des opérations séparées, et validez les entrées côté serveur dans un service réel.

Lorsque le texte indicatif est manquant ou difficile à lire

• Vérifiez si le champ contient déjà une valeur. La valeur initiale d'une saisie, le contenu d'une zone de texte, le remplissage automatique du navigateur ou un script peuvent empêcher l'affichage du texte indicatif.
• Vérifiez le type de saisie. Pour les contrôles avec des interfaces spécialisées, comme les champs de date, fournissez des instructions en dehors du champ.
• Gardez l'indication courte. Mettez un exemple succinct dans le champ et des conditions détaillées dans un texte explicatif visible. Ne mettez pas de sauts de ligne dans un texte indicatif de saisie.
• Vérifiez les couleurs du texte et de l'arrière-plan. Une couleur très pâle ou une faible opacité peut rendre l'indication difficile à voir. Après avoir ajusté le style, vérifiez également la lisibilité sur un écran mobile.

Utilisez le pseudo-élément CSS ::placeholder pour styliser le texte indicatif. CSS (Cascading Style Sheets) contrôle l’apparence d’une page ; l’exemple complet l’utilise pour définir la couleur et l’opacité de l’indice. Pour plus d’exemples de style, voir mise en forme du texte indicatif (en coréen). Utilisez des labels pour les noms de champs, des textes indicatifs pour de courts exemples, et des descriptions séparées pour les instructions qui doivent rester visibles.