akbkhome

Forms

Forms have been a bane of my life, pointlessly messing around with <table><tr><td>, however this looks really nice.

Vertical Forms


Name
Address
Payment details
Credit card

Source

<style>


.verticalForm fieldset
{
display: block;
width: 150pt;
margin: 0 0 3em 0;
padding: 0 1em 1em 1em;
}

.verticalForm fieldset.radio
{
width: 15em;
margin: 1em 0 2em 0;
}

.verticalForm fieldset.radio input
{
clear: both;
float: left;
width: auto;
}

.verticalForm fieldset.radio label
{
font-weight: normal;
}

.verticalForm input
{
display: block;
width: 15em;
}

.verticalForm label
{
display: block;
margin-bottom: 1em;
font-weight: bold;
}

.verticalForm label.first
{
padding-top: 1em;
}

.verticalForm select
{
display: block;
}





</style>

<form class="verticalForm" action="">
<fieldset>
<legend>
Name
</legend>
<label class="first" for="title1">

Title
<select id="title1" name="title1">
<option selected="selected">Mr.</option>
<option>Mrs.</option><option>Ms.</option>
<option>Dr.</option>
<option>Viscount</option>
</select>
</label>
<label for="firstName1">
First name
<input id="firstName1" name="firstName1" value="First name" type="text">
</label>

<label for="lastName1">
Last name
<input id="lastName1" name="lastName1" value="Last name" type="text">
</label>
</fieldset>
<fieldset>
<legend>
Address
</legend>
<label class="first" for="street1">

Street
<input id="street1" name="street1" value="Street" type="text">
</label>
<label for="city1">
City
<input id="city1" name="city1" value="City" type="text">
</label>
<label for="state1">
State
<input id="state1" name="state1" value="State" type="text">

</label>
<label for="postcode1">
Postcode
<input id="postcode1" name="postcode1" value="Postcode" type="text">
</label>
<label for="country1">
Country
<input id="country1" name="country1" value="Country" type="text">
</label>
</fieldset>

<fieldset>
<legend>
Payment details
</legend>
<fieldset class="radio">
<legend>
Credit card
</legend>
<label for="cardType1A">
<input id="cardType1A" name="card1" type="radio">

American Express
</label>
<label for="cardType1B">
<input id="cardType1B" name="card1" type="radio">
Mastercard
</label>
<label for="cardType1C">
<input id="cardType1C" name="card1" type="radio">
Visa
</label>

<label for="cardType1D">
<input id="cardType1D" name="card1" type="radio">
Blockbuster Card
</label>
</fieldset>
<label for="cardNum1">
Card number
<input id="cardNum1" name="cardNum1" value="Card number" type="text">
</label>
<label for="expiry1">

Expiry date
<input id="expiry1" name="expiry1" value="City" type="text">
</label>
<input class="submit" value="Submit my details" type="submit">
</fieldset>
</form>

Add a comment (requires javascript!)

Name
Email
Homepage
Comment
 

Edit Document | Create Page:
Contact me at alan@akbkhome.com