Créez Votre Propre Champ de Recherche comme Google (avec Copier le Code !)

Vous avez toujours rêvé de créer un champ de recherche élégant comme celui de Google sur votre site ? Cet article vous explique comment faire, pas à pas, grâce à un code HTML/CSS/JavaScript simple et personnalisable.

Recherche comme Google


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Recherche comme Google</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f8f9fa;
      display: ;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .search-box {
      padding: 12px 20px;
      width: 70vw;
      max-width: 500px;
      font-size: 16px;
      border: 1px solid #dcdcdc;
      border-radius: 24px;
      outline: none;
    }
    .search-button {
      margin-top: 15px;
      padding: 10px 20px;
      font-size: 16px;
      border: 1px solid #dcdcdc;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div>
    <input type="text" id="champRecherche" class="search-box" placeholder="Rechercher sur Daniel Business...">
    <br>
    <button class="search-button" onclick="rechercher()">Rechercher</button>
    <div id="resultat"></div>
  </div>
  <script>
    function rechercher() {
      const champ = document.getElementById("champRecherche").value.trim();
      const result = document.getElementById("resultat");
      if (champ === "") {
        result.innerHTML = "Veuillez entrer un mot-clé.";
      } else {
        result.innerHTML = "🔍 Vous avez recherché : " + champ;
      }
    }
  </script>
</body>
</html>

✨ Que fait ce code ?

Le code que je vous propose crée une barre de recherche moderne et responsive (adaptée aux téléphones, tablettes et ordinateurs). Il comprend :

Un champ de texte au centre de la page, où l'utilisateur peut taper sa recherche.
Un bouton "Rechercher" qui, lorsqu'on clique dessus, affiche un message indiquant ce que l'utilisateur a saisi.
Une mise en page claire, avec des couleurs douces et un effet "Google-like".
Un bouton "📋 Copier" qui vous permet de copier tout le code en un clic pour l’utiliser sur votre propre blog ou projet.

⚙️ Comment ça fonctionne ?

HTML : Il structure la page avec un champ <input>, un bouton <button>, et une zone d’affichage des résultats.
CSS : Il ajoute du style (couleurs, bordures arrondies, ombres douces) pour un rendu professionnel.
JavaScript : Il écoute le clic sur le bouton "Rechercher", récupère ce que l’utilisateur a tapé, puis l’affiche dynamiquement sous la barre de recherche.

Le bouton "Copier" utilise aussi JavaScript pour copier tout le code automatiquement dans le presse-papiers.

🧪 Comment tester ce code ?

Directement sur ce blog : Cliquez sur le bouton "📋 Copier", puis collez le code dans un fichier .html (ou dans https://jsfiddle.net ou https://codepen.io).
Ouvrez-le avec un navigateur comme Chrome.
Tapez un mot dans la barre de recherche, cliquez sur "Rechercher"… et voyez le résultat s’afficher ! ✨

💡 Astuce : Vous pouvez personnaliser le style, le texte ou connecter la recherche à une vraie base de données plus tard.

Envie d’apprendre à améliorer ce code ou à le connecter à Firebase ? Abonnez-vous à mon blog et suivez mes prochains tutoriels !

Rechercher dans ce blog