[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > XHTML / CSS > Lecture du tutoriel

Aligner ses formulaires sans tableaux

	Auteur : Romain128 Créé : le 26/05/2006 16:55:56 Modifié : le 23/05/2008 13:58:49 Noter et commenter ce tutoriel Imprimer ce tutoriel

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

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 soient bien alignés et espacés par rapport au texte qui décrit le champ :pirate:

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

Sommaire du chapitre :

Préambule
La partie xHTML
La partie CSS

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 destructuré 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

La partie xHTML

Mais, si je n'utilise pas de 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>Age:</label><select><option>21</option></select>

Mais, avec ce code, si le visiteur clique sur Prénom, le champ associé ne sera pas selectionné 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 à selectionner, 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">Age:</label><select id="age"><option>21</option></select>

La partie CSS

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

C'est vrai

, et c'est donc 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 donc utiliser ce code :
Code : CSS

1
2
3

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 le code 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">Age:</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 pouvez attribuer l'ID à une seule des deux (comme dans le code ci-dessus), car un ID doit être unique

J'espère que ce tuto vous a aidés.

Auteur : Romain128
Noter et commenter ce tutoriel
Imprimer ce tutoriel

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité

Aligner ses formulaires sans tableaux

Préambule

La partie xHTML

La partie CSS