Friday, 15 August 2008

Simple Form Styling (No Tables)

Always wondered how they made forms with no table html( As quoted from here.)

No table code used, but dl,dt and dd.

<dl class="newsletter">
<dt><label for="name">Name:</label></dt>
<dd><input type="text" id="name" value="Enter your name" /></dd>
<dt><label for="email">Email:</label></dt>
<dd><input type="text" id="email" value="Enter your email" /></dd>
</dl>
Style the desired areas, as follows
<style type="text/css">
.newsletter {width: 50%;}
.newsletter dt {float: left;}
.newsletter dd {margin: 0 5em 1em 5em;}
</style>

No comments: