Exercice HTML : Formulaires

Thème

Réalisation de formulaires HTML. Mais l'objectif n'est ici pas d'apprendre à réaliser le script CGI ou le programme PHP ou ASP qui, coté serveur Web, prendra en charge les données envoyées par ce formulaire (pour cela, voir le cours "Technologies Web" du soussigné).

Remarque : les formulaires HTML sont supportés à partir des versions de browsers Netscape 1 et IExplorer 1

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). Remarques sur la METHOD et le type d'encodage ENCTYPE :

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 vaudrait même les utiliser simultanément) :

Quelques astuces JavaScript en relation avec les formulaires

1) Pour automatiquement placer le curseur dans un champ donné d'un formulaire comportant plusieurs champs, utiliser la fonction JavaScript focus() sur ce champ.

Utiliser par exemple ceci au niveau de la déclaration <BODY>:
   <BODY onload="document.forms.form.champ.focus()">
ou bien le code JavaScript suivant placé après la déclaration du champ :
   <SCRIPT LANGUAGE="JavaScript">
     <!--
       document.forms.form.champ.focus();
     // -->
   </SCRIPT>
form est le nom du formulaire, et champ est le nom du champ. Mais on pourrait utiliser plutôt document.getElementById('idchamp').focus() (au lieu de document.forms.form.champ.focus()) si l'on ajoute l'attribut ID="idchamp" dans la balise de définition du champ.
    Numéro
    Nom    

2) Pour automatiquement sélectionner ou effacer le contenu d'un champ lorsque l'on clique dedans, utiliser respectivement les évènements onFocus="this.select()" et onFocus="this.value=''"

Exemple de sélectionnement du contenu:
   <INPUT TYPE="TEXT" NAME="nom" VALUE="entrez votre nom"
          onFocus="this.select()">
Nom
Exemple d'effacement du contenu:
   <INPUT TYPE="TEXT" NAME="nom" VALUE="entrez votre nom"
          onFocus="this.value=''">
Nom

Définition de l'ordre de "tabulation" des champs d'un formulaire

Pour définit l'ordre de sélectionnement des champs d'un formulaire lorsque l'on utilise la touche <tab>, on fera usage de l'attribut TABINDEX="numéro".

Exemple (sélectionnez le 1er champ, puis frappez plusieurs fois <tab>) :

Usage de CSS en relation avec les formulaires

