iOS iPhone Safari not honoring 'for' attribute of html label tag...anyone else notice?

[stratocratic]

This is regarding development of a web app, but this seemed like the most appropriate board for the matter. I'm sure someone will let me know if it isn't...

iPhone Safari isn't honoring the use of the "for" attribute in the <label> tag, as in, it's not selecting the corresponding radio button/checkbox when the content included in the label is touched. I experience this on iPhone OS 3.1, for what it's worth.

simple example:

<form>
<label for="foo">foo</label>
<input type="radio" id="foo" name="asdf" value="foo" />

<label for="bar">bar</label>
<input type="radio" id="bar" name="asdf" value="bar" />
</form>


I'm not able to duplicate the issue in Safari 4.0.3 (6531.9) on OS X 10.6.1.

Has anyone encountered this before?

 

[stratocratic]

I suppose I might submit this to apple as a bug report.

 

[Kngus]

Solution

Hey there,

I have actually been looking around the web to provide this answer, as I couldn't find a resolution when I had this problem myself.

I put the attribute onchange="" on my label, and that made the for="" attribute work.

So, when I was having this problem my code looked like this:

<input type="checkbox" id="chkRemember" name="chkRemember" value="1"/><label for="chkRemember">Remember me</label>

And it didn't work. This did work:

<input type="checkbox" id="chkRemember" name="chkRemember" value="1"/><label onclick="" for="chkRemember">Remember me</label>

I thought i messed something up, so I undid my work then tested, then redid my work and tested again.. sure enough, an empty onchange attribute worked.

Hope this helps,
Angus

 

[chown33]

Which attribute is it: onchange or onclick?

Your code shows onclick, but your description says onchange (twice).

You don't need to post a new reply to this. Simply edit your post and save the changes.

 

[ulbador]

The <LABEL> tag doesn't work in Mobile Webkit, probably to stop the interfering with the tap-to-select-text functionality.

http://twitter.com/#!/kapowaz/status/21674614308

 

[philsown]

It's onclick

It's onclick. I just tested with both onchange and onclick. The one that works is onclick.

<label for="my_check_1" onclick="" > Click my check </label>
<input type="checkbox" name="my_check" id="my_check_1" />