Workaround iPhone's browser not honoring the <label> element
- by Sorin Comanescu
Hi,
Just ran into this recently and I thought it'd be helpful to share.
The HTML <label> element is supported in a weird way by iPhone's (v3) browser. Try this:
<input type="checkbox" id="chkTest" /><label for="chkTest">Click me!</label>
Tapping the "Click me!" label has no effect, the checkbox is not checked.
Lack of support in a touch device for <label> elements puzzled me and I tried to overcome this issue by using javascript. The surprise came when a I noticed a void javascript like the one below also did the trick:
<input type="checkbox" id="chkTest" /><label for="chkTest" onclick="javascript:void(0);">Click me!</label>
HTH
Further info:
Also works with an empty handler: onclick=""
Disabling JavaScript inactivates again the label, even if using the empty handler.