Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    web accessible form doesn't validate :(

    hi,

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

    Code:
    <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

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    solved

    I don't know how 'for' got into it. It should be 'id' and now, it validates OK.

    bazz

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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:
    Code:
    <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:
    Code:
    <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.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Thank you BrotherCake.

    I have chnaged it to this, which validates: -

    Code:
    <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

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    BrotherCake,

    bazz


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •