Formulaires HTML

Retour sur la méthode GET

Caractéristique importante : c'est une « safe method  ⇒  elle est définie comme devant n'avoir aucun effet de bord

elle n'est pas censée modifier l'état de l'application (hormis pour des détails secondaires, comme un compteur de visites)

elle est « sûre », au sens où on peut l'utiliser sans crainte ⇒ important par exemple pour les robots indexeurs !

On peut donner des paramètres à l'URL demandée avec GET, qui vont affecter la façon dont la ressource est récupérée, ou le type de contenu

C'est le standard (RFC 7231) qui impose que GET soit une safe method, mais en pratique il n'y a aucune contrainte technique qui oblige à respecter cette contrainte

il est possible d'utiliser les paramètres d'URL pour faire des actions (qui modifient l'état) sur un site web… mais c'est une très mauvaise idée !

Pour faire des actions, il est préférable d'utiliser d'autres méthodes

Les méthodes non safe

En pratique les deux dernières sont rarement utilisées (voir plus loin), c'est en général POST qui est utilisée pour tous les cas de figure non couverts par GET

Anatomie d'un POST

Pour envoyer des données avec la méthode POST de HTTP, on les met dans le corps de la requête

Le format des données est libre, mais en général il suit la même syntaxe que les paramètres d'URL (à quelques détails près)

formellement, il s'agit du format MIME application/x-www-form-urlencoded

POST /chemin/pagederecup HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 21

nom=Toto&couleur=vert+clair

Couples clef-valeur séparés par des &

Espaces remplacées par +

Encodage particulier des caractères spéciaux et non-ASCII

Formulaires HTML

HTML fournit une interface permettant aux internautes de construire « interactivement » ces couples clef-valeur : les formulaires

Ils sont principalement utiles pour envoyer des données (méthode POST) : poster un commentaire, s'authentifier sur un site…

Mais ils permettent aussi de construire une URL paramétrée : champ de recherche, contrôle de l'affichage du contenu (ordre, filtrage)…

Ils fonctionnent exactement de la même manière pour les deux usages ; dans les deux cas le navigateur utilise le contenu du formulaire pour construire une chaîne de couples clef-valeur

Base d'un formulaire

<form action="page_de_recup" method="post">
    …
</form>

Attribut action : URL de la page qui va récupérer les données (par défaut, la même page)

Attribut method : méthode HTTP à utiliser pour transmettre les données ; soit GET soit POST (par défaut GET)

Élément input

Les formulaires sont constitués de texte et de widgets

La plupart des widgets sont créés avec l'élément input

<form>
   <input type="text" />
   <input type="checkbox" />
   <input type="radio" />
</form>

Labels

Les légendes des champs du formulaires doivent être placés dans des éléments label (étiquettes)

Les labels doivent être explicitement associés à leurs champs : extrêmement important pour l'accessibilité et pour l'ergonomie !

<form>
  <label>Ville : <input type="text" /></label>
  <label>Capitale : <input type="checkbox" /></label>
</form>

Autre solution pour associer un label à un champ

<form>
  <div>
    <label for="ville">Ville :</label>
    <input type="text" id="ville" />
  </div>
  <div>
    <label for="cap">Capitale</label>
    <input type="checkbox" id="cap" />
  </div>
</form>

Bouton de soumission

Un formulaire est inutile si on ne peut pas le soumettre

<form>
   <input type="text" value="Texte par défaut" />
   <button type="submit">Envoyer !</button>
</form>

Noms des paramètres

Les données entrées sur les widgets servent à donner des valeurs à des variables

Il faut donner des noms à ces variables, pour que le serveur sache à quoi sert chaque donnée !

<form>
   <input type="text" value="Caen" name="ville" />
   <input type="text" value="France" name="pays" />
   <input type="checkbox" name="coche" />
   <button type="submit">Envoyer !</button>
</form>

Attention au comportement des checkbox

Ne pas confondre les attributs name et id…

Utilisation des données comme paramètres d'une page

Dans l'exemple précédent, cliquer sur le bouton recharge la même page, mais l'URL a changé car le navigateur a ajouté des paramètres d'URL, construits à partir des noms des widgets et des valeurs fournies par l'internaute

Pour renvoyer vers une autre page, il faut donner l'URL dans l'attribut action de l'élément form

Dans cet exemple on renvoie vers une page qui fait quelque chose avec les paramètres :

<form action="demo/recup.php">
   <input type="text" value="Caen" name="ville" />
   <input type="text" value="France" name="pays" />
   <input type="checkbox" name="coche" />
   <button type="submit">Envoyer !</button>
</form>

NB : une simple page HTML ne sait rien faire avec les paramètres d'URL, c'est le serveur qui va analyser les paramètres et modifier le HTML envoyé en fonction.

Envoi des données

Les paramètres d'URL ne conviennent pas à toutes les situations

On a souvent besoin d'envoyer des données au serveur

Dans ce cas, on peut spécifier que le navigateur doit utiliser la méthode POST de HTTP, en écrivant method="POST" comme attribut de l'élément form (la valeur par défaut de method est GET ⇒ construit une URL paramétrée)

<form action="demo/recup.php" method="POST">
   <input type="text" value="Caen" name="ville" />
   <input type="text" value="France" name="pays" />
   <input type="checkbox" name="coche" />
   <button type="submit">Envoyer !</button>
</form>

GET vs POST

Dans les deux cas, cliquer sur le bouton submit construit les couples clef-valeur et les communique au serveur

N'importe quel programme peut être utilisé pour les récupérer : il suffit qu'il comprenne le protocole HTTP, ou qu'il puisse être lancé par le serveur lorsqu'un client demande l'URL en question (ex. : script PHP)

NB : il est parfaitement possible d'envoyer des données avec POST à une URL paramétrée !

Si hésitation entre paramètres d'URL et méthode POST, se demander si l'URL paramétrée aurait un sens en tant que lien. Il n'est envisageable d'utiliser la méthode GET que si la réponse est oui.

Ne pas penser que POST est plus sécurisé que GET

Remarque sur les paramètres

Les paramètres d'URL sont souvent utilisés abusivement pour le routage (mauvaises pratiques qui se sont répandues notamment par le biais de PHP), par ex. http://toto.fr/forum?post=754

Ce n'est pas non plus leur rôle !

L'URL du post 754 devrait être quelque chose comme http://toto.fr/forum/posts/754

Les paramètres, comme leur nom l'indique, servent à paramétrer une page

http://toto.fr/forum?date=2015-02-23&sort=title
http://toto.fr/forum?q=glace+vanille

Boutons radio

Les boutons radio n'ont d'intérêt qu'en groupe : un seul peut être sélectionné

C'est l'attribut name qui les groupe

<form action="demo/recup.php" method="POST">
  Les formulaires HTML, vous êtes :
  <label><input type="radio" value="oui" name="fan" /> Fan</label>
  <label><input type="radio" value="non" name="fan" /> Pas fan</label>
  <label><input type="radio" value="?" name="fan" /> NSPP</label>
  <button type=submit>Envoyer !</button>
</form>

Grouper des champs

L'élément fieldset permet de grouper des champs qui ont un rapport logique entre eux et de leur associer un label commun avec legend

<form action="demo/recup.php" method="POST">
    <fieldset>
      <legend>Les formulaires HTML, vous êtes :</legend>
      <label><input type="radio" value="oui" name="fan" /> Fan</label>
      <label><input type="radio" value="non" name="fan" /> Pas fan</label>
      <label><input type="radio" value="?" name="fan" /> NSPP</label>
    </fieldset>
    <button type=submit>Envoyer !</button>
</form>

Texte multi-lignes

<form action="demo/recup.php" method="POST">
  <textarea cols="30" rows="5" name="multi">Mettre du texte ici !</textarea>
  <button type="submit">Go</button>
</form>

Propriété CSS resize pour que l'internaute puisse modifier la taille (valeurs : horizontal, vertical, both)

Attention, contrairement à input, textarea a une balise ouvrante et une balise fermante (le contenu est utilisé comme valeur par défaut)

Valeur par défaut et placeholder

<form action="demo/recup.php" method="POST">
  <input type="text" size="10" name="prenom" value="Prénom" />
  <textarea cols="10" rows="5" name="comm">Votre commentaire…</textarea>
  <button type="submit">Envoyer</button>
</form>

L'internaute doit effacer le contenu avant de taper

En règle générale, c'est plutôt une sorte de « mode d'emploi » qu'on voudrait

<form action="demo/recup.php" method="POST">
  <input type="text" size="10" name="prenom" placeholder="Prénom" />
  <textarea cols="10" rows="5" name="comm" placeholder="Votre commentaire…"></textarea>
  <button type="submit">Envoyer</button>
</form>

Attention, les exemples ci-dessous sont simplifiés : dans la pratique, il ne faut jamais utiliser un placeholder à la place d'un label ! Le formulaire doit être compréhensible sans le placeholder, qui n'est pas toujours affiché.

Menu déroulant

<form action="demo/recup.php" method="GET">
  <select name="fruit">
    <option>Fraise</option>
    <option>Pomme</option>
    <option>Raisin</option>
  </select>
  <button type="submit">Go</button>
</form>

La valeur du paramètre est le contenu de l'élément option sélectionné, ou le contenu de son attribut value s'il existe

Groupes d'options dans un menu

<form action="demo/recup.php" method="GET">
  <select name="instrument">
    <optgroup label="Bois">
      <option value="clarinette">Clarinette (si♭)</option>
      <option value="basson">Basson (ut)</option>
      <option value="sax">Saxophone (mi♭)</option>
    </optgroup>
    <optgroup label="Cuivres">
      <option value="trompette">Trompette (si♭)</option>
      <option value="trombone">Trombone (ut)</option>
      <option value="tuba">Tuba (fa)</option>
    </optgroup>
  </select>
  <button type="submit">Go</button>
</form>

remarquer l'utilisation de value (on n'utilise pas les noms « compliqués » des instruments dans le code)

