Dans les premiers temps du Web, l'information ne circulait quasiment que dans un seul sens : du serveur vers l'internaute. Il n'existait alors aucun retour de l'utilisateur vers le serveur : l'arrivée des formulaires a comblé cette lacune. Un formulaire doit recueillir des informations de l'utilisateur, puis les transférer au serveur, qui à son tour doit les traiter. Or le traitement de cette information sur le serveur est effectué par des scripts (comprendre "petit programme généralement interprété") écrits en langage C, Perl ou ASP. Nous sortons ici du cadre de notre cours HTML statique : nous ne traiterons pas ici le côté traitement-serveur, cette partie est prévue plus tard dans l'année.

Un formulaire débute par la balise ]]> (et finit donc par ]]>). Ce conteneur contient toutes les autres balises du formulaire. Il peut contenir aussi d'autres balises : ]]>, ]]>, etc., permettant la présentation du formulaire.

Elle est destinée, essentiellement, à préciser où envoyer les données recueillies par le formulaire. Elle permet aussi d'indiquer au serveur la forme sous laquelle ces données lui seront transmises (mode de codification).

Attributs Effet Valeur(s) action URL du script CGI (ou autre, fourni par le serveur), qui traite les données recueillies. Cet attribut est obligatoire. URL, 2 types possibles : http : pour un traitement immédiat. mailto : dans le cas d'un envoi à un courrier électronique, en vue d'un traitement différé. method Indique sous quelle forme vont être codées les informations envoyées. get : valeur par défaut. Les données sont adressées sous la forme d'une liste de valeurs accolées à l'URL avec interposition d'un séparateur particulier (point d'interrogation). Le nombre de caractères doit rester inférieur à 256. De plus elle ne permet pas d'envoyer les données à une boîte de courrier électronique. Il est donc préférable d'utiliser la seconde méthode. post : les données sont adressées sous la forme d'une liste nom/valeur accolées à l'URL mais ici, le script doit lire les données par défaut afin d'atteindre les véritables données du formulaires. La forme de cette liste dépend de l'attribut enctype. enctype Précise la méthode MIME de codification de l'envoi. Permet au serveur d'anticiper sur l'objet à recevoir et de prévoir le protocole d'échange (Pour plus de détails). application/x-www-form-urlencoded : l'envoi se présente comme une chaîne de caractères formées de couples nom=valeur sépararés par un , (c'est la valeur par défaut). text/plain : le séparateur précédent est remplacé par un retour chariot. C'est la forme à utiliser pour l'envoi au courrier électronique. multipart/form-data : lorsqu'un fichier est attaché à l'envoi (]]>). accept Précise la méthode MIME de codification de l'envoi pour un fichier. Permet au serveur d'anticiper sur le fichier à recevoir et de prévoir le protocole d'échange (Pour plus de détails). Chaîne de caractères donnant un code MIME reconnu. onsubmit Le code à exécuter lors de la soumission. Chaîne de caractères renvoyant vers une fonction script de traitement (par exemple une fonction JavaScript). onreset Le code à exécuter lors de la remise à zéro du formulaire. Chaîne de caractères renvoyant vers une fonction script de traitement (par exemple une fonction JavaScript). name Le nom du formulaire. Une chaîne de caractères. accept-charsets Les codages de caractèrs acceptés dans les zones de texte. Une liste de codage de caractères, séparée par des espaces. target Spécifie la cible du retour après traitement du serveur (voir le chapitre sur les cadres). Une liste de codage de caractères, séparée par des espaces. Attributs de la balise ]]>.

Exemple pour un formulaire d'envoi de courrier électronique sur le serveur de Multimania : ]]>. Exemple pour un formulaire classique sans l'aide de script CGI : ]]>.

Cette balise sert à spécifier comment s'effectue la saisie du formulaire : par cases à cocher, boutons radio, texte libre, etc. Tous ces éléments de saisie sont décrits à l'aide d'une seule balise : la balise ]]>. C'est son attribut type qui permet de préciser s'il s'agit de cases à cocher, boutons radio, texte libre... L'attribut type peut prendre les valeurs suivantes : text password chekbox radio submit reset image button hidden file Cette balise possède de nombreux attributs ; certains n'ont une signification que pour un type donné de champ. Ce paragraphe présente une liste des attributs d'usage général. Attributs Effet Valeur(s) name Le nom du champ. Une chaîne de caractères. alt Une courte description. Une chaîne de caractères. disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen. accesskey Définit une touche du clavier permettant d'accéder au champ de formulaire. La combinaison "ALT+touche" a le même effet que l'activation du champ. Touche du clavier tabindex Fixe la position de l'élément dans l'ordre séquentiel des tabulations. Valeur numérique entière onfocus, onblur Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur). Une chaîne de caractères. onchange Un script à exécuter quand contenu du champ a été changé. Une chaîne de caractères. Attributs généraux de la balise ]]>.

