Exemples de formulaires sans tableau de mise en forme

Màj: printemps 2008

Cette page présente quelques exemples de formulaires HTML mis en forme grâce aux feuilles de style CSS, et se passant de tableaux de mise en forme.

En effet, dans le but de renforcer la lisibilité et l'utilisabilité des formulaires, on utilise souvent une mise en page «en colonnes» pour les formulaires, la plus classique étant la mise en page sur deux colonnes avec à gauche les intitulés (dans l'idéal, des éléments label explicites avec un attribut for correctement renseigné) et à droite les champs de saisie. Les tableaux de mise en forme sont alors bien pratiques pour réaliser à peu de frais ces mises en page.

Bien qu'une utilisation raisonnée des tableaux de mise en forme ne soit pas à proscrire, il peut être utile de proposer un «équivalent». Voici donc quelques exemples.

Note: les formulaires ci-après sont dépourvus d'attributs action, method ou name.

Formulaire simple à deux colonnes

Le formulaire

Code HTML et CSS

HTML:

<form action="#">
	<p class="double">
		<label for="f1-nom">Nom:</label>
		<input type="text" id="f1-nom" />
	</p>
	<p class="double">
		<label for="f1-prenom">Prénom:</label>
		<input type="text" id="f1-prenom" />
	</p>
	<p class="double">
		<label for="f1-adresse">Adresse:
		<span class="info">(Numéro et rue)</span></label>
		<input type="text" id="f1-adresse" />
	</p>
	<p class="double">
		<label for="f1-ville">Ville:
		<span class="info">(Ville et code postal)</span></label>
		<input type="text" id="f1-ville" />
	</p>
	<p class="double">
		<label for="f1-telephone">Téléphone:</label>
		<input type="text" id="f1-telephone" />
	</p>
	<p class="double">
		<label for="f1-infos">Informations supplémentaires:
		<span class="info">(Saisissez ici toutes les informations que vous jugerez utiles)</span></label>
		<textarea id="f1-infos" rows="5" cols="30"></textarea>
	</p>
	<p class="simple">
		<input type="submit" value="Envoyer ces informations" />
	</p>
</form>

CSS:

form {
	width: 500px;
	padding: 10px 20px;
	background: lavender;
	color: midnightblue;
}
form p {
	margin: 1em 0;
}
form p.double {
	/* Empêcher le dépassement des flottants */
	overflow: hidden;
	/* Idem pour IE6 */
	width: 100%;
}
form p.double label {
	float: left;
	width: 150px;
	text-align: right;
	font-weight: bold;
	cursor: pointer;
}
form p.double label span.info {
	display: block;
	margin-top: .2em;
	font-size: .8em;
	font-weight: normal;
	cursor: default;
}
form p.double input,
form p.double textarea {
	width: 250px;
	margin-left: 12px;
	border: solid 1px midnightblue;
	padding: 2px 4px;
}
form p.double textarea {
	padding: 2px 0 0 4px;
	width: 320px;
	height: 6em;
}
form p.simple {
	margin-left: 160px;
}

Quelques subtilités

