Mon premier formulaire

Les formulaires sont les éléments les plus complexes que l'on peut gérer avec HTML. Comme ils sont une liaison entre le site et son utilisateur, il ont deux points de friction principaux : l'accessibilité et la sécurité.

C'est pourquoi, tout au long de ce chapitre, on fera des mises en exergue de ces deux points.

Pour notre projet "Recette Zombie", nous souhaitons permettre à nos zombies de laisser un commentaire sous les différentes recettes :

Comme nous l'avons déjà vu dans le chapitre "Mon site en maquette", on commence par découper notre élément HTML en différentes parties générales, puis chaque ensemble, on le redécoupe en items plus petits et ainsi de suite jusqu'à arriver à des éléments HTML non sécables.

En regardant notre impression écran, on peut voir 4 parties :

le titre "Avez-vous aimé ?"
le champ "Votre nom de zombie*"
le champ "Votre note*"
le champ "Votre commentaire"

Le titre

Un titre en HTML est un tag non sécable : <hx>, où x est un nombre compris entre 1 et 6 (6 compris).

Si l'on regarde la maquette qu'on avait définie :

... nous voyons qu'on a un titre principal pour la page : le titre de la recette, qui sera alors notre h1 ; puis deux titres de sous-parties : "Avez-vous aimé ?" et "Avis des autres zombies", qui seront alors des h2.

Notre code :

<h2>Avez-vous aimé ?</h2>

Le champ "Votre nom de zombie*"

Cette partie est composée de deux éléments :

le label : "Votre nom de zombie*"
un "champ de texte court" => input

Le input ici sera un champ de type text. Il en existe plusieurs : email, number, color... Ils ont tous leur utilité. Vous en trouverez prochainement une liste complète dans la boite à outils.

Les labels et l'accessibilité

Le label est l'élément texte qui doit être associé à TOUS les champs de formulaire. En terme d'accessibilité, il est indispensable ; son importance est liée à son rôle par rapport au champ. Le label est nécessaire pour deux raisons distinctes :

Les personnes malvoyantes utilisent un lecteur d'écran pour naviguer sur les sites internet. Cet outil va permettre à la personne de se représenter la page en lisant les éléments un par un, et un champ de texte ne représente rien en soi ! C'est pourquoi, en l'associant à un label, le lecteur d'écran saura quoi lire à votre utilisateur pour que celui-ci sache quelles informations lui sont demandées.
Les personnes atteintes de tremblements, peuvent avoir du mal à cliquer sur des éléments qui sont un peu petits, comme une checkbox ou un bouton radio. En associant le label au champ, vous augmentez la surface de clic, permettant à l'utilisateur d'interagir également avec le label et ainsi cocher l'item ou mettre le focus sur le champ.

Pour lier le champ au label, HTML met à disposition deux solutions :

<label for="name">Votre nom de zombie*</label>
<input type="text" id="name"/>

<label>
  Votre nom de zombie*
  <input type="text"/>
</label>

Dans la première solution, on utilise une liaison for-id. La valeur contenue dans l'attribut for doit être la même que l'id du champ de type input. En mettant la même valeur, on lie les deux éléments. Dans la seconde solution, on met le champ dans le label.

Les deux façons de faire conduiront au même résultat, permettant aux personnes ayant un handicap de pouvoir interagir avec votre formulaire. Seule la première pourra valider le critère d'accessibilité au niveau du RGAA (règlement français lié à l'accessibilité).

Il existe un attribut placeholder dans les champs de formulaire, qui permet d'afficher du texte à l'intérieur du champ. Quand on commence à écrire dans le champ, ce texte disparaît. Ce dernier est parfois utilisé comme label dans des formulaires, mais ce n'est pas une bonne pratique car il n'offre aucun des avantages cités ci-dessus ! Si pour des raisons de design, vous ne souhaitez pas qu'un label soit présent sur la page pour vos champs de type texte (long ou court) ou pour les listes d'options, cela peut s'entendre, il vous faudra alors les cacher d'une manière ou d'une autre : utiliser l'option opacity en CSS, le mettre en dehors de la page avec transform... Par contre, pour les éléments de type checkbox et radio, vous vous devez de le laisser pour augmenter la surface de clic !

Le champ "Votre note*"

Cette partie est composée de deux éléments :

le label : "Votre note*"
un ensemble de boutons pour donner une note

Ici on n'a pas à proprement parler un champ de formulaire. On va devoir tricher avec Javascript (JS) pour avoir une note via les étoiles. Comme on n'a pas encore abordé ce langage, nous reviendrons plus précisément sur son fonctionnement dans un chapitre ultérieur. Mais nous pouvons tout de même créer le HTML :

<label>
  Votre note
  <button aria-label="1 sur 5"><i class="mdi mdi-star-outline"></i></button>
  <button aria-label="2 sur 5"><i class="mdi mdi-star-outline"></i></button>
  <button aria-label="3 sur 5"><i class="mdi mdi-star-outline"></i></button>
  <button aria-label="4 sur 5"><i class="mdi mdi-star-outline"></i></button>
  <button aria-label="5 sur 5"><i class="mdi mdi-star-outline"></i></button>
  <input type="hidden"/>
</label>

On remarque plusieurs choses ici :

