18 replies [Last post]
jalz
Offline
Regular
Last seen: 11 years 4 weeks ago
Joined: 2008-05-16
Posts: 37
Points: 13

Hi All,

I have created a web form with the use of tables. I would now like to convert this into a tableless design, however I can't find anything on the web with *perfect* markup. What I mean by that is, in all the blogs/tutorials, there is always a someone with a response/comment to say this is not valid, or you should have done it this way etc etc....

I know forms a bit of a nightmare, but does anyone know a really simple a good tutorial that has valid markup and is easy to maintain and understand.

If I can't crack it myself, anyone send me a cost rate to produce a form with two columns, labels aligned with valid code......can show you ascreenshot of what I am trying to achieve.

Cheers

Jalz

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

http://woork.blogspot.com/200

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 12 years 3 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

I always do it this

I always do it this way:

<form>
<fieldset>
<p>
<label>Field_1</label>
<input type="text" name="field1" id="field_1" />
</p>
<p>
<label>Field_2</label>
<input type="text" name="field2" id="field_2" />
</p>
<p>
<and so on for rest of fields>
</p>
</fieldset>
</form>

I then give my form a width, have the labels floating left with a width and text align left or right, and you can also give the inputs a width to if you like, if you set the labels to align right you will need to give them a right margin.

form.main {
width:550px
}
 
form.main fieldset {
border:0
}
 
label.main {
width:150px;
float:left;
text-align:left;
margin-right:20px;
color:#4C4C4C;
font-weight:bold;
font-family:garamond,tahoma,verdana,sans;
font-size:1.2em
}

You can see it in action at www.write-about-property.com/seo-services/

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

@ljbailey

Your label should have the for="" attribute in them, as reference to which input they are labeling.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

jalz
Offline
Regular
Last seen: 11 years 4 weeks ago
Joined: 2008-05-16
Posts: 37
Points: 13

Thanks to all

Thanks to all that have responded,

Could use either code, is it fairly easy to align checkboxes and radiobuttons so they all look neat....

Deuce, why does the ljbailey's code need a "for" in the label attribute? Is it for accessibilty?

I suppose making a two column form is basically creating two divs a left-col {floating left} and a right-col {floating right}, and then placing the markup of the code above in each div..... does that sound sensible?

Cheers again

Jalz

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

jalz wrote: Deuce, why does

jalz wrote:

Deuce, why does the ljbailey's code need a "for" in the label attribute? Is it for accessibilty

Accessibility and standards.
Same reason a <span> tag is relatively useless without a class.
You can use it and it does what you want, but it has no real purpose or definition.

I mean, think of organizing your basement in a bunch of waterproof tubs. Are you going to pull out your label maker and just print out 20 blank labels and stick them on everything or are you actually going to write something on the label so you know what's in that box?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2054
Points: 2286

ljbailey wrote: I always do

ljbailey wrote:

I always do it this way:

<form>
<fieldset>
<p>
<label>Field_1</label>
<input type="text" name="field1" id="field_1" />
</p>
<p>
<label>Field_2</label>
<input type="text" name="field2" id="field_2" />
</p>
<p>
<and so on for rest of fields>
</p>
</fieldset>
</form>
...

What is the point of the paragraph tags? Those aren't paragraphs.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2054
Points: 2286

delete this. double post

double tap. please delete. Sad

jalz
Offline
Regular
Last seen: 11 years 4 weeks ago
Joined: 2008-05-16
Posts: 37
Points: 13

Hi Guys, I've been using the

Hi Guys,

I've been using the example kindly given by Deuce to kind of start developing a form that I would like to eventually use in one of my apps. I've checked the code and it seems valid (transitional-strict produces a lot of errors). Is this this the correct way to progress?

Would really appreciate advice before I get "really" deep into adding aload of fields.

Thanks

