The function of the label element in the forums elements?

Acutally i’m doing the challenges of the html responsive web desing , keek that in mind

What is the function of the label element in the forums elements?
Why should I wrap a label within an input element?

In the example that you could find down below , what would be the function or the utility of the label wraping the input element?
And what is the function of setting a label and an input with the same name or ID?

<input type="text" placeholder="cat photo URL" required>

<button type="submit">Submit</button>

<label for="indoor">

  <input id="indoor" type="radio" name="indoor-outdoor"> Indoor
  <input id="outdoor" type="radio"  name="indoor-outdoor"> Outdoor

It’s the label for an input. Say you have a text input for you name, then you might have a label saying “please enter your name here”.

When you click/tap/press the label, it will focus the input field.

So it means a user can see what the input is for (you write some text explaining it) and it also makes it easier to use (pressing the label means the input focuses, so the user can start typing).

To make the label’s focussing behaviour work, you give it a for attribute, whose value is the ID/name of the input the label is connected to.

You can avoid needing to do this by putting the input element inside the label element.

1 Like

Radio buttons normally indicate a set of options that all relate to the same thing (“what colour is your cat? Is it pink, green or orange?” It can only be one of those colours). So you give all the buttons the same name but different values, they’re one thing.

1 Like

I get it now

1 Like

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