Nesting label elements for Radio Buttons

1

Tell us what’s happening:

Does it matter if the label elements for the radio buttons are nested inside the form element? It seems to work either way whether there nested inside the form element or outside beneath it.

Your code so far

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</form>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (X11; CrOS x86_64 9901.66.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.82 Safari/537.36.

Link to the challenge:

2

The indents are for the people who read the code I believe.

3

Thanks. I get that indenting make it easier to read and tell whats going on. I was mainly wondering whether it’s supposed to be like this: (label elements nested inside the form element)

53 AM

4

Or like this: (label elements outside and beneath the form element)
42 AM

Both seem to work just fine. The code appears to produce the same thing and both solutions seem to allow you to advance to the next exercise. I was just wondering which of these ways was considered best practice.

1 Like
5

Definitely the first one. This is just off the top of my head as a reaction to your code (I don’t know the answer myself) but in a real life form, would your radio input types be sent to the server since they are outside of your form? The code might pass the test because it’s just looking to see if you have all the elements you need, but I don’t know if that code would necessarily do what you might expect.

1 Like
6

Thanks! That makes sense. That was my first inclination, but I happened to notice that it worked both ways so I started wondering.

1 Like
7 
Hi guys. I've just started learning HTML and was going through the FCC tutorial.
I could really use some help to understand label elements

You get the same output below just with the <input>element. 
Why do we need to Nest it within a <label> element?
Is that the standard practice? Or is there some other reason why its done this way?

<form>
 <label>
  <input type="radio" name="indoor-outdoor">Indoor
 </label>
</form>
8

it is so that the text inside the label is linked to the input element - you can select the checkbox/radio button by clicking on the label too, and it makes it easier for screen reader users to understand what’s on the page

9

@ILM : Thanks for your response :slight_smile

I thought the text inside the input element (‘Indoor’, in my case) was already linked to the input element

The user still views the same output, either with or without a label element.Output

10

With_label

11

Without_label

12

stop using backticks everywhere and you may even show your images

input is a self closing element, can’t have text inside, it doesn’t have a closing tag.
so if you want to link text with it you need to use a label element and give to the label a for attribute set to the id of the input

if you have a label you can also click on the text to select the button

1 Like
13

Makes sense. Thanks :smiley:
I learned something new. I didn’t know that you can click on both the text and button using the label element. Since the input element is self closing, it makes sense now to nest it within a label element.

I created my account here a couple of hours back. Still figuring out how to (or how not to) use the backticks :confused:

14

when you have code, use the backticks so that it stay formatted correctly and it is not rendered on the page if it is html

otherwise don’t use backticks