Dernière mise à jour :2008-10-14

informatique

Lorsqu'on visite un site web, il arrive souvent qu'une ou plusieurs pages de celui-ci contienne des zones dans lesquelles vous avez la possibilité d'entrer du texte, de cocher une case ou encore, de sélectionner un élément dans une liste. Un regroupement de plusieurs de ces zones porte le nom de formulaire électronique.

Ce qui rend les formulaires électroniques si différent du reste des éléments d'une page web, c'est que ceux-ci sont la seule façon pour l'internaute de communiquer avec le serveur sur laquelle la page web réside. Bien sûr, certaines personnes diront qu'il existe maintenant d'autre formes de communication comme par exemple, un applet Java ou encore un contrôle activeX mais si ont s'en tient au langage HTML pûr, c'est réellement la seule et unique façon de communiquer avec le serveur web.

Le formulaire électronique est représenté par un élément (balise) HTML. Cette balise est formée d'une balise ouvrante <form> ainsi que d'une balise fermante </form>. Entre ces deux balises se trouve le contenu du formulaire. Ce contenu peut être composé d'une multitude de balises HTML normales (mis à part <html>, <head>, <body> et quelques autres) comme par exemple, des images, des tableaux et comprend aussi une série de balises qui lui sont relié.

La principale balise d'un formulaire est la balise <input/>. Dépendant de la valeur donnée à son attribut «type», cette balise peut prendre plusieurs formes différentes. Par exemple, si vous écrivez :

<input type="text"/>

vous verrez apparaitre une zone rectangulaire vous permettant d'entrer du texte à l'écran. Si vous écrivez ensuite :

<input type="checkbox"/>

cous constaterez que cette fois-ci, c'est une boite à cocher qui apparaitra dans votre page web.

Voici la liste des valeurs pouvant être inscrites dans l'attribut type :

Liste de valeurs - Attribut type

text

Zône de texte

radio

Bouton radio

checkbox

Boite à cocher

password

Zône de texte dans laquelle tous les caractères écrit apparaissent comme des astérisques (*)

button

Bouton

submit

Bouton d'envois du formulaire

image

Bouton d'envois au format graphique

reset

Bouton de remise à zéro des champs du formulaire

file

Zone de texte et bouton permettant d'ouvrir une fenêtre de sélection de fichiers

hidden

Invisible à l'écran de l'utilisateur

Mis à part la balise <input/>, il existe aussi deux autres balises propres aux formulaires.

La première est la balise <select>. Celle-ci permet de faire la création d'une liste déroulante. La balise <select> sert à délimiter le début et la fin de la liste tandis que la balise

<select> <option>programmation</option> <option>bande dessinée</option> <option>arts graphiques</option> </select>

La seconde balise est <textarea>. Celle-ci permet de créer une zone de texte multi-ligne. La zone permettra à l'utilisateur d'entrer un texte d'une longeur illimité à l'intérieur de celle-ci.

Voici un exemple de code pour faire la création d'une zone de texte multi-ligne :

<textarea cols="60" rows="10"<>/textarea>

Remarque : Dans l'exemple ci-dessus, les attributs « cols » et « rows » servent respectivement à déterminer le nombre de caractères par ligne et le nombre de lignes de la zone de texte multi-ligne.

Soumission d'un formulaire électronique

En HTML, il n'existe qu'une seule façon d'envoyer les données d'un formulaire électronique en direction du serveur. Il faut pour celà, placer une balise <input/> et donner la valeur « submit » à son attribut « type » (remarque que la valeur image peut aussi être utilisé mais causera certain problème dans les anciennes versions des navigateurs). Lorsque l'utilisateur cliquera sur ce bouton, les données du formulaire seront envoyées.

À quel endroit seront-elles envoyées?

