Formulaire CSS avec dl, dt et dd

Mettre en page des formulaires sans utiliser de tableaux reste relativement délicat.  Il existe plusieurs solutions mais j'en ai retenue une qui sort peut-être un peu des sentiers battus car elle utilise les listes de définitions.

Selon moi les listes de définitions ont sémantiquement plus de sens que des divs, des paragraphes ou une liste.  De plus cela permet une meilleure représentation, par paire, des labels et des champs associés.

Le code HTML :
<form name="foo" method="POST" action="" class="myForm">
<fieldset>
<legend>Authentication</legend>
<dl>
<dt>
<label for="email">Email</label>
</dt>
<dd>
<input type="text" id="email" name="email" maxlength="255" value="" />
</dd>
<dt>
<label for="password">Password</label>
</dt>
<dd>
<input type="text" id="password" name="password" maxlength="50" value="" />
</dd>
<dt>&nbsp;</dt>
<dd>
<input type="submit" name="auth" value="Auth" />
</dd>
</dl>
</fieldset>
</form>
Le code CSS :
.myForm dt {
clear: both;
width: 20%;
float: left;
padding-right: 5px;
font-weight: bold;
text-align: right;
}

.myForm dd {
float: left;
width: 78%;
margin: 0 0 0.5em 0.25em;
padding: 0;
}
Préciser la largeur du dd est obligatoire sous IE malheureusement.

Add new comment

(Non publié)