Jalz

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
	margin:0 auto;
	width:1000px;
	padding:14px;
}
	/* ----------- stylized ----------- */
 
	#left-col{
	width:400px;
	float:left;
	}
 
	#right-col{
	width:400px;
	float:left;
	}
 
	#stylized{
		border:solid 2px #b7ddf2;
		background:#ebf4fb;
	}
	#stylized h1 {
		font-size:14px;
		font-weight:bold;
		margin-bottom:8px;
	}
	#stylized p{
		font-size:11px;
		color:#666666;
		margin-bottom:20px;
		border-bottom:solid 1px #b7ddf2;
		padding-bottom:10px;
	}
	#stylized label{
		display:block;
		font-weight:bold;
		text-align:right;
		width:140px;
		float:left;
	}
	#stylized .small{
		color:#666666;
		display:block;
		font-size:11px;
		font-weight:normal;
		text-align:right;
		width:140px;
	}
	#stylized input{
		float:left;
		font-size:12px;
		padding:4px 2px;
		border:solid 1px #aacfe4;
		width:200px;
		margin:2px 0 20px 10px;
	}
	#stylized button{ 
		clear:both;
		margin-left:150px;
		width:125px;
		height:31px;
		background:#666666 url(img/button.png) no-repeat;
		text-align:center;
		line-height:31px;
		color:#FFFFFF;
		font-size:11px;
		font-weight:bold;
	}
 
</style>
</head>
 
<body>
 
<div id="stylized" class="myform">
  <form id="form1" name="form1" method="post" action="">
  <div id="left-col">
    <h1>My Test Form</h1>
    <label>Name
        <span class="small">Add your name</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
 
    <label>Email
        <span class="small">Add a valid address</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
 
    <label>Password
        <span class="small">Min. size 6 chars</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
 
    <p>
      <label>On</label>
        <input type="radio" name="RadioGroup1" value="On" id="RadioGroup1_0" />      
 
      <label>Off</label>
        <input type="radio" name="RadioGroup1" value="Off" id="RadioGroup1_1" />
 
      <br />
    </p>
 
    <div class="spacer"></div>
  </div>
 
  <div id="right-col">
    <br/><br/><br/><br/><br/>
    <label>Address</label>
    <input type="text" name="textfield" id="textfield" />
 
    <label>&nbsp;</label>
    <input type="text" name="textfield" id="textfield" />
 
    <label>Town/City</label>
    <input type="text" name="textfield" id="textfield" />
 
    <label>Postcode</label>
    <input type="text" name="textfield" id="textfield" />
    <div class="spacer"></div>
  </div>
  <button  type="submit">Sign-up</button>
  </form>
</div>
 
</body>
</html>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2054
Points: 2286

Unless you're going to use

Unless you're going to use the label tags implicitly then you've got to include a "for" attribute.

Implicit label example:
<label>Ape Juice: <input id="apeJuice" type="text" /></label>

Explicit label example:
<label for="apeJuice">Ape Juice:</label><input id="apeJuice" type="text" />

You can also employ both:
<label for="apeJuice">Ape Juice: <input id="apeJuice" type="text" /></label>

I'd also dump the spacer div. There's no reason for that, especially when it's inside of another div.

I'm still wondering the point of the paragraph tags. Is that in any way semantic or am I picking nits?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

People essentially seem to

People essentially seem to fall into two camps, those that would advocate using a div for grouping and those that use a 'p' element. I know two respected members on the forum who respectively use divs and paragraphs.

Personally I prefer the approach to using an element that conveys no meaning since I'm simply using it for visual styling convenience; outside of that context the element has no real reason for existence and I prefer that I convey as little meaning in it's use as possible.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2054
Points: 2286

Hugo wrote: People

Hugo wrote:

People essentially seem to fall into two camps, those that would advocate using a div for grouping and those that use a 'p' element. I know two respected members on the forum who respectively use divs and paragraphs.

Personally I prefer the approach to using an element that conveys no meaning since I'm simply using it for visual styling convenience; outside of that context the element has no real reason for existence and I prefer that I convey as little meaning in it's use as possible.

I see. In my case I prefer to use fieldset for grouping items such as a radio button or check box list. Implicit use of the label tag also negates the need to wrap the individual items in anything else.

Admittedly, I may have never run into a situation where wrapping the items becomes necessary. I'd have to see some examples, I suppose.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No a fieldset would be used

No a fieldset would be used regardless but you wouldn't use a fieldset to wrap two elements such as label/input pairs that would be bad use of the fieldset, it's to group sections of controls or of the form, to logically group areas.

