Html and Css

From Shiftyjelly

CSS Form Layout

An example of how to use css instead of tables for form development.

HTML File

<form id="newUserForm" method="post" action="/pages/new.action">
   <fieldset>
     <legend>Contact Details</legend>
     <div>
       <label>First Name *</label>
       <input type="text" name="user.firstName" maxlength="100"/>
     </div>
     <div>
       <label>Last Name *</label>
       <input type="text" name="user.lastName" maxlength="100"/>
     </div>
     <div>
       <label>Phone Number *</label>
       <input type="text" name="user.phone" maxlength="100"/>
     </div>
     <div>
       <label>Fax Number</label>
       <input type="text" name="user.fax" maxlength="100"/>
     </div>
     <div>
       <label>Email *</label>
       <input type="text" name="user.email" maxlength="100"/>
     </div>   
   </fieldset>
</form>

CSS File

form fieldset {
  clear: both;
  padding: 10px;
  border-width: 1px 0 0 0;
  border-style: solid none none none;
  border-color: #ccc;
}
form legend {
  font-weight:bold;
  padding: 0 5px;
  color: black;
}
form label {
  display: block;
  float: left;
  margin:5px 0 0 0;
}
form fieldset div {
  clear: left;
  display: block;
}
form input, form textarea {
  width:auto;
  margin:5px 0 0 10px;
}
#newUserForm fieldset label {
  width: 120px;
}
.required {
  color: #B72222;
}

File:CssForm.png

Here is a good tutorial I found: http://jeffhowden.com/code/css/forms/