Les formulaires

Un formulaire permet de définir des zones de saisie dans l'interface utilisateur.
Ces zones pouvant comporter plusieurs éléments d'interface (widget) de different types.

L'utilisateur peut alors saisir du texte, cocher des cases, effectuer un choix dans une liste de termes prédéfinis, appuyer sur des boutons, etc...

Les données ainsi saisies peuvent alors être envoyées au serveur via les méthodes du protocol http (ou https).

Elles peuvent aussi être récupérées et traitées coté client par exemple en javascipt.

Lorsque les données doivent être envoyées au serveur, on vérifie généralement avant que les données nécessaires au traitement coté serveur ont bien été saisies et qu'elles ont bien la forme attendue. (Cela ne dispense en aucun cas le programme tournant sur le serveur de refaire ces verifications).

Dans la suite de ce cours nous allons décrire les principaux éléments de formulaires disponibles en html.

Les formulaires

Les balises principales:

• form : début de formulaire
• input : différents types de bouton et zone de saisie
• textarea : une zone de saisie texte longue
• select et option : liste à choix multiple

Exemple de formulaire

Exemple de code source de formulaire

...
  <h2>Exemple de formulaire HTML</h2>

  <form action="http://cedric.cnam.fr/~pons/NFA040/echo.php" method="GET" >
    
    <label for="mailto">Envoyer un message à:</label> 
    <select name="mailto_name" id="mailto">
        <option>Arlette L</option>
        <option>Jacques C </option>
        <option>Olivier B </option>
        <option>Segolène R</option>
        <option selected="selected">Olivier Pons</option>
        <option>Autre</option>
     </select>
     <br/><br/>
    
      <label for="email">Donnez votre adresse mail:</label>
      <input type="text" 
             name="email" id="email" value="moi@quelquepart" size="60" />
     </br/><br/>

    <label for="corps"> Corps du message:</label> 
      <textarea cols="60" rows="8" name="corps_du_message" id="corp">
        Remplacez ce texte par le vôtre !
        Puis pressez le bouton "Envoyer message" pour 
        effectuer l'envoi
        Vous pouvez utiliser le bouton "Remise à zéro" 
        pour remettre les valeurs initiales 
    </textarea>
    

    <br/> <br/>
      <input type="submit" value="Envoyer message" />
      <input type="reset" value="Remise à zéro" />
  </form>
...

Le principe

Les différents éléments de saisie on tous un attribut name.
Il défini un « nom de variable ».
La valeur associée à cette variable
est celle qui sera saisie (ou coché, ou sélectionné) dans l'élément ou celle défini par l'attribut value.

Quand on soumet le formulaire (en cliquant sur le bouton de soumission) ces différents couples (variable,valeur) sont envoyé au serveur.

L'url de traitement et la méthode d'envoi sont donnés données respectivement dans l'attribut action et method de la balise form ).

Les balises label permette de décrire ce qui est attendu.

Pour que le formulaire soit accessible aux périphériques d'assistances audio (utilisés par les déficients visuels).
On peut faire le lien entre un label et un element de saisie en associant la valeur de l'attribut for du label à celle de l'attribut id de l'element de saisie.

L'envoi au serveur par GET

La Requête envoyée lors de la soumission (méthode GET par défaut)

GET /~pons/NFA040/echo.php?mailto_name=Olivier+Pons&email=moi%40quelquepart&corps_du_message=%09Remplacez+ce+texte+par+le+votre+%21%0D%0A%09Puis+pressez+le+bouton+%22Envoyer+message%22+pour+%0D%0A%09effectuer+l%27envoi%0D%0A%09Vous+pouvez+utiliser+le+bouton+%22Remise+%E0+z%E9ro%22+%0D%0A%09pour+remettre+les+valeurs+initiales+%0D%0A+++++ HTTP/1.1
Host: cedric.cnam.fr
User-Agent: Mozilla/5.0 
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

L'envoi au serveur par POST

Si dans le source html on remplace GET par POST la Requête envoyé sera

