Stuck on HTML Cat photo, nesting part

Tell us what’s happening:

  **Your code so far**

<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></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="https://freecatphotoapp.com/submit-cat-photo" input="text" Placeholder="photo">
</form>
</main>
  **Your browser information:**

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

Challenge: Create a Form Element

Link to the challenge:

<form action="https://freecatphotoapp.com/submit-cat-photo" input="text" Placeholder="photo">
</form>

You’ve got a mess of little problems here, but it boils down to a 2 things to fix.

First of all, your “input nested in a form” is malformed. This was the example you were given:

<form action="/url-where-you-want-to-submit-form-data">
  <input>
</form>

The spacing doesn’t matter, but you have tried to put your input inside your opening form tag, somehow. We can fix that by adding two characters.

The other problem is the input - you were told to use the existing one, but you’ve changed it significantly.

When I fix those, it passes for me.

hi kevin, i have been stuck on this for a day now. I know i went wrong when i deleted everything and just wrote what i could remembered. thanks for you help.

i tried the things you have told me, but it is saying i am stuck on; the existing input element should be nested in a form element. i cant get the first bit right!

Why don’t you show me what you have now.

A lot of people get tripped up on the word “nested”. It just means “surrounded by” or “wrapped in”.

Here is a p element:

<p>Howdy</p>

There is a p element nested in a div:

<div>
  <p>Howdy</p>
</div>

Note that the spacing and the lines don’t matter - this is the same:

<div><p>Howdy</p></div>

This would be an input nested in a form:

<form>
  <input>
</form>

Of course it could also be:

<form><input></form>

or any other combination.

You just need to make sure that they have the right attributes.

Hi Kevin, ok I posted were i am at now, i may have the first line wrong?

I don’t understand what you mean “I posted where I am now”. We can’t se what you are doing in the challenges - that is stored in your browser. You’d have to cut and paste it into your reply.

  • flea treatment
  • <li>thunder</li>
    
    <li>other cats</li>
    

    <input"text">

    <h2>CatPhotoApp</h2>
    
    <main>
    
      <p>Click here to view more <a href="#">cat photos</a>.</p>
    
      <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></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>
    
    <form action="https://freecatphotoapp.com/submit-cat-photo">
    
    <input"text">
    
    </form>
    
    </main>
    

    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.

    See this post to find the backtick on your keyboard.
    Note: Backticks (`) are not single quotes (’).

    <form action="https://freecatphotoapp.com/submit-cat-photo">
    
    <input"text">
    
    </form>
    

    This is the right basic format. But the instructions said to use the prexisting input - not create a new one - that is not even a valid input.

    The original looked like this:

    <input type="text" placeholder="cat photo URL">
    

    If I fix (restore) the input, your code passes for me.

    Ok thanks for your patience Kevin. I will give it a try now.

    I’ve tried it but still not working. I have no idea what i’m doing wrong?

    Please show me your form element - I can’t help with what I can’t see.

    <h2>CatPhotoApp</h2>
    
    <main>
    
      <p>Click here to view more <a href="#">cat photos</a>.</p>
    
      <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></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= "https://freecatphotoapp.com/submit-cat-photo"> <input type"=text" placeholder="cat photo URL">
    
    </form>
    
    </main>
    

    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.

    See this post to find the backtick on your keyboard.
    Note: Backticks (`) are not single quotes (’).

    Every thing is correct but you have a typo here. You’ve switched the " and =. When I switch those two characters, it passes for me.

    I just switched them around and i passed it! Thank you do much Kevin for your help.

    1 Like

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