Pour qu'un formulaire soit agréable à regarder... et à remplir, on aligne normalement les libellés sur une colonne et les contrôles de saisie sur une autre colonne.
Autrefois, les programmeurs utilisaient un tableau pour réussir cet alignement. Bien que cela fonctionne dans la majorité des cas, les feuilles de style offrent une solution plus élégante et plus versatile.
Voici un exemple de CSS qui permettra de réaliser cet alignement. Il s'agit de donner une largeur fixe aux libellés.
Ex :
label.aligne { /* notez qu'il n'y a pas d'espace de chaque côté du point */
display:block; /* si on ne met pas la balise en block, il sera impossible de spécifier sa largeur */
width:100px; /* espace nécessaire pour écrire les libellés. */
float:left; /* pour permettre que les contrôles soient placés sur la même ligne que les libellés */
}
<form action="..." method="...">
<p>
<label class="aligne" for="nom">Nom:</label>
<input class="boite" type="text" id="nom" name="nom" />
</p>
<p>
<label class="aligne" for="prenom">Prénom:</label>
<input class="boite" type="text" id="prenom" name="prenom" />
</p>
<p>
<label class="aligne" for="adresse">Adresse:</label>
<input class="boite" type="text" id="adresse" name="adresse" />
</p>
...
</form>
Résultat : 
On retrouve souvent des formulaires dont les libellés sont alignés à droite. À vous de trouver quelles propriétés du CSS vous permettront d'obtenir ce résultat :
« Les formulaires ». Site du zéro. http://www.siteduzero.com/tutoriel-3-13596-les-formulaires.html
▼Publicité