Les possibilités liées aux feuilles de styles CSS sont innombrables. Examinez l'exemple ci-dessous :

  <STYLE TYPE="text/css">
   <!--
    .etiquette    { font-size: smaller; font-weight: bold; 
                    color: #ffffff; background: #999999; cursor: pointer; }
    .champ        { background: #eeeeee; border: solid 1px #ffffff; 
                    border-top-color: #888888; border-left-color: #888888; }
    .champ:hover,
    .champ:focus  { border: 1px solid #6666ff; background: #ffffff; }
    .bouton       { color: #000099; font-weight: bold; 
                    background: #bbbbff; border: solid 2px #6666ff; 
                    border-top-color: #ffffff; border-left-color: #ffffff; }
    .bouton:hover { color: #6666ff; background: #ccccff; }
    .bouton:focus { background: #bbbbff; border: solid 2px #ffffff; 
                    border-top-color: #6666ff; border-left-color: #6666ff; }
    -->
  </STYLE>
  <FORM>
    <LABEL FOR="idnom" CLASS=etiquette>Nom</LABEL>
      <INPUT TYPE="TEXT" NAME="nom" ID="idnom" CLASS=champ><P>
    <LABEL FOR="idprenom" CLASS=etiquette>Prénom</LABEL>
      <INPUT TYPE="TEXT" NAME="prenom" ID="idprenom" CLASS=champ><P>
    <LABEL FOR="idaccept" CLASS=etiquette>J'accepte les conditions</LABEL>
      <INPUT TYPE="CHECKBOX" NAME="accepted" ID="idaccept">
    <INPUT TYPE="SUBMIT" CLASS="bouton" VALUE="   Envoyer   ">
  </FORM>
   

Explications :

  1. La balise <LABEL> permet de définir des étiquettes de champ qui soient cliquables ; ainsi, dans l'exemple ci-dessus : A l'aide de la classe CSS ".etiquette" on attire ici l'attention de l'utilisateur sur ces labels :
  2. Les classes CSS ".champ", ".champ:focus" et ".champ:hover" sont utilisées ici pour changer l'apparence des champs (encadrement, couleur de fond...) selon que le focus respectivement "n'est pas" ou "est" dans le champ, ou que le curseur "survole" le champ. De même les classes CSS ".bouton", ".bouton:hover" et ".bouton:focus" sont utilisées ici pour changer l'apparence du bouton "Soumettre" (selon que le focus est sur le bouton ou que l'on clique dessus). Notez cependant que tout cela fonctionne parfaitement sous Mozilla, mais pas sous le navigateur IE 6 (qui ne supporte pas les pseudo-classe ":focus" et ":hover"), navigateur pour lequel il faudrait faire un peu de JavaScript pour obtenir le même effet.

Références

Donnée de l'exercice

Réaliser le formulaire ci-dessous :

Client
Civilité Mademoiselle Madame Monsieur (boutons radio => s'excluant mutuellement)
Nom / Prénom
Adresse
No postal / Localité (limiter entrée No à 4 car.) (valeur prédéfinie)
Pays (menu avec présélectionnement Suisse)
Plateforme(s) Windows      Macintosh      Unix      (cases à cocher => plusieurs choix possibles)
Applications(s) (plusieurs choix possibles avec <ctrl-clic> ou <maj-clic>)
    

Corrigé de l'exercice


<FORM METHOD="GET" ACTION="nom_de_votre_page.html">

<FIELDSET STYLE="background: #FFFFDD ;">
<LEGEND STYLE="background: #FFFF88 ;"><B>Client</B></LEGEND>

<CENTER><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5" WIDTH="95%">

<TR>
  <TD WIDTH="20%"><B>Civilité</B>
  <TD WIDTH="70%">
	<INPUT TYPE=RADIO NAME=civilite VALUE="Mademoiselle">Mademoiselle
  	<INPUT TYPE=RADIO NAME=civilite VALUE="Madame" CHECKED>Madame
	<INPUT TYPE=RADIO NAME=civilite VALUE="Monsieur">Monsieur

<TR>
  <TD><B>Nom / Prénom</B>
  <TD>	<INPUT TYPE=TEXT NAME=nom SIZE=50 MAXLENGTH=80>

<TR>
  <TD><B>Adresse</B>
  <TD>	<TEXTAREA NAME=adresse COLS=50 ROWS=2 WRAP=PHYSICAL>Rue No
Boîte postale</TEXTAREA>
  
<TR>
  <TD><B>No postal / Localité</B>
  <TD>	<INPUT TYPE=TEXT NAME=no_postal Size=5 MAXLENGTH=4>
	<INPUT TYPE=TEXT NAME=localite SIZE=20 MAXLENGTH=80 VALUE="Lausanne">

<TR>
  <TD><B>Pays</B>
  <TD>	<SELECT NAME=pays>
 	  <OPTION>France
	  <OPTION>Italie
	  <OPTION SELECTED>Suisse
	</SELECT>

<TR>
  <TD><B>Plateforme(s)</B>
  <TD>	<INPUT TYPE=CHECKBOX NAME=materiel VALUE="Windows" CHECKED>Windows     
	<INPUT TYPE=CHECKBOX NAME=materiel VALUE="Mac" CHECKED>Macintosh     
	<INPUT TYPE=CHECKBOX NAME=materiel VALUE="Unix">Unix     

<TR>
  <TD><B>Applications(s)</B>
  <TD>	<SELECT NAME=applications SIZE=5 MULTIPLE>
	  <OPTION SELECTED>Bureautique
	  <OPTION>DAO
	  <OPTION>Statistiques
	  <OPTION>SGBD
	  <OPTION SELECTED>Internet
	</SELECT>

</TABLE></CENTER>

</FIELDSET>

<CENTER><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="10" WIDTH="95%">
<TR><TH>
<INPUT TYPE=SUBMIT VALUE="  Soumettre formulaire  ">    <INPUT TYPE=RESET VALUE=" Effacer ">
</TABLE></CENTER>

</FORM>



Exercices HTML © J.-D. Bonjour / ENAC-IT1, EPFL / Révision 7.10.2004