The Web Design Group

FAQ de la création HTML : Formulaires HTML


Cette liste des questions les plus fréquemment posées est tenue à jour par WDG et a été mise à jour pour la dernière fois le 15 Juillet 2000. (La présente traduction date de Janvier 2001). Elle peut être trouvée aux adresses suivantes :

La traduction en hollandais de ce document est disponible également :

La présente traduction française se trouve sur :

Si vous souhaitez contribuer à cette FAQ, merci d'envoyer un message à <darin@htmlhelp.com>. Toutes les personnes qui ont participé à cette FAQ sont listés à la fin.

N'hésitez pas à contacter le traducteur pour signaler une imprécision, une erreur de traduction, une faute de français que vous pourrez trouver dans ce document : <cedrik.rousseau@insa-rouen.fr>

Index

8. Formulaires HTML

  1. Comment utiliser des formulaires?
  2. Comment créer un formulaire qui m'envoie les données par email?
  3. Comment se servir des tableaux pour structurer les formulaires?
  4. Comment créer un formulaire qui se valide à l'appui de la touche ENTREE?
  5. Comment placer le curseur automatiquement sur le premier champ du formulaire?
  6. Comment faire un formulaire avec des boutons personnalisés?
  7. Peut-on avoir plusieurs boutons Envoi (Submit) sur le même formulaire?
  8. Peut-on mettre plusieurs actions dans le même formulaire?
  9. Comment imposer que certains champs soient remplis?
  10. Comment permettre l'envoi de fichiers vers mon site web (upload)?
  11. Comment gérer les menus de navigation avec des formulaires?

Section 8: Formulaires HTML

8.1. Comment utiliser des formulaires?

La syntaxe de base pour un formulaire est : <FORM ACTION="[URL]">...</FORM>

Quand le formulaire est validé par l'utilisateur, les données sont envoyées à l'URL spécifiée dans l'attribut ACTION. Cette URL doit se référer à un programme (comme un CGI) qui traitera les données issues du formulaire. Le formulaire en tant que tel devrait contenir :

Une explication plus détaillée de l'utilisation des formulaires est disponible sur <URL:http://www.hut.fi/u/jkorpela/forms/>. Si vous souhaiter installer des programmes CGI sur votre serveurs, ces adresses peuvent vous être utiles :

8.2. Comment créer un formulaire qui m'envoie les données par email?

La seule méthode digne de confiance consiste à utiliser un programme coté serveur (comme un script CGI ou PHP). Pour envoyer un formulaire à vous-même par email, vous devez utiliser un programme sur le serveur qui traitera la soumission du formulaire et vous enverra les données à votre adresse email.

Certains services d'hébergement Web fournissent un programme standard de formulaire à email. Vérifier auprès de votre hébergeur.

Si vous souhaitez installer des scripts CGI sur votre serveur, jetez un oeil à la réponse à la question précédente pour des adresses utiles.

Si vous ne pouvez pas faire tourner de CGI sur votre propre serveur, vous pouvez utiliser un service de traitement de formulaire distant. Une liste de tels services est disponible sur <URL:http://cgi.resourceindex.com/Remotely_Hosted/Form_Processing/>. Notez que le fournisseur de ce service aura accès aux données transitant par ses machines.

Si vous souhaitez aborder ce problème avec des scripts PHP, il existe des services d'hébergement de programme PHP gratuit comme free.fr ou Nexen qui vous permettront de réaliser ce type de formulaire. Rendez vous sur www.phpfrance.net pour plus d'information sur le PHP.

Les formulaires qui utilisent ACTION="mailto:..." ne sont pas fiables. Ils pourront marcher avec une partie des utilisateurs, mais échoueront pour des utilisateurs de logiciels ou de plates-formes différentes.

8.3. Comment se servir des tableaux pour structurer les formulaires?

Les petits formulaires sont parfois placés à l'intérieur d'un élément TD à l'intérieur d'un tableau. Ca peut être utile pour positionner un formulaire par rapport au reste du contenu, mais ça n'aide pas à positionner les éléments d'un formulaire les uns par rapport aux autres.

Pour positionner les éléments formulaires entre eux, le tableau entier doit être à l'intérieur du champ formulaire. Vous ne pouvez pas commencer un champ formulaire dans un TH ou un TD et le finir dans un autre. Vous ne pouvez pas placer le formulaire à l'intérieur d'un tableau sans le placer à l'intérieur d'un élément TH ou TD. Vous pouvez placer le tableau à l'intérieur du formulaire et puis utiliser le tableau pour positionner les éléments du formulaire comme INPUT, TEXTAREA, SELECT, etc. Aidez vous de l'exemple suivant :