Dans la feuille de style ci-dessus, on a utilisé les éléments label et input (ou textarea comme des cellules de tableau, en faisant flotter les premiers et en donnant une marge à gauche aux seconds. Mais pour rajouter des informations dans la colonne de gauche, on est obligé de les placer à l'intérieur du label, ce qui n'est pas toujours intéressant.

On souhaitera peut-être adopter une structure un peu plus lourde en code, mais plus souple. Un petit exemple:

<p class="double">
	<span class="gauche">
		<label for="f2-telephone">Téléphone:</label>
		<small>Ici tout le bla bla que l'on veut.</small>
	</span>
	<span class="droite">
		<input type="text" id="f2-telephone" />
	</span>
</p>
<p class="double">
	<span class="gauche">
		Aimez-vous la salade?
	</span>
	<span class="droite">
		<input type="radio" id="f2-salade1" /> <label for="f2-salade1">Oui.</label><br />
		<input type="radio" id="f2-salade2" /> <label for="f2-salade2">Non.</label><br />
		<input type="radio" id="f2-salade3" /> <label for="f2-salade3">Ça dépend.</label><br />
	</span>
</p>

Attention également: dans notre exemple, nous avons attribué une largeur de 50% à tous les éléments input. C'est très bien pour des input de type text, mais si ce style est appliqué à des input de type radio ou checkbox le résultat risque fort d'être peu satisfaisant.

Dans l'idéal, on règlerait ce problème en utilisant des sélecteurs d'attributs:

input[type=text] {width: 50%;}

Malheureusement, ce type de sélecteur n'est pas supporté par Internet Explorer versions 6 et inférieures (il est par contre supporté par Internet Explorer 7). Pour la compatibilité avec Internet Explorer 6 notamment, on devra donc rajouter des classes pour différencier les différents type d'input:

HTML:
<input type="text" class="text" />

CSS:
input.text {width: 50%;}

Une autre solution consisterait à ne pas donner de largeur aux input. Pour éviter qu'ils ne dépassent du formulaire, notamment lors de l'agrandissement du texte, on pourrait alors utiliser max-width. Mais après quelques essais rapides, je n'ai obtenu aucun résultat probant.

Un formulaire un peu plus complexe

Inscription à la Newsletter

Avertissement au lecteur: ce formulaire est totalement fictif, ce qui explique sans doute pourquoi il est sans queue ni tête. L'auteur fait appel à votre indulgence.

Nom et adresse


(Numéro et rue)


(Ville et code postal)

Inscription à la Newsletter

Confirmer l'inscription:

Format de la newsletter:

Nous poussons donc un peu plus loin la complexité de la mise en page, avec deux colonnes principales correspondant à deux parties distinctes du formulaire. La colonne de gauche reprend pour l'essentiel les éléments de notre premier formulaire. Mais, pour une meilleure lisibilité, on a renoncé à placer les éléments de cette colonne eux-mêmes sur deux colonnes, comme nous l'avions fait pour le premier formulaire. Sachez cependant que c'est tout à fait possible, avec quelques changements des règles CSS. Nous le démontrerons un peu plus loin.

En attendant, afin de mieux comprendre le fonctionnement de ce formulaire, je vous propose de voir le même formulaire (code HTML identique), mais avec les styles par défaut de votre navigateur. Voici ce que ça donne:

Inscription à la Newsletter

Avertissement au lecteur: ce formulaire est totalement fictif, ce qui explique sans doute pourquoi il est sans queue ni tête. L'auteur fait appel à votre indulgence.

Nom et adresse


(Numéro et rue)


(Ville et code postal)

Inscription à la Newsletter

Confirmer l'inscription:

Format de la newsletter:

Code HTML et CSS

HTML:

<form action="#">
<h3>Inscription à la Newsletter</h3>
<p class="blabla">Avertissement au lecteur: ce formulaire est totalement fictif, ce qui explique sans doute pourquoi il est sans queue ni tête. L'auteur fait appel à votre indulgence.</p>

<div class="gauche"><fieldset>
	<legend>Nom et adresse</legend>
	<p>
		<span class="label"><label for="f2-nom">Nom:</label></span>
		<span class="controle"><input type="text" class="text" id="f2-nom" /></span>
	</p>
	<p>
		<span class="label"><label for="f2-prenom">Prénom:</label></span>
		<span class="controle"><input type="text" class="text" id="f2-prenom" /></span>
	</p>
	<p>
		<span class="label">
			<label for="f2-adresse">Adresse:</label><br />
			(Numéro et rue)
		</span>
		<span class="controle"><input type="text" class="text" id="f2-adresse" /></span>
	</p>
	<p>
		<span class="label">
			<label for="f2-ville">Ville:</label><br />
			(Ville et code postal)
		</span>
		<span class="controle"><input type="text" class="text" id="f2-ville" /></span>
	</p>
	<p>
		<span class="label"><label for="f2-telephone">Téléphone:</label></span>
		<span class="controle"><input type="text" class="text" id="f2-telephone" /></span>
	</p>
</fieldset></div><!-- .gauche -->

<div class="droite"><fieldset>
	<legend>Inscription à la Newsletter</legend>
	<p>
		<span class="label">Confirmer l'inscription:</span>
		<span class="controle"><br />
			<input type="checkbox" class="bouton" checked="checked" id="f2-auth1" /><label for="f2-auth1">Je souhaite recevoir la newsletter de Machin</label>
		</span>
		<span class="controle"><br />
			<input type="checkbox" class="bouton" id="f2-auth2" /><label for="f2-auth2">J'accepte de recevoir des spams des partenaires de Machin</label>
		</span>
	</p>
	<p>
		<span class="label">Format de la newsletter:</span>
		<span class="controle"><br />
			<input type="radio" class="bouton" name="format" checked="checked" id="f2-format1" /><label for="f2-format1">Recevoir la newsletter au format HTML (recommandé)</label>
		</span>
		<span class="controle"><br />
			<input type="radio" class="bouton" name="format" id="f2-format2" /><label for="f2-format2">Recevoir la newsletter au format texte brut</label>
		</span>
	</p>
</fieldset></div><!-- .droite -->

<p class="submit">
	<input type="submit" value="S'inscrire à la Newsletter" />
</p>
</form>

Vous remarquerez qu'on utilise un certain nombre de div (une pour chaque fieldset) et de span. Pour les premiers, la raison est simple: les éléments fieldset sont assez difficiles à styler avec les CSS (certaines propriétés ne passent pas, d'autres semblent déclencher des bugs), et l'utilisation de div pour englober les fieldset semble la solution la plus compatible.

