Structure d'un formulaire

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

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.

Mise en forme rapide

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

Exemple : formulaire - structure simple

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.

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

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

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.

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

Une solution possible

Exercice : structurer un formulaire