### Structure de base

Un formulaire est toujours composé avec un élément form qui contient :

- toutes les zones de saisie (éléments input, select et textarea),
- un ou plusieurs boutons de soumission qui vont permettre d'envoyer les informations saisies au serveur (élément input avec attribut `type="submit"`),
- tous les éléments de groupement et de présentation propres aux formulaires (fieldset, legend

Exemple : formulaire - structure simple
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire - structure simple</title> </head> <body> <form> <fieldset> <legend>Authentification</legend> <label>Nom</label> <input type="text"> <label>Mot de passe</label> <input type="password"> <label>Restez connecté</label> <input type="checkbox"> </fieldset> <fieldset> <input type="reset" value="Effacer"> <input type="submit" value="S'authentifier"> </fieldset> </form> </body> </html>

Comme on peut le voir en testant l'exemple précédent, par défaut les zones de saisie et les étiquettes de zones sont toutes des éléments de type en ligne qui s'affiche les uns à côté des autres.
Seul l'élément fieldset génére un conteneur bloc, avec par défaut un cadre grisé et un simili effet 3D

#### Créer des lignes

Parmi toutes les solutions possibles pour créer des lignes dans le formulaire, on peut utiliser des éléments div, neutres au niveau sémantique et simples au niveau structurel.

Exemple : formulaire - structure simple
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire - structure simple</title> </head> <body> <form> <fieldset> <legend>Authentification</legend> <div> <label>Nom</label> <input type="text"> </div> <div> <label>Mot de passe</label> <input type="password"> </div> <div> <label>Restez connecté</label> <input type="checkbox"> </div> </fieldset> <fieldset> <input type="reset" value="Effacer"> <input type="submit" value="S'authentifier"> </fieldset> </form> </body> </html>

#### Mise en forme rapide

On peut faire une mise en forme rapide avec des règles de style CSS .

Exemple : formulaire - structure simple
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire - structure simple</title> <style> fieldset { border: 1px solid #AAA; margin: 0 auto 10px; padding: 6px; width: 280px; } fieldset:last-of-type {text-align: center} fieldset div { margin: 5px 0; } label { display: inline-block; text-align: right; width: 115px; } input[type="reset"], input[type="submit"] { padding: 2px; width: 90px } </style> </head> <body> <form> <fieldset> <legend>Authentification</legend> <div> <label>Nom</label> <input type="text"> </div> <div> <label>Mot de passe</label> <input type="password"> </div> <div> <label>Restez connecté</label> <input type="checkbox"> </div> </fieldset> <fieldset> <input type="reset" value="Effacer"> <input type="submit" value="S'authentifier"> </fieldset> </form> </body> </html>

### L'indispensable bouton de soumission

Un élément particulier, le bouton de soumission (input avec l'attribut `type="submit"`), permet d'envoyer au serveur Web les informations saisies par l'utilisateur.

Quand on clique sur cet élément représenté par défaut sous la forme d'un bouton, on déclenche l'envoi du contenu du formulaire au serveur (on parle aussi de "soumission de formulaire"). C'est le navigateur qui prend automatiquement en charge la collecte des informations saisies, leur mise en forme pour échange avec le serveur et leur transfert sur le réseau.

La présence d'au moins un bouton de soumission dans un formulaire est indispensable pour que les informations saisies puissent être envoyées au serveur.

Exemple : bouton de soumission
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Bouton de soumission</title> <link rel="stylesheet" href="styles/form00.css"> </head> <body> <form> <fieldset> <legend>Authentification</legend> <div> <label>Nom</label> <input type="text"> </div> <div> <label>Mot de passe</label> <input type="password"> </div> <div> <label>Restez connecté</label> <input type="checkbox"> </div> </fieldset> <fieldset> <input type="reset" value="Effacer"> <input type="submit" value="S'authentifier"> </fieldset> </form> </body> </html>

Dans certaines pages (ou applications), on peut avoir plusieurs boutons de soumission qui enverront tous vers le même "programme" sur le serveur, mais qui en fonction de leur nom déclencheront des traitement différents. Le cas typique est une gestion de fiche dans une base de données ou aura par exemple un bouton de soumission qui va déclencher un traitement de mise à jour de la fiche (ie une requête SQL UPDATE), et un autre bouton de soumission qui lui va déclencher un traitement de suppression de la fiche (ie une requête SQL DELETE).

Exemple : plusieurs boutons de soumission
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Plusieurs boutons de soumission</title> <link rel="stylesheet" href="styles/form00.css"> </head> <body> <form> <fieldset> <legend>Mise à jour utilisateur</legend> <div> <label>Nom</label> <input type="text" value="Vador"> </div> <div> <label>Prénom</label> <input type="text" value="Dark"> </div> <div> <label>E-mail</label> <input type="text" value="dv@mechant.com"> </div> </fieldset> <fieldset> <input type="submit" value="Abandon"> <input type="submit" value="Supprimer"> <input type="submit" value="Modifier"> </fieldset> </form> </body> </html>

### <fieldset> et <legend>

L'élément fieldset est un conteneur pour des zones de saisies pouvant être regroupées autour d'un thème commun. Cet élément peut être très utile, surtout dans le cas où le formulaire comporte un grand nombre de zones.

fieldset est un élément bloc. Il est visuellement repérable car les navigateurs l'entoure d'une bordure. Pour être sûr que les caractéristiques d'affichage sont les mêmes quelque soit le navigateur utilisé, je vous conseille de les fixer avec les propriétés de style CSS `border` pour le cadre, `margin` pour la marge extérieure et `padding` pour la marge intérieure. Voir l'exemple précédent.

fieldset peut être utilisé seul (cf le 2eme `fieldset` dans l'exemple précédent) ou utilisé avec un élément legend qui va venir s'afficher en haut à gauche du cadre (cf le 1er `fieldset` dans l'exemple précédent).

Le positionnement et les caractéristiques d'affichage de legend peuvent être modifiée avec des propriétés de style CSS.

Exemple : formulaire - structure simple
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Formulaire - structure simple</title> <style> legend { background: #EEE; border: 1px solid #AAA; font-weight: bold; margin-left: -20px; padding: 3px; } fieldset { border: 1px solid #AAA; margin: 0 auto 10px; padding: 6px; width: 280px; } fieldset:last-of-type {text-align: center} fieldset div { margin: 5px 0; } label { display: inline-block; text-align: right; width: 115px; } input[type="reset"], input[type="submit"] { padding: 2px; width: 90px } </style> </head> <body> <form> <fieldset> <legend>Authentification</legend> <div> <label>Nom</label> <input type="text"> </div> <div> <label>Mot de passe</label> <input type="password"> </div> <div> <label>Restez connecté</label> <input type="checkbox"> </div> </fieldset> <fieldset> <input type="reset" value="Effacer"> <input type="submit" value="S'authentifier"> </fieldset> </form> </body> </html>

### <label>

L'élément label permet de définir une étiquette (ou libellé) pour une zone de saisie.
Cet élément est facultatif, mais son utilisation permet d'apporter de la sémantique à la structure du formulaire et de faciliter la mise en forme en particulier avec CSS.

L'élément label présente la particularité suivante : quand on clique dessus le curseur de la souris se positionne directement dans la zone de saisie associée. Dans le cas ou la zone associée est une case à cocher ou un bouton radio, l'élément associé est automatiquement sélectionné ou déselectionné.

#### Associer un label à une zone

Il y a 2 solutions pour associer un label à une zone de saisie :

- imbriquer l'élément associé dans le label,
- utiliser un attribut `for` dans le label.

L'imbrication de l'élément associé dans le label est le plus simple à faire comme le montre l'exemple suivant. Cliquez sur les labels pour voir le positionnement automatique.

Exemple : zone et label imbriqués
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Zone et label imbriqués</title> <link rel="stylesheet" href="styles/form01.css"> </head> <body> <form> <fieldset> <legend>Authentification</legend> <div> <label>Nom <input type="text"> </label> </div> <div> <label>Mot de passe <input type="password"> </label> </div> <div> <label>Restez connecté <input type="checkbox"> </label> </div> </fieldset> <fieldset> <input type="reset" value="Effacer"> <input type="submit" value="S'authentifier"> </fieldset> </form> </body> </html>

Avec l'imbrication de l'élément associé dans le label on perd l'aspect sémantique de la structure puisque le label contient aussi la zone. De plus la mise en forme pour l'alignement des zones demanderait l'ajout d'éléments supplémentaires comme span.

Utiliser un attribut `for` dans le label nécessite d'identifier la zone de saisie associée avec un attribut `id`. La valeur donnée à cet attribut `id` est également celle de l'attribut `for` du label.
Remarque : l'attribut `id` sert à identifier sans équivoque un élement quelconque de la page HTML. Cette valeur doit donc être unique dans toute la page.

Unique dans une page doit être la valeur de `id`.
Exemple : attributs for et id
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Attributs for et id</title> <link rel="stylesheet" href="styles/form02.css"> </head> <body> <form> <fieldset> <legend>Authentification</legend> <div> <label for="zNom">Nom</label> <input type="text" id="zNom"> </div> <div> <label for="zPasse">Mot de passe</label> <input type="password" id="zPasse"> </div> <div> <label for="zCon">Restez connecté</label> <input type="checkbox" id="zCon"> </div> </fieldset> <fieldset> <input type="reset" value="Effacer"> <input type="submit" value="S'authentifier"> </fieldset> </form> </body> </html>

### Structurer un formulaire

structurer un formulaire

Complétez le code HTML pour obtenir le résultat ci-contre.

Utilisez les éléments fieldset, legend et label vus précédemment pour faire la structure.

Les zones de saisies et les boutons sont des éléments `input` comme ceux des exemples précédents.

La feuille de style liée à l'exercice (`form03.css`) fera automatiquement la mise en forme des éléments.

Code à compléter

Exercice : structurer un formulaire
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Structurer un formulaire</title> <link rel="stylesheet" href="../html08/styles/form03.css"> </head> <body> <form> </form> </body> </html>

Une solution possible

Exercice : structurer un formulaire
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Structurer un formulaire</title> <link rel="stylesheet" href="../html08/styles/form03.css"> </head> <body> <form> <fieldset> <legend>Etat-civil</legend> <div> <label for="zNom">Nom</label> <input type="text" id="zNom"> </div> <div> <label for="zPrenom">Prénom</label> <input type="text" id="zPrenom"> </div> </fieldset> <fieldset> <legend>Adresse</legend> <div> <label for="zRue">Rue</label> <input type="text" id="zRue"> </div> <div> <label for="zCode">Code postal</label> <input type="text" id="zCode"> </div> <div> <label for="zVille">Ville</label> <input type="text" id="zVille"> </div> </fieldset> <fieldset> <input type="reset" value="J'efface"> <input type="submit" value="Je m'inscris"> </fieldset> </form> </body> </html>