Encadrer le formulaire entre <form> et </form>

• Nommer le formulaire est facultatif mais peut se révéler pratique pour le distinguer d'un autre formulaire présent sur la même page ou pour y faire référence par ailleurs:

   <form name="nom_du_formulaire"> ………. </form>

 

• Préciser l'URL du document qui recevra les données saisies sur le formulaire. Par défaut, c'est le document en cours. On peut également l'expédier par mail.

   <form name=nom_du_formulaire action="mailto:nom@fournisseur.com"> ………. </form>

 

• Indiquer la méthode utilisée pour l'envoi: soit POST, soit GET. Le premier pour envoyer dans l'en-tête html. Le second dans l'url. Il suffira d'ajouter le nom des champs après l'adresse du document (séparer d'un point d'interrogation). Par exemple:   http://monsite.com/monscript.xxx?var1=valeur&var2=valeur…

   <form method="post"> ………. </form>

 

• Target (facultatif): sert à indiquer la fenêtre (frame) dans laquelle s'affichera le document gérant le résultat du formulaire. Les options sont classiques (_top  _blank  _self  etc)

   <form target="principal"> ………. </form>

 

• Format des données: ENCTYPE sert à spécifier le format des données envoyées quand le protocole n'impose pas de format précis.

   <form enctype="text/plain"> ………. </form>

 

 

Plusieurs types de cases

• Une case à cocher:

               <input type="checkbox">

   * Lui attribuer une valeur si la case est cochée:   <input type="checkbox" value="texte_libre">

   * Dénommer la case ou la série e cases (optionnel):   

                                                                           <input type="checkbox" name="premiere_serie_de_cases">

   * Cocher la case par défaut dès le chargement de la page (optionnel). Plusieurs cases peuvent être cochées dans une même série ayant en commun le même nom.

                                                                           <input type="checkbox" checked>

 

• Un bouton radio:

               <input type="radio" value="texte_libre" name="premiere_serie_de_boutons"  checked>

   * Comme précédemment, on peut attribuer un nom à une série de boutons, leur attribuer individuellement une valeur si l'un d'entre eux est coché, indiquer le bouton coché par défaut (un seul à la fois dans le cas particulier des boutons radio).

 

• Un champ texte d'une ligne seulement

               <input type="text">

   * Nommer la case permettra d'en manipuler aisément le contenu:        

               <input type="text" name="nom_de_cette_case_sans_doublon">

   * Afficher un contenu par défaut (optionnel), que le visiteur pourra remplacer:

               <input type="text" name="nom_de_cette_case_sans_doublon" value="texte libre par défaut">

   * Préciser la taille d'affichage et la longueur maximale de saisie autorisée (les deux longueurs sont indépendantes):

               <input type="text" name="nom_de_cette_case_sans_doublon" size="20" maxlength="35">

 

• Une liste de choix

   * La liste des choix sera encadrée par <SELECT>  … </SELECT>

               - Un (par défaut) ou plusieurs choix (optionnel) peuvent être sélectionnés par le visiteur :

                           <SELECT multiple>

               - La liste de choix peut recevoir un nom, utile pour en manipuler ultérieurement la valeur:

                           <SELECT name="nom_de_cette_liste">

               - le nombre de lignes apparentes sera éventuellement précisé (par défaut 1):

                           <SELECT size=3>

   * Chaque ligne d'option sera ensuite définie par une balise <OPTION>

               - qui recevra ligne après ligne autant de valeurs que de choix proposés au visiteur:

                        <OPTION value="les chiens ont deux pattes">

                        <OPTION value="les chiens ont quatre pattes">

 

• Une zone de saisie multilignes

   * Définie entre <TEXTAREA> et </TEXTAREA>

   * On peut lui attribuer un nom (facultatif): <TEXTAREA name="nom_de_votre_choix">

   * Il suffira d'en indiquer la taille (nombre de caractères en colonne et nombre de lignes):

                           <TEXTAREA col="24" rows="50">

   * Une barre de défilement sera insérée automatiquement à droite lorsque le contenu dépassera le contenant.

 