The wrapping had nothing to do with linking controls; 'for' has an entirely different reason for existence. The wrapping being talked about here is simply to ease positioning of the pairs.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jalz
Offline
Regular
Last seen: 11 years 4 weeks ago
Joined: 2008-05-16
Posts: 37
Points: 13

Thanks Guys, You guys are

Thanks Guys,

You guys are awesome, think I almost have a form I can use now. As Verschwindende added the "for" attribute in the label so its more standards based. An issue I'm hoping someone can guide help me with is the radio buttons. Is it possible to get the radio buttons to be displayed horizontally on one line neatly (as I have two divs, left-col and right-col) I would want them to flow only in the left-col and wrap around if I had more options. I've also been reading I should be using tag to group things, so presumably the radio buttons need this around them (u'll notice the labels then dont align nicely)?

Really appreciate your help, hopefully I can truely move away from tables when it comes to forms.

Jalz

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
/* ----------- My Form ----------- */
.myform{
	margin:0 auto;
	width:1000px;
	padding:14px;
}
	/* ----------- stylized ----------- */
 
 	#top{
	height:30px;
	width:100%;
	}
	#left-col{
	width:400px;
	float:left;
	}
 
	#right-col{
	width:400px;
	float:left;
	}
 
	#stylized{
		border:solid 2px #b7ddf2;
		background:#ebf4fb;
	}
	#stylized h1 {
		font-size:14px;
		font-weight:bold;
		margin-bottom:8px;
	}
	#stylized p{
		font-size:11px;
		color:#666666;
		margin-bottom:20px;
		border-bottom:solid 1px #b7ddf2;
		padding-bottom:10px;
	}
	#stylized label{
		display:block;
		font-weight:bold;
		text-align:right;
		width:140px;
		float:left;
	}
 
	#stylized2 label{
		display:block;
		font-weight:bold;
		text-align:right;
		width:40px;
		float:left;
	}
 
	#stylized .small{
		color:#666666;
		display:block;
		font-size:11px;
		font-weight:normal;
		text-align:right;
		width:140px;
	}
	#stylized input{
		float:left;
		font-size:12px;
		padding:4px 2px;
		border:solid 1px #aacfe4;
		width:200px;
		margin:2px 0 20px 10px;
	}
	#stylized button{ 
		clear:both;
		margin-left:150px;
		width:125px;
		height:31px;
		background:#666666 url(img/button.png) no-repeat;
		text-align:center;
		line-height:31px;
		color:#FFFFFF;
		font-size:11px;
		font-weight:bold;
	}
 
  fieldset {
  padding:0;
  float:left;
  }
 
 
</style>
</head>
 
<body>
 
<div id="stylized" class="myform">
  <form id="form1" name="form1" method="post" action="">
  <div id="top">
  	<h1>My Test Form</h1>
  </div>
  <div id="left-col">    
    <label for="Name">Name
        <span class="small">Add your name</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
 
    <label for="Email">Email
        <span class="small">Add a valid address</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
 
    <label for="Password">Password
        <span class="small">Min. size 6 chars</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
 
    <fieldset>
      <label for="Badge" class="stylized2">Red</label>
      <input type="radio" name="RadioGroup1" value="red" id="RadioGroup1_0" />     
 
      <label for="Badge">Yellow</label>
      <input type="radio" name="RadioGroup1" value="yellow" id="RadioGroup1_1" />
 
      <label for="Badge">Green</label>
      <input type="radio" name="RadioGroup1" value="green" id="RadioGroup1_2" /> 
 
      <label for="Badge">Blue</label>
      <input type="radio" name="RadioGroup1" value="blue" id="RadioGroup1_3" /> 
 	</fieldset>
 
  </div>
 
  <div id="right-col">
    <label for="Address_Line_1">Address</label>
    <input type="text" name="textfield" id="textfield" />
 
    <label for="Address_Line_2">&nbsp;</label>
    <input type="text" name="textfield" id="textfield" />
 
    <label for="Town_or_City">Town/City</label>
    <input type="text" name="textfield" id="textfield" />
 
    <label for="Postcode">Postcode</label>
    <input type="text" name="textfield" id="textfield" />
  </div>
  <button  type="submit">Sign-up</button>
  </form>