<FORM ACTION="[URL]">

   <TABLE BORDER="0">

      <TR>

         <TH>Account:</TH>

         <TD><INPUT TYPE="text" NAME="Compte utilisateur"></TD>

      </TR>

      <TR>

         <TH>Password:</TH>

         <TD><INPUT TYPE="password" NAME="mot de passe"></TD>

      </TR>

      <TR>

         <TD> </TD>

         <TD><INPUT TYPE="submit" NAME="Entrer"></TD>

      </TR>

   </TABLE>

</FORM>

8.4. Comment créer un formulaire qui se valide à l'appui de la touche ENTREE?

La réponse est simple : le formulaire doit simplement avoir une zone <INPUT TYPE=TEXT> et pas de zone TEXTAREA. En revanche, il peut y avoir certains autres éléments de formulaire comme des cases à cocher et des boutons radio. Pour une réponse plus détaillée, voir <URL:http://ppewww.ph.gla.ac.uk/~flavell/www/formquestion.html>.

8.5. Comment mettre le focus sur le premier champ de formulaire?

Vous ne pouvez pas faire ça en HTML. Par contre, vous pouvez inclure un script après le formulaire qui mettra le focus sur le champ approprié, comme cela :

<FORM ID="monformulaire" NAME="monformulaire" ACTION=...> <INPUT TYPE="text" ID="monentree" NAME="monentree" ...> </FORM> <script type="text/javascript"><!-- document.monforrmuilaire.monentree.focus(); //--></script>

Une autre approche similaire utilise <BODY ONLOAD=...> pour régler le focus, mais malheureusement certains navigateurs traitent l'évenement ONLOAD avant que le document (dont le formulaire) ne soit entièrement chargé.

8.6. Comment faire un formulaire avec des boutons personnalisés?

Plutôt qu'un bouton Envoi normal (<INPUT TYPE=submit ...>), vous pouvez utiliser une image pour créer un bouton personalisé. Utilisez un marqueur tel que <INPUT NAME=Send TYPE=image SRC="http://adresse.de/image.gif" ALT="Send" VALUE="Send">. La plupart des navigateurs enverront également les coordonnées x et y de l'emplacement où l'utilisateur a cliqué sur l'image. Ces coordonnées seront envoyées dans la forme "Send.x=000&Send.y=000" au programme CGI. Pour plus d'information, aller voir sur <URL: http://ppewww.ph.gla.ac.uk/%7eflavell/www/trysub.html>.

Pour le bouton Effacer (reset), on peut utiliser <BUTTON TYPE=reset ...>, JavaScript, et/ou des feuilles de style. Cependant, aucun de ces mécanismes ne marchent universellement. Pour plus d'infos, rendez vous sur <URL:http://www.hut.fi/u/jkorpela/forms/imagereset.html>.

8.7. Peut-on avoir plusieurs boutons Envoi (Submit) sur le même formulaire?

Bien sûr! Cela fait partie de la définition des formulaires dans HTML 2.0. (seuls les navigateurs très primitifs ne le supporteront pas)

Vous devez donner à vos boutons Envoi un attribut "Name" et éventuellement un attribut "Value". Afin de déterminer quel bouton l'utilisateur a cliqué, il vous faudra utiliser des noms ou des valeurs disctints (ou les deux). Les navigateurs afficheront la valeur (comme titre du bouton) en plus de l'envoyer au serveur. Veillez donc à choisir un nom compréhensible par l'utilisateur, comme ceci :

<INPUT TYPE=SUBMIT NAME=entrer VALUE="Je veux entrer maitenant!"> -ou-
<INPUT TYPE=SUBMIT NAME=info VALUE=Merci de m'envoyer plus d'informations">

Noter que si vous utiliser des images en tant que bouton Envoi, vous aurez besoin de fournir des attribut "Value" différent pour elles aussi.

Si vous n'êtes pas sûr des résultats que vous obtiendrez quand vous soumettrez votre formulaire, TipJar met à votre disposition un script de test standard que vous pouvez utiliser. Codez ceci, par exemple :

<form method="post" action="http://www.tipjar.com/cgi-bin/test">

