Formulaires

Les formulaires Web sont la déclinaison numérique des formulaires imprimés. Un formulaire permet de collecter un certain nombre d'informations. Ces informations sont envoyées au serveur Web pour être analysées par un script afin de produire un document Web dynamique (cf. quizz ci-dessous) ou bien pour être archivées au sein d'une base de données (par exemple, un formulaire de création de compte utilisateur).

<form name="quizz" method="GET" action="check.php">
  <h1>Votre prénom ?</h1>
  <input name="firstname" type="text">
  <h1>Qui est l'inventeur du <em>World Wide Web</em> ?</h1>
  <div>
    <input name="answer" type="radio" value="1" id="mark">
    <label for="mark">Mark Zuckerberg</label>
  </div>
  <div>
    <input name="answer" type="radio" value="2" id="tim">
    <label for="tim">Tim Berners Lee</label>
  </div>
  <div>
    <input name="answer" type="radio" value="3" id="doc">
    <label for="doc">Dr Folamour</label>
  </div>
  <button type="submit">Envoyer</button>				
</form>

Fonctionnement des formulaires Web

Cette section a pour objectif de décrire le cycle de vie d'un formulaire Web, de sa composition à son traitement par le serveur Web.

Composition d'un formulaire

Un formulaire est délimité par l'élément HTML form. Il est composé d'éléments de formulaire de natures variées : champ de saisie de texte, cases à cocher, listes à choix simple ou multiple, etc. Chaque élément de formulaire a un nom (attribut name) et une valeur (attribut value).

Parmi tous les éléments de formulaire, l'élément dont l'attribut type est égal à submit permet de transmettre les informations renseignées au serveur Web : cette étape s'appelle la soumission du formulaire.

Soumission d'un formulaire

L'attribut action de l'élément form permet d'identifier la ressource à charger lors de la soumission du formulaire. Il s'agit en règle générale d'un script écrit dans un langage de programmation coté serveur : PHP, Java, C#, etc.

L'attribut method quant à lui permet de définir le mode de transmission des données du formulaire. Ces modes sont définis par le protocole HTTP :

GET
Les données, c'est-à-dire le nom et la valeur de chaque élément du formulaire, sont ajoutées à la fin de l'URL mentionnée dans l'attribut action. L'inconvénient de cette méthode est que les valeurs (y compris les mots de passe renseignés à l'aide de l'élément de type password) apparaissent en clair dans la barre d'adresse du navigateur. D'autre part, cette technique ne permet pas d'envoyer au serveur des données volumineuses (fichiers image par exemple).
POST
Les données sont transmises dans le corps de la requête HTTP. Ainsi, les données ne sont plus visibles dans la barre d'adresse du navigateur et peuvent être plus volumineuses.

L'URL ci-dessous illustre l'envoi, en méthode GET, de la réponse au quizz proposé en début de chapitre.

https://iut-info.univ-reims.fr/users/nocent/tools/check.php?firstname=Olivier&answer=1

Copier-coller cette URL et modifier directement les valeurs des paramètres firstname et answer dans la barre d'adresse du navigateur. Appuyer sur la touche Entrée pour soumettre à nouveau le formulaire et visualiser le résultat.

Traitement d'un formulaire sur le serveur Web

Le traitement du formulaire étant réalisé coté serveur Web, il ne figure pas au programme du module M1105 "Conception de documents numériques". Cette question sera traitée en détail dans le module M2102 "Bases de la programmation Web" au semestre 2.

Élements de formulaire

Les éléments sont triés par nature d'information : texte libre, choix simple ou multiple.

Saisie de texte

Les éléments de cette catégorie permettent à l'internaute de fournir des informations sous la forme de texte libre.

input type="text"

Champ de saisie de texte.

Ville <input name="town" type="text">
Ville

datalist logo HTML5

Un champ de saisie de texte peut être enrichi avec une liste de suggestions en utilisant l'attribut list.

Ville <input name="town" list="townlist" type="text">
<datalist id="townlist">
  <option value="Reims">
  <option value="Rennes">
  <option value="Rouen">
</datalist>
Ville

input type="password"

