Tuesday, 6 March 2012

How to Design a Form just like in a tabular format without using Table

<HTML>
<head><titlt>TableLess Form</title>
<style type="text/css">
label, input, select, textarea {
 display: block;
 float: left;
 width: 150px;
 margin-bottom: 10px;
}
label {
 width: 110px;
 text-align: right;
 padding-right: 10px;
 margin-top: 2px;
}
textarea {
 height: 50px;
}
br {
 clear: left;
}
 </style> 
 </head>
<body> 
 <form>

 <label for="firstname">First Name:</label>
 <input type="text" name="firstname" id="firstname" tabindex="1"/>

 <label for="address">Address:</label>
 <input type="text" name="address" id="address" tabindex="5"/><br/>

 <label for="lastname">Last Name:</label>
 <input type="text" name="lastname" id="lastname" tabindex="2"/>

 <label for="city">City:</label>
 <input type="text" name="city" id="city" tabindex="6"/><br/>

 <label for="emailaddress">Email Address:</label>
 <input type="text" name="emailaddress" id="emailaddress" tabindex="3"/>

 <label for="province">State:</label>
 <select name="state" id="state" tabindex="7">
  <option value="0">--Select State--</option>
  <option value="AP">Andhara Pradesh</option>
  <option value="OD">Odisha</option>
  <option value="BH">Bihar</option>
  <option value="WB">West Bengal</option>
  <option value="UP">Uttar Pradesh</option>
  </select><br/>

 <label for="comments">Comments:</label>
 <textarea name="comments" id="comments" tabindex="4"></textarea>

 <label for="postalcode">Postal Code:</label>
 <input type="text" name="postalcode" id="postalcode" tabindex="8"/><br/>

</form>
</body>
</html> 

No comments:

Post a Comment