Cours de HTML - Les formulaires

version 1.10, dernière mise à jour le 18 juillet 2005.

Chercher dans le cours :  

Table des matières (TdM)

Retour au menu

Contenu du cours

I. Généralités

1. Fonctionnement général

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.

>Retour à la TdM

II. La balise <form>

1. Où se place-t-elle?

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

>Retour à la TdM

2. Fonction

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).

>Retour à la TdM

3. Attributs

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 &, nom1=valeur1&nom2=valeur2&nom3=valeur3 (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 (<input type="file" ...>).
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.

Table 1. Attributs de la balise <form>.

>Retour à la TdM

4. Exemples

Exemple pour un formulaire d'envoi de courrier électronique sur le serveur de Multimania : <form method="get" action="/cgi-bin/mailer">.

Exemple pour un formulaire classique sans l'aide de script CGI : <forum action="mailto:webmaster@allhtml.com" method="post" enctype="text/plain">.

>Retour à la TdM

III. la balise <input>

1. Introduction

a. Fonction

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 <input>. 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

>Retour à la TdM

b. Attributs généraux

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.

Table 2. Attributs généraux de la balise <input>.

>Retour à la TdM

2. Types de balises <input>

a. Champ de saisie

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.

>Retour à la TdM

b. Case à cocher

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.

>Retour à la TdM

c. Bouton radio

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.

>Retour à la TdM

d. Attacher un fichier

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.

>Retour à la TdM

e. Cacher des données

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 :

• <input type="hidden" name="TO" value="login@multimania.com"> : cette valeur indique sur quelle adresse électronique le formulaire sera envoyé.

• <input type="hidden" name="FROM" value="login@multimania.com"> : cette valeur indique la provenance du formulaire.

• <input type="hidden" name="SUBJECT" value="FORMULAIRE">  : Cette valeur indique le nom du formulaire (le sujet du courrier), utile si vous avez plusieurs formulaires, cela permet de trier son courrier.

• <input type="hidden" name="GOTOURL" value="http://www.multimania.com/login/reponse.html">  : cette valeur indique l'URL complète de la page HTML à afficher après l'envoi du formulaire.

>Retour à la TdM

f. Mot de passe

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.

>Retour à la TdM

3. Soumettre et mettre à zéro des données

a. Soumission de données

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.

>Retour à la TdM

b. Réinitialisation d'un formulaire

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.

>Retour à la TdM

IV. la balise <textarea>

1. Fonction

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

>Retour à la TdM

2. Attributs

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.

Table 3. Attributs de la balise <textarea>.

>Retour à la TdM

Remarque : le texte se trouvant à l'intérieur des balises <textarea> et </textarea> sera le texte par défaut.

>Retour à la TdM

V. Liste de choix, la balise <select>

1. Fonctionnement

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 <option> ( la balise fermante </option> est obligatoire). Il y a autant de balises <option> que d'options.

>Retour à la TdM

2. Attributs de la balise <select>

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.

Table 4. Attributs de la balise <select>.

>Retour à la TdM

3. Balises <optgroup> et <option>

a. Introduction

La balise <select> admet deux balises-enfants... <optgroup> permet de rassembler des éléments <option>.

>Retour à la TdM

b. Balise <option>

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 <option> 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.

Table 5. Attributs de la balise <option>.

>Retour à la TdM

c. Balise <optgroup>

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.

Table 6. Attributs de la balise <optgroup>.

>Retour à la TdM

VI. Autres éléments de formulaire

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>.

1. La balise <label>

a. Fonction

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.

>Retour à la TdM

b. Attributs

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.

Table 7. Attributs de la balise <label>.

>Retour à la TdM

c. Exemple

L'exemple suivant donne plusieurs possibilités d'utilisation de cet élément...

<table summary="">
  <tr>
    <td><label for="user" accesskey="u">utilisateur</label></td>
    <td>
      <select name="user" id="user">
        <option>Jean</option>
        <option>Paul</option>
        <option>Jacques</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><label for="passwd" accesskey="p">mot de passe</label></td>
    <td><input type="password" id="passwd" passwd=""></input></td>
  </tr>
</table>
<p><label accesskey="s">Sauver le nom d'utilisateur et le mot de passe dans un cookie?</label><input type="checkbox" name="save" value="oui"></input>
</p>
<p><label for="comments" accesskey="c">Commentaires?</label><textarea name="comments" id="comments" rows="8" cols="50"></textarea> </p>

>Retour à la TdM

2. La balise <button>

a. Fonction

Cet élément permet d'insérer un bouton dans un formulaire. Cela est également possible avec la balise <input> , mais <button> permet un plus large choix d'options. Il est malheureusement moins bien accepté par les "vieux" navigateurs.

>Retour à la TdM

b. Attributs

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.

Table 8. Attributs de la balise <optgroup>.

>Retour à la TdM

c. Exemple

Voici quelques exemples d'utilisation de la balise...

<button name="soumet" value="modifier">Modifier l'information</button>
<button name="continue" value="continuer">Continuer l'application</button>
<button><img src="checkmark.gif" alt="✔"></img>Sauvegarder</button>
<button type="reset"><img src="x.gif" alt="✘"></img>Remettre à zéro</button>
<button type="button" id="toggler" onclick="toggle()">Cacher les attributs<em>non stricts</em>.</button>

>Retour à la TdM

Exercice 1. Créations de formulaires

Énoncé

Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Cours précédent : Contrôle du son et de la vidéo

Liste des fichiers associés à ce fichier HTML :

• Fichier XML
• DTD du cours
• Feuille de style XSL

Historique de ce document

• Le 18 juillet 2005, version 1.10. Réécriture des exemples.
• Le 22 avril 2004, version 1.03. Corrections typographiques.
• Le 11 mars 2004, version 1.02. Ajout d'un lien vers l'exercice.
• Le 13 novembre 2003, version 1.01. Corrections de coquilles.
• Le 18 novembre 2002, version 1.00. Création du cours.

Conditions d'utilisation et licence

Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu