logo oujood
🔍

 HTML : l'attribut placeholder de la balise input

Guide complet sur l'attribut placeholder HTML5 : syntaxe, types compatibles, exemples commentés et personnalisation CSS.

OUJOOD.COM

Définition et utilisation de l'attribut placeholder en HTML5

LES BALISES HTML

L'attribut placeholder est un attribut HTML5 natif qui permet d'afficher un texte indicatif dans un champ de formulaire lorsque celui-ci est vide. Ce texte d'aide contextuelle, aussi appelé hint ou texte fantôme, guide l'utilisateur sur la valeur attendue : format, exemple ou brève description. Il améliore considérablement l'expérience utilisateur (UX) des formulaires HTML sans nécessiter de JavaScript.

Le texte du placeholder input HTML s'affiche dans le champ tant que l'utilisateur n'a pas commencé à saisir. Il disparaît automatiquement dès que le champ reçoit le focus ou qu'une valeur est entrée. Ce comportement est entièrement géré par le navigateur.

Important : L'attribut placeholder ne remplace pas le <label> pour l'accessibilité. Il est recommandé de toujours associer un <label> visible à chaque champ de formulaire. Le placeholder sert uniquement d'aide complémentaire à la saisie.

Syntaxe de base de l'attribut placeholder :

<input type="text" placeholder="Votre texte indicatif">

Types d'input compatibles avec l'attribut placeholder

L'attribut placeholder HTML5 est compatible avec les types d'éléments <input> et <textarea> suivants :

Type d'input Exemple de placeholder pertinent
textex : "Jean Dupont"
searchex : "Rechercher un article..."
urlex : "https://www.exemple.com"
telex : "+33 6 12 34 56 78"
emailex : "prenom.nom@domaine.fr"
passwordex : "8 caractères minimum"
numberex : "entre 1 et 100"
textareaex : "Décrivez votre projet en quelques lignes..."

Exemple 1 : formulaire de contact avec placeholders descriptifs

Voici un exemple complet d'un formulaire HTML avec attribut placeholder appliqué aux champs nom, email et message. Les commentaires expliquent chaque ligne.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Formulaire avec placeholder HTML5</title>
</head>
<body>
  <form action="traitement.php" method="post">

    <!-- Champ texte : le placeholder indique le format attendu -->
    <label for="nom">Nom complet :</label>
    <input type="text" id="nom" name="nom"
           placeholder="ex : Marie Dupont"><br><br>

    <!-- Champ email : le placeholder montre un exemple de format valide -->
    <label for="email">Adresse email :</label>
    <input type="email" id="email" name="email"
           placeholder="prenom.nom@domaine.fr"><br><br>

    <!-- Champ téléphone : guide l'utilisateur sur le format international -->
    <label for="tel">Téléphone :</label>
    <input type="tel" id="tel" name="tel"
           placeholder="+33 6 12 34 56 78"><br><br>

    <!-- Textarea : le placeholder donne un exemple de contenu attendu -->
    <label for="message">Message :</label><br>
    <textarea id="message" name="message" rows="4"
              placeholder="Décrivez votre demande en quelques lignes..."></textarea>
    <br><br>

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

Exemple 2 : personnaliser le style du placeholder avec CSS

Par défaut, le texte du placeholder s'affiche en gris clair. Il est possible de personnaliser la couleur, la police et le style du placeholder en CSS grâce au pseudo-élément ::placeholder (standard W3C) et aux préfixes propriétaires pour une compatibilité maximale.

  📋 Copier le code

<style>
  /* Pseudo-élément standard W3C pour tous navigateurs modernes */
  input::placeholder,
  textarea::placeholder {
    color: #999;          /* Couleur du texte placeholder */
    font-style: italic;   /* Style italique pour le distinguer de la valeur saisie */
    font-size: 0.9em;     /* Légèrement plus petit que le texte saisi */
  }

  /* Optionnel : changer la couleur au focus du champ */
  input:focus::placeholder {
    color: #ccc;          /* Placeholder plus discret quand l'utilisateur est dans le champ */
  }
