Why isnt this nesting the input element?

HTML-CSS
1

Everything works, besides the first input not being nested?
I think I have misunderstood something about nesting?
Nesting means to include in an outer function right?
I’m completely new to this, thanks for the response in advance :slight_smile:

This is the part that doesn’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>

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

  

</main>

Your browser information:

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

Challenge: Create a Form Element

Link to the challenge:

2 Likes
2

pls can you state the problem

1 Like
3

I feel like the code should fullfil this requirement:
The existing input element should be nested within a form element.
but it does not?

I cant wrap my head around why

1 Like
4

Thanks for the reply btw :slight_smile:

1 Like
5

Hello @ITSYABOYHARY. You have done it almost correctly, but you edited the input tag which you should not. So, can you please reset your code and do the following?:

  • Create a form element and add an action attribute to it with https://freecatphotoapp.com/submit-cat-photo as its value.
  • Now, nest the existing input element inside the form element (do not edit the input element).

If you don’t understand nesting, I will explain:

<div>
   <p>Hello World!</p> // this is nested inside the div
</div>

In the example above, the p element is nested inside the div and it becomes the child of div. Notice that the p element is between the <div> and . When you do so, the p element is nested.

This is the exact thing you need to do in this challenge.

Hope you understand.

2 Likes
6

What your writing makes a lot of sense!
The example with div is super simple and I think I got the concept there is just something wrong in how I apply it.
I have made changes as you described but it seems to give the same result?

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

input type=“text” placeholder=“cat photo URl”>

2 Likes
7

Your opening form tag doesn’t have a > at the end. Also, you need a closing </form> tag after the input element to nest it.

1 Like
8

Oh sorry it seems that i did not copy the last part line :slight_smile:
The first for have been added >
This forum seems to remove the </form/> at the start and end can you see it?

<action=“https://freecatphotoapp.com/submit-cat-photo”

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

1 Like
9

When you post code here, please do the following:

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

1 Like
10

gotcha!

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

Looks like you did not understand the action attribute part. You need to add an attribute inside a tag!:

<form action="value">

Also, your input element does’nt have a < at the start:

2 Likes
12

You are so right about me not understanding the action attribute part.
This is what I’ve changed it to :slight_smile:

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

Tbh I do not really get why you want the input to be in <> brackets?

1 Like
13

Am i missing something before and after the input?

14

Idk man, i think there was a spelling mistake or something I copied what I already wrote and reset the code and pasted it in. It ended up looking like this

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

solution:
< form action=“https://freecatphotoapp.com/submit-cat-photo”>

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

< /form>
in solution just remove space after < form> and try
-------------------end of solution----

nesting means you are creating input element with in the form element
< form>
< some html element>
< /some html element>
< /form>
see the way the code is arranged “some html element” is within the form element.

< input> element doesn’t require closing tag.

the input your getting is a text box hence type=“text”.

the place holder is the text that informs what the user should input inside the text box. hence placeholder=“cat photo URL”

hope you understand feel free to ask for help.

Happy coding.

1 Like
16

The reason I told you to make the input to be inside <> is because it is a separate HTML element. For example, will you write the p element without <>? No, right? And you now know the reason.

You’re missing a " after the placeholder attribute’s value. But, you solved it in the latest code you provided.

Looks like your current code is correct and it passes for me. Please reply whether everything is solved for you or not.

Happy Coding!

1 Like
17