Ishimaru-Design

Étant donné que les sites dynamiques moindrement conséquents doivent inclure une boîte de recherche autant que possible pour aider les visiteurs à rechercher les infos dont ils ont besoin, on va bien souvent mettre la boîte de recherche en haut, dans le menu.

Mais il est moins évident de s'assurer que le tout soit valide, donc voici un mini-tuto sur l'intégration d'un formulaire de recherche rapide dans un menu, tout en restant valide XHTML 1.0 Strict.

On veut donc arriver à faire ceci :
Lien de la page-test, vérifié avec le validateur
On veut donc mettre nos liens à gauche, et notre boîte de recherche à droite.


Quelques règles de validation

Premièrement, il faut savoir que dans un document valide Strict, on ne peut pas imbriquer nos balises n'importe comment.

Étant donné qu'on va avoir à mettre un formulaire, il est important de savoir que l'on doit entourer l'ensemble de nos champs (input, select, textares) d'un paragraphe.

Syntaxe invalide :
<form>
 <input />
</form>

Syntaxe valide :
<form>
 <p>
   <input />
 </p>
</form>

Ceci est valable pour la plupart des balises de type inline (br, img, span, input, label, em, strong, acronym, sup, sub, etc.).  Ces balises doivent se trouver à l'intérieur d'une balise de type block qui est faite pour contenir du texte (p, li, dt, dd, td).


On passe à la pratique !

On veut faire un menu horizontal, et celui-ci doit à la fois contenir les liens et le formulaire.  Dans ce cas, on aura besoin d'une balise <div> qui contiendra l'ensemble et qui aura l'id "menu-horizontal"

<div id="menu-horizontal"></div>

Pour le moment, on n'a rien à l'intérieur, puisqu'on n'a pas encore placé nos liens, ni notre formulaire.

Pour nos liens, on va utiliser une liste à puce qui est sémantiquement plus appropriée pour les menus.  On le mettra en horizontal avec CSS plus tard.

<div id="menu-horizontal">
  <ul>
    <li>Lien 1</li>
    <li>Lien 2</li>
    <li>Lien 3</li>
    <li>Lien 4</li>
    <li>Lien 5</li>
  </ul>
</div>

Je n'ai pas inclus les balises <a>, question de simplifier le code, mais vous aurez à le faire (en les mettant à l'intérieur des <li>) si vous voulez que vos liens fonctionnent

Maintenant, on va passer à notre formulaire.  Comme c'est une boîte de recherche rapide qui ne fera des recherches que sur votre site, on va se limiter au minimum : un <label> avec le mot "Rechercher", un champs texte et un bouton d'envoi.  Et comme je l'ai dis plus haut, ces trois éléments doivent être à l'intérieur d'un paragraphe.

Voici notre formulaire :
<form method="post" action="search.php">
  <p>
     <label for="search">Rechercher</label>
     <input type="text" size="15" id="search" name="search" />
     <input type="submit" value="Go" />
  </p>
</form>

Explications :
1- Pour une question d'accessibilité pour les handicapés et ceux qui naviguent au clavier, j'ai relié le <label> et le champs de texte avec un attribut for="" dans le <label>, et un attribut id="" dans la balise input.
2- L'attribut name="" servira pour le traitement de la recherche (ce que vous devez normalement savoir si vous avez suivi le cours de PHP/MySQL sur le Site du Zéro).

Et maintenant, on intègre notre formulaire dans notre bloc
<div id="menu-horizontal">
  <ul>
    <li>Lien 1</li>
    <li>Lien 2</li>
    <li>Lien 3</li>
    <li>Lien 4</li>
    <li>Lien 5</li>
  </ul>
  <form method="post" action="search.php">
    <p>
      <label for="search">Rechercher</label>
      <input type="text" size="15" id="search" name="search" />
      <input type="submit" value="Go" />
    </p>
 </form>
</div>

Maintenant, on a notre menu avec liens et boîte de recherche, mais pour le moment, tout est vertical.  On va arranger ça et ajouter un peu de style avec CSS !


Et avec un peu de CSS !

