Cours sur le langage HTML organisé par
Frédéric Jacquenod

V Les formulaires

• V.1 Présentation

  Nous avons vu dans les paragraphes précédents comment présenter les informations, comment structurer un document ...
  Mais mis à part le cas où le lecteur vous envoie un courrier électronique, vous n'avez pas la possibilité d'avoir une interaction avec ce dernier.
  Le langage HTML résoud ce problème en proposant des formulaires ou forms qui permettent de générer des zones de "dialogue" avec le lecteur.
  Ces zones ou champs peuvent être du texte, des listes, des cases à cocher, des zones de saisies d'informations ....
  Ces formulaires n'ont aucun intérêt si vous ne pouvez pas récupérer l'information fournie par le lecteur et ensuite la traiter. C'est pourquoi les formulaires nécessitent d'être associés à un programme.
  Par exemple pour intérroger une base de données, réaliser une enquête via le web, proposer toutes sortes de programmes avec l'interfaçage web (questionnaires, correcteur orthographique, dictionnaires ...).
  
  Dans ce paragraphe nous verrons uniquement les différentes formes de formulaires et comment les mettre en oeuvre. La partie programmation ou CGI (Common Gateway Interface) sera traitée dans un autre cours.
  
  Le principe des formulaires est le suivant :
  
  Vous créez un document dans lequel vous proposez des zones de saisies (boutons cliquables, listes, texte ...). Chaque zone est référencée par un mot clé. Une fois le formulaire rempli, le lecteur soumet ses réponses.
  Le formulaire transmet les informations au programme indiqué dans le formulaire sous forme :
  Mot_Clé1=information1&Mot_Clé2=information2 ...
  Ensuite, Il ne reste plus qu'à mettre en forme et traiter ces informations.
  
  Attention : Les caractères accentués, les ponctuations, les espaces ... sont transmis sous forme codée. Il est donc nécessaire de les remettre sous la bonne forme avant de traiter l'information.
  
  

• V.2 La balise FORM

  Elle indique que l'on va utiliser un formulaire. Les balises générant les boutons, zone de texte et autres éléments seront entre cette balise. Deux formulaires ne peuvent etre imbriqués.
  <FORM></FORM>
  
  Les options de cette balise sont :
  
  
  • ACTION
    
    Cette option indique l'URL de destination des données. Généralement cette URL sera l'adresse d'un programme. Cet attribut est obligatoire.
    ACTION="adresse"
    
    
  • METHOD
    
    Cette option indique la façon dont vont être transmises les données POST ou GET.
    METHOD="POST" ou METHOD="GET".
    La première envoie les données sans l'adresse indiquée dans l'option ACTION tandis que GET envoie aussi l'adresse.
    Cette option n'est pas obligatoire, par défaut GET sera positionné.
    
    
  • ENCTYPE
    
    Cette option indique le type MIME des données lorsque vous positionnez l'attribut METHOD="POST". Elle est optionnelle.
    
    
  
  Les zones de dialogue avec l'utilisateur sont définies en trois classes représentées par trois balises :
  INPUT, SELECT et TEXTAREA.
  Ces balises doivent se situer entre la balise FORM.
  
  

