Le langage HTML/Formulaires
Un formulaire fournit un espace sur la page HTML où l'utilisateur peut entrer des données ; données qui pourront être envoyées au serveur pour être éventuellement traitées. Un formulaire est composé d'un ou plusieurs éléments d'entrée englobés par la balise <form>. Par exemple :
<form method="post">
<p>Entrez votre nom : <input type="text" name="nom"></p>
<p>Entrez votre prénom : <input type="text" name="prenom"></p>
</form>
Attention : la manière dont les données envoyées au serveur seront traitées ne dépendent pas du code HTML, qui peut juste indiquer le type de communication HTTP souhaité : get ou post. Pour traiter les données du formulaire, il faut élaborer une interface capable de les traiter sur le serveur, la plus commune étant un script PHP. Le rôle de l'HTML est d'indiquer la forme que doit avoir la requête HTTP qui sera envoyée par l'agent utilisateur au serveur et comment l'interface doit se comporter du côté client.
La balise <form>
modifier
<form> permet de regrouper plusieurs entrées sous un seul nom, ce qui permettra de les traiter ensemble. Exemple :
<form name="formulaire_1" method="post" action="traitement.php">
<p>Entrez votre nom : <input type="text" name="nom"></p>
<input type="submit" value="Envoyer 1" />
</form>
<form name="formulaire_2" method="post" action="traitement.php">
</p>Entrez votre prénom : <input type="text" name="prenom"></p>
<input type="submit" value="Envoyer 2">
</form>
Ici, si vous cliquez sur « Envoyer 2 », les données saisies dans « nom » ne seront pas récupérées car le bouton « Envoyer 2 » ne porte que sur le formulaire dans lequel il se trouve (en l'occurrence « formulaire_2 »).
La balise <form> sert également à spécifier via l'attribut action l'URI du programme destiné à traiter les données validées, le protocole utilisé lors de la transaction HTTP, soit get, soit post via l'attribut method et enfin via l'attribut accept-charset l'encodage de caractères qui doit être accepté par le serveur pour manipuler ce formulaire.
L'attribut enctype permet de spécifier l'encodage pour un envoi de type POST. En particulier la valeur enctype="multipart/form-data" permet l'envoi de fichiers au serveur, en utilisant un champ de type fichier (<input type="file">). Sans l'utilisation de cet encodage, un champ fichier n'envoie que le nom du fichier au serveur, sans son contenu.
La balise <input>
modifier
<input> est la balise la plus utilisée dans les formulaires. Elle permet par exemple de demander à l'utilisateur de la page des informations textuelles (par exemple son nom), un choix entre plusieurs options ou même de sélectionner un fichier à envoyer.
L'attribut name
modifier
Cet attribut sert à retrouver un objet (ici la balise <input>) afin de l'exploiter en JavaScript . Il est également utilisé lors de l'envoi du formulaire vers un serveur afin d'extraire les données saisies par l'utilisateur.
L'attribut id
modifier
Comme l'attribut name, id sert à nommer un objet dans une page web. Cependant, contrairement à l'attribut name, tous les id doivent être uniques dans toute la page. Ils servent également à la balise <label> que nous présenterons plus loin.
L'attribut type
modifier
Le rôle de la balise est déterminée par l'attribut type. Voici une liste des possibilités qui s'offrent à vous :
- text
- C'est un champ de saisie de texte classique.
- password
- Ce type permet d'entrer un mot de passe. Le texte saisi est remplacé par des étoiles (le caractère « * »). Attention, avoir un champ caché à l'utilisateur ne signifie pas que personne pourra le lire car le mot de passe est transmis « en clair » sur le réseau.
- checkbox
- C'est une simple case à cocher permettant à l'utilisateur de valider ou non une option. Elle est cochée si son attribut "checked" existe.
- radio
- C'est une case d'option. Elle n'est jamais utilisée seule car, en groupe, elle permet à l'utilisateur de choisir une option parmi plusieurs. Le groupe est identifié par l'attribut
name. - file
- Ce type permet à l'utilisateur de choisir un fichier afin qu'il soit envoyé vers un serveur. Afin que le contenu du fichier soit envoyé au lieu du chemin seulement, le formulaire doit spécifier un encodage différent de celui par défaut, en utilisant l'attribut
enctypeet utiliser la méthode POST : <form enctype="multipart/form-data" method="POST">- submit
- C'est un simple bouton permettant d'envoyer le formulaire.
- reset
- C'est un bouton permettant de remettre le formulaire dans son état initial.
- image
- C'est un bouton contenant une image permettant d'envoyer le formulaire. L'URL de l'image est spécifiée par l'attribut
src. - hidden
- C'est un champ caché qui permet à l'auteur du formulaire de faire passer des informations au serveur qui n'ont pas à être modifiées par l'utilisateur. Attention, même si l'utilisateur ne peux pas voir directement ces champs, leur valeur est aisément modifiable. Il ne faut donc JAMAIS faire confiance aux données venant de ces champs lors du traitement du formulaire.
- name
- cet attribut permet d'insérer une variable dans le texte.
Si l'attribut type est omis, le type text est utilisé par défaut.
L'attribut value
modifier
Cet attribut permet de spécifier la valeur par défaut d'un champ.
Exemple :
<form name="formulaire" method="post">
<p>Un champ texte : <input type="text" name="nom" id="nom"> </p>
<p>Un mot de passe : <input type="password" name="pass" id="pass"> </p>
<p><input type="checkbox" name="choix_simple" id="choix_simple"> Une case à cocher </p>
<p><input type="radio" name="choix_multiple" value="choix1"> Premier choix </p>
<p><input type="radio" name="choix_multiple" value="choix2"> Deuxième choix </p>
<p><input type="radio" name="choix_multiple" value="choix3"> Troisième choix </p>
<p>Un fichier à mettre sur le serveur :<input type="file" name="fichier" id="fichier"> </p>
<p>Un champ que l'utilisateur ne pourra pas modifier ni même voir : <input type="hidden" name="champ_cache" id="champ_cache" value="coucou"> </p>
<p><input type="submit" /><input type="reset" /></p>
</form>
L'attribut checked
modifier
Les champs à sélectionner ayant cet attribut (qui s'utilise sans valeur) le sont par défaut.
L'attribut disabled
modifier
Les champs ayant cet attribut (qui s'utilise sans valeur) ne sont jamais envoyé lors de la soummission[1].
La balise <label>
modifier
L'habitude courante lors du développement d'un formulaire web consiste à placer le texte associé au champs d'entrée à côté de ces champs sans préciser explicitement qu'ils sont associés. Ce n'est pas un gros problème pour l'utilisateur moyen car en visualisant la page, il associe directement ces deux informations et remplit aisément le formulaire. Par contre, pour un utilisateur ayant un handicap, cette association peut ne pas être aussi facile.
Il est donc recommandé d'utiliser un label c'est à dire la balise <label> permettant d'associer une légende à un champ d'entrée.
De plus, un clic sur un label donne le focus au champ correspondant.
Ainsi, tous les utilisateurs pourront utiliser votre formulaire sans problème.
L'attribut for
modifier
Cet attribut sert à spécifier l'identifiant du champ d'entrée (attribut id) dont le label est la légende.
- Exemple
<form name="formulaire" method="post">
<p><label for="nom1">Un champ texte : </label> <input type="text" name="nom" id="nom1"> </p>
<p><label for="nom2">Un autre champ texte : </label> <input type="text" name="nom" id="nom2"> </p>
<p><input type="submit"></p>
</form>
La balise <fieldset>
modifier
Cette balise sert à regrouper plusieurs champs qui ont un rapport entre eux comme par exemple un groupe de cases d'options. Le but de cette balise est le même que celui de <label> car elle permet d'indiquer explicitement la fonction d'un groupe de champs.
La balise <legend>
modifier
On doit placer cette balise dans un bloc de fieldset. Elle permet de donner une légende au groupe de champs.
Exemple :
<form id="" action="" method="post">
<fieldset>
<legend>Voici une liste de cases à cocher</legend>
<p>
<input type="radio" name="choix_multiple" id="choix_multiple_1" value="choix1">
<label for="choix_multiple_1">Premier choix </label>
</p>
<p>
<input type="radio" name="choix_multiple" id="choix_multiple_2" value="choix2">
<label for="choix_multiple_2">Deuxième choix </label>
</p>
<p>
<input type="radio" name="choix_multiple" id="choix_multiple_3" value="choix3">
<label for="choix_multiple_3">Troisième choix </label>
</p>
</fieldset>
</form>
La balise <textarea>
modifier
Génère des zones de texte multilignes.
<textarea rows="nombre de lignes -1" name="commentaires" />
Par exemple, pour créer une zone de saisie de six lignes :
<textarea rows="5" name="suggestions">
Entrer ici vos suggestions
</textarea>
Pour faire en sorte que le texte affiché s'efface lorsque l'utilisateur remplit la zone :
<textarea rows="5" name="suggestions" placeholder="Entrer ici vos suggestions">
</textarea>
La balise <select>
modifier
Cette balise affiche un menu déroulant cliquable. Exemple pour choisir une des trois propositions :
<select name="Selection">
<option value="1">Choix 1</option>
<option value="2" selected>Choix 2</option>
<option value="3">Choix 3</option>
</select>
Pour passer ce menu en lecture seule, ajoute l'attribut : disabled="true" (on ne peut alors plus voir les options non sélectionnées).
multiple
modifierL'attribut "multiple" d'une balise "select" indique que l'utilisateur peut effectuer un choix multiple :
<select name="Selection2" multiple="multiple">
<option value="1">Choix 1</option>
<option value="2">Choix 2</option>
<option value="3">Choix 3</option>
</select>
