Hvordan lage en søkefelt i HTML

Ulike komponenter utgjør websidene i applikasjonen, for eksempel laster, navigasjonsstenger, søkefelt og mer. CSS -egenskapene brukes til å style disse komponentene. Mer spesifikt er komponenten som nesten er obligatorisk for alle applikasjoner "Søkelinje”. Søkefelt brukes til å gi bedre tilgjengelighet til brukere på en måte som brukere søker etter komponenter i stedet for å surfe på hele nettstedet.

Dette innlegget vil guide om:

• Hva er en søkefelt?
• Hvordan lage søkefelt i HTML?
• Hvordan legge til overgangsegenskaper til søkefeltknappen?

Hva er en søkefelt?

Søkefeltet er et grafisk kontrollelement i ethvert applikasjon. Den består hovedsakelig av en enkeltlinje tekstboks og en knapp. Det fungerer på en slik måte at brukeren skriver informasjonen i inndatafeltet for å søke på, og deretter trykker på knappen for å få resultatene.

Hvordan lage søkefelt i HTML?

For det første, legg til et divelement med klassen "Søkemain“. Legg til en annen div -tag med klassenavnet "søkelinje”Inne i denne diven. Deretter plasserer du en inndatakode og en knappemerke i den. Inngangskoden er tilknyttet attributtene “type”Med en verdi som“tekst”, Og en“stedholder”Brukes til å vise litt tekst i et inngangsfelt.

Her er HTML -koden:

Søk

CSS

I CSS brukes forskjellige egenskaper for å style søkefeltet. La oss diskutere dem en etter en!

Stil alle typer elementer

*
Margin: 0;
polstring: 0;
Bokstørrelse: Border-Box;
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;

Asterisk “*” -symbolet brukes til å representere alle typer elementer, og hvis det blir fulgt av et hvilket som helst element, klasse eller ID -navn, vil det representere alt dette spesifiserte navnet i hele dokumentet.

• “margin”Eiendom med verdi 0 vil ikke gi noe plass rundt noe element.
• “polstring”Med verdi 0 definerer at det ikke er tilordnet noen plass rundt innholdet.
• “Bokstørrelse”Med verdiborger inkluderer polstring og kant til elementets totale høyde og bredde.
• “Font-familie”Brukes til å velge skrifttypen til alle elementene.

Stil "kropp" -element

kropp
Bakgrunnsfarge: DarkslateGrey;

Bakgrunnsfargen på hele kroppsseksjonen er satt til “DarkslateGrey”Farge.

Stil “Search-main” div

.Søkemain
Bakgrunnsfarge: RGBA (0, 0, 0, 0.159);
Maks bredde: 700px;
Margin: 150px Auto;
Høyde: 400px;
Border-Radius: 30px;

Elementet med klasseattributtsøk, har forskjellige egenskaper beskrevet nedenfor:

• “Maks bredde”Angir maksimal breddegrense.
• “høyde”Angir den totale høyden på DIV til 400px.
• “Border-Radius”Gir en radius på 30px rundt DIV -elementet.
• “bakgrunnsfarge”Og“margin”Egenskaper fungerer som diskutert ovenfor.

Stil “Search-Bar” Div

.søkelinje
Display: Flex;
Justify-Content: Center;
Align-elementer: sentrum;
Høyde: 100%;

Søkestangen er stylet med CSS-egenskapene som er diskutert nedenfor:

• “vise”Eiendom Flex brukes til å gjøre den responsive fleksible utformingen av DIV.
• “Justify-Content”Justerer de fleksible gjenstandene i Div horisontalt.
• “Align-elementer”Angir justeringen av de fleksible gjenstandene vertikalt.
• “høyde”Eiendom fungerer som forklart ovenfor.

Stil “input” element

.Søkestanginngang
grense: 1px fast RGB (47, 63, 63);
polstring: 20px 30px;
Font-størrelse: 24px;
bakgrunnsfarge: RGB (85, 104, 104);
Farge: #FFFFFF;
Oversikt: Ingen;

Inngangsfeltet til søkefeltet er gitt egenskaper som er forklart nedenfor:

• “grense”Eiendom setter grensen rundt inngangsfeltet med bredde, linjestil og fargen.
• “skriftstørrelse”Eiendom spesifiserer skriftstørrelsen på teksten.
• “farge”Definerer fargen på inngangsfeltets tekst.
• “skissere”Eiendom med verdi 0 vil ikke sette noen linje rundt elementets grense, hovedsakelig når du klikker.
• “polstring”Og“bakgrunnsfarge”Egenskaper fungerer som nevnt ovenfor.

Stil plassholder

.Search-Bar Input :: Placeholder
Farge: #Dadada;

Plassholderattributtet til inngangsfeltet til søkefeltet er tildelt med "farge”Eiendom #Dadada. Den vil bruke farge på plassen til plassholderen.

Stilknapp

.Søk-bar-knapp
grense: 1px fast RGB (47, 63, 63);
polstring: 20px 30px;
Font-størrelse: 22px;
bakgrunnsfarge: RGB (12, 33, 33);
Farge: #A3A3A3;
Markør: peker;
Margin-venstre: 10px;

Egenskapene til knappelementet i søkefeltet er forklart nedenfor:

• “markør”Eiendom spesifiserer musestilen til musen når du peker på knappen.
• “margin-venstre”Vil legge til litt plass til venstre for knappen.
• Alle de andre egenskapene fungerer de samme.

Ved å utføre den ovennevnte koden, får vi resultatet som vist i bildet nedenfor:

Som vi vet, gjør overgangs- og animasjonsegenskaper på elementer dem mer interaktive og underholdende. Så den neste delen beskriver å legge til en overgang på søkeknappen.

Hvordan legge til overgangsegenskaper til søkefeltknappen?

Legg til overgangsegenskapen med verdien som "alle 0.3s letthet" til ".Søkestang-knapp”, Der alle indikerer alle egenskaper, 0.3S indikerer varigheten av overgangen, og letthet betyr en langsom start, deretter raskt, og slutter sakte:

Overgang: alle 0.3s letthet;

Nå, for å gjøre overgangen på knappen på Hover, er knappelementet stylet som nevnt i kodeblokken nedenfor.

Stilknapp på Hover

.Søk-bar-knapp: Hopp
Transform: Translatey (-5px);

Knappelementet er stylet ved å bruke eiendomstransformasjonen med verdien “Translatey (-5px)”Som betyr på mushover, vil knappen bevege seg i vertikal stilling.

Den ekstra effekten kan sees i bildet nedenfor:

Det er flott! En interaktiv søkefelt opprettes vellykket i HTML ved hjelp av CSS.

Konklusjon

I HTML består en søkefelt hovedsakelig av et inngangsfelt og en knapp, bruk og elementer. Nettkomponentene kan styles som interaktive ved å gi animasjons- og overgangsegenskaper, som nevnt. Denne bloggen har forklart hvordan du lager en søkefelt i HTML med et grundig eksempel.