Améliore aussi l'accessibilité

Menu à choix multiples

<form action="demo/recup.php" method="GET">
  <select multiple name="fruit">
    <option>Fraise</option> <option>Pomme</option>
  </select>
  <button type="submit">Go</button>
</form>

NB : attribut booléen = pas besoin de valeur, la simple présence de l'attribut lui donne la valeur « vrai »

<form action="demo/recup.php" method="GET">
  <select multiple name="fruit[]">
    <option>Fraise</option> <option>Pomme</option>
  </select>
  <button type="submit">Go</button>
</form>

Autres widgets

Il existe un certain nombre de input différents, notamment des variantes du champ text qui donnent plus de sémantique : email, url, number…

Intérêt : éviter les erreurs de l'internaute (on ne peut pas soumettre le formulaire si les valeurs sont incohérentes) et augmenter l'ergonomie (par exemple les claviers proposés sur mobile peuvent être adaptés au champ)

Voir par exemple ce guide en français sur Alsacréations

Quelques compléments

Attribut target de l'élément form : indique où sera affichée la réponse. _self pour la même fenêtre (ou iframe), _blank pour une nouvelle

Attribut booléen checked : permet qu'une case soit cochée par défaut, ou qu'un bouton radio soit sélectionné par défaut.

Attribut booléen selected : idem, mais pour une option dans un menu déroulant.

Validation côté client

Attribut booléen disabled : valable pour tous les widgets, permet de les rendre non modifiables.

Attribut booléen required : valable pour tous les widgets, permet de les rendre obligatoires.

Voir le tutoriel complet sur MDN pour d'autres compléments, notamment sur la validation des formulaires (attributs HTML pattern, min et max, etc., pour empêcher l'internaute de soumettre des valeurs aberrantes)

Style des formulaires

Tout n'est pas modifiable par CSS dans les formulaires, notamment les menus déroulants…

input[type=text] {
	border: 2px dotted green;
}

Attention à width : les widgets ont chacun leur propre interprétation. Préciser box-sizing: border-box; pour être tranquille

Tous les détails sur le tutoriel de MDN