Champ de saisie d'un mot de passe. Les caractères sont remplacés par un point à l'affichage.

Mot de passe <input name="pswd" type="password">
Mot de passe

textarea

Champ de saisie de texte long. L'attribut maxlength permet de définir le nombre maximal de caractères autorisés.

<textarea name="comment" maxlength="50"></textarea>

Choix

Les éléments de cette catégorie permettent à l'internaute de formuler des choix ( simples ou multiples) à partir d'une liste finie de propositions.

label

Libellé texte associé, grâce à l'attribut for, à un élément de formulaire identifié (attribut id). Lorsque l'on clique sur un libellé, la case qui y est associée est cochée.

input type="checkbox"

Case à cocher. L'attribut checked permet de cocher une case par défaut.

<p>Langages de programmation connus : </p>
<input name="html" id="html" type="checkbox" checked> <label for="html">HTML</label> 
<input name="css" id="css" type="checkbox" checked> <label for="css">CSS</label> 
<input name="php" id="php" type="checkbox"> <label for="php">PHP</label> 
<input name="mysql" id="mysql" type="checkbox"> <label for="mysql">MySQL</label> 

Langages de programmation connus:

input type="radio"

Case à cocher exclusive : un seul élément radio peut être coché au sein d'un groupe. Un groupe est constitué d'un ensemble d'éléments radio de même nom ( attribut name). L'attribut checked permet de cocher un élément par défaut.

<p>Langage de programmation préféré : </p>
<input name="preflang" id="html" type="radio" value="html" checked>
<label for="html">HTML</label> 
<input name="preflang" id="css" type="radio" value="css">
<label for="css">CSS</label> 
<input name="preflang" id="php" type="radio" value="php">
<label for="php">PHP</label> 
<input name="preflang" id="mysql" type="radio" value="mysql">
<label for="mysql">MySQL</label> 

Langage de programmation préféré :

select

Liste de choix. L'attribut multiple permet de sélectionner plusieurs propositions au sein de la liste. Pour cela, l'attribut size permet de définir le nombre de lignes de la liste à afficher.

option

Proposition au sein d'une liste de choix. L'attribut value permet d'associer une valeur à la proposition.

<p>Langage de programmation préféré : </p>
<select name="preflang">
  <option value="html">HTML</option> 
  <option value="css">CSS</option> 
  <option value="php">PHP</option> 
  <option value="mysql">MySQL</option>
</select>

Langage de programmation préféré :

<p>Langages de programmation connus : </p>
<select name="lang" multiple size="4">
  <option value="html">HTML</option> 
  <option value="css">CSS</option> 
  <option value="php">PHP</option> 
  <option value="mysql">MySQL</option>
</select>

Langages de programmation connus :

Gestion du formulaire

Les éléments ci-dessous permettent de gérer le formulaire.

fieldset

Groupement d'éléments de formulaire

legend

Intitulé du groupement.

<fieldset>
  <legend>État civil</legend>
  <div>
    <input name="lastname" type="text"> Nom 
  </div>
  <div>
    <input name="firstname" type="text"> Prénom
  </div>
</fieldset>
État civil
Nom
Prénom

Attribut placeholder logo HTML5

Texte indicatif affiché lorsque le champ de saisie texte est vide. Il disparait dès que le champ est rempli.

Nom <input name="lastname" type="text" placeholder="Nom en majuscules">
Nom

button type="submit"

Bouton de soumission du formulaire.

button type="reset"

Bouton de remise à zéro de tous les éléments du formulaire.

<button type="submit">Envoyer</button>
<button type="reset">Effacer</button>

Validation du formulaire

HTML5 introduit de nouveaux éléments de formulaire ainsi que de nouveaux attributs permettant d'imposer certaines contraintes aux valeurs renseignées pour soumettre le formulaire.

Attribut required logo HTML5

Attribut empêchant de laisser un champ texte vide.

Nom <input name="lastname" type="text" required>
Nom

input type="email" logo HTML5

Champ de saisie d'une adresse de courriel. Le texte saisi doit respecter la forme normalisée d'une adresse de courriel.

Courriel <input name="email" type="email" required>
Courriel

input type="url" logo HTML5

