Nesting label elements for Radio Buttons

Nesting label elements for Radio Buttons
0

#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.


#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.


#6

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