Les formulaires. |
Pourquoi un formulaire ? Les formulaires permettent avant tout de faire réagir votre visiteur, de l'inviter à laisser ses impressions, ses commentaires. Vous pouvez même gérer votre propre livre d'or, Alors jouez l'interactivité !!. La création des formulaires se réalise grâce à plusieurs champs dans lesquels le visiteur entre une information ou opte pour un choix. L'information est ensuite envoyée à l'aide de scripts sur le serveur qui vous héberge puis renvoyée dans la plupart des cas sur l'adresse électronique de votre choix. La balise <FORM>. La balise <FORM> vient en début de votre formulaire, (la balise </FORM> ferme votre formulaire) elle possède 3 attributs.
Exemple pour le serveur d'hébergement Multimania. <FORM METHOD=GET ACTION="/cgi-bin/mailer"> Exemple pour un formulaire classique sans l'aide de script CGI. <FORM ACTION="mailto:html@multimania.com" METHOD=POST ENCTYPE="text/plain"> Champs de saisie. La balise <INPUT TYPE="text" ... > permet à l'utilisateur de saisir une ligne de texte. Elle a les attributs suivants :
A noter que la valeur TYPE peut avoir plusieurs valeur dont :
<INPUT TYPE="text" NAME="URLSITE" SIZE=40 MAXLENGTH=40 VALUE="http://"> Boîte de texte multiligne. C'est la balise <TEXTAREA> qui est utilisée pour réaliser une boîte de texte multiligne. Cette balise est surtout choisie pour permettre aux visiteurs de votre site de laisser un commentaire ou de taper un texte quelconque. Ses attributs sont :
Exemple d'une boîte de saisie et son code source. <TEXTAREA NAME="COMMENTAIRE" COLS=30 ROWS=4> Tapez votre commentaire </TEXTAREA> Listes de choix. La balise <SELECT> présente une liste de propositions soit sous forme de liste déroulante (1 seul choix possible), soit sous forme de menu (plusieurs choix possibles), elle doit être couplée avec la balise <OPTION> pour définir les choix. Voici ses attributs :
<SELECT NAME="LISTE"> <OPTION VALUE="Choix 1">Choix 1 <OPTION VALUE="Choix 2">Choix 2 <OPTION VALUE="Choix 3">Choix 3 </SELECT> Exemple d'une liste sous forme de menu et son code source. <SELECT NAME="LISTE" SIZE=3 MULTIPLE> <OPTION VALUE="Choix 1">Choix 1 <OPTION VALUE="Choix 2">Choix 2 <OPTION VALUE="Choix 3">Choix 3 </SELECT> Cases à cocher et Boutons radio. La Balise <INPUT> que l'on a vu au-dessus permet aussi de représenter une liste de cases à cocher (plusieurs choix possibles) ou une liste dite "bouton radio" (1 seul choix possible), il suffit pour cela de lui spécifier l'attribut TYPE="checkbox" (cases à cocher) ou TYPE="radio" (bouton radio). Les autres attributs sont les suivants :
Cette liste se positionne verticalement du fait que la balise <BR> a été insérée après chaque choix. <INPUT TYPE="checkbox" NAME="CHOIX" VALUE="CASE 1"> CASE 1<BR> <INPUT TYPE="checkbox" NAME="CHOIX" VALUE="CASE 2"> CASE 2<BR> <INPUT TYPE="checkbox" NAME="CHOIX" VALUE="CASE 3"> CASE 3<BR> Exemple d'une liste à boutons radio et son code source. A noter que le choix 3 est coché par défaut. <INPUT TYPE="radio" NAME="CHOX" VALUE="Bouton 1"> Bouton 1 <INPUT TYPE="radio" NAME="CHOX" VALUE="Bouton 2"> Bouton 2 <INPUT TYPE="radio" NAME="CHOX" VALUE="Bouton 3" CHECKED> Bouton 3 Fichier attaché. Lors d'un envoi de formulaire, vous pouvez proposer au visiteur de vous faire parvenir un fichier attaché (ou pièce jointe), il suffit pour cela d'indiquer la valeur file à l'attribut TYPE. Exemple pour un choix de fichier attaché. <INPUT TYPE="file" VALUE="fichier"> Soumettre son formulaire. La soumission (envoyer) ou la remise à zéro (recommencer) d'un formulaire se fait une fois de plus avec la balise <INPUT> TYPE ayant ici deux autres valeurs :
Exemple des 2 boutons et leur code source. <INPUT TYPE="submit" VALUE="Envoyer"> <INPUT TYPE="reset" VALUE="Recommencer"> Personnalisez vos boutons. Vous pouvez créer votre propre bouton d'envoi et de remise à zéro, ce qui mettra une touche personnelle à votre formulaire. Pour obtenir un bouton personnalisé de remise à zéro (reset), il suffit tout simplement d'encadrer l'image de votre bouton (avec la balise <IMG> ex : <IMG SRC=" bouton.gif">) entre les balises <A HREF="votrepageformulaire.htm"> et </A> ce qui aura pour effet de recharger votre page html de formulaire et donc d'annuler tous les choix du visiteur. Exemple d'un bouton "reset" personnalisé et son code source. <A HREF="formul2.htm"> <IMG SRC="gif/bannule.gif" BORDER=0 WIDTH=75 HEIGHT=27 ALT="Annuler"></A> En ce qui concerne le bouton d'envoi, il faut une fois de plus passer par la balise INPUT avec l'attribut TYPE="image". Exemple d'un bouton d'envoi personnalisé et son code source. <INPUT TYPE="image" SRC="gif/benvoie.gif" BORDER=0 WIDTH=75 HEIGHT=27 ALT="Envoyer"> Inclure des données cachées. Si vous souhaitez envoyer certaines données au script du serveur chargé de traiter votre formulaire, vous devez utiliser la balise <INPUT> avec l'attribut TYPE="hidden". Prenez contact avec le service qui vous héberge afin d'obtenir les différentes valeurs à indiquer avec la balise <INPUT> Exemple avec le script CGI mailer qui s'occupe de traiter les formulaires sur Multimania. <INPUT TYPE="hidden" NAME="TO" VALUE="html@multimania.com"> Cette valeur indique sur quelle adresse électronique le formulaire sera envoyé. <INPUT TYPE="hidden" NAME="FROM" VALUE="html@multimania.com"> Cette valeur indique la provenance du formulaire. <INPUT TYPE="hidden" NAME="SUBJECT" VALUE="FORMULAIRE"> Cette valeur indique le nom du formulaire (le sujet du courrier), utile si vous avez plusieurs formulaires, cela permet de trier son courrier. <INPUT TYPE="hidden" NAME="GOTOURL" VALUE="http://www.multimania.com/html/reponse1.htm"> Cette valeur indique l'URL complète de la page html à afficher après l'envoi du formulaire. Mise en forme des formulaires. Il y a mille et une façons de concevoir un formulaire, mais sachez avant tout que plus il sera clair et lisible, plus il sera complété par vos visiteurs. Pour cela vous pouvez opter pour des tableaux, des listes à puces, (pour les cases à cocher notamment), des listes de définition, et bien sur des balises de formatages et d'alignements de texte. Exemple de formulaire. Voici un exemple concret de formulaire ainsi que le code source. <FORM ACTION="mailto:email@adresse.com" METHOD=POST ENCTYPE="text/plain"> Votre E-Mail. <INPUT TYPE="text" NAME="EMAIL" SIZE=30 MAXLENGTH=40 VALUE="nom@provider.domaine"> <BR> <BR> Tapez ici votre commentaire. <TEXTAREA NAME="COMM" COLS=31 ROWS=4> Votre commentaire </TEXTAREA> <BR> <BR> <INPUT TYPE="submit" VALUE="Envoyer"> <INPUT TYPE="reset" VALUE="Annuler"> </FORM> |