[Tableaux] [Images et tableaux] [CuteFTP 1.8] [Nuancier]
Les formulaires Comment ça marche ? A quoi ça sert ? Vous pouvez, par exemple, vouloir mettre en place un sondage avec des questions qui vous permettront d'orienter vos réalisations en tenant compte de la demande des visiteurs. Eléments indispensables : Une adresse E-mail, bien sûr pour recevoir les réponses. :o) Plus sérieusement : le tag <FORM> qui débute le formulaire et sa fin </FORM> Les mots clés ACTION et METHOD. Action sert à définir le protocole (http ou mailto), le nom du serveur et son chemin. Nous aurons par exemple une syntaxe de ce genre : <FORM ACTION="http://www.chose.fr" METHOD="POST"> La méthode (post ou get), interprétera le formulaire de facon un peu différente, mais pas fondamentalement. "Post" n'utilise pas de code EOF, alors que "Get" a une longueur définie. Notons que si vous transitez par un fournisseur d'accès comme Infonie, on vous demandera d'ajouter après le domaine (fr,be,)..le chemin qui menera au programme CGI qui gère les mails. [/cgi-bin/cgi_mail] Et ensuite ? : Vous devrez sur la ligne suivante indiquer à quel endroit doit se rendre la réponse contenue dans votre formulaire. (généralement, votre adresse e-mail) ! : Une ligne de ce genre fait l'affaire : <input type="hidden" name="email" value="dupon@chose.fr"> Ce qui veut dire en clair, que d'une facon transparente (hidden), le message (email) ira à l'adresse indiquée (value). Comment organiser le formulaire ? En fonction de ce que vous souhaitez poser comme questions et donc des réponses que vous attendez, vous avez le choix entre plusieurs possibilités. Le champ de saisie simple (1 ligne) : A l'aide de <INPUT> vous obtiendrez une zone de saisie comme celle-ci : Ce champ de saisie a une taille (size) de 10 caractères avec un maximum (maxlength) de 15 caractères. Vous pouvez le vérifier en saisissant à l'intérieur. La syntaxe utilisée : <INPUT NAME="nom" SIZE=10 MAXLENGTH=15> Vous pouvez (devez) évidemment commenter les champs de saisie et les boutons pour que celui qui utilise le formulaire sache de quoi il s'agît... Votre nom :, est beaucoup plus parlant qu'une zone de saisie anonyme... Le champ de saisie : En utilisant les tags <TEXTAREA> et </TEXTAREA> La syntaxe : <TEXTAREA NAME="saisie" ROWS=10 COLS=40></TEXTAREA> ROWS est le nombre de lignes COLS, le nombre de caractères en largeur (Dimension apparente du champ de saisie). Boutons et cases Les boutons "radio": Les boutons radio sont ces petites cases rondes qui servent à choisir une option. Un exemple : Votre choix ? oui non La syntaxe pour obtenir ceci : (je passe sur le texte de la question) <INPUT TYPE="RADIO" NAME="choix" VALUE="oui"> L'option "non" est obtenue avec une ligne similaire où seule change value="non", soit : <INPUT TYPE="RADIO" NAME="choix" VALUE="non"> Il faut pour que les deux boutons soient opérationnels, que le nom (name) soit identique pour la même option. Vous obtenez sinon, des boutons radio farceurs comme les deux qui se trouvent en dessous oui non oui non Les deux de gauche vous permettent de répondre à la fois "oui" et "non", ce qui est une réponse illogique. Ceux de droite ne vous permettent ni de répondre "oui", ni "non", ce qui n'est pas le but de ce jeu-ci ! Pourquoi ces "bugs" ? Dans le premier cas, le nom (name=) est différent (choix et choi), il n'y a donc plus de comparaison possible puisque la question n'est pas la même. Dans le deuxième cas le nom a été omis (volontairement ici), il n'y a donc pas de question et la réponse est impossible à donner ! Dans la même optique, si vous utilisez plus d'une paire (ou d'un ensemble) de boutons radio, il vous faudra penser à utiliser un nom (name) différent pour chaque paire ou ensemble (name=choix1, name=choix2, etc). Vous obtiendrez sinon, des réponses qui "disparaitront" au fur et à mesure des clics de souris, comme ci-dessous (Essayez donc de répondre aux 5 questions) ! : Réponse 1 : oui non Réponse 2 : oui non Réponse 3 : oui non Réponse 4 : oui non Réponse 5 : oui non Les cases à cocher : Les cases à cocher vous permettent un choix de réponses multiples. Exemples : Quelles loisirs pratiquez-vous : (Une telle question peut amener plusieurs réponses). La pêche La chasse Le ski Le tennis La photo La belote La syntaxe (de la première ligne):<INPUT TYPE="checkbox" NAME="loisir" VALUE="peche"> La pêche<INPUT TYPE="checkbox" NAME="loisir" VALUE="chasse"> La chasse Le meilleur pour la fin Il reste à voir comment effacer le formulaire en cas d'erreur et comment l'envoyer à son destinataire. Nous utilisons pour cela les mots-clé "RESET" et "SUBMIT". Un bouton pour effacer et un pour envoyer : Inutile d'essayer ces deux la, ils sont inopérants ! La syntaxe pour obtenir ces boutons : <INPUT TYPE="RESET" VALUE="effacer"> <INPUT TYPE="SUBMIT" VALUE="envoyer"> Notons que les boutons prendront la dimension nécessaire pour contenir le texte. Exemple : Vous conviendrez que ce genre de bouton est un peu encombrant ! Ne tombez pas dans l'excès inverse, du genre : ou Les exemples précédents sont, (je l'espère) compréhensibles et vous aideront (je le souhaite) à savoir "fabriquer" un formulaire. J'oubliais presque : Pour tester un formulaire une fois terminé, il vous faudra "charger" le fichier sur le serveur, remplir et envoyer (submit) le tout. Si le résultat parvient dans votre e-mail, c'est gagné ! Résumé formulaire : <FORM ACTION="[http],[mailto]://www.serveur.domaine[/cgi-bin/...] METHOD="[POST],[GET]"> <input type="hidden" name="email" value="dupon@chose.fr"> [Les éléments de votre formulaire] <INPUT TYPE="RESET" VALUE="effacer"> <INPUT TYPE="SUBMIT" VALUE="envoyer"> </FORM> Si vous affichez la source de la page "Images et tableaux", vous trouverez à la fin, un petit exemple de formulaire (encadré par les remarques <!-- DEBUT FORMULAIRE... ---> et <!-- FIN FORMULAIRE... --->).
Résumé formulaire : <FORM ACTION="[http],[mailto]://www.serveur.domaine[/cgi-bin/...] METHOD="[POST],[GET]"> <input type="hidden" name="email" value="dupon@chose.fr"> [Les éléments de votre formulaire] <INPUT TYPE="RESET" VALUE="effacer"> <INPUT TYPE="SUBMIT" VALUE="envoyer"> </FORM>
Si vous affichez la source de la page "Images et tableaux", vous trouverez à la fin, un petit exemple de formulaire (encadré par les remarques <!-- DEBUT FORMULAIRE... ---> et <!-- FIN FORMULAIRE... --->).
