SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    please help with wai validation on section of code.....

    Hi,

    I am going through a site validating it all but there are two form sections that won't validate and i can't figure it out....can anyone help?

    the failure is:
    12.4 Associate labels explicitly with their controls.

    HTML Code:
    <div id="newsletter">
    <h2 class="heading"><img src="../images/heading-keep-informed.gif" alt="Keep Informed" /></h2>
    <form action="../mail_response.php" method="post" id="form1" >
    <div>
    <label>Register for email updates...</label>
    <!--<input name="name" type="text" class="field" value="Name" onfocus="this.value=''" />-->
    <input name="textfield" id="textfield" type="text" class="field" value="email@myemail.com" onfocus="this.value=''" />
    <input type="submit" value="Register now!" class="submit" />
    </div>
    </form>
    </div><!-- /newsletter -->
    ...and
    HTML Code:
    <div id="search">
    <h2 class="heading"><img src="images/heading-search.jpg" alt="Search" /></h2>
    <form action="./search.php" method="get">
    <div>
    <label for="sdate">Date</label>
    <select name="sdate" id="sdate" onchange="location.href='/search.php?sdate='+this.value">
    <option class="action" selected="selected">Please select...</option>
    <option value="2007-06">June</option>
    <option value="2007-07">July</option>
    <option value="2007-08">August</option>
    <option value="2007-09">September</option>
    </select>
    <label for="sdate">Location</label>
    <select name="slocation" id="slocation"  onchange="location.href='/search.php?slocation='+this.value">
    <option class="action" selected="selected">Please select...</option>
    <option value="1">Bradford</option>
    <option value="3">Bingley</option>
    <option value="2">Keighley</option>
    <option value="4">Ilkley</option>                     
    <option value="6">Saltaire/Shipley</option>
    </select>
    <label for="sevent">Event type</label>
    <select name="sevent" id="sevent" onchange="location.href='/search.php?sevent='+this.value">
    <option class="action" selected="selected">Please select...</option>
    <option value="1">Music</option>
    <option value="3">Arts</option>
    <option value="5">Activity</option>
    <option value="2">Film</option>
    <option value="4">Festivals</option>
    </select>
    </div>
    </form>
    </div>

  2. #2
    SitePoint Addict GonzaloGM's Avatar
    Join Date
    May 2007
    Location
    Rosario, Argentina
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it's because of this:

    <label>Register for email updates...</label>

    Maybe you should use a paragraph (p) tag.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to have your label associate itself with the ID it is referring to using the for="" attribute. This attribute's value must be identical to the ID of the input that it refers to.

    In your second example, "sdate" should be changed to "slocation" as well.

  4. #4
    SitePoint Addict GonzaloGM's Avatar
    Join Date
    May 2007
    Location
    Rosario, Argentina
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, but I think he wanted to place a text (not a label for a field). If that's the case he shouldn't use a label in my opinion.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Labels are intended to be associated with form fields. Using one and not associating it with a specific form field will fail accessibility validation as this one has done.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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