Creating the Form Element

HTML-CSS
1

Here’s what I get from the “Get a Hint” page:

Problem Explanation

A <form> is an element used to gather information directly from the user’s input. When you use this HTML element you are identifying a section used to collect the user choices.

Inside this HTML element, you might insert a few input tags, used to collect data in different ways based on the type attribute.

All of this data will be sent to the page specified in the action attribute of the form. This is simply a relative path that indicates the page that expects to receive this data.

In this challenge, you already have an input element. All you need to do is wrap a form tag around it. Do not forget the action attribute. Use the value indicated by the challenge (doublecheck the syntax).

Good luck!

I followed the example and did add the required input but the output is telling me that:

" The existing input element should be nested within a form element."

Is the form element is <form action …?

  **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>
</main>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Challenge: Create a Form Element

Link to the challenge:

2

Hey there :wave:

Looks to me like you have created the <form> correctly, but what about the <input>?
Note the instructions:

Nest the existing input element inside a form element

And the starting code provides an <input>

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

Here, you have several <li> elements nested inside an <ul> element:

<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>

Here is an anchor tag nested inside a paragraph:

<p>Click here to view more <a href="#">cat photos</a>.</p>

Here is an example of a paragraph nested inside a div:

<div>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Now, it should be easier for you to figure out what it takes to nest an <input> element within a <form>, good luck :wink:

EDIT: sorry, i did not follow up on your code. You need to use the input format already present in the challenge, i suppose

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

Here’s the example :slight_smile:

"<form action="url-where-you-want-to-submit-form-data">
  <input>
</form>"

I just modified the example. Is the <input> required?
6

The “<form action…” line is what i added below the line.

7

Better click the “Reset All Code” button and start clean. Do not modify the already available input element, but wrap a form element similar to the way shown, only change the action url attribute to the one specified in the requirements. It should be a valid url address

8

I just reset the code and typed it in again. It worked. Thanks!

2 Likes
9

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