Create a form element and nest the input element into a form element

Tell us what’s happening:

I am lost

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">
</main>
<form action=https://freecatphotoapp.com/submit-cat-photo></form>

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 12_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/78.0.3904.84 Mobile/15E148 Safari/605.1.

Challenge: Create a Form Element

Link to the challenge:

Nest the existing input element inside a form element

To nest something means to place it inside of something, so you want to place the existing input element inside a form element.

Click the “Reset All Code” button to start over. Do not move any of the existing code. You are just going to add the form element so that the input is nested inside of it.

So any ideas on how to go about it like after i press my reset button wha should i do next

Let’s see what you have tried. Please post your updated code here.

Screenshot 2020-11-26 at 21.19.26

i am doing this and still not working

HI @pattanyshreena!

Since you already have an open topic please reply there. It is going to get confusing if two people are sharing their code in the same thread.

We would be happy to help you in your topic.

Thanks!

Still getting the same result

Wrote it like the one above you

Are you there? Well wha I meant was i wrote the same code that i wrote before is there anything wrong with it?

To be honest, I have no idea what your code looks like now. You’ll need to paste it here so we can see what you have done. Don’t use an image. Paste the code right in this thread. First click on the </> icon at the top of the editor box you are typing in and then paste your code between the opening and closing triple backticks.

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">
</main>
<form action=https://freecatphotoapp.com/submit-cat-photo></form>

Here it is i tried it over and over again and it’s telling me same thing

I’m going to ask you, is the <input> nested inside of the <form> you added? It doesn’t look like it is to me. Nested means:

<form>
  <input>
</form>

You can add elements, such as a <form> to the existing code.

So if i add this “” the code is gonna run yea?

Hello,

Basically the exercise calls for nesting the <input> inside the <form>, which means you have to put the preexisting input element that is already present in the code inside the <form> element (which you have to write yourself based on the instruction, and it seems like you have added in your solution) as the content of the form. For that you can Cut the preexisting code and Paste it inside the form element. This is the part you have to put inside the form.

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

(Basically just replace that line with the whole solution form, and not at the end of code like you have currently added yourself, as your solution should be inside the main element)

You have to put that part inside the form code that you wrote yourself, so the solution would look something like this:

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

As you can see here the input element is nested inside the <form> and </form> tags. The form element can be a little confusing at first, but you will get used to it. Hope that helps.

Thanks gonna try it now

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

You can post solutions that invite discussion (like asking how the solution works, or asking about certain parts of the solution). But please don’t just post your solution for the sake of sharing it.
If you post a full passing solution to a challenge and have questions about it, please surround it with [spoiler] and [/spoiler] tags on the line above and below your solution code.

Hello @jwilkins.oboe

I am really Sorry, as I am new to this forum and was not aware of this while answering the question, I will keep this in mind from the next time before answering, Thanks.

1 Like

Yo I tried it again and it didn’t work

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