L'attribut type vaut type="text". La balise permet alors à l'utilisateur de saisir une ligne de texte. Les attributs utiles pour ce type sont : size : un nombre entier, qui définit la taille visible du champ en nombre de caractères. maxlength : un nombre entier, qui définit le nombre maximum de caractères autorisés. value : une chaîne de caractères, qui permet d'afficher un texte par défaut dans la zone de saisie. readonly : un booléen. La modification du contenu n'est pas permise. L'attribut name est obligatoire pour ce type de champ. L'attribut type vaut type="checkbox". Les attributs utiles pour ce type sont : value : une chaîne de caractères, obligatoire, valeur passée au serveur (couple nom="valeur") (a plus de sens dans le cas radio suivant). checked : un booléen (s'utilise sous la forme checked="checked"). S'il est activée, la case est cochée par défaut. L'attribut type vaut type="radio". Outre la présentation (les cases sont rondes et non plus carrées), il existe une grande différence entre les cases à cocher et les boutons radio : les boutons radio qui portent le même name s'excluent mutuellement, le cochage de l'un décoche les autres. Les attributs utiles pour ce type sont : value : une chaîne de caractères, obligatoire, valeur passée au serveur (couple nom="valeur"). checked : un booléen (s'utilise sous la forme checked="checked"). S'il est activée, la case est cochée par défaut. L'attribut type vaut type="file". Il s'agit de donner la possibilité à l'utilisateur du formulaire de joindre un fichier à son envoi. L'attribut utile pour ce type est value , une chaîne de caractères, qui indique le lom du fichier à attacher par défaut. L'attribut type vaut type="hidden". Pourquoi cacher des données ? Il s'agit plutôt de faciliter le traitement des données recueillies par le serveur en fournissant le nom du formulaire, l'URL du formulaire, et d'autres indices inutiles à l'utilisateur mais très utiles au classement des données. Ces données deviennent obligatoires lorsque vous faîtes héberger vos pages Web. Les attributs utiles pour ce type sont : value : une chaîne de caractères. Valeur cachée à envoyer au serveur, obligatoire. Par exemple, avec le script CGI chargé de la gestion de l'envoi de courrier électronique sur Multimania : ]]> : cette valeur indique sur quelle adresse électronique le formulaire sera envoyé. ]]> : cette valeur indique la provenance du formulaire. ]]> : Cette valeur indique le nom du formulaire (le sujet du courrier), utile si vous avez plusieurs formulaires, cela permet de trier son courrier. ]]> : cette valeur indique l'URL complète de la page HTML à afficher après l'envoi du formulaire. L'attribut type vaut type="password". A l'identique que le type text, mais les caractères tapés sont affichés sous forme d'astérisques. Mais attention : le mot de passe est envoyé en clair dans le message final. Aucune méthode de chiffrement n'est appliquée : la confidentialité ne se limite qu'à l'instant de la saisie. Les attributs utiles pour ce type sont les mêmes que ceux du type text : size : un nombre entier, qui définit la taille visible du champ en nombre de caractères. maxlength : un nombre entier, qui définit le nombre maximum de caractères autorisés. value : une chaîne de caractères, qui permet d'afficher un texte par défaut dans la zone de saisie.

L'attribut type vaut type="submit". Les attributs utiles pour ce type sont : value : une chaîne de caractères. Légende du bouton, par défaut Submit. Une variante est possible en utilisant le type image : type="image". Le bouton d'envoi est alors... une image. Les attributs utiles pour ce type sont : src : une chaîne de caractères. URL de l'image à utiliser. L'attribut type vaut type="reset". Il s'agit d'un bouton qui, cliqué, remet à leurs valeurs par défaut l'ensemble des champs du formulaire. L'attribut utile pour ce type est value , une chaîne de caractères qui indique la légende du bouton, valant par défaut Reset.

Elle permet aux utilisateurs de votre site de laisser un commentaire ou de taper un texte quelconque.

