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

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:

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


Go ahead, and push the RESET BUTTON:
image


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:

Screenshot 2022-03-30 8.32.58 AM


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.

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

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.

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

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.

top

The image on the right is raw code .

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.

Screenshot 2022-04-10 10.56.02 AM

Haha wow it’s the little things. Thanks :pray:t3:

1 Like

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.

This is a great website to learn.

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.

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

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

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