What is the difference between nesting label inside input and nesting input inside label?

The tutorial is in the 21st video of responsive web design. I want know the difference between nesting label inside input and nesting input inside label?

You can’t nest a label element inside an input element. The input element is a empty element, it does not take any content.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

can u please explain me what they did here?
here is the link: Learn Basic HTML and HTML5: Create a Set of Radio Buttons | freeCodeCamp.org

I’m not sure what you are asking here. What specifically do you need an explanation of?

In the second example they wrote tag after the input tag. Seems like they wanted to nest that label tag inside input tag. Can I really nest label tag inside input tag? If I can what’s the difference between nesting label tag inside input tag and nesting input tag inside label tag.

No, you can’t put anything inside an input tag.

You can put an input tag inside a label, and the label will be automatically associated with that input. That means when you click on the label, it focusses the input.

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

If you don’t put input inside the label, then you give the input an id, then use the for attribute on the label to tell the browser that it’s associated with that input

<input id="name" type="text" />
<label for="name">Enter your name</label>
1 Like

Okay, now I get it. Thank u soo much.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.