POST /~pons/NFA040/echo.php HTTP/1.1
Host: cedric.cnam.fr
User-Agent: Mozilla/5.0 
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded
Content-Length: 310
mailto_name=Olivier+Pons&email=moi%40quelquepart&corps_du_message=%09Remplacez+ce+texte+par+le+votre+%21%0D%0A%09Puis+pressez+le+bouton+%22Envoyer+message%22+pour+%0D%0A%09effectuer+l%27envoi%0D%0A%09Vous+pouvez+utiliser+le+bouton+%22Remise+%E0+z%E9ro%22+%0D%0A%09pour+remettre+les+valeurs+initiales+%0D%0A++++

Réponse du serveur

Produite par execution sur le serveur du code echo.php. Attention le client reçoit le résultat de l'execution du code php. Il ne voit jamais ce code !!

Entête HTTP

HTTP/1.1 200 OK
Date: Mon, 16 Jan 2023 16:00:50 GMT
Server: Apache
X-Powered-By: PHP/5.6.40
Content-Length: 388
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

Code HTML

<h2>methode GET </h2>Données  transmises par get dans l'url 
<br>mailto_name=Olivier+Pons<br>email=moi%40quelquepart
<br>corps_du_message=%09Remplacez+ce+texte+par+le+votre+%21%0D%0A%09Puis+pressez+le+bouton+%22Envoyer +message%22+pour+%0D%0A%09effectuer+l%27envoi%0D%0A%09Vous+pouvez+utiliser+le+bouton+%22Remise+%E0 +z%E9ro%22+%0D%0A%09pour+remettre+les+valeurs+initiales+%0D%0A+++++<br>

Qui s'affiche

La balise form

• form est une balise de type bloc

• Les attributs possibles

  • action : url de la page qui va recevoir les données
  • methode : GET ou POST
  • enctype : type d'encodage
  • onSubmit : événement déclenché à la soumission
  • id et autre
  • name : nom ( transmis au serveur)
  • ...

• utilisation classique

<form
    action="programme_de_traitement.php" 
    method="post" 
    onSubmit="return fonctionDeValidationJS()">.....
</form>

• l'attribut action donne l'url du programme de traitement
  il peut être comme ici sur le même serveur,et dans le même repertoire,
  mais aussi dans un autre repertoire ou sur un autre serveur.
  on aura alors quelque chose du genre: html action="http://machine.domaine.org/chemin/fichier.php"

• l'attribut method spécifie la méthode de passage des données.
  c'est GET par défaut.

• onSubmit attache un événement javascript au fait de cliquer le bouton submit.
  Ici la fonction fonctionDeValidationJS sera appelée lors de la soumission du formulaire.
  c'est une fonction de verification (qu'il faut écrire en javascript !)
  si elle renvoie false le formulaire ne sera pas transmis.

  S'il est pratique d'utiliser onSubmit dans le code html quand on débute, pour garder la structure du comportement, il est souvent mieux de l'attacher directement en javascript en utilisant addListerner (voir le cours NFA041)

• enctype servira a donnée le type d'encodage pour les données envoyées avec POST.
  Sa valeur par default est application/x-www-form-urlencoded . On le positionnera à multipart/form-dataquand on voudra envoyée des fichiers avec l’attribut
  type="file" de la balise input.

Les différents type de zone de saisie

Fondamentalement, on pourrait n'avoir que deux types.

1. Un pour le texte
2. Un pour les fichiers et données binaire (qui sont encodés)

En effet, toutes les valeurs qui seront envoyées seront du texte (potentiellement encodé dans le second cas).

L'object des différents type est surtout de guider l'utilisateur (UX) mais aussi de le contraindre pour limiter les valeurs possibles.

La balise input

• input est une balise de type en-ligne

• Les attributs possible

  • type : type d'element a afficher
  • name : nom (de "variable") envoyé au serveur
  • id : ajoute une sémantique, facilite le css et le js, permet le lien avec le label
  • value : valeur par défaut
  • disabled : désactiver le control
  • ...

L' attribut type de la balise input

Caractérise le type de l'élément de saisie.