Il existe un moyen d'indiquer l'URL (adresse d'une page,image ou autre ressource web) vers laquelle les données seront transmises. C'est via l'attribut « action » de la balise <form> que nous pouvons déterminer celà. Voici un exemple de formulaire qui est envoyé vers une page de traitement de données fictive dont l'URL pourrait être la suivante : http://membres.lycos.fr/a525g/traitement-donnees.php

<form action="http://membres.lycos.fr/a525g/traitement-donnees.php">
  <input type="text" name="txt1"/>
  <br>
  <input type="submit" value="soumettre"/>
</form>

Si vous placez le code HTML du formulaire ci-dessus dans une page web, vous verrez apparaitre à l'écran une zone de texte et sous celle-ci, un bouton gris sur lequel se trouve le libellé « soumettre ». Si vous cliquez sur le bouton, votre navigateur vous transportera vers l'adresse écrite dans l'attribut « action ».

Vous remarquerez que l'URL pointe vers un fichier dont l'extention n'est pas .htm ou .html mais plutôt .php. La raison est simplement que pour traiter les données acheminées au serveur via un formulaire, il faut exécuter un programme qui va traiter les données sur le serveur.

Le script (ou programme) en question peut exécuter une multitude de tâches différentes dépendant de la façon dont il a été programmé. Il peut par exemple, insérer les données dans une base de données, envoyer un courrier électronique contenant une confirmation de réception des données, valider un numéro de carte de crédit etc...

En somme, il y a donc deux parties distincte impliquées dans la conception d'un formulaire électronique. La première est la création du formulaire au format HTML. Cette étape peut être réaliser assez facilement par n'importe qui puisqu'il est relativement facile d'apprendre les bases de la création de formulaire en HTML. La seconde partie, c'est la partie, programme de traitement des données coté serveur. Celle-ci est bien plus difficile à réalisé dépendant du traitement à effectué et du langage à utilisé. Elle nécessite généralement la participation d'un informaticien professionnel.

Cependant, si vous êtes seul concepteur du formulaire et que vous ne pouvez pas bénéficier de l'aide d'un programmeur expérimenté, il existe une autre méthode d'envois des données. En effet, l'attribut « action » du formulaire donne la possibilité d'entré une valeur « mailto » suivit d'une adresse de courrier électronique. Dans ce cas, les informations indiqué par l'utilisateur dans le formulaire sont simplement envoyé par un courrier électronique à l'adresse indiqué dans le mailto. C'est la méthode la plus simple et la moins efficace dans la plupart des cas.

La plupart des concepteurs de site web auront rapidement besoin d'utiliser une autre méthode que celle du mailto, dépendant de la complexité de leur site. Si le concepteur de site possède son propre serveur web, il pourra créer toutes les applications de traitement désirées, sous la forme et le langage de programmation désiré. Par contre, dans la majorité des cas, le site web d'une personne ou d'une organisation est hébergé sur le serveur d'une compagnie différente. Dans de tel cas, il est certain que vous serez restreind dans le choix des technologie utilisées et des programmes que vous pourrez installer sur ce serveur. Si tout le monde programmerais ses propre module de traitement de données dans des langages comme Visual Basic, java ou c++, les gestionnaires des serveurs d'hébergement de site web perdraient rapidement le contrôle.

Heureusement, il existe des technologies web disponibles sur ces serveurs qui sont communes et qui souvent, se ressembles coté programmation et qui permettent de créer des programmes qui font ce qu'on désire (si on ne fait pas d'erreur dans le code bien sûr).

Voici une liste des principales technologies disponibles (en général) sur les serveurs d'hébergement de site :

Liste des technologies disponibles

php (Hypertext Preprocessor)

Souvent sur des serveur Linux

asp (active server pages)

Souvent sur des serveur Windows NT

asp.net (active server pages version .net)

Serveur Windows NT

jsp (java server pages)

Sur différents types de serveurs

CGI/perl

Sur différent types de serveurs

Il existe aussi une autre solution qui concerne non seulement les formulaires électronique mais aussi les sites web dynamiques et qui se nomme Zope. L'offre de Zope est du genre pret-à-porter, c'est à dire que vous n'avez pas besoin de connaitre grand chose à la programmation de site web dynamique pour construire un site de niveau professionnel. Le désavantage cependant, c'est que le niveau de personnalisation du site est limité. Vous pourrez faire un bon site mais vous ne pourrez pas nécessairement réussir à créer tout ce que vous désirez, comme vous le désirez.

La validation des données avant soumission du formulaire

Il devient parfois utile sinon même, souvent nécessaire de valider les données entrées par l'utilisateur avant la soumission de celles-ci. Il vous est peut-être déjà arrivé de remplir un formulaire dans une page web et lorsque vous avez appuyé sur le bouton d'envois, un message d'avertissement vous est apparut pour vous dire, par exemple : «Vous devez entrer votre code postal avant de soumettre le formulaire» ou encore : « Veuillez entrer une adresse de courrier électronique valide ». Ce qui enclenche un tel processus, c'est l'insertion de l'attribut « onsubmit » dans la balise <form> d'un formulaire. La valeur de cette attribut peut-être une instruction ou encore un appel de fonction en langage JavaScript (langage de script utilisé couremment pour rendre les pages web interactives).

Voici un exemple de l'utilisation d'un attribut « onsubmit » dans une balise <form> :

Listing 1.0 Exemple onSubmit
<script language="javascript" type="text/javascript">
<!--
function valider()
{
if (document.formulaireTest.txtNom.value == "")
{
alert("Entrez votre nom avant de soumettre le formulaire");
return false;
}
}
// -->
</script>

<form name="formulaireTest" onsubmit="return valider()" action="#">
<input type="text" name="txtNom">
<br>
<br>
<input type="submit" value="Soumettre">
</form>


Les formulaires électroniques sont une excellente méthode pour ajouter de l'inter-activité dans vos pages web ainsi que de recueillir une masse d'information précieuse pour votre organisation. Il y en a de plus en plus sur la toile et leur nombre grandit sans cesse. Chose certaine, les formulaires électroniques sont bien sont là pour y rester.

Auteur : Sylvain Bilodeau

Date de mise en ligne : 2002-06-17

Aucun commentaire pour l'instant.