# 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

{% hint style="info" %}
Il est très important de choisir le bon type selon les données attendues : <https://www.w3schools.com/tags/att_input_type.asp>
{% endhint %}

#### 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)](https://www.w3schools.com/tags/att_input_type_radio.asp)

{% code lineNumbers="true" %}

```html
<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>
```

{% endcode %}

Exemple pour un checbox

```html
<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

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

#### Select

```html
<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

```html
<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.

{% embed url="<https://www.w3schools.com/tags/tag_fieldset.asp>" %}

#### Exemple :

{% code lineNumbers="true" %}

```html
<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>
```

{% endcode %}

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/>

{% embed url="<https://blog.pope.tech/2022/10/03/a-beginners-complete-guide-to-form-accessibility-the-5-things-accessible-forms-needs-and-how-to-fix-common-errors/>" %}
Ressource sur les bonnes pratiques des formulaires
{% endembed %}

### 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 :&#x20;

{% embed url="<https://checklists.opquast.com/fr/assurance-qualite-web/?theme=formulaires>" %}

### Quelques ressources

{% embed url="<https://dev.to/webdeasy/15-beautiful-css-forms-15f0>" %}
Exemples de formulaires, dont formulaires de CB
{% endembed %}

## 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).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cours.davidannebicque.fr/mmi-noumea/accessibilite-s1/seance-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.