I don't know how to nest an input element within a form element

[carloquesada68]

Tell us what’s happening:
Describe your issue in detail here.

  **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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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://www.freecatphotoapp.com/submit-cat-photo"

<input>
</form>
type="text" placeholder="cat photo URL">
</main> 

  **Your browser information:**

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

Challenge: Create a Form Element

Link to the challenge:

freeCodeCamp.org

[ALLESS]

This tutorial is a little Difficult to understand. I would like us to Start From the Beginning:

Go ahead, and push the RESET BUTTON:

THE TUTORIAL ASKS US TO:

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.

WE BEGIN HERE:

---

FIRST: Lets look at the two elements they are talking about here:

---

A <form> element and an <input> element.

---

NESTING means to put one element inside another element.

In this case, they are asking you to put an <input> element inside the <form> element.



THIS IS WHAT THAT STRUCTURE LOOKS LIKE:

---

This is What this looks like in Concept :

<form><input></input></form>

---

If you still feel confused by this lesson, or encounter and more problems, let me know, and we can go into more detail.

[carloquesada68]

Thank you so much for the instructions. I will input this now and see what results I get.

[carloquesada68]

I’m still having trouble with the lesson. I typed it in as you did in the email but it’s not taking the code.

[ALLESS]

Go ahead and copy and paste your most recent code in here, so we can look at it.

[carloquesada68]

[ALLESS]

hahaha… I meant to do this. But sometimes images help as well.

To share code, you can use the Preformatted text button.
This allows you to share the Source Code :

---

Just Paste your text in here, and select the code that you want to keep raw, and press the button.

The image on the right is raw code .

[ALLESS]

Accidentally put URL in CAPS

---

You did great. You followed everything very well. Make sure to look for little things like that in the future.

[carloquesada68]

Haha wow it’s the little things. Thanks

[ALLESS]

Learn to look for those little things, for those little mistakes…at first they will be somewhat invisible, But over time you will gain in proficiency, and it will get Easier.

[carloquesada68]

This is a great website to learn.

[carloquesada68]

It’s me again, I’m so close, the url in caps didn’t matter. It still says the exiting input element is not nested within a form element.

[lasjorg]

Edit: the placeholder text should not be changed. The correct placeholder is with uppercase URL, not lowercase url.

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

Please post the code and not images. Just copy and paste all the code.

---

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

[carloquesada68]

Awesome, now it worked. I will also start posting my code in the help section instead of sending images thanks.