I couldn't figure out what nesting in a form element is!

HTML-CSS
1

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>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input>
</form>
<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>
<input 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.80 Safari/537.36 Edg/98.0.1108.50

Challenge: Create a Form Element

Link to the challenge:

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

The code you’ve provided is the starter code to the lesson.
The lesson gives a sample of how to nest an input element in a form element.
Rather than having an empty <input> like in the sample you are tasked with keeping the existing input element and putting form tags around it and using the URL provided for the action attribute.

Hope that helps.

3

Nesting means to enclose one HTML tag inside of another HTML tag. Think of it in terms of a container.

So, for example, say you want a list. You can use the ul tag for an unordered list. But that’s just the container, denoting that everything inside of the ul tag should be treated like a list. But you don’t just want an empty list, right? If you’re making a list, you’re gonna want actual list items. So you’d nest an li tag inside of the ul tag. So, in code, it would look like this

<ul> 
  <li>This is a NESTED list items </li>
</ul>

Say you have a box, yes? But you have a lot of small other small boxes that contain their respective items. You’d then enclose (or nest) all those boxes inside of the big box.

Your big box is the page itself, or the html tag if you’re being technical. Everything inside of the html tag is nested inside of it. It’s the main container. Your smaller boxes would be the respective sections of your page, and the items in the small boxes are the content for your website.

Hope that helps!

1 Like
4

Read the instructions again. What does it say?
Nest the existing input element inside a form element

What you have done here is the same as nesting, which basically functions as a container which contains other tags.

<div>
    <h4>Hello World</h1>
    <p>blah blah something</p>
</div>

In this case div is the container and <p> and <h4> are the elements in the container.

Whats wrong with your code is that you shouldnt create a new input element ,
Rather nest the existing element within the form tag.
Scan the page for the input element (which is somewhere at the bottom) and nest it inside (or put it inside) the form tags.

Hope this helped.

5

Thank you so much!

| krisb1220
February 14 |

  • | - |

Nesting means to enclose one HTML tag inside of another HTML tag. Think of it in terms of a container.

So, for example, say you want a list. You can use the ul tag for an unordered list. But that’s just the container, denoting that everything inside of the ul tag should be treated like a list. But you don’t just want an empty list, right? If you’re making a list, you’re gonna want actual list items. So you’d nest an li tag inside of the ul tag. So, in code, it would look like this

<ul> 
  <li>This is a NESTED list items </li>
</ul>

Say you have a box, yes? But you have a lot of small other small boxes that contain their respective items. You’d then enclose (or nest) all those boxes inside of the big box.

Your big box is the page itself, or the html tag if you’re being technical. Everything inside of the html tag is nested inside of it. It’s the main container. Your smaller boxes would be the respective sections of your page, and the items in the small boxes are the content for your website.

Hope that helps!

1 Like
6

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