Learn HTML by Building a Cat Photo App - Step 56

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

my brain is frozen

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox"><label>Loving</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Learn HTML by Building a Cat Photo App - Step 56

Link to the challenge:

This is your code:

Add the 'for=“smth” ’ attribute to the opening ‘label’ tag. “smth” is the same as for ‘id’ attribute in ‘input’ element. Add a blank space before “Loving” (put between ‘label’ tags):

<input id="smth"><label for="smth"> Text</label>
       <input id="loving" type="checkbox"><label for="Loving"> loving</label>

still not good
please help

Hey! If you look at the hint that shows up when you try to run your code, this is what it says.

image

So there are two things that you need change in your code.

  1. Add a for attribute to your label element.

the for attribute allows you to not have to nest the input element inside of the input element.

for example:
this is what you’ve been doing so far:

<label> Email <input type="text" /> </label>

This way, the label gets "connected to the input element automatically, but sometimes, you want to add your label element separate from the input element. This is where the for attribute comes in.

<label for="email" /></label>

<input id="email" type="text"/>

Both of these essentially do the same thing.

  1. You need to add a space between the two tags.

here’s an article, if you want to learn more about the label element.

Hope this helps! :smile:

Once again, before you make any changes, always look at the hint first to see if you can figure out the solution on your own.

  1. the value for the for attribute needs to be “loving” not “Loving”
  2. There should be a space between the two elements.

Please, pay attention to the details. You have typed in good values for the attributes but take a look at with what certain word starts: uppercase or lowercase.