Les formulaires (1)
Les formulaires permettent de récupérer des informations auprès de vos visiteurs. Vous pouvez ainsi créer une certaine interactivité avec vos visiteurs. Ils pourront vous envoyer des messages et vous pourrez mieux les connaître.
Il y a plusieurs moyens pour récupérer ces informations. Soit vous utilisez un script coté serveur (en CGI ou en PHP par exemple), ce script est interpreté sur un serveur chez votre hébergeur et pourra traiter les informations. Soit vous pouvez recevoir les infos directement sur votre adresse email au moyen d'un "mailto".
Je ne m'étendrai pas plus sur les scripts CGI dans ce tutorial (ce n'est pas le but). Cependant, vous pourrez trouvez des scripts et des explications en visitant les sites sur les CGI de notre annuaire en cliquant ICI. L'envoi des données via un mailto sera expliqué dans ce cours.
|
<HTML>
<HEAD> <TITLE>Formulaires</TITLE> </HEAD> <BODY> Voici un premier formulaire très simple : <BR><BR> <FORM action="mailto:vous@votre-domaine.com" method="post" enctype="text/plain"> Entrez votre nom : <INPUT type="text" name="nom"> <BR><BR> <INPUT type="submit" value="Envoyer" name="submit"> </FORM> <BR><BR><BR> Voici une version améliorée de notre premier formulaire : <BR><BR> <FORM action="mailto:vous@votre-domaine.com" method="post" enctype="text/plain"> <INPUT type="hidden" name="intro" value="Voici les infos récoltées via la formulaire : "> Entrez votre prénom : <INPUT type="text" name="prenom"> <BR> Entrez votre nom : <INPUT type="text" name="nom"> <BR><BR> <INPUT type="submit" value="Envoyer" name="submit"> <INPUT type="reset" value="Effacer les données" name="reset"> </FORM> <BR><BR><BR> Et pour finir cette première partie sur les formulaires, une troisième version de notre formulaire : <BR><BR> <FORM action="mailto:vous@votre-domaine.com" method="post" enctype="text/plain"> <INPUT type="hidden" name="intro" value="Voici les infos récoltées via la formulaire : "> Entrez votre prénom : <INPUT type="text" name="prenom"> <BR> Entrez votre nom : <INPUT type="text" name="nom" size=25> <BR> Entrez l'adresse de votre site : <INPUT type="text" name="url" size=40 value="http://"> <BR><BR> Entrez un mot de passe : <INPUT type="password" name="pass" size=10 maxlenght=10> <BR><BR> <INPUT type="submit" value="Envoyer" name="submit"> <INPUT type="reset" value="Effacer les données" name="reset"> </FORM> </BODY> </HTML> |
Ce qui donnera une page dont le contenu sera comme ceci :
Voici un premier formulaire très simple :
Voici une version améliorée de notre premier formulaire :
Et pour finir cette première partie sur les formulaires, une troisième version de notre formulaire :
Vous pouvez maintenant enregistrez votre page et la visualiser dans votre navigateur.
Explications des nouvelles balises utilisées :
- <form> et </form> : elles délimitent un formulaire. La présence de la balise de fin est primordial !
L'attribut "enctype" permet de spécifier le type de données. Vous n'avez pas besoin d'y toucher pour le moment.
L'attribut "action" désigne l'adresse du script qui va traiter les données. Par exemple avec un CGI, nous aurions quelque chose comme ceci : action="cgi-bin/mon_cgi.pl", avec un script en PHP ceci : action="mon_script.php" et enfin pour un mailto (envoi vers une mail) ceci : action="mailto:adresse_email@domaine.com".
L'attribut "method" spécifie la manière dont les données remplies dans le formulaire doivent être transmises. Il peut prendre 2 valeurs : "POST" ou "GET". Avec GET, les données sont envoyées au serveur via l'URL et sont donc visibles dans celle-ci ! Avec POST, les données sont directement envoyées au serveur et ne sont pas visibles. On utilisera presque toujours la méthode POST pour les formulaires.
- <input> : cette balise permet de placer un champ dans lequel les informations peuvent être recueillies. (pas de balise de fin !)
L'attribut "name" permet de désigner un champ du formulaire par un nom pour le traitement des données. Chaque nom doit être unique !
L'attribut "type" spécifie le type de champ.
Il peut prendre plusieurs valeurs :
- "text" pour entrer du simple texte
- "hidden" pour un champ caché non visible par le visiteur (on ne peut pas y ajouter du texte !)
- "password" pour entrer un mot de passe (les caractères sont remplacés par des *)
- "submit" pour créer un bouton pour envoyer les données du formulaire.
- "reset" pour créer un bouton qui vide le formulaire et le remet comme au chargement de la page.
L'attribut "value" permet de donner une valeur à un champ avant que le visiteur ne commence à le remplir. Dans la cas d'un bouton (submit ou reset), cette valeur sera le texte affiché sur le bouton !
L'attribut "size" donne la largeur du champ (20 par défaut).
L'attribut "maxlenght" quant à lui définit le nombre maximal de caractères pouvant être tapés dans un champ. Si vous essayez de taper un caractère supplémentaire, il ne sera pas pris dans le champ !.
| Précédent : Créer des tableaux(2) | Suivant : Les formulaires(2) |
| Retour au sommaire | |
