Les éléments d’interface graphique interactifs facilitent l’utilisation de votre application. Le langage HTML inclut par défaut plusieurs composants de formulaire, mais vous devrez utiliser le langage CSS pour qu’ils s’adaptent à votre conception. Vous pouvez également utiliser JavaScript pour étendre ou modifier leur comportement.


Vous pouvez créer de tels composants à l’aide d’une bibliothèque comme Tailwind, mais il est également utile de savoir comment les créer de toutes pièces.

Découvrez comment créer une barre de recherche cachée à l’aide de HTML, CSS et JavaScript.

Créer la structure du contenu avec HTML

Voici le code HTML de la fonctionnalité. Vous aurez un élément parent qui contient une entrée et un élément bouton. Vous allez également importer des scripts font-awesome pour l’icône de recherche. Dans ce cas, vous utiliserez l’icône de recherche en forme de loupe.

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://kit.fontawesome.com/d69fb28507.js" crossorigin="anonymous"></script>
    <title>Hidden Search Bar</title>
</head>

<body>
    <div class="parent">
        <input class="input" type="type" placeholder="Search..." />

        <button class="btn">
            <i class="fa-solid fa-magnifying-glass"></i>
        </button>
    </div>
</body>

</html>

Lire  9 solutions à essayer lorsque Steam est bloqué sur &quot;Vérification de l'installation&quot ; pour Windows

Style de l’interface à l’aide de CSS

Dans le fichier CSS, vous devez donner à l’élément parent la position relative. Une position relative permet aux éléments de saisie et aux boutons de se déplacer autour de l’élément parent. La propriété CSS position contrôle plusieurs types de mise en page, il est donc important de la comprendre.

Vous alignerez également les deux éléments au centre pour une meilleure visibilité. Mais dans votre application, vous pouvez choisir d’avoir la barre de recherche quand vous le souhaitez. De plus, donnez la même largeur aux deux éléments afin qu’ils aient la même taille et que l’un ne soit pas plus grand que l’autre.

Vous devez ensuite donner au parent une classe active pour les éléments input et button. De cette façon, il se transformera comme spécifié chaque fois que l’élément se déplacera.

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #d9d9d9;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parent {
    position: relative;
}

.input {
    outline: none;
    border: none;
    border-radius: 100px;
    padding: 5px 10px;
    width: 40px;
    transition: width 0.3s ease;
}

.input::placeholder {
    color: green;
}

.parent.active .input {
    width: 200px;
}

.btn {
    width: 40px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 100px;
    border: none;
    background: green;
    display: inline;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease;
}

.parent.active .btn {
    transform: translateX(210px);
}

.fa-solid {
    color: #ffffff;
}

Le bouton de recherche devrait ressembler à ceci :

Lire  6 façons d'identifier l'identité d'un appelant inconnu

Bouton vert avec une icône de loupe

Ajouter une fonctionnalité JavaScript

Ensuite, écrivez le code JavaScript pour les éléments. Tout d’abord, sélectionnez les éléments parent, entrée et bouton à l’aide de la fonction JavaScript querySelector() méthode.

Ensuite, ajoutez un récepteur d’événement de clic au bouton. Ainsi, lorsqu’il est cliqué, le bouton bascule en fonction de la classe sélectionnée. Ajoutez l’élément focus() pour mettre l’accent sur l’élément spécifié. Elle commence à clignoter lorsque la barre de recherche se développe.

 let input = document.querySelector(".input");
let btn = document.querySelector(".btn");
let parent = document.querySelector(".parent");

btn.addEventListener("click", () => {
    parent.classList.toggle("active");
    input.focus();
});

Si vous cliquez sur le bouton, la barre de recherche s’ouvre et vice versa. Il apparaît comme indiqué dans le diagramme suivant :

Zone de saisie de la recherche à côté d'un bouton vert avec une icône de loupe

Maintenant, si vous tapez des informations et cliquez sur le bouton, il se ferme pendant que le système recherche les informations.

Cool, non ? Vous pouvez voir ce code et jouer avec la barre de recherche sur codepen.io. Vous pouvez personnaliser davantage la barre de recherche en créant une liste d’éléments dans la barre de recherche. Cela permet à vos utilisateurs d’effectuer plus facilement des recherches dans l’application.

Autres fonctionnalités que vous pouvez créer

En tant que débutant en développement web, vous pouvez créer de nombreuses fonctionnalités avec HTML, CSS et JavaScript. Vous pouvez créer une fenêtre popup/modale, un curseur d’image, un actualisateur automatique de pied de page, et bien d’autres choses encore.

Ces projets créatifs sont parfaits pour apprendre les concepts de programmation. Vous pouvez appliquer les compétences au fur et à mesure que vous les apprenez, ce qui augmente leur utilité. En outre, vous pouvez créer de superbes interfaces utilisateur que vous et vos utilisateurs apprécierez. Utilisez ce guide pour créer une barre de recherche cachée et d’autres fonctions interactives pour votre site.