En général, une barre de recherche est constitué de trois composantes principales: le conteneur de forme , le champ de saisie , et le bouton de recherche. Chercher des motifs à barres peuvent varier , mais si c'est bien fait, une barre de recherche créé dans Adobe PhotoShop auront chacun de ces éléments sur un calque séparé , vous permettant de séparer facilement les pour le codage. Vous devrez déterminer quels sont les éléments que vous pouvez recréer en utilisant des styles CSS et que vous devez l'exporter sous forme de fichiers image distincts avant que vous pouvez commencer à coder la barre . Éléments d'image typiques sont le fond de champ de saisie et le bouton de recherche. Faites également attention aux effets tels que des ombres portées et des frontières , comme vous aurez besoin de ces paramètres pour créer des styles CSS qui correspondent à la conception. Instructions
1

décider comment vous voulez que la barre de recherche à la fonction. Il ya des dizaines de scripts de recherche et des extraits de code disponibles sur l'Internet en utilisant une variété de langues , y compris le javascript , jQuery , PHP et HTML. Vous pouvez utiliser toutes ces choses, mais peut-être trouver la création de la première barre de recherche en HTML avec des styles qui répondent à votre image, puis l'adapter à un script est plus facile que d'essayer de le style d'un script premade pour correspondre à votre image.
< Br > 2

Lancez votre texte préféré ou un éditeur HTML et commencer par l'ajout d'une balise " forme " d'ouverture :

donner à l'étiquette le nom et la classe, qui vous utiliser pour le style de la barre de recherche fond et la frontière :

Terminez en ajoutant une méthode et action variable :
< p>

L'action restera vide pour l'instant. Plus tard, vous aurez besoin de le remplir avec le chemin de votre fournisseur de recherche , le script de recherche ou serveur
3

Suivez la balise form avec une étiquette « fieldset » et un champ de saisie : .

Donner la balise d'entrée un type de «texte», un nom et un ID de "s":

4

Entrez un "bouton" tag pour le bouton de recherche et de lui donner une classe de . " btn " Pour garder la conformité de votre code, vous devez également ajouter un titre :

Recherche < /button> Photos

le "bouton" tag est une balise récente qui permet au bouton d'aligner naturellement avec le champ de saisie , une fonction améliorée au cours de la précédente type " image" du champ de saisie. Vous pouvez utiliser la classe " btn " pour coiffer sur le bouton en utilisant des variables CSS purs ou une image de fond .
5

Entrez balises de fermeture de votre formset et la forme. Votre HTML complété doit ressembler à ceci :

Recherche < /button> Photos

Photos

6

dans la tête de votre document HTML ou dans une feuille de style CSS séparé créer votre déclarations CSS pour chaque élément. Jetez un oeil à votre image Photoshop et déterminer la largeur et la hauteur de la barre de recherche , y compris toute espace au-dessus et en dessous du terrain et touche entrée. Saisissez cette hauteur et la largeur dans le " mainsearch « déclaration d'identité. Autres choses à considérer peut-être le positionnement de la barre , largeur de la bordure et le fond. Si il doit être placé à la droite d'un menu de navigation, par exemple , vous devez entrer un " float: right " . Variables
7

Entrez variables dans la classe qui vous avez l'intention " searchbar . " s'appliquer à toutes les barres de recherche à travers le site. Cela permet de réduire le nombre de déclarations de style répétées, puisque vous pouvez réutiliser l' " . Searchbar " class avec une forme différente ID sur la même page , par exemple. Variables de classe répétées pourraient inclure rembourrage , les marges , la couleur de bordure et le fond .
8

le style de votre champ de saisie à l'aide de la classe barre de recherche suivie par le sélecteur d'entrée . Variables à inclure dans la classe d'entrée sont des choses comme la largeur , la hauteur, la couleur du texte , la police et le style de police , les frontières , fond, remplissage et les marges . Chacune de ces variables doivent correspondre aux dimensions et paramètres d'effet dans le dossier Photoshop, qui peuvent être déterminées en affichant les options de calque et utiliser l'outil de sélection pour mesurer pixels.
9

Ajouter un style pour votre recherche bouton . Vous pouvez obtenir la plupart des styles de boutons en CSS en utilisant une combinaison de frontière et les variables d'ombre portée ou vous pouvez utiliser une image de fond . Les variables importantes à inclure pour votre style de bouton sont sa hauteur et sa largeur . Un exemple d' un style de bouton est le suivant:

searchbar button.btn {
largeur de

: 32px ;
hauteur de

: . 32px ;

texte indent: - 9999px ;

background: # CCCCCC URL ( searchbutton.png ) no-repeat haut à droite ;

}

Ce style correspond à la dimension de l' image de 32 pixels de large par 32 pixels de haut , pousse le «Submit Recherche " texte hors de la vue afin de ne pas superposer le bouton et place le bouton de recherche graphique en haut à droite du réservoir de bouton pour s'assurer qu'il n'est pas coupé.
10

Terminer en mettant en œuvre le script de recherche souhaitée ou d'une fonction dans votre formulaire HTML. Cela se fait généralement en ajoutant le nom ou le chemin du script de "l'action " variable dans la balise form , mais certains scripts peuvent inclure d'autres mesures , telles que l'ajout javascript pour la tête de votre page HTML où la barre de recherche sera placé.