D.3 – Interactions Client-Serveur : requête avec données

Définition

Un formulaire est un ensemble d’éléments d’une page web qui permettent de recueillir des informations en vue de les transmettre à un serveur, via une requête.

Structure et composition d’un formulaire

1 – Le conteneur principal

Dans le code HTML d’un fichier, un formulaire est délimité par les balises <form>…</form>.

La balise ouvrante <form> possède deux attributs importants :

• action : la valeur de cet attribut est le chemin et le nom d’un fichier contenant un programme – écrit dans un langage de programmation comme php – qui va traiter les données du formulaire qui seront transmises au serveur.
  Par exemple : action=’programme.php’
• method : la valeur de cet attribut indique de quelle manière les données du formulaire vont être écrites dans la requête qui sera envoyée au serveur. Par défaut la valeur de ‘method’ est ‘GET’. Une autre valeur possible est ‘POST’.
  Par exemple : method=’GET’

En résumé :
<form action=’programme.php’ method=’GET’>…</form>
ou
<form action=’fonction1.php’ method=’POST’>…</form>

2 – Les éléments de saisie de données

Il en existe trois :

• input
• textarea
• select

2.a – L’élément ‘input’

2.a.1 – L’élément ‘input’ possède un attribut important : ‘type‘.

Selon la valeur de cet attribut, la nature des informations saisies et l’aspect visuel de l’élément ‘input’ peuvent varier.
Voici quelques exemples de valeur possible pour l’attribut type.

• ‘text‘ : c’est la valeur par défaut. Dans ce cas l’utilisateur peut écrire dans un champ une chaîne de caractères d’une seule ligne.
  <input type=’text’>
• ‘password‘ : dans ce cas l’utilisateur peut écrire dans un champ une chaîne de caractères d’une seule ligne qui sera masquée. Un caractère par défaut – comme un point ou une étoile – s’affiche à la place des caractères saisis. Ceci est utilise pour la saisie d’un mot de passe par exemple.
  <input type=’password’>
• ‘number‘ : dans ce cas l’utilisateur peut écrire dans un champ une chaîne de caractères d’une seule ligne mais composée uniquement de chiffres.
  <input type=’number’>
• ‘checkbox‘ (case à cocher) : dans ce cas l’utilisateur clique sur une case vide pour la cocher .
  <input type=’checkbox’>
• ‘radio‘ (bouton radio) : dans ce cas l’utilisateur clique sur un bouton de forme arrondie vide pour le cocher .
  <input type=’radio’>
• Autres valeurs possibles pour ‘type’ : ‘hidden‘, ‘email‘, ‘url‘, ‘date‘, ‘time‘, ‘color‘, etc.
  Pour une liste complète, cliquer ici.

2.a.2 – L’élément ‘input’ possède deux attributs qui sont liés : ‘name‘ et ‘value‘.

• la valeur de ‘name‘ doit être unique pour un formulaire donné – exception faite du cas où le type de input est ‘checkbox’ ou ‘radio’. Cette valeur est une chaine de caractères ne comportant ni espace, ni lettres accentuées, ni caractères spéciaux. Seul le tiret du bas est autorisé en plus des lettres de A à Z, de a à z et les chiffres de 0 à 9..
  <input type=’text’ name=’nom_famille’>
• la valeur prise par l’attribut ‘value’ est déterminée par ce que fait l’internaute.
  Par exemple si le ‘type’ de ‘input’ est ‘text’, la valeur de ‘value’ sera la chaîne de caractères écrite par l’utilisateur dans le champ de saisie.
  Il est toutefois possible de donner à l’attribut ‘value’ une valeur par défaut.
  <input type=’text’ name=’nom_famille’ value=’inconnu’>
• Ces deux attributs sont liés : lors de la soumission du formulaire la valeur de l’attribut ‘name’ sera associée à celle de l’attribut ‘value’ dans le requête de la façon suivante :
  ‘valeur_de_name=valeur_de_value’.
  Par exemple : nom_famille=inconnu

2.a.3 – Cas particulier des types ‘checkbox’ et ‘radio’

• Soit les trois éléments suivants d’un formulaire :
  • <input type=’checkbox’ name=’reponseA’ value=’url’>
    <input type=’checkbox’ name=’reponseB’ value=’email’>
    <input type=’checkbox’ name=’reponseC’ value=’domaine’>
  • Dans ce cas l’utilisateur peut cocher plusieurs cases. Pour chaque case cochée il sera écrit dans la requête envoyée un couple ‘valeur_de_name=valeur_de_value’.
    Par exemple si l’internaute clique sur la deuxième et troisième case seulement on pourra lire dans la requête : reponseB=email&reponseC=domaine.
  • Ceci est également vrai pour le type ‘radio’.
    
• Soit les trois éléments suivants d’un formulaire :
  • <input type=’checkbox’ name=’reponse’ value=’url’>
    <input type=’checkbox’ name=’reponse’ value=’email’>
    <input type=’checkbox’ name=’reponse’ value=’domaine’>
  • Dans ce cas l’utilisateur ne peut cocher qu’une seule case. Et la requête envoyée ne contiendra qu’un seule couple ‘valeur_de_name=valeur_de_value’, où ‘valeur_de_value’ correspond à la valeur ‘value’ de la case cochée.
    Par exemple si l’internaute clique sur la deuxième case, on lira dans la requête :
    reponse=email.
  • Ceci est également vrai pour le type ‘radio’.
    
