Créer une barre de recherche masquée avec HTML, CSS et JavaScript

Les éléments d'interface graphique interactifs facilitent l'utilisation de votre application. HTML inclut plusieurs composants de formulaire par défaut, mais vous voudrez utiliser CSS pour qu'ils correspondent à 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 à partir de zéro.

Découvrez comment créer une barre de recherche masqué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 importerez également des scripts impressionnants de polices pour l'icône de recherche. Dans ce cas, vous utiliserez l'icône de recherche en forme de loupe.

html>
<htmllangue="fr">





instagram viewer

<diriger>
<métajeu de caractères="UTF-8" />
<métahttp-equiv="Compatible X-UA"contenu="IE=bord" />
<métanom="fenêtre"contenu="width=device-width, initial-scale=1.0" />
<scénariosrc=" https://kit.fontawesome.com/d69fb28507.js"origine croisée="anonyme">scénario>
<titre>Barre de recherche cachéetitre>
diriger>
<corps>
<divclasse="parent">
<saisirclasse="saisir"taper="taper"espace réservé="Recherche..." />
<boutonclasse="btn">
<jeclasse="fa-solide fa-loupe">je>
bouton>
div>
corps>
html>

Styliser 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 input et button de se déplacer autour du parent. Le Propriété de position CSS contrôle plusieurs types de mise en page, il est donc important de comprendre.

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

Ensuite, vous devez donner au parent une classe active pour les éléments d'entrée et de bouton. De cette façon, il se transformera comme spécifié chaque fois que l'élément se déplacera.

* {
marge: 0;
rembourrage: 0;
dimensionnement de la boîte: border-box;
}
corps {
Couleur de l'arrière plan: #d9d9d9;
hauteur: 100vh;
afficher: fléchir;
aligner les éléments: centre;
justifier-contenu: centre;
}
.parent {
position: relatif;
}
.saisir {
contour: aucun;
frontière: aucun;
rayon de bordure: 100pixels;
rembourrage: 5pixels 10pixels;
largeur: 40pixels;
transition: largeur 0.3sfaciliter;
}
.saisir:: espace réservé {
couleur: vert;
}
.parent.actif.saisir {
largeur: 200pixels;
}
.btn {
largeur: 40pixels;
rembourrage: 5pixels 10pixels;
le curseur: aiguille;
rayon de bordure: 100pixels;
frontière: aucun;
arrière-plan: vert;
afficher: en ligne;
boîte ombre: 0 0 5pixelsRVB(0, 0, 0, 0.2);
position: absolu;
haut: 0;
gauche: 0;
transition: transformer 0.3sfaciliter;
}
.parent.actif.btn {
transformer: traduireX(210pixels);
}
.fa-solide {
couleur: #ffffff;
}

Vous devriez avoir un bouton de recherche ressemblant à ceci :

Ajouter une fonctionnalité JavaScript

Ensuite, écrivez le code JavaScript pour les éléments. Tout d'abord, sélectionnez les éléments parent, input et button à l'aide de JavaScript querySelector() méthode.

Ensuite, ajoutez un écouteur d'événement de clic au bouton. Ainsi, lorsqu'il est cliqué, le bouton bascule en fonction de la classe sélectionnée. Ajouter le se concentrer() méthode pour définir le focus sur l'élément spécifié. Il commence à clignoter chaque fois que la barre de recherche se développe.

laisser entrée = document.querySelector(".saisir");
laisser bt = document.querySelector(".btn");
laisser père = document.querySelector(".parent");
btn.addEventListener("Cliquez sur", () => {
 parent.classList.toggle("actif");
 input.focus();
});

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

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

Cool, n'est-ce pas? 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 un liste de la barre de recherche d'articles. Cela permet à vos utilisateurs d'effectuer plus facilement des recherches sur 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 contextuelle/modale, un curseur d'image, une mise à jour automatique du pied de page et bien d'autres.

De tels 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 l'utilité de la compétence. De plus, vous pouvez créer d'excellentes interfaces utilisateur que vous et vos utilisateurs apprécierez. Utilisez ce guide pour créer une barre de recherche masquée et d'autres fonctionnalités interactives pour votre site.