Mis à jour le mercredi 30 octobre 2013
  • Facile
Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Introduction du cours

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>).

Préambule

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

Image utilisateur

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 :

Image utilisateur

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

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 :

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

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 :

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

La partie CSS

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

C'est vrai, :p 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 :

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

Et voilà le résultat :

Image utilisateur

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 :

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

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 :

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

Et voilà le résultat :

Image utilisateur

Enfin, nos champs du formulaire sont alignés ! :D

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 :

Image utilisateur

La puissance du CSS !

Et voici le code XHTML qui va avec. ;)

<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

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

Exemple de certificat de réussite
Exemple de certificat de réussite