Log in   Register a New Account

Accessify Forum - Discuss Website Accessibility

New to the forum?

Only an email address is required.

Register Here

Already registered? Log In

Currently Online

No registered users are online.

how to label checkboxes?

  • Reply to topic
  • Post new topic
Reply with quote Hi,
I have the following code scenario and i dont now how to label such checkboxes:


Code:

<label for="id_comment?">Comment id x</label>
<input type="checkbox" id="id_comment?" name="id_comment[]" value="x" />

<label for="id_comment?">Comment id y</label>
<input type="checkbox" id="id_comment?" name="id_comment[]" value="y" />

<label for="id_comment?">Comment id z</label>
<input type="checkbox" id="id_comment?" name="id_comment[]" value="z" />


id_comment[] is valide code to fetch values from multiple checkboxes as an array. But first: how to name the id of each checkbox id_comment[] isnt valide. And second what value to insert in the "for" attribute of each label?

Thanks,
Armand
Reply with quote hi Armand
2 things:
1. each id must be unique, so suggest "id_comment1" "id_comment2"...
2. For input types checkbox and radio , the text label should be to the right of the control, not to the left as you have in the code examples.

Steve Faulkner
Technical Director
TPG Europe
The Paciello Group | Web Accessibility Tools Consortium
Reply with quote Hi Steve,
Thanks for your response. But it dosent solve the problem.

The problem is that the name and the id must have the same value. But in this case, how would you do it if the name is passed as an array?

thanks for help,
Armand
Reply with quote
atu wrote:

The problem is that the name and the id must have the same value


no, they don't. keep the name as it is, and just assign unique IDs and related FOR attributes

Patrick H. Lauke / splintered
Reply with quote Thanks, it works.
Reply with quote Specifically:
Code:
<label for="id_comment_x">Comment id x</label>
<input  id="id_comment_x" type="checkbox" name="id_comment[]" value="x" />

<label for="id_comment_y">Comment id y</label>
<input  id="id_comment_y" type="checkbox" name="id_comment[]" value="y" />

<label for="id_comment_z">Comment id z</label>
<input  id="id_comment_z" type="checkbox" name="id_comment[]" value="z" />
Or:
Code:
<input  id="id_comment_x" type="checkbox" name="id_comment[]" value="x" />
<label for="id_comment_x">Comment id x</label>

<input  id="id_comment_y" type="checkbox" name="id_comment[]" value="y" />
<label for="id_comment_y">Comment id y</label>

<input  id="id_comment_z" type="checkbox" name="id_comment[]" value="z" />
<label for="id_comment_z">Comment id z</label>

I've lined up the for and id to show which values must match. The order of the attributes doesn't matter, this is just a visual aid for reading the code.

Display posts from previous:   

All times are GMT

  • Reply to topic
  • Post new topic