tick boxes in form malfunctioning

[maree_DW]

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

[Mittineague]

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").

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

[chris cressman]

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.

[Mittineague]

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

<label for="name">Name: </label>
<input id="name" ... />

or

<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.

[maree_DW]

ooops, totally forgot about this thread..

Thanks for all your help guys!

[Stomme poes]

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