dare il tag input un tipo di "testo ", un nome e un ID di "s" :

4

Inserisci un tag " pulsante " per il pulsante di ricerca e dare una classe di . " btn " Per mantenere il codice compatibile , si dovrebbe aggiungere anche un titolo :

ricerca < /button >

il tag " pulsante " è un tag di recente che permette al pulsante di allineare naturalmente con il campo di input , una funzione molto migliorato rispetto al precedente tipo "immagine" del campo di input . È possibile utilizzare la classe " btn " per stile il pulsante utilizzando le variabili CSS puri o un'immagine di sfondo .
5

Inserisci tag di chiusura per il formset e forma. Il tuo HTML completata dovrebbe essere simile a questo :

< br

Ricerca > < /button >

< /fieldset >

< /form >
6

nella testa del documento HTML o in un foglio di stile CSS separato creare il dichiarazioni CSS per ogni elemento. Date un'occhiata alla vostra immagine di Photoshop e di determinare la larghezza e l'altezza della barra di ricerca , compreso lo spazio al di sopra e al di sotto del campo di input e pulsante . Inserisci questa altezza e larghezza nella dichiarazione ID " mainsearch " . Altre cose da considerare potrebbe essere il posizionamento della barra , larghezza e sfondo confine . Se ha bisogno di essere collocato a destra di un menu di navigazione , ad esempio , è necessario inserire un " float: right " . Variabile
7

Inserire le variabili nella classe di cui si intende " barra di ricerca. " da applicare a tutte le barre di ricerca in tutto il sito . Questo aiuta a ridurre il numero di dichiarazioni di stile ripetute , dato che è possibile riutilizzare la classe " . Searchbar " con un ID diverso form nella stessa pagina, ad esempio . Variabili di classe ripetuti potrebbero includere spaziatura, margini , colore di sfondo e di confine .
8

Style tuo campo di input utilizzando la classe barra di ricerca seguito dal selettore di ingresso . Le variabili da includere nella classe di ingresso sono cose come larghezza, altezza , colore del testo , carattere e stile , bordi, sfondo , padding e margini. Ognuna di queste variabili devono corrispondere alle dimensioni e degli effetti del file di Photoshop , che può essere determinato visualizzando le opzioni di livello e con lo strumento di selezione per misurare pixel .
9

aggiungere uno stile per la tua ricerca pulsante . È possibile ottenere la maggior parte dei stili di pulsanti in CSS , utilizzando una combinazione di confine e di variabili ombra esterna oppure è possibile utilizzare un'immagine di sfondo . Le variabili importanti da includere per il vostro stile di pulsante sono la sua altezza e la larghezza . Un esempio di stile del pulsante è il seguente :

searchbar button.btn {
larghezza

: 32px ;
altezza

: . 32px ;

testo - indent: - 9999px ;

background: # CCCCCC URL ( searchbutton.png ) no-repeat in alto a destra ;

}

Questo stile si adatta alla dimensione immagine di 32 pixel di larghezza da 32 pixel di altezza , infila la "Invia Search " testo fuori di vista in modo da non sovrapporre il pulsante Cerca pulsante e luoghi grafico in alto a destra del contenitore pulsante per assicurarsi che non è tagliato fuori .
10

finitura mediante l'attuazione di script di ricerca desiderata o la funzione in un modulo HTML . Questo è in genere fatto con l'aggiunta di file o il percorso dello script per la variabile "azione" nel tag form , ma alcuni script può includere ulteriori passi , come ad esempio l'aggiunta di javascript per la testa di tua pagina HTML in cui verrà posizionata la barra di ricerca .