Quant aux span, ils ne sont pas ici indispensables, mais permettent une mise en forme fine des contenus de chaque paragraphe, ce qui nous permet de garder chaque couple «label – élément(s) de formulaire» dans un seul paragraphe.

CSS:

form {
	width: 650px;
	padding: 0;
	border: solid 1px midnightblue;
}
form h3 {
	margin: 0 0 1em 0;
	padding: 10px 20px;
	text-align: center;
	background: midnightblue;
	color: white;
}
form p.blabla {
	margin: 1em 20px 1.5em 20px;
	font-size: .9em;
	color: #448;
}
form fieldset {
	margin: 0;
	padding: 0;
	border: none;
}
form fieldset legend {
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-style: italic;
	font-size: 1.1em;
}
form div.gauche {
	width: 250px;
	margin: 0 0 1em 20px;
	float: left;
	display: inline; /* évite le Doubled Float-Margin Bug d'IE6 */
}
form div.gauche p {
	margin: .5em 0;
}
form div.gauche span.label {
	display: block;
	margin-bottom: .2em;
}
form div.gauche label {
	font-weight: bold;
	cursor: pointer;
}
form div.gauche span.controle {
	display: block;
}
form div.droite {
	margin: 0 20px 1em 310px;
}
form div.droite span.label {
	display: block;
	font-weight: bold;
}
form div.droite span.controle {
	display: block;
	margin: .5em 0 0 30px;
}
form div.droite span.controle input.bouton {
	position: absolute;
	margin-left: -30px;
}
form div.droite span.controle br {
	display: none;
}
form input.text {
	width: 95%;
	border: solid 1px midnightblue;
	padding: 2px 4px;
}
form textarea {
	border: solid 1px midnightblue;
	padding: 2px 0 0 4px;
}
form p.submit {
	clear: left;
	margin: 1em 20px 1em 310px;
}
form p.submit input {font-size: 1.2em;}

Variation: le premier fielset sur deux colonnes

Pour pouvoir placer nos éléments sur trois colonnes (une fois deux et une fois une), nous allons réquisitionner un peu plus d'espace en largeur. On passera donc d'une largeur de 650px à une largeur de 750px.

Nous ne changeons ici que les propriétés CSS. Le code HTML est inchangé.

Inscription à la Newsletter

Avertissement au lecteur: ce formulaire est totalement fictif, ce qui explique sans doute pourquoi il est sans queue ni tête. L'auteur fait appel à votre indulgence.

Nom et adresse


(Numéro et rue)


(Ville et code postal)

Inscription à la Newsletter

Confirmer l'inscription:

Format de la newsletter: