You are here: Home / Dog Blog / Archives

T&C's Quandry

Sunday 9 January, 2005 ( 4:38PM GMT)

What's the best way to mark up an "I agree to the terms and conditions" checkbox?

Here's the obvious way:

	<input type="checkbox" name="agree" id="agree" /><label for="agree">I have read and agree to the <a href="/termsandconditions.html">terms and conditions</a>.</label>

The problem with this, though, is that if the user clicks on the "terms and conditions" link, because it's within a label for the checkbox, the checkbox will be checked. Because of this, it could be argued that the user doesn't agree to the T&C's because they only intended to read them, not to agree with them.

But then the text within that label is the best label for the checkbox. And the obvious place to put a link to the T&C's is within that text.

What to do?

Comments

Comment 1

Well, this would be definitely confusing.
My first thought is: place checkbox under the text and add "I agree" label next to it.

So said Rimantas on Sunday 9 January, 2005 at 5:23PM GMT.

Comment 2

[checkbox] [label]: [link]
Something like:
<input type="checkbox" name="agree" id="agree" /><label for="agree">I have read and agree to:</label> <a href="/termsandconditions.html">terms and conditions</a>.

OR,
why not just display the legalese text in an IFRAME or overflow: auto-ed DIV, above the label and checkbox?

So said Gabriel Mihalache on Sunday 9 January, 2005 at 5:57PM GMT.

Comment 3

I think you would use your example, but not make it a link. Then, immediately following that, put a link that reads "Read the terms and conditions."

So said Jeff on Sunday 9 January, 2005 at 7:19PM GMT.

Comment 4

Either:
1: Do not use the label tag
...or
2: Use the label tag, but add som javascript to overrule the checking of the checkbox
...or
3: Rethink the use of the terms of use, why require it at all?...

So said Thomas Baekdal on Sunday 9 January, 2005 at 9:42PM GMT.

Comment 5

hmm, I see your point. You do need to use the label tag. Perhaps:

I have read the terms and conditions and
I agree

If your offering a disagree option then you might be better to use radio buttons.

Not sure if your comment filter will eat that, Hopefully not.

So said Tom on Sunday 9 January, 2005 at 10:17PM GMT.

Comment 6

Please read the terms and conditions before checking the following item.
I have read and agree to the terms and conditions.

So said Neal on Sunday 9 January, 2005 at 11:01PM GMT.

Comment 7

"By checking 'I agree' you signify that you agree to be bound by the <a href...>terms and conditions</a> set forth herein notwithstanding cognito ergo sum and all that rubbish.
<br />
<label for="agree">I agree</label>" and the checkbox.

So said Dave Vogt on Monday 10 January, 2005 at 5:54AM GMT.

Comment 8

Isn't the real problem going to be that the person follows the link to see the T&C, and thus jumps out of the form that they were in the middle of completing. Maybe this is one of those very rare "valid uses of an iframe"?

So said Chris Hunt on Monday 10 January, 2005 at 5:14PM GMT.

Comment 9

"Valid uses for an iframe"? Aren't they related to flying pigs? ;)

There are some good ideas here. I particularly like Gabriel's overflow: auto idea, which would make the T&C's act like an iframe, but be much more accessible (not to mention easier) and also something along the lines of what Neal suggested, like:

<p>Please ensure that you have read the <a>terms and conditions</a> before continuing</p>
<input type="checkbox" /><label>I have read and agree to the terms and conditions</label>

So said Patrick on Monday 10 January, 2005 at 5:30PM GMT.

Comment 10

Interesting, but tyour example at the top of this page is not semantically correct, meaning you are using the markup for a purpose it was not meant for.
First, the label is just that...a label for a form control, and to use it with a link is most likely not valid markup, even though it "works" in terms of providing a link. Second, you are missing a "form" wrapper control around the input. You are also using an input tag without the form control wrapper AND a submit button, as the input tag needs a way to "submit" the form data the user entered. You are using a form "input" control, right? If so, thats the purpose of a form control, so that rule is also being violated as shown. Lastly, by asking the user to "input" data or check a box (which I see is unchecked by default), then using a link to link away from the form, you are confusing the user who now is wondering what happend to their input.

So, here is a Solution: First figure out what you are trying to do. If its have them passively read something and move to the next page, a hyperlink with text without a form or input element is fine. Create a graphic button if you need to. If you are asking for "input" from the user, then allow them to enter input via the checkbox form control and then add a submit button (styled anyway you like) so they can submit the data, regardless of whether its processed or stored.
Finally, you can add the textual information about "agreeing to terms and condition" possibly in a label associated with the input element as you have done, but also you might but "I agree" as the text value in the submit button. There is also the possibility for another checkbox and/or button with the option of not agreeing. Choosing either routes them to a different page. If the user is passively agreeing to something they read on that page, you still need to decide if you are requesting input and submitting a form or linking to information. That should decide what kind of markup to use....but the "hybrid" type won't work, in my opinion.

So said mitchell on Saturday 29 January, 2005 at 9:29AM GMT.

Comment 11

Is it not possible to attach a label to a row as opposed to text. I looked into the source code of phpMyAdmin to see how they do it, but to no avail.

So said Farheen on Sunday 9 October, 2005 at 5:04AM GMT.

See Also

^ Top

SiteGround: Fast, reliable, recommended hosting.