Qu'est ce qu'un formulaire?

Un formulaire HTML permet de rendre la page Web plus interactive en la rendant capable de dialoguer avec l'internaute à travers des champs de saisie et boutons. Un formulaire permet à l'internaute de saisir du texte ou de valider un choix ou encore de sélectionner une entrée. Ces informations seront ensuite (dans la plupart des cas) envoyées au serveur pour les traiter. C'est très utile surtout quand il s'agit d'une page Web dynamique.

Balise <form>

La balise <form> délimite les champs du formulaire (zones de texte, boutons...). Elle peut avoir plusieurs attributs dont voici les plus fréquents:

L'attribut name

L'attribut name permet d'identifier le formulaire par un nom. On peut mettre n'importe quel nom (à conditions qu'il ne contienne que les caractères conventionnels comme les lettres et les chiffres). Le nom du formulaire est unique. En effet, nous pouvons déclarer plusieurs formulaires dans la même page, pour les distinguer les uns des autres il suffit de leur donner des noms différents.

L'attribut method

L'attribut methode permet de spécifier la méthode à utiliser pour envoyer le formulaire au serveur. En effet, l'objectif d'un formulaire c'est de transférer les données saisies par le client au serveur (on dit généralement poster ou soumettre le formulaire). En HTML, il existe deux méthodes pour envoyer un formulaire: GET et POST.

La méthode GET

La méthode GET (method="get") est la valeur par défaut si on ne précise aucune valeur pour l'attribut method. Cette méthode permet d'envoyer les données du formulaires à travers l'URL en utilisant les symboles ? pour préciser la suite de données et & pour séparer les données entre elles.

Pour mieux comprendre, imaginons que sur ce site il existe une page nommée infos.html qui renferme un formulaire utilisant la méthode GET et qui contient deux zones de textes nommées respectivement ville et pays. Au chargement du formulaire, le client à saisie dans les deux champs les valeurs Marrakech et Maroc. Quand le client ordonnera l'envoi du formulaire, les données saisies seront envoyées via l'URL et celui ci aura la forme suivante:

http://www.chiny.me/infos.html?ville=Marrakech&pays=Maroc