Comme il s'agit d'un menu horizontal, on va donc commencer par mettre nos liens les uns à côté des autres, en transformant nos éléments de liste en inline. On va aussi retirer les ronds à côté des liens et les espacer, et mettre un peu de style dans notre block principal


#menu-horizontal
{
   background-color: cyan;
   border: blue 1px solid;
}
#menu-horizontal ul
{
   list-style-type: none; /*pour enlever les ronds devant les liens*/
}

#menu-horizontal ul li
{
   display: inline; /*pour mettre les liens côte à côte*/
   padding: 0 0.5em; /*mais on ne veut pas qu'ils soient trop collés*/
}

Mais pour le moment, nos liens sont centrés et la boîte de recherche est encore en dessous.  On va donc faire flotter nos liens à gauche, et notre formulaire à droite.

#menu-horizontal
{
   background-color: cyan;
   border: blue 1px solid;
}
#menu-horizontal ul
{
   list-style-type: none; /*pour enlever les ronds devant les liens*/
}

#menu-horizontal ul li
{
   display: inline; /*pour mettre les liens côte à côte*/
   padding: 0 0.5em; /*mais on ne veut pas qu'ils soient trop collés*/
   float: left; /*pour les faire flotter à gauche*/
}

#menu-horizontal form
{
   float: right;
}

Mais si vous n'avez pas réinitialisé les marges internes et externes, vous remarquerez vite un problème : le formulaire est beaucoup plus bas que les liens.  Cela vient du rendu par défaut des balises.

Si vous n'utilisez pas cette ligne suivante :
*{margin: 0px; padding: 0px;}

Vous devrez définir les marges des balises dans votre menu.  Je vous donne le code à mettre juste avant le code que je vous ai donné jusqu'à maintenant :
/*réinitialise les marges dans le block du menu*/
#menu-horizontal ul, #menu-horizontal ul li, #menu-horizontal form, #menu-horizontal form p, menu-horizontal form p label, #menu-horizontal form p input
{
   margin: 0px;
   padding: 0px;
}

Maintenant, on poursuit la mise en forme de notre menu.  Étant donné qu'on a fait flotter notre formulaire et notre liste, on remarque que le bloc principal ne fait qu'une mince ligne.  On va corriger ça en définissant sa hauteur :

#menu-horizontal
{
   background-color: cyan;
   border: blue 1px solid;
   height: 30px;
}

Mais maintenant, on trouve que notre liste et notre formulaire sont un peu trop collés sur le bord.  On va donc définir les marges pour les décoller.

#menu-horizontal ul
{
  list-style-type: none;
  margin-left: 10px;
  margin-top: 5px;
}

#menu-horizontal form
{
  float: right;
  margin-right: 10px;
}

(?) Mais pourquoi t'a pas mis de margin-top au formulaire ?

La raison est simple : Le positionnement du formulaire est lié à celui de la liste, donc si on descend notre liste avec une marge en haut, le formulaire va descendre également.

Voici maintenant le code final de notre menu :

/*réinitialise les marges dans le block du menu, si on ne l'a pas fait pour l'ensemble des balises*/
#menu-horizontal ul, #menu-horizontal ul li, #menu-horizontal form, #menu-horizontal form p, menu-horizontal form p label, #menu-horizontal form p input
{
   margin: 0px;
   padding: 0px;
}


#menu-horizontal
{
   background-color: cyan;
   border: blue 1px solid;
   height: 30px;
}
#menu-horizontal ul
{
   list-style-type: none;
   margin-left: 10px;
   margin-top: 5px;
}

#menu-horizontal ul li
{
   display: inline;
   padding: 0 0.5em;
   float: left;
}

#menu-horizontal form
{
   float: right;
   margin-right: 10px;
}

Avec un aperçu : http://youwontfindme.editboard.com/Menu-avec-formulaire-de-recherche-h15.htm
(notez que j'ai ajouté des marges externes pour le bloc principal, pour que ce ne soit pas collé avec les bords de la page)

Maintenant, il ne vous reste qu'à paufiner l'apparence de votre menu