Exercice HTML : Navigation par boutons et menus de formulaires  

Thème

Présentation des techniques de navigation par éléments de formulaires (boutons, menus déroulants...), comme alternatives aux liens classiques (réalisés avec <A HREF="URL"> texte </A>) et aux boutons traditionnels (réalisés à partir d'images avec <A HREF="URL"> <IMG SRC="image_bouton.gif" BORDER="0" ALT="texte"> </A>).

Principes

La première technique de navigation présentée ci-dessous utilise le bouton traditionnel de soumission de formulaire <INPUT TYPE="SUBMIT" ...>. Dans ce cas, c'est donc la balise <FORM ACTION="URL" ...> qui spécifie la page qui doit être chargée, et l'on pourrait ajouter dans cette balise l'attribut TARGET="nom cible" pour spécifier le frame ou une nouvelle fenêtre de navigateur dans le(la)quel(le) la page doit s'afficher.

Les autres techniques recourrent aux évènements JavaScript onClick et onChange associés à la méthode JavaScript document.location="URL" provoquant le chargement de l' URL spécifié dans la page.

Références

Présentation des différentes techniques


1) Navigation par bouton classique SUBMIT de soumission de formulaire

Dans cette technique n'utilisant pas JavaScript, l'URL étant définie dans la balise <FORM> et non dans la balise de bouton <INPUT>, chaque bouton doit faire l'objet de son propre <FORM...> ... </FORM>.


Les boutons ci-contre sont réalisés par le code HTML suivant :
  <FORM ACTION="111.html">
    <INPUT TYPE="SUBMIT" VALUE="    111    ">
  </FORM>
  <FORM ACTION="222.html" TARGET="_blank">
    <INPUT TYPE="SUBMIT" VALUE="    222    ">
  </FORM>
  <FORM ACTION="index.html">
    <INPUT TYPE="SUBMIT" VALUE="  Retour  ">
  </FORM>
Dans le présent exemple, le bouton [222] ouvre la page 222.html dans une nouvelle fenêtre de navigateur, alors que les boutons [111] et [Retour] travaillent dans la fenêtre courante.

2) Navigation par bouton de type BUTTON

Par opposition à la technique précédente, dans celle ci tous les boutons sont définis dans le même formulaire, mais elle nécessite que JavaScript, coté client, soit fonctionnel.




 
Les boutons ci-contre sont réalisés par le code HTML suivant :
  <FORM>
  <INPUT TYPE="BUTTON" VALUE="   111   "
               onClick="document.location='111.html'"><BR>
  <INPUT TYPE="BUTTON" VALUE="   222   "
               onClick="document.location='222.html'"><BR>
  <INPUT TYPE="BUTTON" VALUE=" Retour "
               onClick="history.back()">
  </FORM>
Notez que le bouton "Retour" fait "un vrai back".

3) Navigation par menu déroulant


Le menu ci-contre est réalisé par le code HTML suivant :
  <FORM>
    <SELECT onChange=
      "document.location=this.options[this.selectedIndex].value">
      <OPTION VALUE="#" SELECTED>     CHOISIR     </OPTION>
      <OPTION VALUE="111.html">111</OPTION>
      <OPTION VALUE="222.html">222</OPTION>
      <OPTION VALUE="index.html">Retour</OPTION>
    </SELECT>
  </FORM>

4) Navigation par choix dans une liste (menu "déroulé")

Le principe est le même que ci-dessus, sauf que l'on affiche le contenu du menu avec l'attribut SIZE=" nombre d'articles" de la balise <SELECT ...>.


Le menu ci-contre est réalisé par le code HTML suivant :
  <FORM>
    <SELECT SIZE="5" onChange=
      "document.location=this.options[this.selectedIndex].value">
      <OPTION VALUE="#">     CHOISIR     </OPTION>
      <OPTION VALUE="#">--------------</OPTION>
      <OPTION VALUE="111.html">111</OPTION>
      <OPTION VALUE="222.html">222</OPTION>
      <OPTION VALUE="index.html">Retour</OPTION>
    </SELECT>
  </FORM>
Remarquez les valeurs "#" pour les 2 premières options, de façon que si l'utilisateur les choisit il soit renvoyé sur la page courante (sans valeur on recevrait l'index du répertoire de la page courante).

5) Navigation par bouton radio

Cette technique n'est pas recommandée, car elle n'est pas très logique du point de vue interface-utilisateur. On pourrait aussi utiliser les cases à chocher (CHECKBOX).


111
222
Retour
Les boutons-radio ci-contre sont réalisés par le code HTML suivant :
  <FORM>
    <INPUT TYPE="RADIO" onClick="document.location='111.html'">111<BR>
    <INPUT TYPE="RADIO" onClick="document.location='222.html'">222<BR>
    <INPUT TYPE="RADIO" onClick="history.back()">Retour
  </FORM>


Exercices HTML © J.-D. Bonjour / SI-DGR, EPFL / Révision 31.3.2002