La méthode POST (method="post") permet d'envoyer les données du formulaire au serveur à travers une entête. Pour simplifier, on va dire que les données et la page ne font qu'un. Les informations ne seront donc pas visibles sur l'URL. La méthode POST permet aussi de poster un volume de données plus important que celui transmis par GET. D'ailleurs on peut même poster un fichier à travers un formulaire via cette méthode. C'est ce que l'on appelle le "Upload" (C'est comme si vous "uploadez" une vidéo sur Youtube, ou votre photo de profil sur Facebook).

L'attribut action

Quand un formulaire est rempli par l'internaute, il est posté au serveur pour le traitement. Il faut donc désigner la page qui se chargera du traitement des données. Cette page est spécifiée dans l'attribut action.

Si l'attribut action est vide ou n'est pas mentionné, alors c'est la page courante (celle qui contient le formulaire) qui sera la page action.

Supposons que nous voulons créer un formulaire nommée "inscription" utilisant la méthode "post" et faisant appel à la page "inscription.html" pour assurer le traitement après envoi. Le code HTML ressemblera à ceci:
Si vous exécutez ce code sur le navigateur, rien ne s'affichera. En effet, ce qui sera visible c'est ce que l'on intégrera dans la balise <form>.

Que contient donc la balise <form>? Elle contient ce que l'on appelle les champs de formulaire. Ce sont des objets comme des zone de texte ou des boutons. Nous allons maintenant voir comment intégrer ces champs.

Balise <input>

La zone de texte est le champ de formulaire le plus célèbre. Il permet d'écrire un texte sur une seule ligne (comme le nom ou le login par exemple). Pour créer une zone de texte on fait appel à la balise <input>. Il s'agit d'une balise orpheline (pas de </input>).

Notez que la plupart des champs de formulaire existants sont déclarés aussi à l'aide de la même balise <input>. Pour distinguer une zone de texte d'un bouton par exemple, on fait appel à l'attribut type. Détaillons les attributs les plus utilisées pour les inputs.

Attribut type

L'attribut type permet de définir le type de champ à intégrer. Voici les valeurs à mettre pour cet attribut et qui permettent d'avoir les champs les plus fréquents:

• text: Permet d'avoir une zone de texte normale (adapté pour les noms, emails, login...)
• password: Permet d'avoir une zone de mot de passe où les caractères sont masqués.
• radio: Pour créer un bouton radio. Il s'agit d'un petit cercle qu'on peut cocher et qui permet de faire un choix unique. Le fait de cocher un autre bouton radio décoche le premier.
• checkbox: Permet de créer une case à cocher. C'est un petit carré qu'on peut cocher ou décocher. Il est destiné à faire des choix multiples.
• file: Permet de créer le champ de chargement de fichier (comme une pièce jointe d'un email).
• hidden: Pour créer un champ caché. C'est comme une zone de texte mais qui n'est pas visible sur le navigateur. Il sert à stocker provisoirement des données jusqu'à la phase de traitement.
• button: Permet de créer un bouton simple. A la base, ce bouton ne fait aucune opération. Il faut donc le programmer (généralement avec Javascript).
• reset: Permet de créer un bouton d'annulation. Si le formulaire contient des champs qu'on a déjà saisi, ce bouton permet de tout initialiser.
• submit: C'est le bouton d'envoi. C'est lui qui permet de poster le formulaire vers la page définie dans l'attribut action de la balise <form>.

Attribut name

L'attribut name permet de donner un nom au champ de formulaire. Le nom sert d'identifiant du champ et doit être unique.

Attribut value

L'attribut value sert à définir la valeur par défaut d'un champ. S'il s'agit d'une zone de texte, le fait de déclarer l'attribut value force le navigateur à initialiser ce champ avec le texte faisant office de valeur de l'attribut. Si le champs est un bouton, alors le texte de l'attribut value constitue l'étiquette (ou label). C'est le texte visible sur le bouton. Pour les boutons radio ou les cases à cocher, le texte de l'attribut value n'est pas visible sur le navigateur mais il est très utile (si on fait appel à des programmes comme Javascript ou PHP).

Attribut size

L'attribut size contient un entier comme valeur. Il définit la largeur du champ en caractères. Par défaut, une zone de texte mesure 20 caractères (cela veut dire qu'on peut voir jusqu'à 20 caractères à la fois même si le texte est plus grand).

Attribut tabindex

L'attribut tabindex permet de définir l'ordre de tabulation. En pratique, si on veut saisir un grand formulaire, on se déplace d'un champ à un autre en appuyant sur la touche "tabulation" du clavier. Par défaut le curseur se déplace dans l'ordre où sont déclarés les champs. On peut rompre cet ordre en définissant les valeurs de tabindex. La valeur est un entier qui commence de 1. Le curseur se déplacera dans l'ordre croissant de tabindex.

Attribut checked

L'attribut checked est un attribut booléen. Explicitement il est déclaré comme ceci: checked="true", mais il suffit de déclarer checked tout seul pour que le navigateur sache qu'il est activé. Cet attribut s'applique uniquement sur les boutons radio (type="radio") et les cases à cocher (type="checkbox"). S'il est déclaré alors le bouton est automatiquement coché au chargement de la page.
Il existe deux autres champs de formulaire mais qui ne sont pas déclarés à l'aide de la balise <input>. Ce sont les espaces de texte et les listes de sélection.

Balise <textarea>

La balise <textarea> permet de définir un espace de texte. Un espace de texte est une grande zone de texte qui permet d'écrire des paragraphes entiers.

Les attributs name et tabindex sont aussi applicables sur l'espace de texte mais, en plus, il dispose des attributs suivants:

• cols: définit la largeur en caractères de l'espace de texte. Elle désigne combien de caractère une ligne peut-elle contenir. Le fait de dépasser la largeur définie entraîne un retour automatique à la ligne.
• rows: définit la hauteur de l'espace de texte. La hauteur désigne combien de ligne on peut voir à la fois. Si le texte dépasse le nombre de ligues défini, alors une barre de défilement qui permet d'atteindre le reste des lignes apparaît.

Balise <select>

La balise <select> permet de déclarer une liste de sélection (ou liste déroulante). Elle dispose également des attributs name et tabindex. Pour remplir cette liste avec les valeurs (appelées options) on doit déclarer une autre balise à l'intérieur, c'est la balise <option>. Dans la balise <option> on déclare le mot à afficher (en tant qu'élément de la liste).

La balise <option> dispose d'un attribut booléen du nom de selected. Si cet attribut est déclaré, c'est l'option qui le contient qui sera automatiquement sélectionnée au chargement de la page.

Exemple de formulaire d'inscription

Ce qui donne le résultat suivant:
J'avoue, le résultat n'est pas très joli mais c'est du HTML. A lui seul le design laisse à désirer. Mais tout cela sera du passé très bientôt.
On peut appliquer un cadre qui entoure notre formulaire grâce à la balise <fieldset> et une légende en guise de titre avec la balise <legend>.

Exemple:
Ce qui donne:

Les formulaires en vidéo