Comments on: Clickable Labels

By: Jono Alderson

Jono Alderson — Thu, 23 Oct 2008 18:55:25 +0000

A useful technique can be to use absolute positioning to sit the input on top an extended label area. That way, even if they miss the input box completely, chances are they’ll still click the label behind/underneath it.

Example: http://www.simplystep.co.uk/contact/

By: James

James — Tue, 21 Oct 2008 20:12:06 +0000

@mcm69, If you wrap an input element in a label element (known as implicit association) the labels are no longer clickable in IE6. It’s best to explicitly associate the two elements by giving the label a for attribute.

By: Dan Gayle

Dan Gayle — Tue, 21 Oct 2008 19:15:28 +0000

@ mcm69

That syntax only works when you have a simple form to complete. What happens when you have one label with multiple inputs?

Additionally, doing it that way makes it harder to style. What if you wanted the label to be a block element so that it sits on top of the input element? Couldn’t do it with this.

But the idea of adding a cursor to the label is a great idea.

By: mcm69

mcm69 — Tue, 21 Oct 2008 09:22:52 +0000

*does not need

By: mcm69

mcm69 — Tue, 21 Oct 2008 09:22:28 +0000

There is also a valid variant of syntax:

(text)

This one does need the for parameter.