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
.
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>).
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 : HTML1
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é
!
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 : HTML1
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>
|
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 : CSS1
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
!
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 : CSS1
2
3
4 | 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 : CSS1
2
3
4
5 | 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 : HTML1
2
3
4
5
6 | <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
|
Flux RSS News
Twitter
Facebook