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: