XHTTP:
<fieldset><legend>your contact details</legend><p><label for="author">name:<em class="required">(required)</em></label><input name="author" id="author" type="text" /></p><p><label for="email">email address:</label><input name="email" id="email" type="text" /></p><p><label for="url" > web address;</label><input name="url" id="url" type="text" /></p></fieldset>
<fieldset><legend>commentes</legend><p><label for="text">message: </label><textarea name="text" id="text" cols="20" rows="10"></textarea></p>
</fieldset>
<fieldset><p><label for="dateofbirth">Date of Birth:</label><input name="dateofbirth" id="dateofbirth" type="text" /><label id="monthofbirthlabel" for="monthofbirth">month of birth:</label>
<select name="monthofbirth" id="monthofbirth"><option value="1">january</option><option value="2">february</option><option value="3">march</option></select>
<label id="yearofbirthlabel" for="yaerofbirth">year of birth:</label><input name="yearofbirth" id="yearofbirth" type="text" /></p>
<fieldset id="favoritecolor"><h2>Favorite color:</h2><div><p><input class="checkbox" id="red" name="red" type="checkbox" value="red" /><label>red</label>
<input class="checkbox" id="red2" name="red2" type="checkbox" value="red2" /><label>red</label>
<input class="checkbox" id="red3" name="red3" type="checkbox" value="red3" /><label>red</label>
<input class="checkbox" id="red4" name="red4" type="checkbox" value="red4" /><label>red</label></p>
</div><div><p><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" /><label>organge</label>
</p><p><input class="checkbox" id="orange2" name="orange2" type="checkbox" value="orange2" /><label>organge</label>
</p><p><input class="checkbox" id="orange3" name="orange3" type="checkbox" value="orange3" /><label>organge</label>
</p><p><input class="checkbox" id="orange4" name="orange4" type="checkbox" value="orange4" /><label>organge</label>
</p>
</div>
</fieldset>
</fieldset>
CSS:
fieldset{margin: 1em 0;padding:1em;border:1px solid #ccc;background:#f8f8f8;
}legend{font-weight:bold;}
/*label{display:block;
}*/
input{width:200px;
}
textarea{width:300px;height:100px;
}
input:focus,textarea:focus{background:#ffc;
}
input[type="text"],textara{border-top:2px solid #999;border-left:2px solid #999;border-bottom:1px solid #ccc;border-right:1px solid #ccc;
}
.required{font-size:0.75em;color:#FF0000;
}
#monthofbirthlabel,#yearofbirthlabel{text-indent:-10000em;width:0;
}
input#dateofbirth{width:3em;margin-right:0.5em;
}
select#monthofbirth{width:10em;margin-right:0.5em;
}
input#yearofbirth{width:5em;
}
fieldset #favoritecolor{margin:0;padding:0;border:none;background:transparent;}
fieldset #favoritecolor h2{width:10em;float:left;font-size:1em;font-weight:normal;}
fieldset #favoritecolor div{width:8em;float:left;
}
.clear{clear:both;
}
fieldset #favoritecolor label{width:3em;float:none;display:inline;
}
fieldset #favoritecolor p{margin:0.3em 0;
}
