Un formulaire est défini par la balise ouvrante <form>, et doit être terminé par la balise fermante </form>, qui est obligatoire.

La balise ouvrante accepte divers attributs. Parmis ceux-ci, il y a method et action, qui sont les seuls vraiment obligatoires. Le premier sert à spécifier la méthode HTTP qui sera utilisée pour la transmission du formulaire, il n'y a que deux valeurs possibles : soit post, soit get. Le second sert à spécifier la cible du formulaire, càd le script ou la page qui collectera les données du formulaire dans le but de les traiter et/ou de les ré-afficher. Sa valeur est donc un nom de fichier ou d'exécutable, avec le chemin relatif ou absolu qui permet de l'atteindre...

exemples :

Autres attributs de <form>

Autre attribut utile dans les formulaires, mais facultatif, name permet de donner un nom au formulaire, ce qui peut être très pratique pour les fonctions JavaScript, ou tous simplement pour avoir une syntaxe propre et une organisation intelligente de ces pages ; l'autre attribut, lui aussi facultatif, est target, qui permet de spécifier le nom du cadre ou de la fenêtre dans lequel doit s'exécuter le script (celui renseigné dans l'attribut action). Ce second paramètre accepte les valeurs _blank, _self, _parent ou tous noms de frame ou d'iframe valide...

exemples :

Attention ! Si votre formulaire intègre des fonctionnalités de téléchargement de fichiers, vous devez rajouter un attribut qui permet de spécifier que le formulaire gère une sorte d'encodage multi-format (à la fois des données saisies dans les champs en même tant que des éléments binaires...). Cet attribut est enctype. Il accepte les valeurs standard "text/html", "text/css", "text/javascript", "text/vbscript", "text/plain" et enfin "multipart/form-data", de loin la plus utilisée...

exemple :

Prise en charge de CSS

Bien sûr, les formulaires peuvent être soumis aux feuilles de style, que ce soit CSS 1 ou CSS 2, ils acceptent donc les attributs class et id.

exemples :

En résumé

<form
method="post|get"
action="{nom du script}"
[ name="{nom du formulaire}" ]
[ target="_self|_blank|_parent|{nom de cible}" ]
[ enctype="text/html|text/css|text/javascript|text/vbscript|text/plain|multipart/form-data" ]
[ class="{classe(s) css}" ]
[ id="{identifiant}" ]
>...</form>

éléments de formulaire

Les éléments de saisie : <input />

Les éléments <input /> font partie des balises dites orphelines, càd qui n'ont pas de balise fermante. La spécification W3C recommande donc de les clôturer en rajoutant un espace et une barre oblique...

Les zones de texte
Sans doute l'élément de saisie le plus répandu. Dès lors qu'il y a un formulaire, vous pouvez être sûr(e) qu'il y en a au moins un ;-) Il permet à un utilisateur de saisir une petite quantité de texte.


Il existe divers attributs, qui peuvent être appliqués à la plupart des balises <input />. Parmis celles-ci, size permet de définir une largeur, mais il est préférable de passer par les CSS pour définir proprement la largeur souhaitée, et définir plus facilement, et plus proprement, d'autres effets tels que couleurs et bordures...


L'attribut maxlenght permet de spécifier la longueur maximale que l'élément pourra accueillir ; cette valeur est spécifiée en nombre de caractères, mais attention, certains navigateurs n'en tiennent pas compte...


Les mots de passe
Afin de permettre à vos utilisateurs de saisir une donnée confidentielle, comme un mot de passe, la classe password permet de masquer ce qui est saisi, en affichant à la place des étoiles, ronds, croix ou tout autre caractère (selon le navigateur utilisé).
Dans l'exemple ci-dessous, le mot de passe est écrit en clair dans le code source, c'est toto, mais il n'est pas lisible lors de l'affichage.
Attention ! Le mot de passe n'est ni crypté ni encodé, juste masqué à l'affichage... Lorsqu'il sera transmis par les méthodes GET ou POST, il sera récupéré en clair...


Les boutons radio ou boutons bascule
Un bouton radio permet de basculer de l'une à l'autre des valeurs proposées, et pour que cela puisse se faire, il est impératif que les différents boutons aient le même nom.


Une fois une valeur choisie, il n'est plus possible de la déselectionner, sauf si il existe un autre cercle d'option pour servir de valeur d'échappement.
Pour préselectionner une valeur, vous devez utiliser l'attribut checked, qui prends pour valeur "checked" et rien d'autre... Ce sera évidemment la valeur effectivement cochée lorsque le formulaire sera validé qui sera utilisée, elle peut bien sûr être différente de celle de départ ;-)


Les cases à cocher
Les cases à cocher sont des éléments un petit peu spéciaux des formulaires, car ils répondent à des contraintes très spécifiques... Si, contrairement au bouton radio, on peut annuler le cochage, seuls les éléments effectivement cochés sont réceptionnés après validation du formulaire, et encore, par défaut avec la valeur logique "on" (pour dire "allumé"). On peut heureusement spécifier une valeur propre...
Attention ! Si vous voulez autoriser les gens à choisir plusieur valeurs, voire toutes, il faut faire suivre le nom de vos cases à cocher par une paire de crochets et en utilisant toujours le même nom, ce qui permet de dire que l'ensemble de vos cases cochées seront un tout (sous la forme d'une variable de type array, un tableau)...


Pour préselectionner une valeur, vous devez utiliser l'attribut checked, qui prends pour valeur "checked" et rien d'autre... Ce seront évidemment les seules cases effectivement cochées lorsque le formulaire sera validé qui seront utilisés, elle peut bien sûr être différente de celle de départ ;-)

En résumé

<input
type="text|password|radio|checkbox|submit|reset|file|hidden|image|button"
name="{nom du champ}"
value="[ {valeur} ]"
[ checked="checked" ]
[ class="{classe(s) css}" ]
[ id="{identifiant}" ]
/>

Listes & listes déroulantes : <select> ... </select>

Les listes déroulantes sont des éléments très répandus à la fois sur internet et dans les logiciels courants, elles permettent de mettre dans un minimum de place un très grand nombre d'items, ce que les boutons radio ou les cases à cocher ne permettent pas forcément. Leur comportement est différent de celui des <input />. D'une part, la balise d'ouverture s'écrit <select>, et prends les attributs de base tels que le nom, la classe, l'identifiant (name, class, id) et quelques autres que nous verront plus bas. Ensuite, elle nécessite une balise fermante </select>, et c'est avant cette fermeture que s'intercaleront un certain nombre de couples de balises <option> et </option>, qui désignent les sous-éléments, ou plutôt les composants, de la liste. Ce sont les tags <option> qui gèrent l'attribut value.


Dans ce premier exemple, la ligne <option value=""></option> créé une ligne blanche, soit en quelque sorte une valeur d'échappement si aucun élément ne nous concerne (ce qui n'est pas vrai dans cet exemple précis, mais cela peut arriver...). On peut indiquer une valeur sélectionnée par défaut à l'aide de l'attribut selected et de son unique et systématique valeur "selected".


Il est aussi possible de faire des regroupement d'options au sein de groupes, ce qui permet de faire des recoupements logiques d'une part, mais aussi de mettre en avant certaines informations sans pour autant que celles-ci soient sélectionnables. En effet, le contenu des balises <optgroup> et son pendant fermant </optgroup> ne peut pas être choisi comme valeur, mais les différentes <option> à l'intérieur le peuvent, et apparaîssent légèrement décalées par rapport à leur homologues situées en dehors des groupes d'options...
Attention !, pour apparaître, le groupe d'options <optgroup> doit avoir son attribut label renseigné avec une petite chaîne de caractères, une description plus longue pouvant être donnée via l'attribut facultatif title, qui apparaîtra en info-bulle en survolant le libellé du groupe...


Une liste peut aussi ne pas être déroulante, et pouvoir permettre le choix de plusieurs valeurs, un peu de la même façon que les cases à cocher d'ailleurs. Il suffit de renseigner l'attribut multiple et son unique et systématique valeur "multiple", de rajouter une paire de crochets après le nom du <select>, et le tour est joué. L'attribut facultatif size permet de limiter à un certain nombre la quantité d'éléments affichés avant que la barre de défilement vertical ne prenne le relai...

En résumé

<select

name="{nom de la liste}"
[ multiple="multiple" ]
[ size="{nombre}" ]
[ class="{classe(s) css}" ]
[ id="{identifiant}" ]