• text : zone de saisie texte (textbox)

• password : idem mais invisible

• hidden : champ masqué

• radio : bouton radio (1 à la fois)

• checkbox : case à cocher

• submit : soumission du formulaire

• reset : retour état initial

• file : upload de fichier

• image : bouton image

• button : bouton normal

• color : zone de saisie de couleur, ouvre un sélecteur de couleur

• date : zone de saisie de date, ouvre un sélecteur de date

• email : zone de saisie de date (doit contenir une @)

• datetime-local : (sans le local obsolete)

• time :zone de saisie d'heure

• week :zone de saisie de semaine

• month zone de saisie de mois

• range : zone de saisie d'interval

• tel :zone de saisie de téléphone
  ...

La balise input : exemples

Texte et apparentés

<label for="nom">Nom</label>
<input type="text" size="40" 
    name="nom" id="nom" value="moi">               

<label for="mp">mot de passe</label>
<input type="password" size="10" 
    name="mp" id="mp" />

<label >type="hidden"</label>
<input type="hidden" name="hdata" id="hdata"
    value="envoyé mais pas affiché" />

Radio et Checkboxes

Pour les boutons radio, le choix est unique, et si on en coche une, cela décoche les autres.
Pour les checkbox on peut cocher autant de cases que désiré.

Dans un groupe de radio bouton ou de checkbox, tout les input on le même name, c'est le nom de la variable qui sera transmise aus serveur

Les id sont tous différents.

On peut définir une case coché par défaut en ajoutant l'attribut checked="checked".
Dans le cas des checkbox on peut en positionner plusieurs.

Comme d'habitude, le lien entre le texte du label et l'element se fait par la valeur de l’attribut for du label et de l'id de l'input.

La balise <fieldSet> sert a regrouper des elements et `

à légender ce groupe.

<fieldSet>
    <legend>Choisissez UNE valeur</legend>
    <input type="radio" name="rad-1" id="rad1" value="choix1" />
    <label for="rad1">Choix radio 1 </label>
    <br>
    <input type="radio" name="rad-1" id="rad2" value="choix2" />
    <label for="rad2">Choix radio 2 </label>
    <br>
    <input type="radio" name="rad-1"  id="rad3"
                            checked="checked" value="choix3" />
    <label for="rad3">Choix radio 3 </label>
    <br>
    <input type="radio" name="rad-1" id="rad4"  value="choix4" />
    <label for="rad4">Choix radio 4 </label>
 </fieldSet>

<fieldSet>
    <legend>choisissez zero ou des valeurs </legend>
    <input type="checkbox" name="chk-1"  id="chk1"
          value="choix1" />
    <label for="chk1">Choix 1 </label>
    <br>
    <input type="checkbox" name="chk-1"  id="chk2" value="item2" />
    <label for="chk2">Choix 2</label>
    <br>
    <input type="checkbox" name="chk-1"  id="chk3"
                                 checked="checked" value="item3" /> 
    <label for="chk3">Choix 2</label>
    <br>
    <input type="checkbox" name="chk-1" id="chk4" value="item4" />
    <label for="chk4">Choix 4</label>
</fieldSet>

Des boutons

Générique (il faut leur associer une gestion d'événement en js)

<input type="button" name="but-test" id="but-test"
                        value="FUN cote client" />

ou générique image... (il faut aussi leur associer une gestion d'événement en js)

<input type="image" 
    height="70" 
    width="70" 
    name="imag-1" 
    id="imag-1"
    src="weberiedulundi.png" />

Les boutons d''envoi et de remise à zéro

<input type="submit" name="soumission" 
    id="soumission" value="Soumettre" />
          
<input type="reset" name="reset" id="reset" 
    value="reprendre à zéro" />

les fichiers

<label for="fichierDeDonnees">choisir un fichier</label>
<input type="file" name="fichierDeDonnees" id="fichierDeDonnees"/>

La balise textarea

• Balise de type bloc, utilisée pour le texte long.
• Des attributs (tous facultatif !)
  • cols : nombre de caractères affichés par ligne
  • rows : détermine le nombre de lignes visibles dans la zone de texte
  • wrap : gère les retours à la ligne
  • disabled : rend la zone de texte grisée et non modifiable
  • readonly : rend juste la zone de texte non modifiable

Les balise select

et option

• La balise <select> créer des

  • listes déroulantes
  • listes à choix multiples

• Ses attributs

  • multiple : autorise la sélection multiple d'éléments de la liste.
  • size : nombre de valeurs visibles.
  • `disabledù : rend le contrôle passif, non modifiable.