• V.3 La balise INPUT

  Les différents attributs de cette balise.
  
  
  • NAME
    
    Cet attribut est obligatoire. Il associe un nom de variable aux informations récupérées et les transmet au programme sous la forme nom_variable=valeur.
    Attention, excepté pour les cases à cocher et les boutons radio, le nom doit être unique dans le formulaire sinon il y aurait des confusions et des dysfonctionnements.
    NAME="nom_variable"
    
    
  • TYPE
    
    Cet attribut est obligatoire. Il permet de définir le type de la zone de saisie. Les valeurs possibles sont les suivantes :
    
    
    • CHECKBOX
      
      TYPE="CHECKBOX" permet la création de cases à cocher.
      Lorsque vous cochez une case, l'autre ne réagit pas.
      Les cases à cocher sont indépendantes les unes des autres.
      Première case
      Deuxième case
      Le source est le suivant
      
      <FORM ACTION="rien.pl">
      <INPUT NAME="case" TYPE="CHECKBOX">Première case
      <BR>
      <INPUT NAME="case" TYPE="CHECKBOX">Deuxième case
      </FORM>
      
      case est le nom de la variable qui référence les données.
      rien.pl est le programme qui recevra les données à traiter.
      exercice32
      
      
    • HIDDEN
      
      TYPE="HIDDEN" permet la création d'un élément de saisie non visible à l'écran mais son contenu sera transmis au programme.
      exercice33
      
      
    • IMAGE
      
      TYPE="IMAGE" permet la création d'une image cliquable comme nous l'avons vu au paragraphe IV. Les éléments transmis au programme sont alors les coordonnées x et y de la zone où a eu lieu le clique.
      Si la variable se nomme "zone", le programme recevra zone.x=coord_x et zone.y=coord_y.
      La syntaxe est la suivante :
      <INPUT TYPE="IMAGE" NAME="Nom" SRC="./Images/URL">
      exercice34
      
      
    • PASSWORD
      
      TYPE="PASSWORD" permet la création d'une zone de saisie dans laquelle les caractères tapés par l'utilisateur sont remplacés par des étoiles, offrant ainsi une plus grande confidentialité.
      Les données récupérées par le programme sont, elles, en clair.
      
      Entrez votre mot de passe
      Le source est le suivant
      
      

      <FORM ACTION="rien.pl">
      <INPUT NAME="pass" TYPE="PASSWORD"> Entrez votre mot de passe
      </FORM>

      pass est le nom de la variable qui référence les données.
      rien.pl est le programme qui recevra les données à traiter.
      exercice35
      
      
    • RADIO
      
      TYPE="RADIO" permet la création d'un élément de saisie sous la forme d'un bouton radio.
      Les boutons radio sont liés les uns aux autres au même nom de variable. Vous ne pouvez faire qu'un choix, lorsque vous cliquez sur l'un d'eux, qui prend la valeur oui ou on, les autres sont mis à non ou off.
      Vous pouvez proposer bien évidemment plus de deux choix.
      Oui
      Non
      Le source est le suivant
      
      

      <FORM ACTION="rien.pl">
      <INPUT NAME="radio1" TYPE="RADIO" VALUE="oui"> oui
      <INPUT NAME="radio1" TYPE="RADIO" VALUE="non"> non
      </FORM>

      
      radio1 est le nom de la variable qui référence les données.
      rien.pl est le programme qui recevra les données à traiter.
      L'attribut VALUE est obligatoire avec le type RADIO, il permet d'initialiser la valeur de l'élément de saisie.
      exercice36
      
      
    • RESET
      
      TYPE="RESET" permet lorsque l'utilisateur clique sur ce bouton de remplacer toutes les valeurs qu'il a saisies par les valeurs par défaut positionnées grâce à l'attribut VALUE.
      
      
      Saisie
      
      
      Remplacez le texte de cette zone et cliquez sur "Effacez", le texte par défaut sera remis.
      
      Le source est le suivant
      
      

      <FORM ACTION="rien.pl">
      <INPUT NAME="zone" TYPE="TEXT" VALUE="Valeur par défaut"> Saisie
      <INPUT TYPE="RESET" VALUE="Effacer">
      </FORM>

      zone est le nom de la variable qui référence les données.
      rien.pl est le programme qui recevra les données à traiter.
      VALUE référence le texte par défaut de la zone de saisie.
      exercice37
      
      
    • SUBMIT
      
      TYPE="SUBMIT" permet de créer un bouton qui, lorsque l'utilisateur clique dessus, déclenche l'envoi des données au programme référencé dans le champ ACTION.
      
      Le source est le suivant
      
      

      <FORM ACTION="rien.pl">
      <INPUT TYPE="SUBMIT" VALUE="Soumettre">
      </FORM>

      Si vous cliquez sur le bouton, vous obtiendrez un message d'erreur. En effet le programme rien.pl n'existe pas.
      
      
    • TEXT
      
      TYPE="TEXT" crée une zone de saisie de texte dont la taille est définie par l'attribut SIZE.
      Cet attribut ne définit pas la taille du texte entré mais uniquement la zone dans laquelle il est entré.
      
      
      
      Le source est le suivant
      
      

      <FORM ACTION="rien.pl">
      <INPUT NAME="texte" TYPE="TEXT" SIZE="20" VALUE="Le texte">
      <INPUT TYPE="RESET" VALUE="Effacez">
      </FORM>

      
      
      exercice38
  • ALIGN
    
    Cet attribut n'est utilisé qu'avec l'attribut TYPE="IMAGE" et permet de positionner l'image par raport au texte.
    Les options de cet attribut sont TOP, MIDDLE et BOTTOM.
    
    
  • CHECKED
    
    Cet attribut est optionnel et ne s'applique qu'aux TYPE="CHECKBOX" et TYPE="RADIO" et permet d'activer une case à cocher ou un bouton radio.
    Attention : vous ne pouvez activer qu'une case ou bouton par liste (référencé par la même variable).
    Dans cet exemple la case "oui" est cochée par défaut.
    Oui
    Non
    Le source est le suivant
    
    

    <FORM ACTION="rien.pl">
    <INPUT NAME="radio1" TYPE="RADIO" CHECKED VALUE="oui"> oui
    <INPUT NAME="radio1" TYPE="RADIO" VALUE="non"> non
    </FORM>

    
    
    exercice39
    
  • MAXLENGTH
    
    MAXLENGTH="chiffre"
    Cet attribut permet de définir la longueur du buffer texte utilisé dans une zone de saisie de TYPE texte (TEXT, PASSWORD).
    
    Si vous essayez dans cet exemple d'entrer un texte de plus de 10 caractères, vous entendrez un bip et les caractères au delà de 10 ne seront pas pris en compte.
    
    Le source est le suivant
    
    

    <FORM ACTION="rien.pl">
    <INPUT NAME="zone" TYPE="TEXT" MAXLENGTH="10" SIZE="10" VALUE="0123456789">
    </FORM>

    MAXLENGTH définit le nombre de caractères maximum pouvant être saisi
    SIZE définit la taille de la zone de saisie
    Dans notre exemple les deux attributs ont la même taille mais cela n'est pas obligatoire.
    exercice40
    
    
  • SIZE
    
    SIZE="chiffre"
    Permet d'indiquer la longueur de la zone de saisie. Voir l'exemple précédent.
    
    
  • SRC
    
    SRC="./Images/adresse"
    N'est utilisable qu'avec le TYPE="IMAGE" et permet d'indiquer le lieu où se trouve l'image à insérer dans le formulaire.
    
    
  • VALUE
    
    VALUE="valeur par défaut"
    Cet attribut n'est obligatoire qu'avec le TYPE="RADIO".
    Il permet de positionner dans la zone de saisie un valeur par défaut.
    
    Le source est le suivant
    
    

    <FORM ACTION="rien.pl">
    <INPUT NAME="zone" TYPE="TEXT" MAXLENGTH="10" SIZE="10" VALUE="0123456789">
    </FORM>

    La valeur par défaut qui s'affiche est "0123456789"
    
    
  
  
  
  
  

  Frédéric Jacquenod