Using table to layout form controls
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css" media="print ">
.fillout {
color: black;
border-width: 0;
border-bottom: 1px solid #000;
width: 300pt;
}
select{
display: none;
}
.postselect {
display: block;
width: 300pt;
height: 1em;
border: none;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<form>
<h2>Order Form</h2>
<table cellspacing="0">
<tr>
<td width="116"><label for="fname">First Name<label>:</td>
<td><input class="fillout" name="fname" type="text" id="fname" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input class="fillout" name="lname" type="text" id="lname" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="fillout" name="email" type="text" id="email" /></td>
</tr>
<tr>
<td>Address:</td>
<td><input class="fillout" name="address1" type="text" id="address1" /> </td>
</tr>
<tr>
<td> </td>
<td><input class="fillout" name="address2" type="text" id="address2" /></td>
</tr>
<tr>
<td>City:</td>
<td><input class="fillout" name="city" type="text" id="city" /></td>
</tr>
<tr>
<td>State/Province:</td>
<td> <select name="state" size="1">
<option selected="selected">Select</option>
<option>Alabama </option>
<option>Alaska </option>
<option>Arizona </option>
<option>Arkansas </option>
<option>California </option>
<option>Colorado </option>
<option>Connecticut </option>
<option>Delaware </option>
<option>Florida </option>
<option>Georgia </option>
<option>Hawaii </option>
<option>Idaho </option>
<option>Illinois </option>
<option>Indiana </option>
<option>Iowa </option>
<option>Kansas </option>
<option>Kentucky </option>
<option>Louisiana </option>
<option>Maine </option>
<option>Maryland </option>
<option>Massachusetts </option>
<option>Michigan </option>
<option>Minnesota </option>
<option>Mississippi </option>
<option>Missouri </option>
<option>Montana </option>
<option>Nebraska </option>
<option>Nevada </option>
<option>New Hampshire </option>
<option>New Jersey </option>
<option>New Mexico </option>
<option>New York </option>
<option>North Carolina </option>
<option>North Dakota </option>
<option>Ohio </option>
<option>Oklahoma </option>
<option>Oregon </option>
<option>Pennsylvania </option>
<option>Rhode Island </option>
<option>South Carolina </option>
<option>South Dakota </option>
<option>Tennessee </option>
<option>Texas </option>
<option>Utah </option>
<option>Vermont </option>
<option>Virginia </option>
<option>Washington </option>
<option>Washington, D.C. </option>
<option>West Virginia </option>
<option>Wisconsin </option>
<option>Wyoming </option>
<option>---------- </option>
<option>Alberta </option>
<option>British Columbia </option>
<option>Manitoba </option>
<option>New Brunswick </option>
<option>New Foundland </option>
<option>Nova Scotia </option>
<option>Northwest Territories </option>
<option>Ontario </option>
<option>Prince Edward Island </option>
<option>Quebec </option>
<option>Saskatchewan </option>
<option>Yukon Territory </option>
<option>Other </option>
</select><span class="postselect"> </span>
</td>
</tr>
<tr>
<td>Zip Code:</td>
<td><input class="fillout" name="zip" type="text" id="zip" /></td>
</tr>
<tr>
<td>Daytime Phone:</td>
<td><input class="fillout" name="dayphone" type="text" id="dayphone" /></td>
</tr>
<tr>
<td>Product(s):</td>
<td><input name="product" type="checkbox" id="product" value="ezweb" />
EZWeb ($19.95) <input name="product" type="checkbox" id="product" value="ezwebultra" />
iNtroduction Ping ($29.95)</td>
</tr>
<tr>
<td>Type of Credit Card:</td>
<td><input type="radio" name="cc" value="mastercard" />
Mastercard
<input type="radio" name="cc" value="visa" />
Visa
<input type="radio" name="cc" value="discover" />
Discover</td>
</tr>
<tr>
<td>Name on Credit Card:</td>
<td><input class="fillout" name="ccname" type="text" id="ccname" /></td>
</tr>
<tr>
<td>Card Number:</td>
<td><input class="fillout" name="ccnumber" type="text" id="ccnumber" /></td>
</tr>
<tr>
<td>Card Expiration Date:</td>
<td><input class="fillout" name="ccnumber" type="text" id="ccnumber" /></td>
</tr>
</table>
<input type="submit" name="Submit" value="Submit" id="submit" />
</form >
<p></p>
</body>
</html>
</body>
</html>
</body>
</html>
Related examples in the same category