|

Formulaires (page1) : Balises

Balises

Les éléments de construction d'un formulaire Web (champs de saisie, boutons radio, cases à cocher, menus déroulants...) sont ce que l'on appelle communément, en programmation d'interfaces utilisateurs graphiques (GUI), des "widgets" (windows gadgets).

• Début du formulaire :

  <form method="POST" action="URL script CGI" {target="target name"}{enctype="type encodage"} >
  

  (avec l'attribut TARGET, on peut définir le frame ou une nouvelle fenêtre de navigateur dans lequel le résultat du formulaire doit s'afficher)
  
  - Groupe de champs, permet de regrouper tous les champs :

  <fieldset>
  

  - Legende, permet de nommer un formulaire ou un groupe de champs :

  <legend>Nom du formulaire</legend>
  

• Données du formulaire:
  - Champ texte :

  <input type="TEXT" name="nom champ" size="nb.car." maxlength="nb.max.car."
  value="val.prédéf.">
  

  - Champ texte dont le contenu entré sera masqué par des caractères " * " :

  <input type="PASSWORD" name="nom champ" size="nb.car." maxlength="nb.max.car."
  value="val.prédéf.">
  

  - Champ de sélection (avec bouton "Browse...") et d'envoi au serveur d'un fichier local (c-à-d. situé sur machine du navigateur) :

  <input type="FILE" name="nom champ" value="path et nom initial fichier">
  

  - Elément qui est transmis au serveur mais qui est invisible au navigateur :

  <input type="HIDDEN" name="nom champ" value="texte">
  

  - Bouton radio :

  <input type="RADIO" name="nom champ" value="valeur retournée" {checked="checked"}> label
  

  - Case à cocher :

  <input type="CHECKBOX" name="nom champ" value="valeur retournée" {checked="checked"}> label
  

  - Pour zone de texte de plusieurs lignes :

  <textarea name="nom champ" cols="nb.col." rows="nb.lignes" wrap="PHYSICAL,VIRTUAL"> 
  texte par défaut
  </textarea>
  

  (avec VIRTUAL, pas d'ascenseur horizontal : le texte passe automatiquement à la ligne)
  
  - Pour un menu :

  <select name="nom champ" size="nb.articles" {multiple="multiple"}>
    <option {selected="selected"}>
    article menu
    ......
  </select>
  

• Boutons du formulaire :
  - Bouton de soumission :

  <input type="SUBMIT" value="nom bouton">
  

  - Bouton de reset (remise des champs à leurs valeurs initiales) :

  <input type="RESET" value="nom bouton">
  

  - Bouton personalisable, utilisable pour déclencher fonction JavaScript :

  <input type="BUTTON" value="nom bouton" name="nom passé au serveur">
  

  - Bouton personalisable, avec insersion d'image :

  <button type="BUTTON" name"nom passé au serveur">
  <img src="bouton.gif"> Bouton intégrant une image... 
  </button>
  

  - Bouton image :

  <input type="IMAGE" name="nom" src="URL image" align="TOP,MIDDLE,BOTTOM">
  

• Fin du formulaire :

  </fieldset>
  

  </form>
  

Validation des données d'un formulaire

Pour vérifier la pertinence des données envoyées par l'utilisateur à un serveur via un formulaire (s'assurer que tous les champs nécessaires soient bien remplis, que les types de données soient corrects...), on peut envisager 2 techniques (et il faudrait même les utiliser simultanément) :

• Validation coté client, par des fonctions JavaScript intégrées à la page-formulaire : approche qui convient pour des contrôles simples (l'utilisateur pouvant contourner ces contrôles en fabriquant une requête falsifiée avec un effort de programmation minimum)
• Validation coté serveur, par le script CGI ou le programme PHP auquel ce formulaire est soumis, et renvoi du formulaire à l'utilisateur en cas de données erronées (solution la plus sûre, mais plus lourde car impliquant des allers et retours entre le client et le serveur)

|