>

<option

value="[ {valeur} ]"
[ class="{classe(s) css}" ]
[ selected="selected" ]

>[ {label d'option} ]</option>
<optgroup

label="{label de groupe}"
[ title="{titre contextuel}" ]
[ class="{classe(s) css}" ]

>

[ <option [ ... ]>[ ... ]</option> ]

</optgroup>
[ <option [ ... ]>[ ... ]</option> ]

</select>

Zones de texte étendues : <textarea>

Compléments

Zones de champs

Ces balises spécifiques vous permettent de faire des regroupements, donc du rangement et de l'ordonnancement, de vos différents éléments de formulaire. Ces zones sont caractérisées par des filets tout autour de la zone de champs, et peuvent être munies d'un titre. Les feuilles de style permettent de jouer sur les styles et attributs de texte, de bordures, et de tout ce que vous voulez ;-) Il s'agit du tag <fieldset> et de son pendant fermant </fieldset>, qui peut avoir une légende grâce au couple <legend> </legend>.


Bien sûr, on peut imbriquer les <fieldset> entre eux, mettre des calques (<div>) ou des tables (<table>) à l'intérieur, etc, etc...

Labels cliquables

Une petite astuce qui peut augmenter la convivialité de vos formulaires. Vous avez sans doute remarqué que dans les boîtes de dialogue des logiciels, il n'est pas nécessaire de cliquer sur une case à cocher ou sur le bouton radio en lui-même, le simple fait de cliquer sur le texte sélectionne l'item correspondant... Et bien il est tout à fait possible de faire cela dans un formulaire HTML...
Il suffit dans un premier temps de renseigner pour chaque élément du formulaire son attribut id, et de leur donner un nom unique (même pour les boutons bascule, car il doit y avoir un label par valeur). Dans un deuxième temps, il faut encadrer chaque texte descriptif par des balises <label> et </label>, et pour la balise ouvrante, renseigner l'attribut for, qui prend donc le fameux nom de l'id. Si ce n'est pas très clair, voyez les exemples ci-après :

Synthèse

<!-- début de formulaire -->
<form

method="post|get"
action="{nom du script}"
[ name="{nom du formulaire}" ]
[ target="_self|_blank|_parent|{nom de cible}" ]
[ enctype="text/html|text/css|text/javascript|text/vbscript|text/plain|multipart/form-data" ]
[ class="{classe(s) css}" ]
[ id="{identifiant}" ]

>

<!-- début de zone de champs -->
<fieldset [...]>

<!-- légende de zone de champs -->
<legend [...]>Légende de zone de champs</legend>

<!-- élément(s) de saisie de texte mono-ligne, boutons, etc... -->
<input

type="text|password|radio|checkbox|submit|reset|file|hidden|image|button"
name="{nom du champ}"
value="[ {valeur} ]"
[ checked="checked" ]
[ class="{classe(s) css}" ]
[ id="{identifiant}" ]
[ src="chemin/image.ext" ]

/>

<!-- zone de texte multi-ligne -->
<textarea

name="{nom du champ}"
[ class="{classe(s) css}" ]
[ id="{identifiant}" ]
[ rows="{nombre de lignes}" ]
[ cols="{nombre de colonnes}" ]

>[ {contenu de la zone de texte long} ]

</textarea>

<!-- liste d'options -->
<select

name="{nom de la liste}"
[ multiple="multiple" ]
[ size="{nombre}" ]
[ class="{classe(s) css}" ]
[ id="{identifiant}" ]

>

<!-- une option de la liste -->
<option

value="[ {valeur} ]"
[ class="{classe(s) css}" ]
[ selected="selected" ]

>[ {label d'option} ]</option>

<!-- groupe(s) d'options au sein de la liste -->
<optgroup

label="{label de groupe}"
[ title="{titre contextuel}" ]
[ class="{classe(s) css}" ]

>

<!-- option(s) au sein d'un groupe -->
[ <option [ ... ]>[ ... ]</option> ]

</optgroup>

<!-- autres options au sein de la liste -->
[ <option [ ... ]>[ ... ]</option> ]

</select>

<!-- fin de zone de champs -->
</fieldset>

<!-- fin de formulaire -->
</form>