> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> HTML / CSS

> Aligner ses formulaires sans tableaux

> Lecture du tutoriel

Aligner ses formulaires sans tableaux

Par

Romain128

Mise à jour : 22/08/2008

Difficulté : Facile Facile

595 visites depuis 7 jours, classé 191/786

Salut.

Quiconque a voulu réaliser des formulaires s’est déjà heurté au problème récurrent des éléments de formulaire qui se collent au texte, alors que l’on voulait qu’ils fussent bien alignés et espacés par rapport au texte qui décrit le champ. :pirate:

Nous allons, dans ce tutoriel, résoudre ce problème sans pour autant utiliser des tableaux (qui ne doivent être employés que pour les données tabulaires), et sans pour autant utiliser de <div> (car trop de <div> tue les <div>).

Retour en haut

Sommaire du tutoriel :

Préambule
La partie XHTML
La partie CSS

Retour en haut

Préambule

Si vous avez déjà essayé de faire un formulaire, il ressemblait sûrement à cela :

Notre problème : le texte qui se colle au formulaire… :pirate:

Cet effet n’est pas très agréable, et notre formulaire paraît vite déstructuré et bâclé. Nous allons donc essayer d’arriver à ce résultat en cinq lignes de CSS :

C’est quand même plus agréable !

Retour en haut

La partie XHTML

Mais si je ne recours pas aux tableaux, quelles balises XHTML vais-je devoir utiliser ?

Les balises les plus adaptées sont, à mon avis, les fameuses <label>.

Notre code XHTML ressemblera donc à ceci :
Code : HTML

1
2
3

<label>Nom :</label><input type="text" /><br />
<label>Prénom :</label><input type="text" /><br />
<label>Âge :</label><select><option>21</option></select>

Mais avec ce code, si le visiteur clique sur Prénom, le champ associé ne sera pas sélectionné ! o_O

Bien vu !

Nous allons donc lui apporter quelques modifications, en utilisant l’attribut for dans la balise <label>, qui désignera l’ID du champ à sélectionner, et en ajoutant donc l’attribut id au champ en question :
Code : HTML

1
2
3

<label for="nom">Nom :</label><input type="text" id="nom" /><br />
<label for="prenom">Prénom :</label><input type="text" id="prenom" /><br />
<label for="age">Âge :</label><select id="age"><option>21</option></select>

Retour en haut

La partie CSS

C’est bien joli, tes <label>, mais ça ne résout pas mon problème !

C'est vrai,

et c’est pour ça que l’on va devoir utiliser un peu de CSS.
Nous allons devoir modifier la largeur de nos <label>. Pour cela, nous allons utiliser ce code :
Code : CSS

label
{
	width: 150px; /* Cette largeur sert d’exemple, vous pouvez la modifier si vous voulez. */
}

Et voilà le résultat :

Mais… c’est pareil ! o_O

Oui, car nos <label> sont de type inline, on ne peut pas modifier leur largeur !

On va devoir donc les transformer en block, avec ce code :
Code : CSS

label
{
	display: block; /* La balise devient de type block. */
	width: 150px;
}

Comme nos <label> sont de type block, ils provoquent un retour à la ligne. Mais en les faisant flotter à gauche, ce retour à la ligne sera évité.

Voici le code :
Code : CSS

label
{
	display: block;
	width: 150px;
	float: left;
}

Et voilà le résultat :

Enfin, nos champs du formulaire sont alignés !

C’est quand même plus simple et plus accessible que d’utiliser des tableaux, non ? Et en plus, je tiens ma promesse, le code CSS ne fait que cinq lignes.

Cette technique fonctionne pour tous les éléments de formulaire, regardez :

La puissance du CSS !

Et voici le code XHTML qui va avec.

Code : HTML

<label for="nom">Nom :</label><input type="text" id="nom" /><br />
<label for="prenom">Prénom :</label><input type="text" id="prenom" /><br />
<label for="age">Âge :</label><select id="age"><option>21</option></select><br />
<label for="sexe">Sexe :</label><input type="radio" name="sexe" id="sexe" />Homme <input type="radio" name="sexe" />Femme<br />
<label for="idees">Des idées pour mon site ?</label><textarea id="idees">Aucune, c’est le plus beau du monde :D</textarea><br />
<label for="newsletter">Newsletter :</label><input type="checkbox" />Recevoir

Dans le cas des checkbox et des radio, vous devez n’attribuer l’ID qu’à un seul des deux (comme dans le code ci-dessus), car un ID doit être unique.

Retour en haut

J’espère que ce tutoriel vous a aidé.

Retour en haut

Retour en haut

150 commentaires pour "Aligner ses formulaires sans tableaux"

Note moyenne : 3.89 / 4 (81 votes)

Pseudo	Commentaire
cornedrue	# Posté le 24/11/2011 à 21:29:21
Every puzzle has an answer ! Ville : Saint-malo Pays : France métropolitaine	@Saffi : fait avec des margin Mon nouveau site sur le professeur layton !
Aurel_Morillon	# Posté le 27/01/2012 à 11:10:53
Avis : Bon	Pour les radio, quelque chose plus accessible consistera à créer des id sexeH et sexeF pour que chaque bouton radio puisse avoir son label. La question, c'est : Faut-il dans ce cas faire un label dans le vide pour la chaine "Sexe" ?
Padaa	# Posté le 14/02/2012 à 11:57:59
Avis : Très bon Études : BTS IG Dunkerque	plus de tableau à utiliser avec td th on perdait un peu les pinceaux si on fusionner les colonnes tous ça tuto rapide et efficace merci à toi
CapFlow	# Posté le 17/03/2012 à 16:25:14
Just Wait ... Avis : Très bon	Je suis du même avis que FreePostPas, un display: inline-block serait peut être 'mieux' Développeur web : HTML - CSS - JavaScript Disponible pour un poste de développeur pour un projet de site web en JavaScript (et éventuellement HTML/CSS), me contacter par MP Ancien Pseudo : crf 70
Zakariadza	# Posté le 09/05/2012 à 18:41:01
Avis : Très bon	Merci pour le tutoriel. comme a dit FreePostPas, un Display:inline-block serait mieux, puisque on aura pas recourt à float:left