...

View Full Version : web accessible form doesn't validate :(



bazz
06-28-2006, 03:26 PM
hi,

I have added the label tags to my form and now, the validator is throwing up errors. What am I getting wrong?



<p><label for="name">Name:</label></p><p><INPUT class="textbox" TYPE="text" title="Type Your Name" NAME="name" SIZE="25"
value=""></p>
<p><label for="email">Email:</label></p><p><INPUT class="textbox" TYPE="text" title="Enter your Email Address" NAME="email" SIZE="25" value=""></p>
<p><label for="body">Message:</label></p><p><TEXTAREA class="textarea" COLS="21" ROWS="6" title="Please type your message" NAME="body" value="">
</TEXTAREA></p>


bazz

bazz
06-28-2006, 03:49 PM
I don't know how 'for' got into it. It should be 'id' and now, it validates OK.

bazz

brothercake
06-28-2006, 04:06 PM
No "for" is the correct attribute, but it has to match with the "id" of a form element. The validator was probably complaining about that (or the unecessary and semantically innapropriate <p> tags).

Here's the general syntax for a label:


<label for="foo">Label text</label>
<input id="foo" ... attrs ... />

That for/id association is called "explicit association". You can also use "implicit association", which is wrapping the label around the field, but that doesn't work properly in IE and other browsers:


<label>Label text <input /></label>

If you need wrappers for label/input pairs you can use <div>, that's cool, but the neatest way overall (I find) is to use a combination of the above syntaxes to get something like this:


<label for="foo">
<span>Label text</span>
<input id="foo" />
</label>

It uses explicit association for best accessibility, but it also uses the label as the wrapper to avoid having to use divs. Then the span (if neeeded, or any other inline HTML) can be floated to give a nice layout.

bazz
06-28-2006, 05:48 PM
Thank you BrotherCake.

I have chnaged it to this, which validates: -




<p><label for="name">Name:</label></p><p><INPUT id="name" class="textbox" TYPE="text" title="Type Your Name" NAME="name" SIZE="25"
value="$sendername"></p>
<p><label for="email">Email:</label></p><p><INPUT id="email" class="textbox" TYPE="text" title="Enter your Email Address" NAME="email" SIZE="25" value="$senderemail"></p>
<p><label for="body">Message:</label></p><p><TEXTAREA id="body" class="textarea" COLS="21" ROWS="6" title="Please type your message" NAME="body"> $messagebody
</TEXTAREA></p>



bazz

brothercake
08-01-2006, 07:36 PM
You still don't need those <p> elements - that's still semantically contradictory. You should be able to style most situations just with the normal form elements - label and fieldset, surrounding the inputs - but if you do need additional elements then use <div> and <span>

bazz
08-02-2006, 02:23 PM
BrotherCake, :thumbsup:

bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum