Here is a collection of css styled form markup for you to use as you see fit.
Cheers,
HalD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Sample Form Markup</title>
<style type="text/css">
/** ============Correct Usage css : usage.css ================ **/
body{
font: 76% Arial, sans-serif;
padding: 20px;
background: #FFF
}
#container{
width: 400px;
background-color: #F0F8FF;
}
fieldset, select, optgroup {
border: 1px solid #000
}
legend{
font: bold 140%/1.6 Arial,sans-serif;
color: #27518A
}
fieldset label {
float:left;
display:inline;
width:100px; /* set width to required */
line-height:16px;
margin: 5px 10px;
text-align:left;
font-weight: bold;
font-size: 1.2em;
/* background: #FFF ; if desired */
}
fieldset textarea{
margin:3px 0 8px;
border-style:solid;
border-width:medium;
border-color: Black /* 3d effect: #778AA2 #7EA4D8 #7EA4D8 #778AA2;*/
/*border-width:2px 1px 1px 2px; for 3d effect */
width: 160px
}
br{ /* a non-semantic spacer */
clear:left
}
input#go{ /* Submit button */
margin: 10px 0 0 130px;
border-style:solid;
border-color: #FFF #333 #333 #FFF;
border-width:1px 2px 2px 1px;
background: #CCC;
width:auto;
height: auto
}
</style>
</head>
<body>
<div id="container"> <!-- Just sets the overall size of the form demo -->
<h2>Semantic Form Element Samples & Styling</h2>
<!-- Drop-down box Option Sample Note: optigroup tag usage.-->
<h3>Optgroup & Option Tag Usage</h3>
<select name="favoritefood">
<optgroup label="Dairy products">
<option>Cheese</option>
<option>Egg</option>
</optgroup>
<optgroup label="Vegetables">
<option>Cabbage</option>
<option>Lettuce</option>
<option>Beans</option>
<option>Onions</option>
<option>Courgettes</option>
<optgroup label="Fruit">
<option>Apples</option>
<option>Grapes</option>
<option>Pineapples</option>
</optgroup>
</select>
<!-- Sample horizontal radio buttons -->
<h3>Horizontal Radio Button Usage</h3>
<input type="radio" id="rad0" name="rad" />
<label for="rad0">Option 0</label>
<input type="radio" id="rad1" name="rad" />
<label for="rad1">Option 1</label>
<input type="radio" id="rad2" name="rad" />
<label for="rad2">Option 2</label>
<!-- Sample vertical radio buttons -->
<h3>Vertical Radio Button Usage</h3>
<input type="radio" id="rad0" name="rad" />
<label for="rad0">Option 0</label><br>
<input type="radio" id="rad1" name="rad" />
<label for="rad1">Option 1</label><br>
<input type="radio" id="rad2" name="rad" />
<label for="rad2">Option 2</label><br>
<!-- Sample label/ input usage -->
<h3>Label/Input Box Usage</h3>
<fieldset>
<legend></legend>
<label for="phone">Phone:</label>
<input id="phone" type="text" title="type your home phone number" name="homephone"><br>
<label for="name">name: </label>
<input type="text" id="name" name="name"><br>
<label for="surname">surname: </label>
<input type="text" id="cognome" name="surname"><br>
<label for="email">email: </label>
<input type="text" id="email" name="email"><br>
</fieldset>
<!-- Sample horizontal Check box usage -->
<h3>Horizontal Check Box Usage</h3>
Select the fact sheets you want<p></p>
<input id="boeing" type="checkbox" title="Boeing factsheet" name="Boeing" value="checkbox">
<label for="boeing">Boeing</label>
<input id="lockheed-martin" type="checkbox" title="Lockheed-Martin factsheet" name="lockheed-martin" value="checkbox">
<label for="lockheed-martin">Lockheed-Martin</label>
<input id="northrop-grumman" type="checkbox" title="Northrop-Grumman factsheet" name="northrop-grumman" value="checkbox">
<label for="northrop-grumman">Northrop-Grumman</label>
<!-- Sample vertical Check box usage -->
<h3>Vertical Check Box Usage</h3>
<div><input id="boeing" type="checkbox" title="Boeing factsheet" name="Boeing" value="checkbox">
<label for="boeing">Boeing</label></div>
<div><input id="lockheed-martin" type="checkbox" title="Lockheed-Martin factsheet" name="lockheed-martin" value="checkbox">
<label for="lockheed-martin">Lockheed-Martin</label></div>
<div><input id="northrop-grumman" type="checkbox" title="Northrop-Grumman factsheet" name="northrop-grumman" value="checkbox">
<label for="northrop-grumman">Northrop-Grumman</label></div>
<!-- Sample Text Input Box -->
<h3>Text area Usage</h3>
<form method="post" action="">
<fieldset>
<label for="message">message: </label>
<textarea id="message" name="message" rows=8 cols=20></textarea><br>
<!-- Sample submit button -->
<input type="submit" id="go" value="send">
</fieldset>
</form>
</div>
</body>
</html>
screen shot:
"Today’s headlines are nothing more than whispers of history"
