Retours
Accueil
Page précédente

Echanges de bandeaux
Avec parrainage
Sans parrainage
Internationaux

Visionneuses
Automatiques
Manuelles

Rémunération
Audiotel
Plateformes
Affiliations
eBanques
Autres
Voir les chèques

Autres
Liens
Jeux
Inclassables


 

TUTORIAL POUR CRÉER SES FORMULAIRES EN HTML
 

Vous ne comprenez pas les formulaires ??
Ce tutoriel est fait pour vous! Toutes les fonctions du formulaires détaillées et expliquées!

-----

Introduction

Voici un petit tutoriel pratique pour les Webmasters qui désirent comprendre les formulaires sur le web.

 

Définir la feuille de formulaire

Il s'agit de la première chose à faire lorsque l'on conçoit un formulaire. La feuille de formulaire remplit deux fonctions. La première consiste à délimiter les éléments constituant le formulaire. Ainsi, le navigateur pourra identifier l'endroit où débute le formulaire et où il prend fin, en repérant les marqueurs <FORM> et </FORM>.

La deuxième fonction consiste à spécifier les paramètres du formulaire que sont le nom, l'action, la méthode d'envoi et le type d'encodage. Tous ces paramètres se juxtaposent à l'intérieur du marqueur <FORM>.

La syntaxe du formulaire HTML

Tout formulaire HTML possède la syntaxe suivante:

