Skapa en dold sökfält med HTML, CSS och JavaScript

Interaktiva GUI-element gör din applikation lättare att använda. HTML innehåller flera formulärkomponenter som standard, men du vill använda CSS så att de passar din design. Du kan också använda JavaScript för att utöka eller ändra deras beteende.

Du kan skapa sådana komponenter med hjälp av ett bibliotek som Tailwind, men det är användbart att veta hur man skapar dem från början också.

Ta reda på hur du skapar en dold sökfält med HTML, CSS och JavaScript.

Skapa innehållsstrukturen med HTML

Här är HTML-koden för funktionen. Du kommer att ha ett överordnat element som innehåller en ingång och ett knappelement. Du kommer också att importera fantastiska teckensnitt för sökikonen. I det här fallet kommer du att använda sökikonen för förstoringsglaset.

html>
<htmllang="en">
<huvud>
<metateckenuppsättning="UTF-8" />
<metahttp-ekvivalent="X-UA-kompatibel"innehåll="IE=kant" />
<metanamn="viewport"innehåll="width=device-width, initial-scale=1.0" />





instagram viewer

<manussrc=" https://kit.fontawesome.com/d69fb28507.js"korsursprung="anonym">manus>
<titel>Dold sökfälttitel>
huvud>

<kropp>
<divklass="förälder">
<inmatningklass="inmatning"typ="typ"Platshållare="Sök..." />
<knappklass="btn">
<iklass="fa-solid fa-förstoringsglas">i>
knapp>
div>
kropp>
html>

Style gränssnittet med CSS

I CSS-filen måste du ge det överordnade elementet positionen som relativ. En relativ position gör att ingångs- och knappelementen kan flyttas runt föräldern. De CSS-positionsegenskap styr flera typer av layout, så det är viktigt att förstå.

Du kommer också att rikta in båda elementen i mitten för bättre synlighet. Men på din applikation kan du välja att ha sökfältet när du vill. Ge även båda elementen samma bredd så att de ser lika stora ut och inte det ena större än det andra.

Då måste du ge föräldern en aktiv klass för både inmatnings- och knappelementen. På så sätt kommer det att transformeras som specificerat när elementet rör sig.

* {
marginal: 0;
stoppning: 0;
lådans storlek: border-box;
}
kropp {
bakgrundsfärg: #d9d9d9;
höjd: 100vh;
visa: böja;
align-objekt: Centrum;
motivera-innehåll: Centrum;
}
.förälder {
placera: relativ;
}
.inmatning {
skissera: ingen;
gräns: ingen;
gräns-radie: 100px;
stoppning: 5px 10px;
bredd: 40px;
övergång: bredd 0.3slätthet;
}
.inmatning::Platshållare {
Färg: grön;
}
.förälder.aktiva.inmatning {
bredd: 200px;
}
.btn {
bredd: 40px;
stoppning: 5px 10px;
markören: pekare;
gräns-radie: 100px;
gräns: ingen;
bakgrund: grön;
visa: i kö;
box-skugga: 0 0 5pxrgba(0, 0, 0, 0.2);
placera: absolut;
topp: 0;
vänster: 0;
övergång: omvandla 0.3slätthet;
}
.förälder.aktiva.btn {
omvandla: translateX(210px);
}
.fa-solid {
Färg: #ffffff;
}

Du bör ha en sökknapp som ser ut så här:

Lägg till JavaScript-funktionalitet

Skriv sedan JavaScript-kod för elementen. Välj först de överordnade, inmatnings- och knappelementen med hjälp av JavaScript querySelector() metod.

Lägg sedan till en klickhändelselyssnare till knappen. Så när du klickar på knappen växlar den enligt den valda klassen. Lägg till fokus() metod för att sätta fokus på det angivna elementet. Den börjar blinka när sökfältet expanderar.

låta input = dokumentera.querySelector(".inmatning");
låta btn = dokumentera.querySelector(".btn");
låta förälder = dokumentera.querySelector(".förälder");
btn.addEventListener("klick", () => {
 parent.classList.toggle("aktiva");
 input.focus();
});

Om du klickar på knappen öppnas sökfältet och vice versa. Det ser ut som visas i följande diagram:

Om du nu skriver in information och klickar på knappen stängs den när systemet söker efter informationen.

Coolt, inte sant? Du kan se den här koden och leka med sökfältet på codepen.io. Du kan anpassa sökfältet ytterligare genom att skapa en sökfältslistan av föremål. Detta gör det lättare för dina användare att göra sökningar i appen.

Andra funktioner du kan skapa

Som nybörjare inom webbutveckling finns det många funktioner du kan skapa med HTML, CSS och JavaScript. Du kan skapa ett popup-/modalt fönster, ett bildreglage, en automatisk uppdatering av sidfot och många fler.

Sådana kreativa projekt är bra för att lära sig programmeringskoncept. Du får tillämpa färdigheter när du lär dig dem vilket ökar användbarheten av färdigheten. Dessutom får du skapa fantastiska användargränssnitt som du och dina användare kommer att njuta av. Använd den här guiden för att skapa en dold sökfält och andra interaktiva funktioner för din webbplats.