HTML form label (across table cells)

willsherwood
willsherwood used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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>
*id    (not "ed" ;)
Top Expert 2015
Commented:
<tr>          
    <td colspan="2"><label><input name="County" type="checkbox" value="1" />Washington</label></td>
</tr>
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

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>
Grrrrrrr!!!!!!!!!!!!!!!   I moving way too fast.  I need to slow down.  Sorry.

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

Author

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

Author

Commented:
thanks all
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial