# Structure HTML des éléments de formulaires

## Wrapper du couple label / input : `form_field_wrapper`
Chaque élément (field) de formulaire doit être englobé dans un container (wrapper) `form_field_wrapper`.

Le `label` peut avoir un complément d'information à la suite dans une balise `span.label_complement` : il est
 situé au même niveau (frère/soeur)
```html
<div class="form_field_wrapper">
    <label for="nom_utilisateur"> Votre nom </label>
    <span class="label_complement">(de naissance) -<i>facultatif</i></span>
    <input id="nom_utilisateur">
</div>
```

### Particularité de l'input\[type="checkbox"] : `--form_field_wrapper_checkbox`
Les checkbox ont une particularité : l'input est **avant** le label.

Il est impératif de rajouter le modifier `--form_field_wrapper_checkbox` sur le bloc `form_field_wrapper` afin que
 le label, le complément de label, l'input et l'erreur (si elle existe) s'aligne correctement
```html
<div class="form_field_wrapper --form_field_wrapper_checkbox">
    <input id="checkbox" type="checkbox">
    <label for="checkbox">Mon label de check</label>
    <span class="label_complement">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Architecto aut consequatur corporis cum ea eum fuga in itaque iusto laborum minima, 
        nemo nobis officiis optio, repellendus ullam unde vero voluptates!
    </span>
</div>
```
## Template d'un formulaire
Afin de tenir compte de l'accessibilité et de faciliter ce dernier nous utilisons les `fieldset` et `legend`

note : il est possible de changer le design des `legend` en utilisant les modifier de typographie `--h2|--paragraph`
```html
<form>
    <fieldset>
    <legend>Titre de mon group de champs</legend>
    
    <div class="form_field_wrapper">
        <label for="nom_utilisateur"> Votre nom </label>
        <input id="nom_utilisateur">
    </div>
    
    <div class="form_field_wrapper">
        <label for="prenom_utilisateur"> Votre prenom </label>
        <input id="prenom_utilisateur">
    </div>
    
    </fieldset>
</form>
```

## Template de base pour les différents INPUT

### RADIO
Les boutons radios doivent :
- être dans un `ul > li`
- avoir l'`input` avant le `label`
- comporter un `role="radiogroup"` pour l'accessibilité sur l'`ul` ou un élément parent de l'`ul`
- avoir un `aria-labelledby` faisant référence à un `label plus haut dans l'arbre`
- le tout est englobé dans un `form_field_wrapper` afin de respecter les marges avec les autres champs
```html
<div class="form_field_wrapper">
    <label id="id_question">La question ?</label>
    <ul role="radiogroup" aria-labelledby="id_question">
        <li>
            <input name="demo_radio-2" id="plop-radio1-2" value="plop-radio1-2" type="radio">
            <label for="plop-radio1-2">1er radio</label>
        </li>
        <li>
            <input name="demo_radio-2" id="plop-radio2-2" value="plop-radio2-2" type="radio">
            <label for="plop-radio2-2">2eme radio</label>
        </li>
        <li>
            <input name="demo_radio-2" id="plop-radio3-2" value="plop-radio3-2" type="radio">
            <label for="plop-radio3-2">3eme radio</label>
        </li>
        <li>
            <input name="demo_radio-2" id="plop-radio4-2" value="plop-radio4-2" type="radio">
            <label for="plop-radio4-2">4eme radio</label>
        </li>
    </ul>
</div>
```
### TEXT
```html
<div class="form_field_wrapper">
    <label for="nom_utilisateur"> Votre nom </label>
    <span class="label_complement">(de naissance) -<i>facultatif</i></span>
    <input id="nom_utilisateur">
</div>
```

### TEXTAREA
```html
<div class="form_field_wrapper">
    <label for="adresse_utilisateur"> Votre adresse </label>
    <textarea id="adresse_utilisateur"></textarea>
</div>
```
## Style custom

### TEXT : data-character-limit
Ceci permet de limité la largeur visuelle d'un champs par rapport au nombre
de caractère qu'il devrait contenir


Attention :
- `data-character-limit` prend en valeur un `integer`
- - `data-character-limit` se positionne sur l'`input`
```html
<div class="form_field_wrapper">
    <label>Votre numéro de sécurité social</label>
    <input data-character-limit="15">
</div>
```

### CHECKBOX et RADIO : `choice_button`
Les checkbox et radio ont la possibilité d'avoir un design alternatif sous forme de bouton, pour cela
il faut :
- ajouter une classe `choice_button` sur un élément parent de l'`ul`
- par défaut, on présente verticalement les éléments, si on les veut en ligne,
il faut ajouter `--choice_button_alignement_horizontal` sur le même élément que `choice_button`

*input radio*
```html
<div class="form_field_wrapper choice_button --choice_button_alignement_horizontal">
    <label id="burnout">Faites-vous un B.U.R.N.O.U.T ?</label>
    <ul role="radiogroup" aria-labelledby="burnout">
        <li>
            <input name="demo_radio" id="radio1" value="radio1" type="radio">
            <label for="radio1">Oui</label>
        </li>
        <li>
            <input name="demo_radio" id="radio2" value="radio2" type="radio">
            <label for="radio2">Non</label>
        </li>
    </ul>
</div>
```

*input checkbox*
```html
<div class="form_field_wrapper choice_button">
    <label id="cuisine">Quelle cuisine aimez-vous ?</label>
    <ul role="radiogroup" aria-labelledby="cuisine">
        <li>
            <input name="demo_check-4" id="check-button1" value="check-button1" type="checkbox">
            <label for="check-button1">Asiatique</label>
        </li>
        <li>
            <input name="demo_check-4" id="check-button2" value="check-button2" type="checkbox">
            <label for="check-button2">Mexicaine</label>
        </li>
        <li>
            <input name="demo_check-4" id="check-button3" value="check-button3" type="checkbox">
            <label for="check-button3">Fast-food</label>
        </li>
        <li>
            <input name="demo_check-4" id="check-button4" value="check-button4" type="checkbox">
            <label for="check-button4">La votre</label>
        </li>
    </ul>
</div>
```