Learn HTML by Building a Cat Photo App - Step 58

HTML-CSS
1

Tell us what’s happening:

Why after for attribute Lowercase is very imp if write same with uppercase for ex-Lazy why is that error can anyone please explain me this?

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</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>

<!-- User Editable Region -->

            <input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
              <input id="lazy" type="checkbox" name="personality"> <label for="Lazy">Lazy</label>
            

<!-- User Editable Region -->

          </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/128.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 58

2

ids are supposed to be lowercase. But the word Lazy is what the programmer wants to write next to the button. That’s the programmer’s choice. So to satisfy the test, you should do what the instructions say.

3

Then instruction and default rules are correct right?

4

I’m not sure I understand your follow-up question. Can you rephrase or add more details to it?

5

Yea the instructions are right. But like hbar1st said the case is important.

When making a label for reference you are referencing the name.

If they don’t match the label for is not going to know where it is referencing. For example if you have name=“example” and have label for=“Example” they are not the same at all. And this would not find the value required.

6

I mean the instruction says lowercase and u mentioned usually ids are written in lowercase so both are same right, the default rule and instruction given.

1 Like
7

yes, correct. The fCC exercise will never ask you to use uppercase in the id attribute.

3 Likes
8

Can u further explain that example a bit.

9

hey ,thanks for the help.

1 Like
10

Of course. Apologies I didn’t see the reply come in.

In the example I mention the value example and Example are 2 entirely different values.

This means if you want to reference the value reference in the name attribute you should also reference it in the same case on the label for=“example”.

By doing this it picks up that you are meaning the correct name and label for values.

I hope that clears up my meaning.

Good luck going forward.