By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,057 Members | 1,346 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,057 IT Pros & Developers. It's quick & easy.

Label outside of form

P: n/a
Is this correct usage of <label>?:

<h5><label for="sp-q"><img src="search.png" alt="Search"></label></h5>
<form method="get" action="http://search.atomz.com/search/">
<div>
<input name="sp-q" id="sp-q">
<input type="submit" value="Search this site">

[...]

</div>
</form>

The accessibility checker cynthiasays.com doesn't accept this as
correct, Nick's Accessibility Valet doesn't complain.

--
Spartanicus
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Spartanicus <me@privacy.net> writes:
Is this correct usage of <label>?:
Aside: I'm impressed if it's correct use of <h5> - what document are
you doing that has that many heading levels?
<h5><label for="sp-q"><img src="search.png" alt="Search"></label></h5>
<form method="get" action="http://search.atomz.com/search/">
<div>
<input name="sp-q" id="sp-q">
<input type="submit" value="Search this site">

[...]

</div>
</form>

The accessibility checker cynthiasays.com doesn't accept this as
correct, Nick's Accessibility Valet doesn't complain.


I think that's probably okay, at least as far as use of <label>
goes. In practical terms, try using a modern browser and clicking on
the image - see if it focuses the input.

I'd be tempted to put the <h5> inside the <form> and possibly inside
the <div>, too.

Obviously you'll need to make sure that the image is accessible
(sensibly large font size, good colour contrast, etc).

--
Chris
Jul 20 '05 #2

P: n/a

"Spartanicus" <me@privacy.net> wrote in message
news:qf********************************@news.spart anicus.utvinternet.ie...
Is this correct usage of <label>?:

<h5><label for="sp-q"><img src="search.png" alt="Search"></label></h5>
<form method="get" action="http://search.atomz.com/search/">
<div>
<input name="sp-q" id="sp-q">
<input type="submit" value="Search this site">

[...]

</div>
</form>

The accessibility checker cynthiasays.com doesn't accept this as
correct, Nick's Accessibility Valet doesn't complain.


In terms of valid HTML, the LABEL element can go anywhere any form control
can go except inside another LABEL. This means, in turn, that it can go
anywhere *any* inline code can go except inside a BUTTON.

I don't see anything in the spec that requires the LABEL to be physically
inside the form that contains the control to which it applies. Since it's
not a control--it doesn't have a value that gets posted with the form--I
expect that it doesn't matter. But I suggest checking out what a few
browsers actually do in such a case.

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.