Attribut Effet Valeur(s) name Nom de l'élément. Une chaîne de caractères. rows et cols Nombre de lignes et de colonnes de la zone de texte. Ces attributs sont obligatoires. Un nombre entier. readonly La modification du contenu n'est pas permise. Un booléen. disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen. accesskey Définit une touche du clavier. La combinaison "ALT + touche" a le même effet que l'activation du champ. Touche du clavier tabindex Fixe la position de l'élément dans l'ordre séquentiel des tabulations. Valeur numérique entière onfocus, onblur Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur). Une chaîne de caractères. onchange Un script à exécuter quand contenu du champ a été changé. Une chaîne de caractères. Attributs de la balise <textarea>. Remarque : le texte se trouvant à l'intérieur des balises ]]> et ]]> sera le texte par défaut.

Il s'agit d'une liste de propositions ou d'options parmi lesquelles l'utilisateur doit opérer un choix. Ce choix peut être unique ou multiple. Les options possibles sont décrites pour chacunes d'entre-elles dans un conteneur ]]> ( la balise fermante ]]> est obligatoire). Il y a autant de balises ]]> que d'options.

Attribut Effet Valeur(s) name Nom de l'élément. Une chaîne de caractères. size Le nombre d'options accessibles. Un nombre. multiple Permet à plusieurs options d'être simultanément sélectionnées. Un booléen. Par défaut, une seule option peut être sélectionnée. disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen. tabindex Fixe la position de l'élément dans l'ordre séquentiel des tabulations. Valeur numérique entière onfocus, onblur Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur). Une chaîne de caractères. onchange Un script à exécuter quand contenu du champ a été changé. Une chaîne de caractères. Attributs de la balise <select>.

La balise ]]> admet deux balises-enfants... ]]> permet de rassembler des éléments ]]>. Chaque "option" est une possibilité de choix dans le menu select. Cette balise possède les attributs suivants : Attribut Effet Valeur(s) value Ce qui apparaît dans la liste d'options du menu. Si cet attribut n'est pas présent, c'est le contenu de l'élément ]]> lui-même qui est affiché. Une chaîne de caractères. selected Spécifie l'option sélectionnée par défaut. Un booléen. disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen. label Une étiquette désignant l'option choisie dans le menu. Une chaîne de caractères. Attributs de la balise <option>. Cette balise permet de rassembler en catégories les éléments <option>, pour les faire apparaître de manière ordonnée dans le menu. Attribut Effet Valeur(s) label Une étiquette désignant le groupe d'options choisies dans le menu. Une chaîne de caractères. disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen. Attributs de la balise <optgroup>.

Les balises présentées dans cette partie sont très peu utilisées. Nous allons nous limiter aux balises <label> et surtout <button>, mais il existe aussi <fieldset> et <legend>.

Cette balise permet d'associer à un élément de formulaire des informations relatives à son contenu ; cette information est utile notamment pour les navigateurs destinés aux mal-voyants. Attribut Effet Valeur(s) for Renvoie à l'élément de formulaire spécifié par le même attribut id. Une chaîne de caractères. accesskey Définit une touche du clavier. La combinaison "ALT + touche" a le même effet que l'activation du champ. Touche du clavier onfocus, onblur Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur). Une chaîne de caractères. Attributs de la balise <label>. L'exemple suivant donne plusieurs possibilités d'utilisation de cet élément... useruutilisateur user user Jean Paul Jacques passwdpmot de passe passwordpasswd sSauver le nom d'utilisateur et le mot de passe dans un cookie?checkboxsaveoui commentscCommentaires?commentscomments850

Cet élément permet d'insérer un bouton dans un formulaire. Cela est également possible avec la balise ]]> , mais ]]> permet un plus large choix d'options. Il est malheureusement moins bien accepté par les "vieux" navigateurs. Attribut Effet Valeur(s) name Le nom du bouton. Une chaîne de caractères. value Valeur envoyée au serveur. Une chaîne de caractères. type Type de bouton. submit (valeur par défaut) button reset disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen. tabindex Fixe la position de l'élément dans l'ordre séquentiel des tabulations. Valeur numérique entière accesskey Définit un raccourci clavier. La combinaison "ALT + touche" a le même effet que l'activation du champ. Touche du clavier onfocus, onblur Un script à exécuter quand le curseur est positionné sur le champ (onfocus), ou bien qu'il le quitte (onblur). Une chaîne de caractères. Attributs de la balise <optgroup>. Voici quelques exemples d'utilisation de la balise... soumetmodifierModifier l'information continuecontinuerContinuer l'application checkmark.gif✔Sauvegarder resetx.gif✘Remettre à zéro buttontogglertoggle()Cacher les attributsnon stricts.