Help me-i can't figure out this nesting thing!

HTML-CSS
#1 
<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>

Ok, so I do not get a THING! This is what they’re telling me to do:
image
These are the requirements:

The existing input element should be nested within a form element.

Passed

  1. Your form should have an action attribute which is set to https://freecatphotoapp.com/submit-cat-photo

  2. Your form element should have well-formed open and close tags.

  3. The existing input element should be nested within a form element.

If ANYONE can help, you are a lifesaver!
Have fun and stay safe!
-calamities101
(no, fr this is a rl calamity!)

1 Like
#2

Hey there @calamities101!

Nesting is a way of putting smaller child tags such as <input> into larger parent tags such as <form></form>

In this case you need to create a form element and then cut the <input> that’s already there. Putting the input into the form is called nesting and will make the code easier to read while allowing you to add more inputs into the form. BTW what I mean by putting the <input> in the form is to put it between the two <form> tags.

<main> 
<h1>Nesting into the main</h1>
<p> This is an example of nesting</p>
</main>

Happy Coding!
Best,
Cy499_Studios

#3

thanks! I did what you recommended but I’m not sure what I’ve done wrong. here’s my code so far:

<form action="https://freecatphotoapp.com/submit-cat-photo" type="text" placeholder="cat photo URL"></form>>
</main>
#4

You’re almost there @calamities101!

The input can’t be applied to the form, the form needs to be the main tag for the input while the input stays inside the form,

<form (add actions here)>

add other things such as content and inputs here

</form>
1 Like
#5

Hi there,

As @Cy499_Studios says,

They gave you an example using <main></main> but you should nest the <input> inside the <form>. <form> is the parent element, <input> is the child.

I hope this clears it up for you.

#6

Thank you so much!

Happy Coding!
Warmest wishes, @calamities101

#7

Thank you so much!

Happy Coding!
Warmest wishes, @calamities101