Creați o bară de căutare ascunsă cu HTML, CSS și JavaScript

Elementele interactive GUI vă fac aplicația mai ușor de utilizat. HTML include mai multe componente de formular în mod implicit, dar veți dori să utilizați CSS astfel încât să se potrivească cu designul dvs. De asemenea, puteți utiliza JavaScript pentru a extinde sau modifica comportamentul acestora.

Puteți crea astfel de componente folosind o bibliotecă precum Tailwind, dar este util să știți cum să le creați și de la zero.

Aflați cum să creați o bară de căutare ascunsă folosind HTML, CSS și JavaScript.

Creați structura de conținut cu HTML

Iată codul HTML al funcției. Veți avea un element părinte care conține o intrare și un element buton. Veți importa, de asemenea, scripturi minunate cu fonturi pentru pictograma de căutare. În acest caz, veți folosi pictograma de căutare lupă.

html>
<htmllang="ro">
<cap>
<metaset de caractere=„UTF-8” />
<metahttp-echiv=„Compatibil X-UA”conţinut=„IE=margine” />
<metaNume="vizor"conţinut=„width=device-width, initial-scale=1.0” />





instagram viewer

<scenariusrc=" https://kit.fontawesome.com/d69fb28507.js"origine încrucișată="anonim">scenariu>
<titlu>Bara de căutare ascunsătitlu>
cap>

<corp>
<divclasă="mamă">
<intrareclasă="intrare"tip="tip"substituent="Căutare..." />
<butonclasă="btn">
<iclasă=„fa-solid fa-lupă”>i>
buton>
div>
corp>
html>

Stilați interfața folosind CSS

În fișierul CSS, trebuie să dați elementului părinte poziția relativă. O poziție relativă permite elementelor de intrare și buton să se deplaseze în jurul părintelui. The Proprietatea poziției CSS controlează mai multe tipuri de aspect, deci este unul important de înțeles.

De asemenea, veți alinia ambele elemente la centru pentru o mai bună vizibilitate. Dar în aplicația dvs., puteți alege să aveți bara de căutare oricând doriți. De asemenea, dați ambelor elemente aceeași lățime, astfel încât să arate aceeași dimensiune și nu unul mai mare decât celălalt.

Apoi trebuie să îi oferi părintelui o clasă activă atât pentru elementele de intrare, cât și pentru buton. În acest fel, se va transforma așa cum este specificat ori de câte ori elementul se mișcă.

* {
marginea: 0;
căptușeală: 0;
dimensionarea cutiei: cutie-chenar;
}
corp {
culoare de fundal: #d9d9d9;
înălţime: 100vh;
afişa: contracta;
alinierea elementelor: centru;
justifica-conținut: centru;
}
.mamă {
poziţie: relativ;
}
.intrare {
contur: nici unul;
frontieră: nici unul;
hotar-raza: 100px;
căptușeală: 5px 10px;
lăţime: 40px;
tranziție: lăţime 0.3suşura;
}
.intrare:: substituent {
culoare: verde;
}
.mamă.activ.intrare {
lăţime: 200px;
}
.btn {
lăţime: 40px;
căptușeală: 5px 10px;
cursor: indicator;
hotar-raza: 100px;
frontieră: nici unul;
fundal: verde;
afişa: în linie;
cutie-umbră: 0 0 5pxrgba(0, 0, 0, 0.2);
poziţie: absolut;
top: 0;
stânga: 0;
tranziție: transforma 0.3suşura;
}
.mamă.activ.btn {
transforma: traduceX(210px);
}
.fa-solid {
culoare: #ffffff;
}

Ar trebui să aveți un buton de căutare care să arate așa:

Adăugați funcționalitatea JavaScript

Apoi, scrieți cod JavaScript pentru elemente. Mai întâi, selectați elementele părinte, de intrare și butonul folosind JavaScript querySelector() metodă.

Apoi, adăugați un ascultător de evenimente clic pe butonul. Deci, atunci când este făcut clic, butonul comută în funcție de clasa selectată. Adaugă focus() metoda de a seta focalizarea pe elementul specificat. Începe să clipească ori de câte ori se extinde bara de căutare.

lăsa intrare = document.querySelector(".intrare");
lăsa btn = document.querySelector(„.btn”);
lăsa părinte = document.querySelector(".mamă");
btn.addEventListener("clic", () => {
 parent.classList.toggle("activ");
 input.focus();
});

Dacă dai clic pe buton, se deschide bara de căutare și invers. Apare așa cum se arată în următoarea diagramă:

Acum, dacă introduceți informații și faceți clic pe butonul, se închide pe măsură ce sistemul caută informații.

Cool, nu-i așa? Puteți vedea acest cod și puteți juca cu bara de căutare activată codepen.io. Puteți personaliza în continuare bara de căutare prin crearea unui lista barei de căutare de articole. Acest lucru facilitează utilizatorilor dvs. să efectueze căutări în aplicație.

Alte caracteristici pe care le puteți crea

Fiind începător în dezvoltarea web, există multe funcții pe care le puteți crea cu HTML, CSS și JavaScript. Puteți crea o fereastră pop-up/modală, un glisor de imagine, un actualizator automat pentru subsol și multe altele.

Astfel de proiecte creative sunt excelente pentru a învăța concepte de programare. Puteți aplica abilitățile pe măsură ce le învățați, ceea ce crește utilitatea abilității. De asemenea, puteți crea interfețe de utilizator grozave de care dvs. și utilizatorii dvs. vă veți bucura. Utilizați acest ghid pentru a crea o bară de căutare ascunsă și alte funcții interactive pentru site-ul dvs.