# How do I add the label element with for attribute

**URL:** <https://forum.freecodecamp.org/t/how-do-i-add-the-label-element-with-for-attribute/519954>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [June 20, 2022, 1:35pm UTC](https://forum.freecodecamp.org/t/how-do-i-add-the-label-element-with-for-attribute/519954 "2022-06-20T13:35:11Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![yschlack](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/yschlack/32/267174_2.png) [@yschlack](https://forum.freecodecamp.org/u/yschlack)\
**Post date:** [June 20, 2022, 1:35pm UTC](https://forum.freecodecamp.org/t/how-do-i-add-the-label-element-with-for-attribute/519954/1 "2022-06-20T13:35:12Z")

</div>

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

```
  **Your code so far**

```

```html
<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <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 for="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/102.0.0.0 Safari/537.36`

**Challenge:** Step 55

I can’t figure out what’s wrong. I’ve tried:

```auto
<input id="loving" type="checkbox"> <label for="Loving"></label>

```

And says: The new `label` element should have a `for` attribute with the value `loving` . You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks.

And then I try:

```auto
<input id="loving" type="checkbox"> <label for="loving"></label>

```

And says:  
The text `Loving` should be nested within the new `label` element. You have either omitted the text or have a typo.

I’m not sure if that’s a case-sensitive error or if it’s just I’m having the code misspelled.

Any ideas?

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-55)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [June 20, 2022, 2:15pm UTC](https://forum.freecodecamp.org/t/how-do-i-add-the-label-element-with-for-attribute/519954/2 "2022-06-20T14:15:31Z")

</div>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (`</>`) to add backticks around text.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (’).

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [June 20, 2022, 2:18pm UTC](https://forum.freecodecamp.org/t/how-do-i-add-the-label-element-with-for-attribute/519954/3 "2022-06-20T14:18:32Z")

</div>

The second one is right, but you need a text in there, inside the `<label></label>`. That is where the text goes that will show on the screen.

---

<div class="post-metadata">

**Author:** ![yschlack](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/yschlack/32/267174_2.png) [@yschlack](https://forum.freecodecamp.org/u/yschlack)\
**Post date:** [June 20, 2022, 4:04pm UTC](https://forum.freecodecamp.org/t/how-do-i-add-the-label-element-with-for-attribute/519954/4 "2022-06-20T16:04:42Z")

</div>

I’ve solved it by adding the text inside `label`.

I think my problem was not understanding exactly what the `for` attribute was doing. I had issues understanding the given description.

I realized it recalls the `id` from the `input` and you need to name it with the same name (case-sensitive).

Thank you so much!

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [June 20, 2022, 5:56pm UTC](https://forum.freecodecamp.org/t/how-do-i-add-the-label-element-with-for-attribute/519954/5 "2022-06-20T17:56:34Z")

</div>

Yeah, there is so much information, it is hard to keep track of it all and absorb new things. I would get in the habit of googling new things when you encounter them. Professional developers are googling things all day, for the same reason. MDN is a great reference site for these kinds of things.

---

<div class="post-metadata">

**Author:** ![mattinglylianna518](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mattinglylianna518/32/289913_2.png) [@mattinglylianna518](https://forum.freecodecamp.org/u/mattinglylianna518)\
**Post date:** [October 25, 2022, 6:10pm UTC](https://forum.freecodecamp.org/t/how-do-i-add-the-label-element-with-for-attribute/519954/6 "2022-10-25T18:10:31Z")

</div>

I don’t understand where the for attribute goes. I’m having a really hard time understanding where things separate and where certain punctuation goes on this one

---

<div class="post-metadata">

**Author:** ![JeremyLT](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jeremylt/32/291894_2.png) [@JeremyLT](https://forum.freecodecamp.org/u/JeremyLT)\
**Post date:** [October 25, 2022, 6:44pm UTC](https://forum.freecodecamp.org/t/how-do-i-add-the-label-element-with-for-attribute/519954/7 "2022-10-25T18:44:14Z")

</div>

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the **Ask for Help** button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

---

<div class="post-metadata">

**Author:** ![JeremyLT](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jeremylt/32/291894_2.png) [@JeremyLT](https://forum.freecodecamp.org/u/JeremyLT)\
**Post date:** [October 25, 2022, 6:44pm UTC](https://forum.freecodecamp.org/t/how-do-i-add-the-label-element-with-for-attribute/519954/8 "2022-10-25T18:44:18Z")

</div>

Closed on October 25, 2022, 6:44pm UTC