Learn HTML by Building a Cat Photo App - Step 48

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

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>
        <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">
          <label><input name="" id="indoor" type="radio"> Indoor</label>

<!-- User Editable Region -->

          <input type="radio" name="indoor-outdoor" id="indoor" value="indoor">
<label for="indoor">Indoor</label>

<input type="radio" name="indoor-outdoor" id="outdoor" value="outdoor">
<label for="outdoor">Outdoor</label>

<!-- User Editable Region -->

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

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 48

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Hello!
Welcome to the fCC forum
Next time you post, remember to add your what your issue is.

Try moving your input elements to after you label element, before the text ‘Indoor’ and ‘Outdoor’ as your input element should be nested in-between your label element opening and closing tag.
Example: <label><input>text</input></label>

4

Welcome to FFC forum. requirements for this step. You should nest the input element within label opening and closing tags.
Move your label opening tags before input element. And before text Indoor and Outdoor you need a space.
@spsiddheswar

5

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

<label><input name=" indoor-outdoor" id="outdoor" type="radio"> Outdoor </label>

Eventhough I code like you said It is said that it was a error .
If my assumption what right we need to add a name attribute with value indoor-outdoor inside the input element of indoor and outdoor .
Am I right?

6

You have an unnecessary space here, try removing it. Its in your second input element

7

@spsiddheswar also your first radio input have a space before closing > angled bracket.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.