</div>
 
</body>
</html>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2054
Points: 2286

Hugo wrote:No a fieldset

Hugo wrote:

No a fieldset would be used regardless but you wouldn't use a fieldset to wrap two elements such as label/input pairs that would be bad use of the fieldset, it's to group sections of controls or of the form, to logically group areas.

That's not what I meant to imply. In the example provided (edit before the last one above) there are two radio buttons wrapped in a paragraph. That makes more sense in a fieldset to me. For example instead of this:

    <p>
      <label>On</label>
        <input type="radio" name="RadioGroup1" value="On" id="RadioGroup1_0" />      
 
      <label>Off</label>
        <input type="radio" name="RadioGroup1" value="Off" id="RadioGroup1_1" />
 
      <br />
    </p>

Use this:
    <fieldset>
      <label>
        <input type="radio" name="RadioGroup1" value="On" id="RadioGroup1_0" />On</label>     
      <label>
        <input type="radio" name="RadioGroup1" value="Off" id="RadioGroup1_1" />Off</label>
      </fieldset>

Hugo wrote:

The wrapping had nothing to do with linking controls; 'for' has an entirely different reason for existence. The wrapping being talked about here is simply to ease positioning of the pairs.

I see. As you said before DIV makes more sense than P. Am I being too much of a stickler?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2054
Points: 2286

I didn't test it in anything

I didn't test it in anything other than Firefox and I didn't fix the validation errors (the for attribute value must match the ID of an input which has the nice effect of selecting the input by clicking the label text) but it may spark an idea:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
/* ----------- My Form ----------- */
.myform{
	margin:0 auto;
	width:1000px;
	padding:14px;
}
	/* ----------- stylized ----------- */
 
 	#top{
	height:30px;
	width:100%;
	}
	#left-col{
	width:400px;
	float:left;
	}
 
	#right-col{
	width:400px;
	float:left;
	}
 
	#stylized{
		border:solid 2px #b7ddf2;
		background:#ebf4fb;
		overflow: hidden;
	}
	#stylized h1 {
		font-size:14px;
		font-weight:bold;
		margin-bottom:8px;
	}
	#stylized p{
		font-size:11px;
		color:#666666;
		margin-bottom:20px;
		border-bottom:solid 1px #b7ddf2;
		padding-bottom:10px;
	}
	#stylized label{
		display:block;
		font-weight:bold;
		text-align:right;
		width:140px;
		float:left;
	}
 
	#stylized2 label{
		display:block;
		font-weight:bold;
		text-align:right;
		width:40px;
		float:left;
	}
 
	#stylized .small{
		color:#666666;
		display:block;
		font-size:11px;
		font-weight:normal;
		text-align:right;
		width:140px;
	}
	#stylized input{
		float:left;
		font-size:12px;
		padding:4px 2px;
		border:solid 1px #aacfe4;
		width:200px;
		margin:2px 0 20px 10px;
	}
	#stylized button{ 
		clear:both;
		margin-left:150px;
		width:125px;
		height:31px;
		background:#666666 url(img/button.png) no-repeat;
		text-align:center;
		line-height:31px;
		color:#FFFFFF;
		font-size:11px;
		font-weight:bold;
	}
 
  fieldset {
  padding:0;
  float:left;
  }
 
#stylized .radioList input {
  	width: 1em;
  	margin-right: .7em;
  }
 
#stylized .radioList label {
    	float: left;
	display: block;
	text-align: left;
  } 
 
 
 
 
</style>
</head>
 
<body>
 
