Séance 2

Les formulaires

Les formulaires sont un élément essentiel du web et le seul moyen de collecter des informations provenant de vos utilisateurs.

Ils sont aussi une vraie difficulté dans bien des cas, et une perte importante d'utilisateur est généralement constaté au moment de compléter un formulaire.

Rendre un formulaire accessible est donc indispensable afin de conserver les utilisateurs, et de permettre que tous les usagers puissent le remplir.

https://www.w3schools.com/html/html_forms.asp

Les balises

La balise form

Permet de définir globalement un formulaire.

Les input, textarea et select

Ce sont les champs des formulaires

Il est très important de choisir le bon type selon les données attendues : https://www.w3schools.com/tags/att_input_type.asp

Cas particulier des radios/checkbox

Les boutons radios ou checkbox doivent retourner une valeur pour indiquer l'option retenue.

Pour que ces boutons fonctionnent ensemble il faut qu'ils aient la même valeur pour l'attribut name.

Exemple pour un radio (source : https://www.w3schools.com/tags/att_input_type_radio.asp)

<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>

Exemple pour un checbox

<input type="checkbox" id="vehicle1" name="vehicle[]" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle[]" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle[]" value="Boat">
<label for="vehicle3"> I have a boat</label><br>

Ici le name est un tableau, car il est possible de sélectionner plusieurs valeurs.

On peiut indiquer "checked" sur les valeurs par défaut (une seule par radio, mais potentiellement plusieurs sur un checkbox)

textarea

<textarea rows="10" cols="100">
Le contenu de la zone de saisie
</textarea>

Select

<select name="liste" id="liste" class="...">
    <option value="">Choisir dans la liste</option>
    <option value="1">Valeur 1</option>
    ...
    <option value="n">Valeur n</option>
</select>

Les labels

Ce sont les textes accompagnant chaque champ de formulaire.

https://www.w3schools.com/html/html_form_elements.asp (partie label)

Le lien entre le label et le champ se fait parce que l'attribut for de label contient la valeur de l'attribut id du champs.

Exemple

<form action="action_page.php" method="post">
  <div>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="name">
  </div>
  <input type="submit" value="Submit">
</form>

Les fieldsets

Les fieldsets permettent de regrouper les champs de formulaires qui ont un lien ou une cohérence entre eux.

Un fieldset possède une "legend", et par défaut est représenté par un cadre avec la légende en haut à gauche. Ce comportement peut bien sr tre modifié en CSS.

HTML fieldset tag

Exemple :

<form action="/action_page.php" method="post">
 <fieldset>
  <legend>Personalia:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>

Source : https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset

L'intérêt

Ce que dit l'accessibilité : https://www.w3.org/WAI/tutorials/forms/

A beginner's complete guide to form accessibility: the 5 things accessible forms needs and how to fix common errors - Pope Tech BlogPope Tech Blog

Ressource sur les bonnes pratiques des formulaires

Le CSS

Tout comme pour les tableaux, bien utiliser les bonnes balises peut permettre de formater en CSS un formulaire sans devoir créer des class ou des id spécifiques.

La qualité

27 règles de qualité encadre les formulaires :

Check-list Qualité Web : la checklist de référence

Quelques ressources

15 beautiful CSS Forms ✨DEV Community 👩‍💻👨‍💻

Exemples de formulaires, dont formulaires de CB

Exercice 1

Créez un formulaire accessible, ergonomique et correctement structuré qui doit contenir les champs suivants :

• Nom, Prénom

• Email

• Civilité

• Nationalité (indiquer uniquement quelques pays)

• Adresse complète

• Coordonnées du moyen de paiement

• Acceptation des CGU

Vous proposerez des regroupements cohérents des champs. Vous veillerez à un rendu correct en CSS (sans utilisation de Bootstrap ou équivalent pour cet exercice).