</style>

<input type="text" placeholder="Votre nom complet">
<input type="email" placeholder="votre@email.com">

Exemple 3 : placeholder dynamique modifié par JavaScript

Il est possible de modifier dynamiquement le placeholder d'un champ input avec JavaScript, par exemple pour adapter le message selon le contexte ou la langue de l'interface.

  📋 Copier le code

<input type="text" id="champRecherche" placeholder="Rechercher un produit...">
<select id="categorie" onchange="changerPlaceholder()">
  <option value="produit">Produit</option>
  <option value="auteur">Auteur</option>
  <option value="reference">Référence</option>
</select>

<script>
  // Fonction qui adapte le placeholder selon la catégorie sélectionnée
  function changerPlaceholder() {
    const select = document.getElementById('categorie');
    const champ  = document.getElementById('champRecherche');

    // Dictionnaire des messages selon la valeur du select
    const messages = {
      produit   : "ex : chaise ergonomique, bureau réglable...",
      auteur    : "ex : Victor Hugo, Albert Camus...",
      reference : "ex : REF-2026-001"
    };

    // On met à jour l'attribut placeholder via la propriété .placeholder
    champ.placeholder = messages[select.value] || "Rechercher...";
  }
</script>

Bonnes pratiques SEO et UX pour l'attribut placeholder

Voici les meilleures pratiques pour utiliser correctement l'attribut placeholder HTML5 dans vos formulaires :

1. Toujours utiliser un label visible : Le placeholder n'est pas un substitut au <label>. Il disparaît à la saisie et pose des problèmes d'accessibilité WCAG si utilisé seul.

2. Privilégier des exemples concrets : Un bon placeholder montre un exemple de valeur (ex : "ex : 06 12 34 56 78") plutôt qu'une description vague ("Votre numéro").

3. Éviter les instructions obligatoires dans le placeholder : Si une règle de format est indispensable (ex : "8 caractères minimum"), utilisez un texte d'aide <small> sous le champ, car le placeholder disparaît à la saisie.

4. Tester le contraste : Le texte du placeholder doit avoir un ratio de contraste suffisant pour les utilisateurs malvoyants (minimum 4.5:1 selon les critères WCAG 2.1).

Compatibilité navigateurs de l'attribut placeholder en 2026

Internet Explorer Firefox Opéra Google Chrome Safari

En 2026, l'attribut placeholder bénéficie d'une compatibilité universelle sur tous les navigateurs modernes : Chrome, Firefox, Safari, Edge, Opera et leurs versions mobiles. Internet Explorer (abandonné depuis juin 2022) ne supportait pas cet attribut sur certaines versions anciennes, mais ce navigateur n'est plus utilisé. Le pseudo-élément CSS ::placeholder est également supporté nativement sans préfixe propriétaire sur tous les navigateurs actuels.

Valeurs et paramètres de l'attribut placeholder

Valeur Description
text (chaîne de caractères) Texte court affiché dans le champ vide. Peut contenir des espaces. Les sauts de ligne ne sont pas supportés dans un <input> mais fonctionnent dans un <textarea> avec le caractère .

Différences entre HTML4 et HTML5 concernant placeholder

L'attribut placeholder a été introduit avec la spécification HTML5 et n'existe pas en HTML 4.01. Avant HTML5, les développeurs simulaient ce comportement en JavaScript : la valeur de l'input était préremplie avec le texte indicatif, puis vidée au clic (technique du value placeholder). Cette méthode était moins robuste, moins accessible et nécessitait un script supplémentaire. HTML5 a standardisé ce comportement nativement via l'attribut placeholder, éliminant le besoin de JavaScript pour ce cas d'usage.

Retour à l'accueil du site

Par carabde | Mis à jour le 25 février 2026