• La saisie d'un mot de passe

   * Ce champ est déterminé par: <input type="password">

     qui affichera une ligne de saisie ayant la particularité de cacher les caractères par des astérisques.

   * Les paramètres sont les mêmes que pour le champ texte, à savoir:

               <input type="password" name="nom_de_cette_case" size="20" maxlength="35">

 

• Les champs cachés

   * Ils ne s'afficheront pas à l'écran, mais seront envoyés avec le reste du formulaire. Il faudra donc leur attribuer vous-même une valeur (par exemple, la page d'où le formulaire vous est adressé, ou toute autre information utile au webmestre, comme des informations saisies précédemment etc).

   * Il suffit d'insérer: <input type="hidden" value="le libellé de votre choix" name="nom_de_ce_champ">

 

• Sélectionner un fichier

   * Permet l'envoi par le visiteur d'un fichier depuis son disque dur: <input type="file">

   Le fichier concerné sera adressé en pièce jointe au mail, en même temps que le contenu du formulaire.

 

 

LES BOUTONS EN FIN DE FORMULAIRE

• Effacer les saisies déjà effectuées et recommencer (les valeurs par défaut seront restaurées):

   <input type="reset" value="recommencer" >

• Envoyer le contenu du formulaire (lance l'action définie au sein de la balise FORM, sous l'intitulé ACTION). Le résultat s'appuiera sur des moyens hébergés côté serveur (CGI, PHP, ASP etc), sauf s'il s'agit de l'envoi par mail:

   <input type="submit" value="valider" >

• Pour échapper au sempiternel bouton grisâtre, vous pouvez préférer utiliser une image gif ou jpg en guise de bouton:           <input type="image" src="url_du_fichier_image" border=0 width=80 height=30 value="reset">

               <input type="image" src="url_du_fichier_image" border=0 width=80 height=30 value="submit">

 

 

ENCHAINER UNE PAGE A L'ISSUE DE L'ENVOI DU FORMULAIRE

• Cette option est généralement proposée par l'hébergeur, au moyen d'un script particulier. Il peut également être commandé par vos soins, comme nous vous l'indiquons ci-après:

   <input type="submit" value="valider" onClick="location.href='page_suivante.html'>

 

 

VERIFIER QUE LES CHAMPS INDISPENSABLES SONT REMPLIS

• Facultative, cette vérification simple évite que le nom de l'expéditeur ou son adresse ne soient oubliés. Pour cette vérification, on s'appuiera sur le nom donné aux champs.

• Ce script sera inséré avant la balise <FORM> debutant le formulaire

<SCRIPT LANGUAGE="JavaScript">

<!--- ce script ne sera pas interprété pas d'anciens navigateurs

function FValidateControl(control) {

  if (control.value=="") {

    alert("Le champ... "+control.name+" ... fait défaut. Merci de le compléter.")

    control.focus()

    return false }

  return true }

 

function FSubmitValidation(form) {

if (!FValidateControl(form.mail)) return false

if (!FValidateControl(form.nom)) return false

if (!FValidateControl(form.prenom)) return false

if (!FValidateControl(form.ville)) return false

   return true }

 

// fin du script -->

</SCRIPT>

 

• Il suffira d'appeler cette vérification depuis le formulaire:

<form method=post action="mailto:nom@fournisseur.com" enctype="text/plain" onsubmit="return FSubmitValidation(this)">

 

• D'autres scripts de vérification chercheront à contrôler le contenu même de certains champs. Le plus classique s'intéressera en particulier à la saisie d'une adresse e-mail conforme, du type: nom@fournisseur.extension

 

MISE EN PAGE DU FORMULAIRE

• Vous gagnerez à disposer les éléments du formulaire avec l'aide d'un tableau. Vous pourrez alors spécifier la couleur du fond pour faire ressortir les cases et autres éléments. N'oubliez pas de disposer les balises <FORM> et </FORM> à l'extérieur du tableau, pour éviter des sauts de ligne intempestifs.

• Le recours aux feuilles de styles est également un atout intéressant (pour de plus amples renseignements, visitez www.faitonsite.fr.st à la rubrique 'Scripts/Questionnaires') pour définir la police de caractères, la couleur des textes saisis et celle du fond de chaque champ etc.