Les formulaires sont un point important du langage HTML : ils représentent en effet un moyen simple et efficace pour permettre l'échange de données entre un site internet et un internaute. L'utilisateur peut remplir les champs de formulaires, et ensuite poster ces données au serveur du site en validant ce formulaire.
Les données acceptées par les formulaires sont multiples, on compte parmi elles des zones de texte, des cases à cocher, des listes de sélection, etc...
Nous allons étudier dans ce chapitre ces différentes zones de saisies, et préciser les modalités de transfert des données depuis le navigateur vers le serveur Internet.
La balise <form> encadre la définition d'un formulaire. Ses attributs permettront de spécifier par exemple la méthode de passage des données vers le serveur Web.
Voici un exemple de formulaire exploitant les différentes zones interactives disponibles pour le programmeur.
Exemple 22. Exemple de formulaire
<form method="post" action="" enctype="multipart/form-data">
<p>Exemple de formulaire HTML</p>
<p> Zone de texte :
<input type="text" name="zonetexte">
<br>
Case à cocher :
<input type="checkbox" name="case" value="checkbox">
<br>
Bouton radio :
<input type="radio" name="radio" value="radiobutton">
<br>
Liste déroulante :
<select name="liste">
<option>Choix 1</option>
<option>Choix 2</option>
<option>Choix 3</option>
</select>
<br>
Téléchargement de fichier :
<input type="file" name="fichier">
<br>
Champ caché :
<input type="hidden" name="cache">
</p>
<p>
<input type="submit" name="Submit" value="Envoyer">
<input type="reset" name="Submit2" value="Effacer">
</p>
</form>La balise <form> a pour attributs :
method : précise la méthode d'envoi choisie pour les informations recueillies par le formulaire, il existe deux possibilités : les méthodes GET et POST liées au protocole HTTP. Par défaut, cet attribut prend la valeur get. Cependant, la méthode post est plus généralement utilisée car elle permet de traiter un plus grand nombre d'informations. Nous verrons dans les exercices d'application les différences entre les deux méthodes.
action : cet attribut définit l'URL de destination du formulaire. Il existe plusieurs possibilités parmi lesquelles demander un traitement par le serveur ou envoyer un courrier électronique. Dans le premier cas, le serveur pourra réaliser un traitement des informations avec un script CGI par exemple. Cet attribut ressemblera alors à : <form action="http ://www.monserveur.com/cgi-bin/moncgi.pl" ...> Pour un envoi par courrier électronique : <form action="mailto :monmail@monserveur.com" ...>. Le destinataire du courrier recevra alors un message contenant la valeur saisie par l'internaute dans chaque champ du formulaire est envoyé.
enctype : spécifie la méthode d'encodage du formulaire. Ce champ est optionnel, la valeur text/plain permet une transmission des informations dans un format texte lisible directement par le destinataire.
Les boutons permettent de valider (d'envoyer) ou d'effacer les champs du formulaires. Il existe la possibilité d'utiliser la représentation graphique par défaut du HTML, ou de placer une image à la place de ces boutons, en conservant les màªmes comportements. L'exemple précédent utilise les boutons standards du HTML, alors que l'exemple ci-dessous fait appel à des images :
Exemple 23. Boutons "images"
<FORM action="" method="post">
<P>
Nom : <INPUT type="text" name="nom"><BR>
Prénom : <INPUT type="text" name="prenom"><BR>
email : <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sexe" value="Homme">
Homme <INPUT type="radio" name="sexe" value="Femme"> Femme
<P><BR>
<BUTTON name="submit" value="submit" type="submit">
<IMG src="bouton_submit.jpg" alt="envoyer" width="102" height="30">
</BUTTON>
<BUTTON name="reset" value="submit" type="reset">
<IMG src="bouton_cancel.jpg" alt="Annuler" width="102" height="30">
</BUTTON>
</FORM>La balise INPUT permet de placer des champs de formulaire. Elle accepte les attributs suivants :
type = text|password|checkbox|radio|submit|reset|file|hidden|image|button Cet attribut spécifie le type de contrà´le de saisie de données à créer. Les types de champs de saisie sont décrits ci-dessous. Cet attribut vaut text par défaut.
name Cet attribut permet d'assigner un nom au contrôle. Ce nom sera appairé avec la valeur courante du contrôle, le couple ainsi constitué étant alors transmis si le formulaire est soumis.
value Cet attribut spécifie la valeur initiale du contrôle. Il est optionnel sauf lorsque le type de contrôle est radio, auquel cas il devient obligatoire.
size Cet attribut indique à l'agent utilisateur la largeur initiale du contrôle. La largeur est donnée en pixels, saufs pour les champs de saisie de texte et de mot de passe pour lesquels elle est exprimée en nombre de caractà¨res (entier).
maxlength Lorsque le type de champ est text ou password, cet attribut spécifie le nombre maximum de caractà¨res qui peut y àªtre entré. Ce nombre peut àªtre supérieur à la valeur de l'attribut size, auquel cas l'agent utilisateur fournira un mécanisme de défilement à l'intérieur du champ. La valeur par défaut correspond à un nombre illimité de caractà¨res.
checked Lorsque le type de champ est un bouton radio, cet attribut booléen spécifie que le bouton radio est sélectionné. Cet attribut devra àªtre ignoré pour tous les autres types de contrôles.
src = url Lorsque le type de champ est "image", cet attribut spécifie la localisation de l'image utilisée pour "décorer" graphiquement le bouton de soumission.
L'attribut type de l'élément INPUT détermine quel contrôle doit àªtre créé.
text Ce type crée un champ de texte monoligne. La valeur émise lors de la soumission du formulaire est le texte entré.
password Comme le type text,mais le texte entré est visualisé à l'écran de sorte que les caractà¨res ne puissent àªtre reconnus (par exemple une série d'étoiles). Ce contrôel est utilisé pour l'entrée de données sensibles telles que des mots de passe. La valeur émise lors de la soumission du formulaire est le texte tapé (et non pas le texte affiché (!)).
checkbox Une case à cocher est une sorte de commutateur bipolaire. Lorsqu'elle est cochée, la case est dite "active". Lorsqu'elle est vide, la case est "inactive". La valeur de la case à cocher n'est émise que si cette dernià¨re est active. Plusieurs cases à cocher du màªme formulaire pourront partager le màªme nom. Au moment de la soumission, toute case à cocher "activée" y compris celles de nom semblable émet une paire nom/valeur dans laquelle le nom sera identique. Ceci permettra aux utilisateurs de choisir des valeurs multiples pour une propriété unique.
radio Un bouton radio est aussi un commutateur bipolaire. Lorsqu'il est marqué, le bouton radio est dit "active". Lorsqu'il est vide, il est réputé "inactive". La valeur du bouton radio n'est émise que si ce dernier est actif. Plusieurs boutons radio du màªme formulaire pourront partager le màªme nom. Cependant, seul l'un d'entre eux pourra àªtre actif à la fois. Lorsque l'un des bouton radio est marqué, tous les autres portant le màªme nom sont automatiquement déselectionnés. Pour cet ensemble de boutons radio, il ne peut donc àªtre émis qu'une seule paire nom/valeur.
submit Crée un bouton de soumission. Lorsque l'utilisateur clique sur ce bouton, le contenu du formaulaire est soumis au programme spécifié par la localisation définie par l'attribut action de l'élément FORM englobant.
image Crée un bouton de soumission graphique. La valeur de l'attribut src spécifie l'URL de l'image qui servira de représentation graphique du bouton. Certains utilisateurs ne pourront visualiser cette image. Nous recommandons fortement d'adjoindre la définition d'un attribut alt valant pour alternative textuelle de l'image
reset Crée un bouton de réinitialisation. Lorsque ce bouton est activé par l'utilisateur, les valeurs de tous les contrôles du formulaire sont remises à leur valeur initiale, telle que mentionnée dans l'attribut value. Le couple nom/valeur d'un bouton de réinitialisation n'est jamais envoyé lors de la soumission d'un formulaire.
button Crée un bouton poussoir qui n'a aucun comportement prédéfini. Le comportement de ce bouton sera défini par ailleurs, en lui associant des scripts clients déclenchés lorsque certains événements affectant ce bouton surviennent (par exemple lorsqu'on clique dessus). La valeur de l'attribut value est utilisée comme libellé du bouton.
hidden Crée un élément qui ne doit pas àªtre représenté par l'agent utilisateur. Cependant, le couple nom/valeur de cet élément sera joint aux données envoyées lors de la soumission du formaulaire.Ce type de contrôle sera en général utilisé pour enregistrer des données d'échanges client/serveur qui seraient autrement perdues du fait de la nature volatile des processus HTTP. Les valeurs des contrôles INPUT de type hidden sont envoyées lors de la soumission du formulaire. Ceci resterait vrai pour tout contrôle qui ne pourrait àªtre affiché pour des raisons de paramétrage de style. Le contrôle suivant, bien qu'invisible aux yeux de l'utilisateur, émettra sa valeur vers le serveur lorsque le formulaire sera soumis.
file Demande à l'utilisateur de désigner un fichier. Lorsque le formulaire est soumis, le contenu de ce fichier sera transmis au serveur comme une valeur de n'importe quel autre contrôle.
Un script client est un programme qui peut accompagner un document HTML ou y être directement inséré. Le programme s'exécute sur la machine cliente au moment où le document se charge, ou à d'autres moments particuliers, par exemple lorsqu'un lien est activé. Le support des scripts par HTML est indépendant du langage utilisé pour l'écriture de ces derniers. Les scripts offrent aux auteurs de documents électroniques une méthode pour étendre considérablement les possibilités du HTML en lui ajoutant une interactivité et une dynamisation importante.
Un document HTML peut se voir attaché deux types de scripts :
Ceux qui ne sont exécutés qu'une fois au moment du chargement du document par l'agent utilisateur. Ils sont codés dans un élément SCRIPT et sont exécutés au chargement du document. Les agents utilisateurs qui ne supportent pas les scripts, ou pour lesquels les scripts ont été désactivés pourront inclure des alternatives de contenu spécifiées dans un élément NOSCRIPT.
Ceux qui sont exécutés à chaque fois qu'un événement précis survient. Ceux-ci peuvent àªtre associés à un certain nombre d'éléments via des attributs d'événements intrinsèques.
Les formulaires HTML, et plus précisément les champs qui les composent, ont les événements intrinsèques suivants :
onfocus L'événement onfocus lorsque l'élément reà§oit le "focus" soit par action de l'organe de pointage, soit par la navigation tabulée. Cet attribut est reconnu par les éléments suivants : LABEL, INPUT, SELECT, TEXTAREA, et BUTTON.
onblur L'événement onblur intervient lorsque l'élément perd le "focus", soit suite à une action de l'organe de pointage, soit par navigation tabulée. Il sera utilisable sur les màªmes éléments que l'événement onfocus.
onkeypress L'événement onkeypress intervient lorsqu'une touche du clavier est enfoncée puis relâchée immédiatemment alors que l'élément a le "focus". Cet attribut est reconnu par la plupart des éléments
onsubmit L'événement onsubmit intervient lorsque le formulaire est soumis. Il n'est applicable que dans le contexte d'un élément FORM.
onreset L'événement onreset intervient lorsqu'un formulaire est réinitialisé. Il n'est applicable que dans le contexte d'un élément FORM.
onselect L'événement onselect intervient lorsque l'utilisateur sélectionne du texte dans un champ de texte. Cet attribut est exploitable pour des éléments INPUT et TEXTAREA.
onchange L'événement onchange lorsque l'élément perd le "focus" ET sa valeur a été modifiée depuis le dernier instant où il a été activé. Cet attribut est applicable aux éléments suivants : INPUT, SELECT, et TEXTAREA.
La programmation des scripts à proprement parler n'est pas du ressort de ce cours.