Champ de saisie d'une adresse internet. Le texte saisi doit respecter la forme normalisée d'une adresse internet.

Site internet <input name="website" type="url" required>
Site internet

input type="tel" logo HTML5

Champ de saisie d'un numéro de téléphone.

Téléphone <input name="telephone" type="tel" required>
Téléphone

Attribut pattern logo HTML5

La valeur du champ texte doit satisfaire l'expression rationnelle définie par l'attribut pattern. Le site http://www.html5pattern.com regorge d'exemples utiles.

<!--
Numéros de série valides :
ABC-1237, FIH-9153, KLM-6201, IBM-0024, ...
-->
Numéro de série
<input name="serial" type="text" pattern="[A-Z]{3}-[0-9]{4}" required>
Numéro de série

Propriétés CSS

Le module CSS 3 BUI introduit de nouvelles pseudo-classes permettant de changer le style d'un élément de formulaire en fonction de son état.

:required logo CSS3

Sélectionne un élément dont la valeur est requise (attribut required présent).

:optional logo CSS3

Sélectionne un élément dont la valeur n'est pas requise (attribut required absent).

:valid logo CSS3

Sélectionne un élément dont la valeur est conforme au type (email, url, tel) ou à l'expression rationnelle (attribut pattern).

:invalid logo CSS3

Sélectionne un élément dont la valeur n'est pas conforme au type (email, url, tel) ou à l'expression rationnelle (attribut pattern).

Exercices

Recommandations

Afin de pouvoir soumettre les formulaires que vous allez créer au serveur Web, j'ai conçu un script PHP qui analyse la requête HTTP envoyée par le navigateur Web et affiche l'ensemble des paramètres transmis en méthode GET ou POST. Utilisez la ligne de code HTML ci-dessous pour tous vos formulaires.

<form name="frm" method="GET" action="https://iut-info.univ-reims.fr/users/nocent/tools/http_request_analyzer.php">

HTML5 propose de nouveaux éléments de formulaire (datalist, email, etc) ainsi que de nouveaux attributs (required, pattern, etc) permettant de faciliter le contrôle des valeurs renseignées. Mais pour bénéficier de ces nouvelles fonctionnalités sur tous les navigateurs, il est recommandé d'utiliser un polyfill, c'est-à-dire un ensemble de fonctions, le plus souvent écrites en Javascript ou en Flash, permettant de simuler sur un navigateur web ancien des fonctionnalités qui ne sont pas nativement disponibles (source Wikipedia). Pour découvrir la génèse du nom polyfill, je vous invite à lire l'article What is a Polyfill de Remy Sharp.

Webshim est un polyfill particulièrement riche qui repose sur jQuery. Pour l'utiliser, il suffit d'incorporer le code ci-dessous à la fin du corps (élément body) de votre document Web.

    <!-- jQuery  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
    <!-- Webshim: polyfill enabling the use of HTML5 features across browsers -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.10/dev/polyfiller.js">
    </script>
    <script>
      //request the features you need:
      webshim.polyfill("es5 mediaelement forms");
    </script>
  </body>
</html>

Exercice 30

Concevoir un document HTML5 afin de reproduire le formulaire ci-dessous. Vous pouvez le compléter avec des zones de texte multi-lignes et des listes à choix multiples.

Premier formulaire

Correction

Exercice 31

Réaliser un formulaire en respectant les contraintes suivantes :

formulaire non valide formulaire valide

Correction

Exercice 32

À partir du code HTML de l'exercice 2, proposer des mises en forme CSS alternatives.

formulaire variante 1

Correction

formulaire variante 2

Correction

Exercice 33

Réaliser un formulaire conforme au modèle ci-dessous :

Formulaire de contact

Correction

Exercice 34

L'élément input type="date", introduit avec HTML5, permet de renseigner une date à l'aide d'un calendrier. Malheureuseument, peu de navigateurs Web proposent cet élément (cf. http://www.caniuse.com).

Utiliser judicieusement les attributs placeholder et pattern pour proposer une alternative à un élément input type="date". Une date valide doit satisfaire les trois contraintes suivantes :

formulaire date

Correction