How to hide labels in html

I have this code which depends on this javascript from dynamic drive: http://dynamicdrive.com/dynamicindex16/formdependency.htm Its a form dependency manager. Which will show or hide elements depending on what you choose from the forms that are revealed:

I don't know why but If I alter the code from this:

<td>
       <label>ID Number<input type="checkbox" name="id" class="DEPENDS ON info BEING student"></label>
           </td>
        </tr>

To this:

    <td>
    <input type="checkbox" name="id" class="DEPENDS ON info BEING student"><label>ID Number</label>
       </td>
    </tr>

Note: The only change that I did here is to transfer the label from the left side of the checkbox to the right side so that they will look better. But when I do this. The labels will be visible even if I did not yet click on the button that will make it visible(but without the checkboxes).

And when I click on that button, that's the only time when the checkbox will appear on the left side of the labels.

The checkbox is ok, but the la开发者_JS百科bel is not. And the javascript is working properly. What do I do so that the checkbox and label will go together?

---

I think the simplest solution is to leave the <label> tag in front of the <input> tag and just move the text to the right of it:

<td>
<label><input type="checkbox" name="id" class="DEPENDS ON info BEING student">ID Number</label>
   </td>
</tr>

Or you can use SLaks answer and add an id attribute to the <input> tag and a matching for attribute to the <label> tag like so (so that the text toggles the checkbox):

<td>
<input type="checkbox" name="id" class="DEPENDS ON info BEING student" id="example"><label for="example" class="DEPENDS ON info BEING student">ID Number</label>
   </td>
</tr>

---

Based on the W3 documentation to assign a label to an input you have tofollow this instruction

 <FORM action="..." method="post">
 <P>
      <LABEL>
         First Name
         <INPUT type="text" name="firstname">
      </LABEL>
      <LABEL>
         <INPUT type="text" name="lastname">
         Last Name
      </LABEL>
 </P>
 </FORM>

following text included in that article

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

Note that this technique cannot be used when a table is being used for layout, with the label in one cell and its associated control in another cell.

When a LABEL element receives focus, it passes the focus on to its associated control. See the section below on access keys for examples.

Labels may be rendered by user agents in a number of ways (e.g., visually, read by speech synthesizers, etc.)

So you have to follow the instruction, was it clear or not ?

---

Add class="DEPENDS ON info BEING student" to the <label>.

---

It looks like that form dependency script expects HTML in the form

<label>ID Number<input type="checkbox" name="id" class="DEPENDS ON info BEING student"></label>

and doesn't handle any other cases.

If you add id attributes to your inputs and for attributes to your labels:

<input type="checkbox" id="id" "name="id" class="DEPENDS ON info BEING student"><label for="id">ID Number</label>

and in FormManager.js add this to the end of showEl() and hideEl() (inside setupDependencies()):

var id = this.id, labels = document.getElementsByTagName('label'), l = labels.length, label, i;
for (i = 0; i < l; i++) {
    label = labels[i];
    if (label.htmlFor == id) {
        label.style.display = 'none'; // 'none' for hideEl, '' for showEl
    }
}

it should work.