Formulaires : Composition

Il est possible de regrouper plusieurs formulaires sur une seule page HTML, même si dans la pratique on n'en met souvent qu'un seul. Le formulaire va comprendre une série de contrôes (Zones de saisie, cases à cocher, etc.) qui seront identifiées comme faisant partie du formulaire en question.

Voici un formulaire qui ne contient rien du tout :

<BODY>
  avant
  <FORM>
  </FORM>

  après

</BODY>

Cette page affichera simplement :

avant

après

Voici un formulaire pourvu d'un nom et d'une zone de texte :

<FORM NAME="FORIdentite">
  <INPUT TYPE="TEXT" NAME="EDINom">
</FORM>

Il est possible de nommer les différents éléments d'un formulaire avec JavaScript. L'exemple suivant est correct mais l'alert affiche du vide puisque javascript s'exécute immédiatement sans attendre, et la zone de saisie est donc vide :

<BODY>
  <FORM NAME="FORIdentite">
    <INPUT TYPE="TEXT" NAME="EDINom">
  </FORM>


  <SCRIPT LANGUAGE="JavaScript">
    alert (FORIdentite.EDINom.Value)
  </SCRIPT>
</BODY>

Il aurait suffi de compléter <INPUT TYPE="TEXT" NAME="EDINom">avec VALUE="Dupont" pour que Dupont soit affiché.

Utilisation de plusieurs formulaires dans une seule page HTML

Il peut très bien y avoir plusieurs formulaires sur une même page HTML. L'exemple suivant représente une page munie de 2 formulaires : FORPremier et FORDeuxieme. J'ai fait exprès d'y installer dans chacun d'entre eux une même zone de texte qui a le même nom, pour illustrer le fait que c'est possible. L JavaScript qui suit le formulaire s'y retrouve très bien simplement en référençant une fois le premier formulaire, une fois le 2ème :

<BODY>
  <FORM NAME="FORPremier">
    <INPUT TYPE="TEXT" NAME="EDINom" VALUE="Dupont">
  </FORM>
  
  <FORM NAME="FORDeuxieme">
    <INPUT TYPE="TEXT" NAME="EDINom" VALUE="Martin">
  </FORM>

  
  <SCRIPT LANGUAGE="JavaScript">
    alert (FORPremier.EDINom.value) // Dupont
    
// document.FORPremier.EDINom.value aurait aussi fonctionné
    alert (FORDeuxieme.EDINom.value)
// Martin
  </SCRIPT>
</BODY>

Les fomulaires sont numérotés de 0 jusqu'au nombre de formulaires-1. La ligne suivante :

alert (document.forms[0].item("EDINom").value)

Aurait renvoyé Dupont.

Exemple plus complet, avec traitement quand on clique sur un bouton

Cet exemple crée un formulaire FORPreferenceSportive, qui contient 3 cases à cocher : Golf, Tennis et Billard. Un bouton nommé BDCGo, toujours dans ce formulaire, renvoie quand on clique dessus, à la function Traitement, qui va se contenter de dire "Vous aimez le billard", seulement si l'utilisateur à coché le bouton radio "Billard", sinon, rien ne se passe quand on clique. Les VALUE (Golf, Tennis, Billard) ne sont ici pas utilisées, puisque de toute façon, le libellé sera inscrit à côté de la case à cocher, et dans Traitement(), on accède seulement au numéro d'index des boutons radio. Par contre, le bouton doit avoir une value si on ne veut pas qu'il reste sans texte

<SCRIPT LANGUAGE="JavaScript">
  function Traitement()
    {
    if (FORPreferenceSportive.BTRSport[2].checked)
      {
      alert ("Vous aimez le Billard")
      }
    }

</SCRIPT>

<HTML>
  <HEAD></HEAD>
  <BODY>
    <FORM NAME="FORPreferenceSportive">
      <INPUT TYPE="RADIO" NAME="BTRSport" VALUE="Golf">Golf <BR>
// N°0
      <INPUT TYPE="RADIO" NAME="BTRSport" VALUE="Tennis">Tennis<BR>
//N°1
      <INPUT TYPE="RADIO" NAME="BTRSport" VALUE="Billard">Billard<BR>
//N°2
      <INPUT TYPE="BUTTON" NAME="BDCGo" VALUE="Go !" ONCLICK="JavaScript:Traitement()">
    </FORM>

  </BODY>
</HTML>

dfsd