le serveur TipJar décodera et vous affichera les données du formulaire.

8.8. Peut-on mettre plusieurs actions dans le même formulaire?

Non! Un formulaire doit avoir exactement une action. Cependant, le programme sur le serveur (CGI ou PHP) qui traite vos requêtes peut exécuter n'importe quel nombre de tâches. (par exemple, mettre à jour une base de données, envoyer un email, garder les traces d'une transaction) en réponse à la soumission d'un formulaire unique.

8.9. Comment imposer que certains champs soient remplis?

Oui. Il suffit de faire en sorte que le script qui traite le formulaire renvoie une erreur si certains champs ne sont pas remplis correctement. C'est une bonne idée que le message d'erreur soit accompagné d'un nouveau formulaire demandant de rentrer à nouveau les champs erronés.

En complément à ça, vous pouvez utiliser JavaScript dans l'attribut ONSUBMIT du formulaire pour faire une vérification (pour ceux qui ont JavaScript activé). Si le formulaire est incomplet, programmer l'évenement ONSUBMIT pour informer l'utilisateur du problème et empêcher l'envoi du formulaire. Notez que le programme de traitement ne pourra faire confiance à JavaScript...

8.10. Comment permettre l'envoi de fichiers vers mon site web (upload)?

Vous pouvez consulter le document de référence : la RFC1867 sur <URL:http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt>.

La réception des fichiers envoyés est gérée par la bibliothèque Perl5 CGI.pm disponible sur <URL:http://stein.cshl.org/WWW/software/CGI/cgi_docs.html>. La dernière version de la bibliothèque cgi-lib.pl supporte également la réception de fichier. Du coté du PHP, la version 4 intègre en standard la gestion des transferts de fichiers dans ce sens.

Pour pouvoir recevoir des fichiers par upload en cgi il vous faut :

Les anciens navigateurs ne supportent pas l'envoi de fichier basé sur un formuaire. Par conséquent, essayez de laisser une alternative comme une adresse email...

Si vous avez besoin de gérer la reception de fichier en conjonction avec l'envoi d'email, le paquetage perl MIME::Lite vous permettra de gérer les fichiers attachés aux courriers électroniques.

8.11. Comment gérer les menus de navigation avec des formulaires?

Vous ne pouvez pas faire ça en HTML seul; quelque chose d'autre doit traiter le formulaire. Le JavaScript ne marchera qu'avec les utilisateurs qui l'ont installé (ce qui constitue néanmoins la grande majorité). Le traitement par le serveur est efficace mais les moteurs de recherche seront bloqués.

<http://www.hut.fi/u/jkorpela/forms/navmenu.html> vous expliquera comment créer des menus déroulants, ainsi que d'autres solutions de navigations, parfois meilleures.

 


Pour des rajouts ou des oublis dans cette FAQ, merci de contacter <darin@htmlhelp.com> (en anglais) ou <cedrik.rousseau@insa-rouen.fr> (en français)

Toutes les informations ici présentes ont été compilées à l'origine par les membres du Web Design Group, principalement Arnoud "Galactus" Engelfriet, John Pozadzides, et Darin McGrew. La traduction hollandaise de cette FAQ a été réalisée par Rijk van Geijtenbeek, tandis que la traduction française à été faite par Cédrik Rousseau dans le cadre de l'UV traduction de FAQ du département ASI de l'INSA Rouen.

Des compléments ont été apportés par Boris Ammerlaan, Martin Atkins, Lori Atwater, Alex Bell, Stan Brown, Roger Carbol, Alex Chapman, Jan Roland Eriksson, Jon Erlandson, Mark Evans, Peter Evans, Alan Flavell, Rijk van Geijtenbeek, Lucie Gelinas, Bjoern Hoehrmann, Tina Marie Holmboe, Cliff Howard, Thomas Jespersen, Peter Jones, Nick Kew, Jukka Korpela, Simon Lee, Nick Lilavois, Neal McBurnett, Glen McDonald, Dan McGarry, Ken O'Brien, Timothy Prodin, Steve Pugh, Liam Quinn, Colin Reynolds, Kai Schätzl, Doug Sheppard, Sue Sims, Toby Speight, Warren Steel, Ian Storms, Peter Thomson, Daniel Tobias, and Diane Wilson.

Merci tout le monde

 


Home, Reference, FAQs, Tools, Design, Feature Article, BBS, Links

Copyright © 1996-1999. Web Design Group All rights reserved.