asked on

HTML form label (across table cells)

How to get label scope to extend across table cells?

        <tr>
          <label>
          <td><input name="County" type="checkbox" value="1"  > </td>
          <td>Washington</td>
          </label>
        </tr>

Open in new window

Designbyonyx

Use the "for" attribute of the label and an "ed" on the input:

<input id="chkCountry" type="checkbox" value="1" />

<label for="chkCountry">Country</label>

Designbyonyx

*id (not "ed" ;)

SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Designbyonyx

And sorry, I read "County" as "Country". Here is a full code example:

<tr>
<label>
<td><input name="County" id="chkCounty" type="checkbox" value="1" > </td>
<td><label for="chkCounty">Washington</label></td>
</label>
</tr>

ASKER CERTIFIED SOLUTION

Designbyonyx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

willsherwood

ASKER

<label for> worked perfectly;
due to inherited formatting, i did need to keep two separate cells.

willsherwood

ASKER

thanks all

Designbyonyx

Yeah... the following syntax works:

<label><input type="checkbox" value="1" /></label>

Open in new window

But I never use this method mainly because of it's limitation with styling. You cannot style the input element completely independent of the label element. For example, what if you want a background on the label only... you can't! You also can't separate your controls like you were trying to do with the table. By using the following syntax, I have the greatest amount of flexibility without sacrificing the associative properties of labels -> inputs.

<label for="myCheckbox">My Checkbox</label>
<input type="checkbox" id="myCheckbox" value = "1" />

Open in new window