SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tick boxes in form malfunctioning

    Hi everyone,

    I am very new to php and making forms but have recently made one that works well except for the tick boxes in the travel section. If ticking the flights box, cabs also becomes ticked and so on.
    Also in some browsers some of the fields are highlighted in yellow but not in firefox. Not sure why this is happening???

    Any ideas?

    Thanks in advance!

    Cant post links yet so have to spell it out sorry!

    www dot messagetrain dot com slash bookings

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)
    I don't think the missing row attributes are causing it, But the missing/extra div tag might be. http://validator.w3.org/check?uri=ht...Inline&group=0
    But I think the main problem is from nesting the inputs inside a label tag (esp. without a "for").
    HTML Code:
    <tr>
         <td><label>Arrangements:</label></td>
         <td><label>
         <input type="checkbox" name="cab" id="cab" />
         Cabs&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="checkbox" name="flight" id="flight" />
         Flights&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="checkbox" name="car" id="car" />
         Hire Car&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="checkbox" name="private" id="private" />
         Private</label></td>
    </tr>

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by maree_DW View Post
    Also in some browsers some of the fields are highlighted in yellow but not in firefox. Not sure why this is happening???
    Most likely a browser addon, such as the Google Toolbar is highlighting the form fields in certain browsers.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)
    I just looked at the w3c documentation for label and found that you don't need a "for" when the input is inside the label. So
    HTML Code:
    <label for="name">Name: </label>
    <input id="name" ... />
    or
    HTML Code:
    <label>Name:
    <input id="name" ... />
    </label>
    are both OK. The problem is that "wrapping" labels can only contain one input.

    As chris cressman said some browsers add style to form elements for accessability (background color, border outline). You could try to over-ride this by explicitly giving them your own style, but it may not work in all browsers, and if it did it could cause problems for those that rely on them.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ooops, totally forgot about this thread..

    Thanks for all your help guys!

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I just looked at the w3c documentation for label and found that you don't need a "for" when the input is inside the label. So
    But you DO need it if your site is supposed to work as intended with ALL user agents. Even the "implicit" linking with wrapping the input inside the label, screen readers barf.

    JAWS will read the first label for all following inputs without the "for" attribute, wrapped or not. I tested this on my long-long forms.
    aThe problem is that "wrapping" labels can only contain one input.
    ANY label may only have one input, I thought. This is why I can't have:
    <label for="birthdate">
    <input type="text" name="bday" id="birthdate">
    <input type="text" name="bmonth" >
    <input type="text" name="byear" >

    The validator won't say anything, but what this means is one label-input pair, and then two Loose inputs with no meaning. They'll be called "Edit". Someone is going to try to type the whole birthdate into the first input (don't ask me why the bosses and designers insist on having three inputs for the date instead of just one).

    Legally you can go the other way:
    <label for="foo">Foo</label>
    <label for="foo">Bar</label>
    <input type="text" name="foo" id="foo">

    But each screen reader seems to choose a different label to read. I believe it used to be JAWS read the first and Window-Eyes read the last only though each new version works differently. Getting around this has been a problem: so far I'm using a legend for the main label and a p for the sighted, otherwise a label with no for and then a second label with the "for".

    Bleh, forms : )


Tags for this Thread

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
  •