<FORM NAME=[nom] ACTION=[action] METHOD=[méthode d'envoi]
  ENCTYPE=[méthode d'encodage]>

éléments de formulaire

</FORM>

Les paramètres du formulaire

- Le nom

Il s'agit du nom du formulaire, utile pour y faire référence lors de l'utilisation du Javascript.

- L'action

Le paramètre Action détermine le type de destinataire ou si l'on veut l'outil qui sera utilisé pour traiter le formulaire. Les plus communs sont le mailto: et le http. Le premier permet de recevoir les données du formulaire par courrier électronique, tandis que le deuxième sert habituellement à spécifier un CGI.

Exemple 1: mailto

<FORM ACTION="mailto:email@domaine.com" METHOD=POST>
éléments de formulaire
...
</FORM>

 - Method

Il existe deux types de méthode concernant la façon dont l'information du formulaire est traitée: GET et POST. Le prochain tableau illustre la différence entre les deux.

 

GET Fait en sorte que le contenu du formulaire est juxtaposé à l'adresse URL; le CGI le traitant accède alors à l'information par l'entremise de la variable QUERY_STRING
POST Le contenu du formulaire est envoyé au serveur en tant que bloc de données pour y être traité par le CGI qui le recevra par stdin

GET constitue la méthode par défaut lorsque celle-ci n'est pas spécifiée. Toutefois, la méthode POST est plus efficace et permet le traitement d'une quantité plus importante de données; c'est donc cette dernière qui est presque toujours utilisée. La méthode GET devrait n'être employée que dans le cas de formulaires très simples.

Les éléments de formulaire

Jusqu'à maintenant, nous avons exposé le fonctionnement du formulaire en décrivant les paramètres. Il reste à présent à énumérer les éléments composant un formulaire HTML et servant à recueillir les données. Nous verrons également plusieurs exemples.

Les éléments sont les suivants:

 

  • case à cocher
  • case radio
  • boîte liste
  • boîte liste déroulante
  • boîte texte
  • boîte mot de passe
  • boîte texte multilignes
  • bouton
  • bouton soumettre
  • bouton recommencer
  • entrée cachée
  • image de formulaire

Rappelons que le code HTML de tous les éléments de formulaires ci-dessus doit être inséré à l'intérieur de la feuille de formulaire.

 - Les cases à cocher

Les cases à cocher présentent une liste d'items à l'utilisateur. Celui-ci peut alors cocher un ou plusieurs items afin d'indiquer ses choix.

Exemple:

Supposons que l'utilisateur doit indiquer ses chanteurs ou chanteuses préférés, on pourrait alors obtenir les cases suivantes:

 

Céline Dion
Mariah Carey
 
Kevin Parent
Michael Jackson
 
Madonna
Withney Houston
 

Les cases à cocher sont appropriées dans ce cas-ci, puisque l'utilisateur peut avoir plus d'un chanteur préféré.

Voyons maintenant à quoi ressemble le code HTML des cases à cocher de l'exemple ci-dessus:

<FORM>
<TABLE>
<TR>
<TD>
<INPUT TYPE="checkbox" NAME="Chanteurs" VALUE="Céline Dion">Céline Dion<BR>
<INPUT TYPE="checkbox" NAME="Chanteurs" VALUE="Mariah Carey">Mariah Carey<BR>
</TD>
<TD>
<INPUT TYPE="checkbox" NAME="Chanteurs" VALUE="Kevin Parent">Kevin Parent<BR>
<INPUT TYPE="checkbox" NAME="Chanteurs" VALUE="Michael Jackson">Michael Jackson<BR>
</TD>
<TD>
<INPUT TYPE="checkbox" NAME="Chanteurs" VALUE="Madonna"> Madonna<BR>
<INPUT TYPE="checkbox" NAME="Chanteurs" VALUE="Withney Houston">Withney Houston<BR>
</TD>
</TR>
</TABLE>
</FORM>
 

Syntaxe des cases à cocher

<INPUT TYPE="checkbox" NAME=[nom identificateur] VALUE=[valeur] [CHECKED]> Texte

On remarque dans l'exemple que toutes les cases à cocher portent le même nom identificateur. CHECKED est optionnel; sa présence indique que la case est cochée.

 - Les cases radio

Les cases radio présentent également une liste de choix à l'utilisateur. Cependant, il ne peut effectuer qu'un seul choix parmi la liste.

Exemple:

Supposons que l'on désire connaître dans quel groupe d'âge se trouve le visiteur, on obtiendrait les cases radio suivantes:

 

16-25 ans
26-35 ans
36-45 ans
46-65 ans
65 ans et plus
 

Syntaxe des cases radio

<INPUT TYPE="radio" NAME=nom identificateur VALUE=valeur [CHECKED]> Texte

Remarquez dans l'exemple ci-haut que toutes les cases radio portent le même nom identificateur. CHECKED est optionnel et permet de spécifier la case radio cochée.

 - La boîte liste

La boîte liste constitue une autre façon de présenter une liste d'items. Celle-ci est utile dans le cas où le nombre d'éléments est plus important. De plus, elle permet de sélectionner plus d'un items à l'aide de la touche SHIFT ou CTRL.

Exemple:

Supposons une liste de livres parmi lesquels l'utilisateur peut choisir:

Le code HTML correspondant est le suivant:

 

Le code HTML correspondant est le suivant:

<FORM>
<SELECT NAME="Livres" SIZE="5" MULTIPLE>
<OPTION VALUE="Apprendre à naviguer avec Netscape"> Apprendre à naviguer avec Netscape
<OPTION VALUE="Créez vos graphiques pour le Web"> Créez vos graphiques pour le Web
<OPTION VALUE="La bible du Javascript"> La bible du Javascript
<OPTION VALUE="Le livre du HTML"> Le livre du HTML
<OPTION VALUE="Programmer en Java"> Programmer en Java
</SELECT>
</FORM>
 

Syntaxe de la boîte liste

<SELECT NAME="nom identificateur" [SIZE="nombre"] [MULTIPLE]
[onBlur="commandes Javascript"]
[onchange="commandes Javascript"]
[onFocus="commandes Javascript"]
<OPTION VALUE="valeur" [SELECTED]> Texte à afficher
<OPTION VALUE="valeur" [SELECTED]> Texte à afficher
...
</SELECT>

L'attribut SIZE indique le nombre de lignes qui seront visibles dans la liste. L'attribut multiple, s'il est présent, permet à l'utilisateur d'effectuer plus d'une sélection. Les attributs onBlur, onChange et onFocus constituent des événements Javascript. Les entrées de la liste sont décrites par l'attribut OPTION. VALUE sert à définir la valeur qui doit être retournée dans le courrier électronique. L'attribut SELECTED, lorsque présent, indique que l'item est sélectionné par défaut au chargement de la page.

 - La boîte liste déroulante

La boîte liste déroulante, tout comme la boîte liste, permet à l'utilisateur de faire un choix parmi une liste d'items. Cependant, un seul choix est possible pour ce type de liste. Les choix n'apparaissent à l'utilisateur que lorsque celui-ci clique sur la flèche juxtaposée à la boîte liste.

Exemple:

Plusieurs sites Web dans un de leurs formulaires demandent le pays d'origine du visiteur. Souvent, la boîte liste déroulant est utilisée pour recueillir la réponse. En effet, un individu n'est issu que d'un seul pays. Dans l'exemple ci-dessous, une liste abrégée de pays est présentée, puisque qu'il serait fastidieux de tous les énumérer.

 

Syntaxe de la boîte liste déroulante

Il s'agit de la même syntaxe que la boîte liste. La différence est à l'effet que dans le premier cas, il n'y a pas d'attribut SIZE ni MULTIPLE et qu'un seul item peut être sélectionné par défaut à l'aide de l'attribut SELECTED.

<SELECT NAME="nom identificateur"
[onBlur="commandes Javascript"]
[onchange="commandes Javascript"]
[onFocus="commandes Javascript"]
<OPTION VALUE="valeur" [SELECTED]> Texte à afficher
<OPTION VALUE="valeur" [SELECTED]> Texte à afficher
...
</SELECT>

 - La boîte texte

La boîte texte est l'élément le plus commun. On s'en sert pour recueillir une entrée au clavier de la part de l'utilisateur, comme le nom de l'utilisateur par exemple.

Exemple:

Si l'on voulait recueillir les coordonnées des visiteurs, on pourrait retrouver le formulaire suivant:

 

Nom:

Prénom:

Adresse:

Ville:

Province

Pays:

Code postal:

Le code HTML correspondant est le suivant:

<FORM>
Nom:<BR>
<INPUT TYPE="text" NAME="Nom" SIZE="40" MAXLENGTH="40"><BR>
Prénom:<BR>
<INPUT TYPE="text" NAME="Prenom" SIZE="40" MAXLENGTH="40"><BR>
Adresse:<BR>
<INPUT TYPE="text" NAME="Adresse" SIZE="40" MAXLENGTH="40"><BR>
Ville:<BR>
<INPUT TYPE="text" NAME="Ville" SIZE="20" MAXLENGTH="20"><BR>
Province<BR>
<INPUT TYPE="text" NAME="Province" SIZE="40" MAXLENGTH="40"><BR>
Pays:<BR>
<INPUT TYPE="text" NAME="Pays" SIZE="40" MAXLENGTH="40"><BR>
Code postal:<BR>
<INPUT TYPE="text" NAME="Codepostal" SIZE="10" MAXLENGTH="10">
</FORM>

Syntaxe de la boîte texte

<INPUT TYPE="text" NAME="nom idenficateur" VALUE="valeur"
SIZE= nombre MAXLENGTH=nombre
[onBlur="commandes Javascript"]
[onchange="commandes Javascript"]
[onFocus="commandes Javascript"]
[onSelect="commandes Javascript"]>

L'attribut VALUE correspond au contenu de la boîte texte. Celui-ci est envoyé lors d'un clic du bouton soumettre. SIZE détermine le nombre de caractères maximal visible à l'écran, tandis que MAXLENGTH fixe le nombre maximal de caractères permis.

 - La boîte mot de passe

La boîte mot de passe constitue une variante de la boîte texte. Toutefois, elle sert principalement à recueillir un mot de passe de la part de l'utilisateur. En effet, lorsque celui-ci entre du texte dans la case, les caractères tapés sont représentés par des astérisques (*).

Exemple:

 

Entrez votre mot de passe:

Le code HTML correspondant est le suivant:

<FORM>
Entrez votre mot de passe:
<INPUT TYPE="password" NAME="motdepasse" SIZE="20" MAXLENGTH="20">
</FORM>

Syntaxe HTML de la boîte mot de passe

<INPUT TYPE="password" NAME="nom idenficateur" VALUE="valeur" SIZE= nombre MAXLENGTH=nombre>

Remarquez que la boîte mot de passe ne possède aucun événement Javascript pour éviter l'usage frauduleux.

 - La boîte texte multilignes

La boîte texte multilignes, à l'instar de la boîte texte, permet à l'utilisateur d'inscrire plus d'une ligne de texte. Les moteurs de recherche s'en servent d'ailleurs dans leur formulaire d'inscription pour recueillir la description du site. On peut également s'en servir pour obtenir des commentaires de la part des visiteurs.

Exemple: obtenir des commentaires de la part des visiteurs

 

Donnez-nous vos commentaires:

<FORM>
Donnez-nous vos commentaires:<BR>
<TEXTAREA NAME="Commentaires" COLS=30 ROWS=5 WRAP=virtual>
</TEXTAREA>
</FORM>

Syntaxe HTML de la boîte texte multilignes

<TEXTAREA NAME="nom identificateur" COLS=nb colonnes ROWS=nb rangées
WRAP = off | physical | vitual
[on blur = "commandes Javascript"]
[onChange = "commandes Javascript"]
[onFocus = "commandes Javascript"]
[onSelect = "commandes Javascript"]
[texte à afficher par défaut]
</TEXTAREA>

L'attribut WRAP détermine la façon dont les lignes traitées lors d'un changement de ligne. Le tableau ci-dessous donne une description des différentes possibilités:

 

off aucun changement de ligne
virtual les changements de lignes sont effectués automatiquement dans la boîte texte multilignes. Cependant, le tout est soumis en une seule ligne au serveur.
physical les changements de lignes sont effectués automatiquement dans la boîte texte multilignes. Les changements de lignes sont également communiqués au serveur.

 - Les boutons soumettre et recommencer

Un formulaire n'est transmis au serveur que lorsque l'utilisateur clique sur le bouton soumettre à l'aide de la souris. La plupart du temps, il est accompagné du bouton recommencer, permettant ainsi à l'utilisateur d'effacer toutes les entrées du formulaire d'un seul coup.

Exemple: formulaire avec les boutons soumettre et recommencer

 

<FORM>

[éléments de formulaires]

<INPUT TYPE="submit" VALUE="Soumettre">
<INPUT TYPE="reset" VALUE="Recommencer">
</FORM>

Le bouton soumettre est celui dont l'attribut TYPE est submit, tandis que le bouton recommencer est reset.

Syntaxe HTML des boutons soumettre et recommencer

<INPUT TYPE=submit|reset VALUE="texte du bouton" [onClick="commandes Javascript"]>

 - Le bouton de formulaire

En plus des boutons soumettre et recommencer, on peut utiliser un bouton sans fonction prédéfinie. On se sert alors généralement de ce genre de bouton pour déclencher un événement Javascript.

Exemple:

Supposons que l'on désire afficher une boîte de dialogue suite au clic du bouton formulaire.

 

Syntaxe HTML du bouton de formulaire

<INPUT TYPE=button VALUE="texte du bouton"
[onClick="commandes Javascript"]>

 - L'entrée cachée

Certaines informations, utiles seulement au récipiendaire du formulaire, peuvent être envoyées à même le formulaire. Par exemple, le CGI mailto utilise des entrées cachées afin d'assigner le sujet du message, l'adresse du serveur de courrier, le récipiendaire et l'adresse URL de remerciement.

Exemple: entrées cachées utilisées par le CGI mailto

<FORM ACTION="/cgi-shl/mailto.exe" METHOD="post">
<INPUT TYPE="hidden" NAME="sendto" VALUE="usager@domaine.com">
<INPUT TYPE="hidden" Name="server" value="mail.domaine.com">
<INPUT TYPE="hidden" NAME="subject" value="sujet du message">
<INPUT TYPE="hidden" NAME="resulturl" value="http://www.domaine.com/merci.html">
...
autres éléments de formulaire
...
</FORM>

Syntaxe HTML de l'entrée cachée

<INPUT TYPE="hidden" NAME="nom identificateur" VALUE="valeur">

 - L'image de formulaire

L'image de formulaire est similaire au bouton soumettre. En effet, un clic sur celle-ci provoquera l'envoi du formulaire au serveur. En plus, les coordonnées de l'endroit cliqué seront également expédiées avec le formulaire sous la forme "NAME.x=n&NAME.y=n".

Exemple: une image employée en tant que bouton soumettre

<FORM ACTION="mailto:usager@domaine.com" METHOD=POST>
...
autres éléments de formulaires
...
<INPUT TYPE="image" SRC="../Graphiques/BTDossiers.gif" BORDER="1" WIDTH="112" HEIGHT="14" NAME="BTImage"
ALT="Image de formulaire" HSPACE="1" VSPACE="1" ALIGN="top"<
</FORM<

Syntaxe HTML de l'image de formulaire

<INPUT TYPE="image" SRC="image" BORDER="épaisseur de bordure"
WIDTH="largeur" HEIGHT="hauteur" NAME="nom image"
ALT="texte alternatif" HSPACE="espace horizontal"
VSPACE="espace vertical" ALIGN="alignement">

Notez que la syntaxe relative à l'image est la même que celle définissant une image normale en HTML (sans formulaire).

L'insertion d'un formulaire n'est pas compliqué, il s'agit juste de renseigner les champs d'adresse d'envoi de vos hébergeurs et ensuite d'ajouter vos éléments

 

 

 

 

Merci au site PlanètePC pour son tutorial ci-dessus

 

 

 

© Copyrights GigaSurf 2003/2006 - Tous droits réservés.

SPONSORS - PUBLICITÉS - ÉCHANGES DE BANNIÈRES


CanalClic Webmaster