Gi input tag en type " tekst ", et navn og ID på "s" : en

4

inn en " knapp "-koden for søkeknappen og gi den en klasse av . " btn " For å holde koden kompatibel, bør du også legge til en tittel :

Søk < /knapp>

den " knappen " tag er en nyere kode som gjør at knappen til naturlig justere med input-feltet , en mye bedre funksjon over det forrige "bilde " type input-feltet . Du kan bruke " btn " klasse til stil på knappen ved hjelp av ren CSS variabler eller et bakgrunnsbilde.
5

Enter avsluttende kodene for din formset og form. Den ferdige HTML skal se omtrent slik ut : en

Søk < /button >

< /fieldset >

< /form>
6

i hodet på HTML -dokument eller i en separat CSS -stilark lage din CSS erklæringer for hvert element . Ta en titt på din PhotoShop bildet og bestemme bredden og høyden på søkelinjen , inkludert noen plass over og under inntastingsfeltet og knapp . Skriv inn denne høyden og bredden i " mainsearch " ID erklæringen. Andre ting å vurdere kan være plassering av bar , border bredde og bakgrunn. Hvis det er behov for å bli plassert til høyre for en navigasjonsmeny , for eksempel, bør du legge inn et " float : right " . Variabel
7

inn variabler i klassen som du har tenkt " searchbar . " å gjelde alle søk barer over området. Dette bidrar til å redusere antall gjentatte stil erklæringer , siden du kan bruke den " . Searchbar "-klassen med en annen form ID på samme side , for eksempel. Gjentatte klassevariabler kan omfatte padding , marger grensen farge og bakgrunn .
8

Style din inntastingsfeltet ved å bruke søkefeltet klassen etterfulgt av input velgeren . Variabler å inkludere i input klassen er ting som bredde, høyde, farge på tekst , font og skriftstil, grenser , bakgrunn, padding og marginer. Hver av disse variablene bør samsvare med dimensjoner og effekt innstillinger i PhotoShop -fil , noe som kan fastslås ved å vise valg for lag og bruke verktøyet for å måle piksler.
9

Legg en stil for søket knappen. Du kan oppnå de fleste knappen stiler i CSS ved hjelp av en kombinasjon av grensen og drop shadow variabler eller du kan bruke et bakgrunnsbilde. De viktige variabler å inkludere for din knapp stil er dens høyde og bredde. Et eksempel på en knapp stil er som følger : en

searchbar button.btn {

bredde : 32px ;

høyde: . 32px ;

tekst - innrykk : - 9999px ;

bakgrunn: # CCCCCC URL ( searchbutton.png ) no-repeat øverst til høyre ;

}

Denne stilen passer bildet dimensjon av 32 piksler bredt av 32 piksler høyt , skyver du på "Send Search" tekst ute av syne slik at den ikke overlappe knappen og steder på søk-knappen grafikk øverst til høyre for knappen container for å sikre at det ikke kuttes .
10

Avslutt med å implementere ønsket søk script eller funksjon inn i HTML- skjemaet. Dette gjøres vanligvis ved å legge manuset filnavn eller bane til "action " variable i form tag , men noen skript kan omfatte ytterligere skritt , for eksempel legge javascript i hodet av HTML- side der søkelinjen skal plasseres.