<div id="stylized" class="myform">
  <form id="form1" name="form1" method="post" action="">
  <div id="top">
  	<h1>My Test Form</h1>
  </div>
  <div id="left-col">    
    <label for="Name">Name
        <span class="small">Add your name</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
 
    <label for="Email">Email
        <span class="small">Add a valid address</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
 
    <label for="Password">Password
        <span class="small">Min. size 6 chars</span>
    </label>
    <input type="text" name="textfield" id="textfield" />
 
    <fieldset class="radioList">
      <label for="Badge" class="stylized2">
      <input type="radio" name="RadioGroup1" value="red" id="RadioGroup1_0" />Red</label>  
 
      <label for="Badge">
      <input type="radio" name="RadioGroup1" value="yellow" id="RadioGroup1_1" />Yellow</label>
 
      <label for="Badge">
      <input type="radio" name="RadioGroup1" value="green" id="RadioGroup1_2" />Green</label>
 
      <label for="Badge">
      <input type="radio" name="RadioGroup1" value="blue" id="RadioGroup1_3" />Blue</label>
 	</fieldset>
 
  </div>
 
  <div id="right-col">
    <label for="Address_Line_1">Address</label>
    <input type="text" name="textfield" id="textfield" />
 
    <label for="Address_Line_2">&nbsp;</label>
    <input type="text" name="textfield" id="textfield" />
 
    <label for="Town_or_City">Town/City</label>
    <input type="text" name="textfield" id="textfield" />
 
    <label for="Postcode">Postcode</label>
    <input type="text" name="textfield" id="textfield" />
  </div>
  <button  type="submit">Sign-up</button>
  </form>
</div>
 
</body>
</html>

jalz
Offline
Regular
Last seen: 11 years 4 weeks ago
Joined: 2008-05-16
Posts: 37
Points: 13

Thank you!! Looking really

Thank you!! Big smile

Looking really good (well to me anyway), still messing around with it, making sure padding on the radio buttons is right etc. Next object is to ad a combo list, but if I wanted to see/test how/what screen readers interpreted my form, see the sequence of the fields etc - whats the best method to do this. Been further supplimenting my reading on the subject, it looks like I should use the tag if I want to put headings into sections.

Jalz

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2054
Points: 2286

The legend tags work with the

The legend tags work with the fieldsets and make a nice looking and easily styled heading for them.

You can also nest fieldsets like this: http://majorcontractors.com/apply.aspx

jalz
Offline
Regular
Last seen: 11 years 4 weeks ago
Joined: 2008-05-16
Posts: 37
Points: 13

Hi All, Nearly finished. I

Hi All,

Nearly finished. I have two final questions which I'm hoping you kind folks can shed some light on. Hopefully this thread will help another newbie to do a two column form as I've used al the elements for a form and the css is understandable.

First question is, I would like my checkboxes to flow horizontally in a similar way the radio buttons flow. I thought I could use the same CSS as the radio buttons, which does work in FireFox 3.5.3, however when I look at the form in Safari 4.0.3 on a Mac, the checkboxes seem to floating left against right-col div. I can't seem to get it to display the same in both browsers. It would also be nice to get the first checkbox input Steve to line up with with the notes input field above.

Secondly, cleaned my code and now it passes the w3 validator test with one warning. The problem is I don't know what the error or warning is, previous warnings actually said what line there was a problem on, but this jhas nothing in which I can identify a problem.

All it says more or less is the following

Quote:

Using Direct Input mode: UTF-8 character encoding assumed

Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.

If you notice a discrepancy in detected character encoding between the the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.

This is the final code Im posting to anyone else that maybe thinking of creating a tableless form. There maybe better ways then this to do this, but as a starting point its not too bad,

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
 font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; 
 font-size:12px;
}
 
.spacer{clear:both; height:1px;}
 
p, h1, form, button{border:0; margin:0; padding:0;}
/* ----------- My Form ----------- */
.myform{
 margin:0 auto;
 width:1000px;
 padding:14px;
}
 /* ----------- stylized ----------- */
 
  #top{
 height:30px;
 width:100%;
 }
 #left-col{
 width:400px;
 float:left;
 }
 
 #right-col{
 width:400px;
 float:left;
 }
 
 #stylized{
  border:solid 2px #b7ddf2;
  background:#ebf4fb;
  overflow: hidden;
 }
 #stylized h1 {
  font-size:14px;
  font-weight:bold;
  margin-bottom:8px;
 }
 #stylized p{
  font-size:11px;
  color:#666666;
  margin-bottom:20px;
  border-bottom:solid 1px #b7ddf2;
  padding-bottom:10px;
 }
 #stylized label{
  display:block;
  font-weight:bold;
  text-align:right;
  width:140px;
  float:left;
 }
 
 #stylized .small{
  color:#666666;
  display:block;
  font-size:11px;
  font-weight:normal;
  text-align:right;
  width:140px;
 }
 #stylized input, select, textarea{
  float:left;
  font-size:12px;
  padding:4px 2px;
  border:solid 1px #aacfe4;
  width:200px;
  margin:2px 0 20px 10px;
 }
 
 #stylized .short input{
  float:left;
  font-size:12px;
  padding:4px 2px;
  border:solid 1px #aacfe4;
  width:100px;
  margin:2px 0 20px 10px;
 } 
 #stylized button{ 
  clear:both;
  margin-left:150px;
  width:125px;
  height:31px;
  background:#666666 url(img/button.png) no-repeat;
  text-align:center;
  line-height:31px;
  color:#FFFFFF;
  font-size:11px;
  font-weight:bold;
 }
 
  fieldset {
  float:left;
  border:0px;
  }
 
