How to Create a Form Element on HTML

<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>
<input type="text" placeholder="cat photo URL">
<form action="https://freecatphotoapp.com/submit-cat-photo"></form>
</main>
  **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>
<input type="text" placeholder="cat photo URL"</input>
<form action="https://freecatphotoapp.com/submit-cat-photo"></form>
</main>

Please, anytime I tried to Run the Test above, am seeing “The existing input element should be nested within a form element”.
Please i need a solution on how to go about it.
thank you

Challenge link added by moderator:

It looks like you accidentally deleted the link to which challenge you are working on. That is important because it helps people help you.


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 (’).


It looks like you did not put the input element you were given inside your new form element (between the opening and closing tags).

1 Like

please, can you send me the full code?

Nope. We don’t do that here. I’m happy to clear up your misunderstandings about what I said was wrong with your code though.

Please, this is where am having challenge, have tried severally but no solution

<input type=“text” placeholder=“cat photo URL”

This is still the problem with your code.

I inputed it, still experiencing same thing

What did you change? What is your new code?

The above was the input element i was given
please i have been having this challenge for the past two days now

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

What is your full code after you have attempted to fix the problem I pointed out?

In your code, the input element is above the form element, not inside of it.


Again, we WILL NOT just write out the answer for you.

Just that am new to coding and am yet to comprehend some of the terms used here. I will keep trying it pending when i will get it. But it’s really frustrating me for the past two days now

You can ask more questions - the only thing I won’t do is write the answer for you.

Do you know what part of this code I highlighted is the input element?

Do you know what is the opening form tag? Do you know what is the closing form tag?

Is there another term in my description that you don’t understand?

This is what i was given:
Nest the existing input element inside a form element and assign "https://www.freecatphotoapp.com/submit-cat-photo" to the action attribute of the form element.

It looks like you aren’t replying to my post or really interacting with me at all.

I guess what I’m saying isn’t making any sense to you. Perhaps someone else will be able to explain what I’ve said in a way that you understand.

HI @Taiye !

Welcome to the forum!

Let’s take a look at the example FCC gave you so you can better understand what a form looks like.

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

You see how the input is inside the form.

That is important because on a real website, when a user clicks submit then all of the information on the form gets submitted and processed.

If you don’t have any thing inside the form then nothing will get processed.

Let’s take a look at the challenge

This is the existing input

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

You are supposed to use that.
Wrap your form tags around that.

<form action="URL GOES HERE">
EXISTING INPUT GOES HERE
</form>

Once you make that change then the test will pass

Make sense?

1 Like

Thanks a lot for your time, I do appreciate it.

Like I said earlier, am very new to coding and i don’t really comprehend some of the things you were saying concerning the input element given to me

jwilkins.oboe, thanks but i have done the above instruction you gave me before now, it’s working for me.

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

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

<input>

</form>

We’re getting closer

You need to delete this

Remember this is the existing input

You are supposed to place that inside the form tags.