<label> on images in IE

[Mikael Ånestad]

Why doesn't this work in IE?
I works nicely in Mozilla and Opera...



<form action="action.php" method="post" name="form">
<label for="ABCD"><img src="picture.jpg" alt="" width="100"
height="100"></label><br>
<input id="ABCD" type="radio" name="radiogroup" value="-"><br>
<br>
<label for="ABCDE"><img src="picture.jpg" alt="" width="100"
height="100"></label><br>
<input id="ABCDE" type="radio" name="radiogroup" value="-"><br>
</form>

 

[Jukka K. Korpela]

Why doesn't this work in IE?
I[t] works nicely in Mozilla and Opera...

Please define "work".

<label for="ABCD"><img src="picture.jpg" alt="" width="100"
height="100"></label><br>
<input id="ABCD" type="radio" name="radiogroup" value="-"><br>

To begin with, exactly how informative is an empty string as a field label?

And exactly what do you expect to happen, and why? There is nothing a
browser _needs_ to do (by the specs) just because you use <label> markup.

 

[Mikael Ånestad]

And exactly what do you expect to happen, and why? There is nothing a
browser _needs_ to do (by the specs) just because you use <label> markup.

Have you tried the code in different browsers? Then you'd seen what I mean.
I expected to get the same function as on the Google search frontpage - when
I click on the text, the radio button gets checked - only with an image
instead of text.

Is it possible to do that in IE?

 

[Jukka K. Korpela]

Have you tried the code in different browsers?

No. Have you? How did Lynx do?

Should I have used my time to construct a sample page, just because you
didn't use yours to post a demo URL? Besides, that would not have told me
what you thought.

Then you'd seen what I mean.

No I wouldn't. You need to tell that.

I expected to get the same function as on the Google search
frontpage - when I click on the text, the radio button gets checked -
only with an image instead of text.

My mind-reading module had hypothesized that this might be the issue, but
it's really not a matter of "working". It's a matter of a particular
implementation feature, which you did not mention.

Is it possible to do that in IE?

It's a browser feature that you can toggle a radio button by clicking on its
label. And another browser feature that this doesn't work when the label is
an image. It's a bit odd, but so what? Why are you using an image as a radio
button label? Are you sure the idea is obvious to all users?

 

[Owen Jacobson]

It's a browser feature that you can toggle a radio button by clicking
on its label. And another browser feature that this doesn't work when
the label is an image. It's a bit odd, but so what? Why are you using
an image as a radio button label? Are you sure the idea is obvious to
all users?

The HTML 4.01 spec suggests that transferring focus to the related
input element is one of the intended effects of a LABEL element:

When a LABEL element receives focus, it passes the focus on to its
associated control.
<http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL>

I would class the browser not doing so under some circumstances and
doing so under others as a bug in the browser; obviously the behavoir
itself is inappropriate in some contexts (Speech browser, etc).

 

[Jukka K. Korpela]

The HTML 4.01 spec suggests that transferring focus to the related
input element is one of the intended effects of a LABEL element:

When a LABEL element receives focus, it passes the focus on to its
associated control.
<http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL>

That's a rather vague description, partly because there is no rigorous
definition of "focus". In particular, what would it mean for an image, or
for some text for that matter, to "receive focus"? Moreover, would this
imply that _clicking_ on the element would have a specific effect?

I would class the browser not doing so under some circumstances and
doing so under others as a bug in the browser;

No, it does not violate any specification. And there is no requirement on
the set of elements that may receive focus at all.

 

[lifer]

here's what i did and it worked.


<form action="action.php" method="post" name="form">
<label for="ABCD" onclick="document.getElementById'(ABCD).click();"><img src="picture.jpg" alt="" width="100"
height="100"></label><br>
<input id="ABCD" type="radio" name="radiogroup" value="-"><br>
<br>
<label for="ABCDE" onclick="document.getElementById'(ABCDE).click();"><img src="picture.jpg" alt="" width="100"
height="100"></label><br>
<input id="ABCDE" type="radio" name="radiogroup" value="-"><br>
</form>





http://www.gabrielserafini.com/tag/label





Korpela was sure alot of help

 

[nain]

onclick="document.getElementById'(ABCD).click();"
onclick="document.getElementById'(ABCDE).click();"

Characters are invalid.

-->onclick="document.getElementById('ABCD').click();"
-->onclick="document.getElementById('ABCDE').click();"