Label and input elements association

[wanyagi]

Hello.

I find myself a little bit confused and i need some clarity.

I am new to coding, and through out my lessons, i’ve had instructions of nesting an input element in the label element and in other cases, placing the input element after the label element.
So here’s my question(s) :

-When do i use the fisrt option rather than the latter and vis versa ?
-What is the difference between the two formats ?
-For syntax sake, which one is appropriate or are they the same regardless the nesting or the non-nesting ?

Thank you for your time.

[drummer]

Technically speaking, there is no difference between the two ways of handling the form fields - it will work both ways, as long as you set the id for the input element and connect it with the label element using the “for” attribute. Usually, I use it like this:

<label for="nameField"><Enter your name:</label>
<input type="text" id="nameField" />