How do I add a label or labels to my “Expiration Month” and “Expiration Date” drop-down lists?
Also, what is the best way to position them?
Should I make each one an <LI> ??
Here is my code…
<!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>
Thanks,
Debbie
PaulOB
March 31, 2011, 11:04am
2
Hi Debbie,
If you want them on one line then keep them within the same parent. Your existing code would seem to allow this to happen quote easily.
<!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;
margin:0;
list-style: none;
}
fieldset li {
padding: 0 0 1em 0;
width:100%;
overfrlow:hidden;
}
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>
<label for="expMonth">Month Expires:</label>
<select id="expMonth" 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>
<label for="expyear"></label>
Year Exp.:
</label>
<select id="expYear" 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>
Personally I don’t use lists for form elements but I know that others have made a case for them. I prefer to use divs or breaks to separate items but the coding techniqure is much the same either way.
Paul,
I fixed my code to look like yours but there are still a few issues…
1.) What is the best way to change the style on the labels for the drop-downs?
Since there are two on a line, I need a narrower label width than 10em, but I don’t know if I should add a class to the label or there is a better way to change the style for them.
2.) More importantly, the drop-downs - what exactly is the proper name??? - are “hopping” over the labels and moving to the far right?!
Here is my code…
<!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: #000;
font-weight: bold;
}
fieldset ol{
margin: 0; /* NEW */
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset li{
width: 100%; /* NEW */
padding: 0 0 1em 0;
overflow: hidden; /* NEW */
}
fieldset.submit{
padding: 0 0 0 12em;
border-style: none;
}
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>
<label for="expMonth">Exp Month:</label>
<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>
<label for="expMonth">Exp Year:</label>
<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>
Thanks,
Debbie
PaulOB
March 31, 2011, 7:18pm
4
Sorry, I had typos in that code.
I would probably put the month and year on top of the selects although it complicates the mark up a bit but it looks neater and is more usable.
<!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.billing {
width: 400px;
margin: 0 auto;
}
.billing fieldset {
margin: 1.5em 0 0 0;
padding: 0;
}
.billing legend {
margin: 0 0 0 1em;
color: #000000;
font-weight: bold;
}
.billing ol {
padding: 1em 1em 0 1em;
margin:0;
list-style: none;
}
.billing li {
padding: 0 0 1em 0;
width:100%;
overflow:hidden;
}
fieldset.submit {
border-style: none;
padding: 0 0 0 12em;
}
.billing label, span.label {
float: left;
text-align: right;
width: 10em;
margin: 0 1em 0 0;
display:inline;
}
span.label {
padding:.9em 0 0;
margin:0
}
label.innerlabel {
float:none;
display:block;
margin:-5px 0 0;
padding:0 0 2px;
text-align:left;
width:auto;
font-size:92%;
}
.billing select {
display:block;
width:4.9em;
}
.group {
float:left;
margin:0 0 0 1em;
}
</style>
</head>
<body>
<form class="billing" 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> <span class="label">Expires:</span> <span class="group">
<label class="innerlabel" for="expMonth">Month</label>
<select id="expMonth" 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>
</span> <span class="group">
<label class="innerlabel" for="expyear">Year</label>
<select id="expYear" 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>
</span>
<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>
Sorry, I had typos in that code.
I would probably put the month and year on top of the selects although it complicates the mark up a bit but it looks neater and is more usable.
That looks much better!
Some pretty fancy gun-slingin’ you did there!
Thanks,
Debbie