chaque étoile est entourée par un button afin de cliquer dessus. On se branchera sur ces boutons en JS pour savoir quelle note est choisie par l'utilisateur.
les étoiles sont ajoutées via une librairie d'icônes : mdi, je montre comment l'utiliser dans ce chapitre
on a un champ de texte input de type hidden en plus. Avec JS, après avoir écouté l'événement qui indiquera quelle étoile a été choisie, on ajoutera cette valeur dans le champ de type hidden pour que la valeur soit stockée dans un vrai champ de formulaire.
sur les boutons, on a ajouté un attribut un peu spécial, un aria-label. Ce type d'attribut est spécifiquement lié à l'accessibilité, il permet de rajouter du contexte, des informations ou de la description à des champs qui en manquent. Ici, comme on met juste une étoile dans le bouton, le lecteur d'écran ne comprendra pas ce que veulent dire ces boutons. En ajoutant un aria-label, on permet au lecteur de faire la même chose que quand on lie un label à un champ.

Les attributs aria feront l'objet d'un chapitre complet dans votre boîte à outils.

Le champ "Votre commentaire"

Cette partie est composée de deux éléments :

le label : "Votre commentaire"
un "champ de texte long" => textearea

Les textarea sont des champs de type texte comme les input mais sont prévus pour stocker des écrits plus longs, sur plusieurs lignes.

<label>
  Votre commentaire
  <textarea cols="30" rows="10"></textarea>
</label>

On remarque deux choses dans ce code :

le textarea est une balise double, contrairement au input, qui est une balise orpheline. Pour vous rafraîchir la mémoire, vous pouvez revoir ce chapitre.
la présence d'attributs qu'on ne connaît pas et qui sont spécifiques au textarea : cols et rows. Ils permettent de déterminer la taille de base de ce champ en lui indiquant le nombre de colonnes (largeur du champ) et le nombre le lignes (hauteur du champ).

Le formulaire

Maintenant qu'on a tous les éléments qui composent le formulaire, on va pouvoir le construire :

<form action="assets/php/comment.php" method="post">
  <label>
    Votre nom de zombie*
    <input type="text"/>
  </label>
  <label>
    Votre note
    <button aria-label="1 sur 5"><i class="mdi mdi-star-outline"></i></button>
    <button aria-label="2 sur 5"><i class="mdi mdi-star-outline"></i></button>
    <button aria-label="3 sur 5"><i class="mdi mdi-star-outline"></i></button>
    <button aria-label="4 sur 5"><i class="mdi mdi-star-outline"></i></button>
    <button aria-label="5 sur 5"><i class="mdi mdi-star-outline"></i></button>
    <input type="hidden"/>
  </label>
  <label>
    Votre commentaire
    <textarea cols="30" rows="10"></textarea>
  </label>

  <button type="submit">Enregistrer mon commentaire</button>
</form>

Comme vous pouvez le voir, on a entouré les champs par la balise form. C'est le tag qu'on utilise pour les formulaires. On a également ajouté un button de type submit pour soumettre le formulaire et envoyer les données au serveur. Il n'est pas présent sur la maquette, c'est un oubli de ma part lors de sa création.

En ce qui concerne le formulaire, j'attire votre attention sur les deux attributs : action et method.

action

Cet attribut permet d'indiquer à votre navigateur quel est le fichier qui va traiter la soumission du formulaire. Ici j'ai mis /assets/php/comment.php, cela veut dire que c'est le fichier comment.php qui se trouve dans le dossier php, lui-même dans le dossier assets qui se trouve à la racine du projet. Quand l'utilisateur va cliquer sur "Enregistrer mon commentaire", il va être redirigé vers cette page. C'est elle qui va alors faire ce qu'il y a à faire avec les informations, ici, si tout est bon dans les informations, les enregistrer en BdD.

Cet attribut peut être omis. Si c'est le cas, la page actuelle est rafraîchie et c'est à elle de traiter les informations.

method

Cet attribut permet de déterminer la manière dont seront envoyées les informations. Il peut prendre trois valeurs : get, post et dialog.

method GET

Les informations sont envoyées au serveur via l'URL. Si l'on a ce formulaire :

<form action="assets/php/search.php">
  <label>
    Rechercher
    <input type="search" name="search"/>
  </label>
</form>

...et que l'utilisateur rentre : "clafoutis de cervelle" dans le champ de texte de type search, on se retrouvera alors sur l'URL suivante : https://recettes-zombie.zb/assets/php/search.php?search=clafoutis+de+cervelle.
Nous sommes bien sur la page qui se trouve dans l'attribut action du form. De plus, après le nom du fichier, on a un point d'interrogation suivi de search=clafoutis+de+cervelle. Le ? permet de séparer le nom du fichier des query strings. Les query strings sont les informations qui seront passées au serveur. Elles se composent de deux parties :

search, qui correspond au name du ou des champs qui ont été soumis. Ici on n'en a qu'un et son name est search, d'où le search=
après le =, on retrouve la valeur qui a été entrée dans le champ au format URL. Les espaces n'étant pas autorisés dans l'URL seront remplacés par des +.

Si lon avait eu plusieurs champs, les valeurs auraient été séparées par une & => ?champ1=valeur1&champ2=valeur2.

Ce type de méthode est souvent utilisé pour demander une information au serveur. Typiquement, il est utilisé lorsque vous faites une recherche sur Google ; après votre recherche, vous pourrez remarquer que les termes de votre requête sont en query string.

method POST

Les informations sont alors passées dans le corps de la requête. Si vous ne vous rappelez pas ce qu'est une requête ou à quoi correspond le corps de la requête, je vous invite à relire ce chapitre sur les requêtes.

Ce type de méthode est plutôt utilisée pour transmettre de l'information au serveur afin d'enregistrer celle-ci en BdD.

methode DIALOG

La méthode dialog s'utilise en lien avec la balise HTML <dialog>. Si le formulaire est inséré au sein d'une telle balise, lors de la soumission de l'information, cette dernière sera automatiquement fermée.