Making form labels clickable

[Nick Howes]

This post isn't a question, but then newsgroups aren't Q&A forums (though
you'd be forgiven for thinking it)

If you have a form field such as a checkbox, and some text describing it
(and you probably do, or else it's just a mystery box), you may like to know
that there is a standard HTML tag to make it so clicking on the text checks
the box (which is so much easier than clicking on just that tiny little box
anyway). It's done using the <label> tag, and links to the field's id,
thusly:

<input type="checkbox" id="mybox" name="pool"/>
<label for="mybox">I play pool</label>

You can then click on the "I play pool" text to make the checkbox click. To
make it more obvious that the text can be clicked on, you can give <label>
tags some CSS styling so that the cursor changes to a hand, as it would over
a link:

<style type="text/css"><!--
label {
cursor: pointer;
cursor: hand;
}
--></script>

the two different cursors are needed so that it works in IE (which uses
hand) and others (which use pointer).

You can of course use labels for any other form field (on a text box,
clicking the label will put the text cursor in the box ready to type) If you
do this then all your web forms then they'll be so much more user-friendly
and easy to use, et cetera et cetera.

 

[Michael Wilcox]

You can then click on the "I play pool" text to make the checkbox click.

This is true for some browsers, yes. But this isn't the purpose of the
label element. Its purpose is to explicitly describe what the input
field is and what its contents should be, if applicable. The clicking
thing is just a side-effect.

? To
make it more obvious that the text can be clicked on, you can give <label>
tags some CSS styling so that the cursor changes to a hand, as it would over
a link:

A bad idea, in my opinion, because this might give the impression that
something more should happen, like go to a new page or spawn a window or
something else associated with links.

<style type="text/css"><!--
label {
cursor: pointer;
cursor: hand;
}
--></script>

I don't really like people changing my cursor. It changes the cursor
from what I'd expect, and I get a little confused. Also, the comments
are unnecessary and actually illegal.

If you
do this then all your web forms then they'll be so much more user-friendly
and easy to use, et cetera et cetera.

Indeed more friendly for those without a visual browser (or those who
just like labels, like me).

 

[Adrienne]

You can of course use labels for any other form field (on a text box,
clicking the label will put the text cursor in the box ready to type)
If you do this then all your web forms then they'll be so much more
user-friendly and easy to use, et cetera et cetera.

Labels can also be styled so that forms look structured, as if they were
done with tables. Labels can be styled to give a visual clue that the user
has made an error. Here's a little something written in ASP that
demonstrates this: http://www.intraproducts.com/beta/requiredform.asp

 

[Mark Parnell]

Also, the comments are unnecessary and actually illegal.

Not to mention the <style> element being closed with a </script> tag.


The comments aren't illegal, since the above would presumably be in the
head of the HTML document, not an external CSS file (otherwise it is
even more malformed), so comments are allowed. But they _are_ totally
unnecessary. Cargo cult rubbish.

 

[Jukka K. Korpela]

Not to mention the <style> element being closed with a </script> tag.

Yes, it's easy to forget to use the right tags if you're counting your
hyphens and things like that.

The comments aren't illegal, since the above would presumably be in the
head of the HTML document, not an external CSS file (otherwise it is
even more malformed), so comments are allowed. But they _are_ totally
unnecessary. Cargo cult rubbish.

Besides, they are not comments at all. The content of a style element is
character data, from the HTML perspective, so nothing in them can
constitute an HTML (i.e., SGML) comment. If you used
<style type="text/css"><!--</style>
<title></title>
Hello world
then your document would be valid HTML, which wouldn't be the case if
<!-- started a comment declaration.

It's just a kludgery that was designed when there were browsers that did
not recognize <style> or <script> elements.

In XHTML, it isn't safe at all, since it may result in the entire style
sheet being ignored:
"Note that XML parsers are permitted to silently remove the contents of
comments. Therefore, the historical practice of "hiding" scripts and
style sheets within "comments" to make the documents backward compatible
is likely to not work as expected in XML-based user agents."
( http://www.w3.org/TR/html/#guidelines )

 

[Toby A Inkster]

The comments aren't illegal, since the above would presumably be in the
head of the HTML document, not an external CSS file (otherwise it is
even more malformed), so comments are allowed. But they _are_ totally
unnecessary.

Well, as the example in the OP was XHTML, then technically the comments
should cause the stylesheet to be completely ignored. (Comments in XHTML
<script> and <style> elements are *real* comments.)