• Les types ‘checkbox’ et ‘radio’ possèdent également un attribut booléen : ‘checked’
  • Quand cet attribut est écrit, la case à cocher ou le bouton radio sont cochés par défaut.
    <input type=’checkbox’ name=’reponse’ value=’url’ checked>
    <input type=’radio’ name=’reponse’ value=’url’ checked>
  • L’internaute peut alors cliquer dessus pour la/le décocher.

2.b – L’élément ‘textarea’

• Cet élément permet à l’internaute d’écrire un texte sur plusieurs lignes.
• Un texte par défaut peut être écrit entre la balise ouvrante et la balise fermante :
  <textarea>Ceci est le texte qui sera transmis par défaut</textarea>
• Cet élément possède un attribut ‘name‘ auquel il convient de donnée une valeur.
  <textarea name=’declaration’>Ceci est le texte qui sera transmis par défaut</textarea>
• Au moment de la soumission du formulaire, c’est le couple ‘valeur_de_name’=’texte_ecrit_entre balise_ouvrante et_fermante’ qui sera envoyé dans la requête.
  Par exemple : declaration=Ceci est le texte qui sera transmis par défaut
• Pour en savoir plus sur les autres attributs de cet élément, cliquer ci.

2.c – L’élément ‘select’

• Cet élément permet à l’internaute de choisir une ou plusieurs propositions parmi celles qui s’affichent dans une liste (menu) déroulante.
• Cet élément possède un attribut ‘name‘ auquel il convient de donnée une valeur.
  <select name=’menu’>…</select>
• Chacune des propositions de la liste déroulante est décrite par un élément ‘option‘.
• L’attribut ‘value’ d’un élément ‘option’ détermine la valeur qui sera associée à la valeur de l’attribut ‘name’ de ‘select’ au moment de la soumission du formulaire.
• La chaîne de caractères écrite entre la balise ouvrante <option> et la balise fermante </option> correspond à ce que pourra lire l’internaute dans la liste déroulante qui s’affiche dans la fenêtre du navigateur..
• Exemple:
  <select name=’couleur’>
  <option value=’blue’>Bleu</option>
  <option value=’yellow’>Jaune</option>
  <option value=’red’>Rouge</option>
  </select>
  Dans cet exemple, si l’internaute sélectionne ‘Jaune’, la requête envoyée contiendra :
  couleur=yellow
• Il est possible d’utiliser un attribut booléen ‘selected’ pour sélectionner l’une des propositions.
  <select name=’couleur’>
  <option value=’blue’>Bleu</option>
  <option value=’yellow’ selected>Jaune</option>
  <option value=’red’>Rouge</option>
  </select>
  Dans ce cas, si l’internaute ne sélectionne pas l’une des deux autres propositions, c’est le couple couleur=yellow qui sera écrit dans la requête.
• Par défaut il n’est possible de sélectionner qu’une seul proposition. Pour pouvoir en sélectionner plusieurs il faut écrire l’attribut booléen ‘multiple‘ dans l’élément ‘select’.
  <select name=’couleur’ multiple>
  <option value=’blue’>Bleu</option>
  <option value=’yellow’ selected>Jaune</option>
  <option value=’red’>Rouge</option>
  </select>
• Pour en savoir plus sur les autres attributs de cet élément, cliquer ci.

2.D – L’attribut booléen ‘required’

• Lorsqu’il est indiqué dans un élément de saisie d’u formulaire, cet attribut impose qu’une valeur soit saisie pour que le formulaire puisse être soumis.
• Par exemple :
  <input type=’text’ name=’nom_famille’ value=’ ‘ required>
  Si l’internaute clique sur le bouton qui permet l’envoi des données au serveur alors qu’il n’a rien écrit dans ce champ de saisie, un message apparaît indiquant que la saisie d’une valeur dans ce champ est requise (= obligatoire).

3 – L’élément de soumission du formulaire

• Il s’agit la plupart du temps d’un bouton.
• Deux éléments peuvent être utilisés pour définir ce bouton.
  • un élément ‘input’ avec un attribut type= »submit’ et un attribut value=’Texte à afficher dans le bouton’
    <input type=’submit’ value=’Envoyer’>
    C’est la valeur de ‘value’ qui s’affichera à l’intérieur du bouton.
  • un élément ‘button’ avec un attribut type= »submit’.
    C’est la chaîne de caractères écrite entre la balise ouvrante <button> et la balise fermante </button> qui s’affichera à l’intérieur du bouton.
    <button type=’submit’>Envoyer les données</button>
• Quand l’internaute va cliquer, toutes les données sasies dans les éléments de saisie du formulaire sont collectées et écrites sous la forme des couples valeur_de_name=valeur_de_value dans la requête envoyée par le client vers le serveur.

L’élément <label>…</label>

Cet élément permet d’écrire un descriptif de l’information attendue devant un élément de saisie d’un formulaire.

• Cet élément possède un attribut ‘for’ auquel il convient de définir une valeur.
  <label for=’nom’>Indiquer votre nom : </label>
• La valeur de cet attribut doit être identique à celle de l’attribut ‘id’ d’un élément de saisie.
  <label for=’nom_famille’>Indiquer votre nom : </label>
  <input id=’nom_famille’ name=’nom_famille’ type=’text’ value=’inconnu’>