 |
Mercredi 24 avril 2024 - 22:42 |
| Translate |
|
| Rubriques |
| Réseaux sociaux |
|
| Liste des jeux Amiga |
|
| Trucs et astuces |
|
| Glossaire |
|
| Galeries |
|
| Téléchargement |
|
| Liens |
|
| Partenaires |
|
| A Propos |
|
| Contact |
|
|
|
Ce mois-ci nous allons parler des formulaires, que vous avez sans doute déjà vus sur des sites Web. Il est très simple de créer des pages avec ceux-ci, il est moins évident de les traiter...
Création d'un formulaire
Tous les boutons et toutes les informations du formulaire doivent être contenus entre un <FORM> et un </FORM>. Graphiquement, la position de ces deux balises n'a aucune influence, mais si vous désirez mettre deux formulaires différents sur une même page cela permet de séparer en deux groupes les différents boutons de chaque formulaire.
Prenons un exemple, la pétition pour un portage de RealAudio sur Amiga (www.horus.ch/AmigaRA).
|
<FORM METHOD="POST" ACTION="/cgi-bin/HorusMaster"> <INPUT TYPE=HIDDEN NAME="HMmethod" VALUE="amigara"> <INPUT TYPE=HIDDEN NAME="HMpage" VALUE="01"> <INPUT TYPE=HIDDEN NAME="HMlang" VALUE="fr"> Votre nom : <INPUT TYPE=TEXT VALUE="" NAME="nom"> Votre adresse email : <INPUT TYPE=TEXT VALUE="" NAME="email"> Combien donneriez-vous : <SELECT NAME="combien" SIZE=1> <OPTION VALUE="0" SELECTED>-- choisissez --</OPTION> <OPTION VALUE="1">rien</OPTION> <OPTION VALUE="2">5 FF</OPTION> <OPTION VALUE="3">60 FF</OPTION> <OPTION VALUE="4">90 FF</OPTION> <OPTION VALUE="5">120 FF</OPTION> <OPTION VALUE="6">plus !</OPTION> <OPTION VALUE="7">ne sais pas</OPTION> </SELECT> <INPUT TYPE=RESET VALUE="Réinitialiser"> <INPUT TYPE=SUBMIT VALUE="SIGNEZ !"> </FORM> |
La figure 1 illustre le même formulaire, légèrement embelli.
Tout d'abord, la balise <FORM> prend deux arguments, la méthode ("POST" ou "GET") et une action. Nous verrons comment choisir cela plus loin, mais il s'agit simplement de dire au navigateur ce qu'il devra faire si le visiteur clique sur le bouton d'envoi.
Techniquement, POST est une transaction HTTP POST et GET, quant à lui, met les arguments directement dans l'URL. Par exemple "http://www.horus.ch/cgi-bin/HorusMaster?nom=dbucher&passwd=rT6DfHUX".
D'autres options sont valides pour la balise "FORM", mais je n'en parlerai pas ce mois-ci car elles sont très rarement utiles ou seront utiles plus tard (JavaScript, trames...) ; ce sont ENCTYPE="type", le nom du formulaire NAME="nom", ONRESET et ONSUBMIT (JavaScript). Reste TARGET="name" qui indique dans quelle trame il faudrait afficher le résultat si vous aviez des trames...
Les types de boutons
La balise la plus importante est sans conteste <INPUT>, qui vous permet de définir un bouton. Vous pouvez créer de très nombreuses sortes de boutons (voir aussi l'exemple ci-dessus). Voici une explication pour les plus utiles :
- TYPE=CHECKBOX. Crée une case à cocher et TYPE=RADIO crée un choix unique parmi plusieurs. Cela dit, un cycle gadget est
peut-être plus adapté à ce dernier cas. Cela n'est pas évident de savoir comment créer des ensembles de boutons de type
radio, mais c'est pourtant simple. Chaque ensemble porte le même nom (NAME) mais chaque bouton de l'ensemble a une valeur
(VALUE) différente...
- TYPE=TEXT. Saisit un texte d'une ligne. Peut aussi servir à saisir un nombre ou n'importe quoi d'autre : c'est par
la suite, dans le programme qui traite les données sur le serveur, que vous adapterez ce champ au format en question. Si votre
programme est bien fait, il signalera aussi une éventuelle erreur, par exemple un montant négatif...
- TYPE=PASSWORD. Identique au type TEXT sauf que les caractères restent invisibles. Ils apparaîtront cependant dans l'URL
au moment de l'envoi (si la méthode est "GET")...
- TYPE=HIDDEN. Ces "boutons cachés" sont particulièrement utiles car ils permettent de transmettre des informations au
programme qui traite les données sans que l'utilisateur ne les voie : ces "boutons" n'apparaissent pas dans la page, ils
sont seulement visibles dans la source... Un exemple concret : le visiteur remplit plusieurs champs, mais oublie de donner
son adresse électronique. Votre programme va alors ne mettre qu'un seul bouton TEXT pour redemander l'adresse électronique,
mais toutes les données valides se retrouveront dans des "boutons cachés".
Cela n'empêche pas de les afficher aussi pour vérification à l'intention de l'utilisateur (Cf. la base de données des amigaïstes sur le site d'Amiga News).
- TYPE=FILE. Crée un gadget permettant de choisir un fichier sur votre disque. VALUE="chemin" définit l'éventuel chemin/fichier
qui apparaîtra par défaut dans la fenêtre de requête.
- TYPE=IMAGE. Cela crée un bouton-image : si le visiteur clique sur l'image, deux informations seront envoyées au programme,
la position "x" et la position "y". Par exemple, si le bouton est défini par <INPUT TYPE=IMAGE SRC="Bouton1.GIF" WIDTH=80
HEIGHT=20 NAME="ImgButt">, alors, le résultat sera par exemple (selon où vous cliquez) : ImgButt.x = 65 ImgButt.y = 12.
- TYPE=BUTTON. Cette sorte de bouton aura généralement l'argument "ONCLICK" pour (par exemple) du JavaScript.
- TYPE=RESET. Remet tous les boutons du formulaire en question à leur valeur initiale. Ces boutons sont à rendre moins
attirants que les boutons "SUBMIT", car rien n'est plus agaçant que de remplir tout un formulaire et de devoir tout recommencer.
- TYPE=SUBMIT. Ce bouton envoie le formulaire selon la méthode et l'action indiquées dans la balise <FORM>. Rien ne vous empêche de mettre plusieurs boutons d'envoi dans le même formulaire : s'ils ont des noms différents, le programme saura faire la différence entre les boutons proposés au visiteur.
- NAME="nom". Sans nom, le contenu du champ n'est pas envoyé.
- VALUE="valeur" définit le contenu par défaut pour les boutons qui en ont un, en l'occurrence TEXT, PASSWORD, HIDDEN,
FILE. C'est cette valeur qui sera envoyée si l'utilisateur n'y change rien... Mais pour les autres boutons, c'est la valeur
qui sera envoyée de toute façon si le bouton est sélectionné (CHECKBOX ou RADIO) ou si celui-ci est pressé (SUBMIT).
Pour les boutons de type "SUBMIT" et "RESET", cela définit en plus le texte qui y apparaîtra.
- CHECKED seul, cochera à l'avance les boutons de type "CHECKBOX" ou "RADIO".
- MAXLENGTH limite le nombre de caractères que l'on peut entrer dans un champ de type "TEXT" ou "PASSWORD". Exemple :
<INPUT TYPE=PASSWORD NAME="mdp" VALUE="" MAXLENGTH=8>
- SIZE=nn n'a pas du tout la même signification que MAXLENGTH, ne confondez pas ! Il détermine en effet la taille affichée
d'un champ de type "FILE", "TEXT" ou "PASSWORD".
- SRC="image.gif" nécessaire pour les boutons de type "IMAGE". Certains navigateurs gèrent aussi les balises "WIDTH" et "HEIGHT" comme je l'ai utilisé plus haut. Ajouter ces deux arguments ne peut pas faire de mal, mais ne comptez pas sur le fait qu'ils fonctionneront toujours...
Autres boutons...
Nous avons vu en long et en large la balise "INPUT", mais il y a aussi d'autres balises servant à créer des boutons.
La balise <TEXTAREA>...</TEXTAREA> est l'équivalent de <INPUT TYPE=TEXT> sauf qu'il permet de saisir des lignes multiples. Il prend pour arguments uniquement la taille affichée (ROWS=nn COLS=nn) et son nom NAME="nom"... Pour y insérer un texte par défaut, il suffit de l'insérer entre la balise de début et de fin.
La balise <SELECT>...</SELECT> définit soit un cycle, soit une liste. S'il s'agit d'une liste, il peut permettre un choix unique ou multiple. Ses arguments sont "MULTIPLE" pour permettre au visiteur de choisir plusieurs éléments, NAME="son nom", et si c'est une liste, vous pouvez définir sa hauteur avec SIZE=n ("n" est un nombre d'éléments) ou choisir SIZE=1 pour un cycle. Pour y ajouter maintenant des éléments, vous devez ajouter une balise <OPTION>...</OPTION> pour chacun des éléments du gadget. La syntaxe est simple : <OPTION VALUE="a1200" SELECTED>Amiga 1200</OPTION> où "SELECTED" définit que cette entrée sera présélectionnée, et l'option facultative "VALUE" donne la valeur à retourner à la place du contenu affiché (si cet élément est sélectionné par le visiteur, bien sûr).
La balise <BUTTON>...</BUTTON> est un nouveau bouton, dont le contenu est du HTML ! Cela vous permet d'inventer des boutons particulièrement originaux. Mais soyez doublement prudent avec ce genre de choses ; c'est en effet nouveau donc les navigateurs ne le gèrent pas forcément et les gens ne sont pas habitués ; cela dit, c'est standard... D'autre part, il faut que l'on comprenne bien qu'il s'agit d'un bouton et quelles sont ses limites géographiques. Cette dernière balise prend notamment pour arguments TYPE="type" (RESET ou SUBMIT), NAME="son nom", VALUE="valeur à envoyer" et quelques options pour les scripts...
Comment traiter ces formulaires ?
Cette partie vous expliquera quelle méthode et quelle action choisir pour votre formulaire mais aussi comment traiter les données sur le serveur et vous proposera quelques services gratuits sur Internet qui les traiteront pour vous.
Silence ! Méthode, action !
Le seul moyen de traiter les données de vos formulaires uniquement en créant des pages est d'utiliser un "mailto:" mais c'est malheureusement la moins bonne solution. En effet, elle comporte de très nombreux désavantages : non seulement tous les navigateurs ne la gèrent pas, mais en plus, vous recevez les données de manière quasi illisible ! Alors, ne l'utilisez qu'en dernier recours ! Si vous la choisissez malgré tout, vous devrez mettre "mailto:votre.adresse@email" comme action et POST pour méthode.
Cela dit, remarquez que ça n'est pas interactif le visiteur ne saura jamais si le formulaire est arrivé correctement, il n'y aura aucun test sur les données qu'il aura entré et, de plus, il ne recevra aucune réponse aux données si ce n'est la vôtre quelques jours après... La seule vraie solution est la suivante : le navigateur envoie les données à un programme quelque part sur Internet qui va les traiter. Ce programme peut faire les choses suivantes :
- Vérifier les données entrées par l'utilisateur.
- Les traiter et afficher un résultat (montant d'une commande par exemple).
- Répondre aux données entrées s'il s'agit de questions (recherche par exemple).
- Puis demander une confirmation au visiteur.
- Sauver des données dans une base de données.
- Mettre les données entrées en page et vous les envoyer.
Cependant, je vais maintenant vous donner une vue d'ensemble de la troisième solution qui nécessite un peu de programmation mais qui en définitive est la plus flexible et qui sera beaucoup plus adaptée à vos besoins.
1. Scripts Shell
Si le serveur de votre FAI est un vrai serveur, il tourne sous Unix ;-). Dans ce cas, le programme en question sera situé par exemple en "http://www.site.com/cgi-bin/programme". Si vous montez un serveur sur Amiga, les scripts Shell seront un peu moins puissants, mais rien ne vous empêche de les utiliser aussi.
Les scripts Shell sont parfaits pour traiter les données, les envoyer par courriers électronique et afficher une confirmation. Ils peuvent aussi vérifier ou sauver des données simples dans une base de données, mais pour des programmes plus compliqués je vous conseille fortement de les créer en Perl ou en C.
2. Programmes (scripts) en Perl (ou ARexx)
Là aussi, aucun problème. Si le Perl et l'ARexx sont des langages sous forme de scripts, on peut cependant écrire de véritables programmes avec (par exemple, ouvrir des bibliothèques, sur Amiga). Ce sont des langages plus compliqués à mon avis que le C, mais si le serveur ne vous appartient pas, les avantages sont nombreux. En effet, vous n'avez pas besoin de recompiler le programme à chaque modification et il est plus facile de le modifier, surtout à distance. De plus, il est bien plus simple pour votre FAI de vérifier la sécurité du programme ; celui-ci aura alors bien plus de chances d'être accepté.
3. Programmes compilés en C (ou autre)
Si le serveur vous appartient, c'est à mon avis la meilleure méthode pour les programmes un peu plus complexes... Mais prenez aussi en compte les désavantages par rapport au point 2.
Mais quelle méthode, quelle action choisir, alors ? C'est très simple : l'action sera toujours le chemin http du programme, comme "/cgi-bin/SuperProgramme" et selon le langage choisi et vos préférences, vous choisirez METHOD=GET ou METHOD=POST.
- METHOD=POST : dans ce cas, deux variables d'environnement seront prédéfinies au moment de l'exécution de votre programme,
"REQUEST_METHOD" qui aura pour valeur "POST" et "CONTENT_LENGTH" qui contiendra la taille des données... Les données, elles,
arriveront dans stdin (entrée standard). C'est la meilleure solution, en tout cas en C et en Perl.
- METHOD=GET : là aussi, on a deux variables d'environnement prédéfinies, REQUEST_METHOD qui vaudra GET et QUERY_STRING qui contiendra toutes les données du formulaire envoyé, sous la forme suivante : "bouton1=contenu1&bouton2=contenu2&bouton3=contenu3...".
Même si vous n'avez que de faibles connaissances de ces langages, vous trouverez sur www.amiganews.com/dbucher/ des programmes d'exemple en Perl (ParseForm.pl) et en C (post-query.c)...
Service compris !
Vous le savez, sur Internet on trouve presque tout gratuitement et les programmes de gestion de formulaires ne font pas exception à la règle. Voici quelques adresses de serveurs offrant des services gratuits. Si vous en trouvez d'autres, envoyez-les moi. Je ferai une liste et l'enverrai à ceux que cela intéresse...
- www.ok88.com/ - Excellent site qui crée des statistiques sur ce que les gens ont entré dans votre formulaire, par exemple un sondage.
- www.guestbook.de - Très bon site aussi qui vous permet, lui, d'avoir un livre d'or personnel sur votre site.
- www.fxweb.com/ - Beaucoup de FAI offrent des compteurs assez simples. Ce site vous en offre de très perfectionnés qui ne font pas que compter, mais donnent la proportion de visiteurs par pays, et le nombre de visites qu'ils ont effectué chez vous, etc. Cela n'a rien à voir avec les formulaires, mais c'est un très bon service.
- www.beseen.com/ - La totale ! Livres d'or, statistiques, compteurs, canaux de discussion, aires de discussion, etc.
Voilà ! Si maintenant vous n'êtes pas des experts en formulaires HTML, vous le serez après avoir essayé tout cela. ;-)
En effet, j'espère vous avoir non seulement donné l'envie d'essayer la création de formulaires HTML, mais aussi des bases solides pour y parvenir.
|
