<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Payment Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href=".css">
<style type="text/css" >
form{
width: 400px;
margin: 0 auto;
}
fieldset{
margin: 1.5em 0 0 0;
padding: 0;
}
legend{
margin: 0 0 0 1em;
color: #000000;
font-weight: bold;
}
fieldset ol{
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset li{
padding: 0 0 1em 0;
}
fieldset.submit{
border-style: none;
padding: 0 0 0 12em;
}
label{
float: left;
text-align: right;
width: 10em;
margin: 0 1em 0 0;
}
</style>
</head>
<body>
<form action="process_payment.php">
<fieldset>
<legend>Billing Details</legend>
<ol>
<li>
<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" class="text" type="text" />
</li>
<li>
<label for="middleInitial">M.I.:</label>
<input id="middleInitial" name="middleInitial" class="text" type="text" />
</li>
<li>
<label for="lastName">Last Name:</label>
<input id="lastName" name="lastName" class="text" type="text" />
</li>
<li>
<label for="address1">Address1:</label>
<input id="address1" name="address1" class="text" type="text" />
</li>
<li>
<label for="address2">Address2:</label>
<input id="address2" name="address2" class="text" type="text" />
</li>
<li>
<label for="city">City:</label>
<input id="city" name="city" class="text" type="text" />
</li>
<li>
<label for="state">State:</label>
<input id="state" name="state" class="text" type="text" />
</li>
<li>
<label for="zip">Zip:</label>
<input id="zip" name="zip" class="text" type="text" />
</li>
<li>
<label for="teleNo">Telephone No.:</label>
<input id="teleNo" name="teleNo" class="text" type="text" />
</li>
<li>
<label for="email">Email:</label>
<input id="email" name="email" class="text" type="text" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Credit Card Details</legend>
<ol>
<li>
<label for="cardNumber">Credit Card Number:</label>
<input id="cardNumber" name="cardNumber" class="text" type="text" />
</li>
<li>
<select name="expMonth">
<option></option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select name="expYear">
<option></option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
</select>
<li>
<label for="cvv">CVV Code:</label>
<input id="cvv" name="cvv" class="text" type="text" />
</li>
</ol>
</fieldset>
<fieldset class="submit">
<input class="submit" type="submit" value="Process Order" />
</fieldset>
</form>
</body>
</html>
Bookmarks