#stylized .radioList input {
   width: 1em;
   margin-right: .8em;
  }
 
#stylized .radioList label {
    float: left;
 display: block;
 text-align: left;
 padding-left: 50px;
 width:80px;
  } 
 
 
#stylized .checkBox1 input {
   width: 1em;
   margin-right: .8em;
  }
 
#stylized .checkBox1 label {
  display:block;
  font-weight:bold;
  text-align:right;
  width:140px;
  float:left;
 
  } 
 
</style>
</head>
 
<body>
 
<div id="stylized" class="myform">
  <form id="form1" name="form1" method="post" action="">
  <div id="top">
   <h1>My Test Form</h1>
  </div>
  <div id="left-col">    
    <label for="full_name">Name
        <span class="small">Add your name</span>
    </label>
    <input type="text" name="full_name" id="full_name" />
 
    <label for="email">Email
        <span class="small">Add a valid address</span>
    </label>
    <input type="text" name="email" id="email" />
 
    <label for="password">Password
        <span class="small">Min. size 6 chars</span>
    </label>
    <input type="text" name="password" id="password" />
 
    <fieldset class="radioList">
      <label for="RadioGroup1_0">
      <input type="radio" name="RadioGroup1_0" value="red" id="RadioGroup1_0" />Red</label>  
 
      <label for="RadioGroup1_1">
      <input type="radio" name="RadioGroup1_0" value="yellow" id="RadioGroup1_1" />Yellow</label>
 
      <label for="RadioGroup1_2">
      <input type="radio" name="RadioGroup1_0" value="green" id="RadioGroup1_2" />Green</label>
 
      <label for="RadioGroup1_3">
      <input type="radio" name="RadioGroup1_0" value="blue" id="RadioGroup1_3" />Blue</label>
  </fieldset>
 
    <label for="OpSystem">Choose OS</label>
    <select name="OpSystem" id="OpSystem">
      <option value="Mac">Apple Mac OS X</option>
      <option value="Vista">Microsoft Vista</option>
      <option value="Windows7">Microsoft Windows 7</option>
    </select>
 
  </div>
 
  <div id="right-col">
      <label for="Address_Line_1">Address</label>
      <input type="text" name="Address_Line_1" id="Address_Line_1" />
 
      <label for="Address_Line_2">&nbsp;</label>
      <input type="text" name="Address_Line_2" id="Address_Line_2" />
 
      <label for="Town_or_City">Town/City</label>
      <input type="text" name="Town_or_City" id="Town_or_City" />
 
      <label for="Postcode">Postcode</label>
      <span class="short">
        <input type="text" name="Postcode" id="Postcode" />
        </span>
    <div class="spacer"></div>
 
        <fieldset class="checkBox1">
      <label for="People1">Steve</label>
      <input name="People1" type="checkbox" value="Steve" id="People1" />
      <label for="People2">Larry</label>
      <input name="People2" type="checkbox" value="Larry" id="People2" />
      <label for="People3">Bill</label>
      <input name="People3" type="checkbox" value="Bill" id="People3" />
    </fieldset>
 
    <label for="notes">Notes</label>
    <textarea name="notes" cols="15" rows="10" id="notes"></textarea>
    <div class="spacer"></div>
 
  </div>
  <button  type="submit">Sign-up</button>
  </form>
</div>
 
</body>
</html>