Friday, July 17, 2009

CSS : Legend

Tables are useful to design complex HTML forms but a good alternative is to use list elements and CSS.


Sign-up Form

  

Step 1: HTML code
<fieldset>
<legend>Sign-up Form</legend>
<label>Name</label>  <input type="text" name="name">
<label>Email</label>  <input type="text" name="email">
<input type="submit" value="Go">
</fieldset>

Step 2: Positioning the form with CSS
fieldset {background:url('http://www.webcredible.co.uk/i/bg-box-s1.gif') repeat-x;border: 1px solid #781351;width: 20em;}
legend {color: #fff;background: #ffa20c;border: 1px solid #781351;padding: 2px 6px;}
label {width: 4em;float: left;text-align: right;margin-right: 0.5em;}
input {color: #781351;background: #fee3ad;border: 1px solid #781351;}
.submit input {color: #000;background: #ffa20f;border: 2px outset #d7b9c9;}

Taken From : http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml

10 comments: