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.

---

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically each day to your feed reader.

Wanjee | Powered by WordPress | ElegantBlue is a custom theme by Nathan Rice