• Éléments de la liste énumérés par des balises <option>

• Les option peuvent être groupé dans des balise <optgroup>

La combinaison select + option

select simple

• selected marque la valeur pré-sélectionnée (comme checked avec les radio ou les checkbox)
• En l'absence d'attribut value, c'est le contenu (entre les balises <option>) qui est la valeur

 <select name="list1" id="list1">
            <option value="a1"> un                         </option>
            <option value="a2"> deux                       </option> 
            ...
            <option value="a9"> neuf                       </option>
            <option value="a10" 
                  selected="selected">
                                dix
            </option>
            <option value="a11"> onze                      </option>
            <option value="a12"> douze                     </option>
         </select>

select simple avec size

• l'attribut size sur la balise <select> dit combien d'option sont visibles simultanément

 <select name="list2" id="list2" size="3">
          <option value="b1">     uno                       </option>
          <option value="b2">     dos                       </option>
          ...
          <option value="b10" 
                selected="selected">
                                  dies                 
         </option>
          <option value="b11">    once                      </option>
          <option value="b12">    doce                      </option>
<select>

select multiple

Si l'attribut multiple est présent la balise <select> on peut sélectionner plusieurs options:

• Une à une : par l'appui simultané sur Ctrl (sur PC) ou Cmd (sur Mac) et l'option
• En groupe en appuyant sur shift et en sélectionnant les 2 bornes de l' intervalle

Quand plusieurs valeurs peuvent être renvoyée et que le coté serveur est en PHP il est d'usage de postfixer la valeur de l’attribut name par [].
Cela permet coté serveur (en php) de le voir facilement comme un tableau de valeurs.

 <select name="list3[]" id="list3" multiple="multiple">
          <option value="c1">    adin                       </option>
          <option value="c2">    dva                        </option>
          <option value="c3">    tri                        </option>
          <option value="c4">    tchitiri                   </option>
          <option value="c5">    piat                       </option>
          <option value="c6">    chiest                     </option>
          <option value="c7">    sem                        </option>
          <option value="c8">    vosem                      </option>
          <option value="c9">    dievit                     </option>
          <option value="c10" 
                  selected="selected">
                       diecit
          </option>
          <option value="c11">   diecit na tsat             </option>
          <option value="c12">   dievit na tsat             </option>
        </select>

select multiple avec size

<select name="list3[]" id="list3" multiple="multiple" size=6>
          <option value="c1">    adin                       </option>
          <option value="c2">    dva                        </option>
          <option value="c3">    tri                        </option>
          <option value="c4">    tchitiri                   </option>
          <option value="c5">    piat                       </option>
          <option value="c6">    chiest                     </option>
          <option value="c7">    sem                        </option>
          <option value="c8">    vosem                      </option>
          <option value="c9">    dievit                     </option>
          <option value="c10" 
                  selected="selected">
                       diecit
          </option>
          <option value="c11">   diecit na tsat             </option>
          <option value="c12">   dievit na tsat             </option>
</select>

L'exemple complet avec envoi au serveur

Autres balises

• button : un bouton cliquable qui peut contenir du code html.
• fieldset un contour autour des balises de formulaires qu'elle entoure ( exemple)
• legende : légende dans un fieldset
• optoption : grouper des options ( exemple)

Le traitement des formulaires

Le traitement des formulaires dépasse le cadre de ce cours.
Mais peut être vu dans deux autres cours du Cnam :

• cote client : javascript (NFA041)
• cote serveur : PHP, javascript (nodejs) (NFA017)