Making form labels clickable

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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,

<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;

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.

Re: Making form labels clickable

Gazing into my crystal ball I observed "Nick Howes"

Quoted text here. Click to load it

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:

Adrienne Boswell
Please respond to the group so others can share

Re: Making form labels clickable

On Fri, 30 Apr 2004 16:30:04 -0500, Michael Wilcox

Quoted text here. Click to load it

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.

Mark Parnell

Re: Making form labels clickable

Quoted text here. Click to load it

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

Quoted text here. Click to load it

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>
  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."
( )

Yucca, /
Pages about Web authoring:

Re: Making form labels clickable

Mark Parnell wrote:

Quoted text here. Click to load it

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.)

Toby A Inkster BSc (Hons) ARCS
Contact Me -

Site Timeline