Form action doesn't work

Below is what I entered - can’t see what’s wrong. Is it the missing indent for

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

Is this a line that you should add? Per the instructions:

Nest the existing input element inside a form element

You have added a brand new input element!

This is the original input element that you must wrap (put it between) the opening and closing form tags:


You added 3 lines…

Hi gaillane44, this one is a quick fix. The first line you have with the form tag, just delete that whole line as the line under that with the form action is all you need.

also, that very last line of code where you have the closing main tag , just delete the text you have after it and your good to go.

if your not sure you understand why your code didnt work just let me know and i will try and explain it better for you if i can.

Good luck

Thank you again. I followed the example. If I’m understanding you, I didn’t need to add anything to the previous lesson’s lines other than at the beginning and at the end.

Appreciate the effort, I won’t waste your time anymore. I’m not throwing in the towel, just will look for a website with a little different teaching style.

It really would help if you share your full code. You should add exactly two lines, where I added comments below. You have the right lines, you just need to put them in the right place.

This is the correct opening form tag:

This is the correct closing form tag:

This is where they go:

<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>
<!-- Add an opening form tag here -->
  <input type="text" placeholder="cat photo URL">
<!-- Close your form tag here -->
</main>

Yes I understand its frustrating at first because sometimes it adds the tag for you already but your not aware as the lesson is asking you to add the tag so you then have 2 of them.

Once your aware its doing that it gets better and you have a great forum here with lots of help available to you so id encourage you to stay.

But if you want to try something else then try this link below. This has helped me lots in the past and gives good examples

Thanks for the recommendation. I’ll give W3 a look. Right now, I’m making it a mission to just get to an answer. It is extremely frustrating that at some point the answer is not revealed. I usually can find my error once I can compare the good and the bad. Early I would get 2 out of 3 items correct. Onebad item that kept coming back with this message: Your form should have an action attribute which is set to https://www.freecatphotoapp.com/submit-cat-photo .

What is your full code right now?

Did you read my last post? You literally just need to copy two lines that you have already written into the original starter code for this challenge.

When I copy-paste those two lines you wrote into the correct place, everything passes for me.

Jeremy - I tried adding the open/close tags for forms to the code from the previous lesson . Then I failed all 3 tests for this lesson. I’ve attached my latest rendition that only failed 1 of the 3 tests.

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

This is the error message for the failed test:

Your form should have an action attribute which is set to https://www.freecatphotoapp.com/submit-cat-photo .

That isn’t your full code. It really, really, really helps if you share all of your code.

Here you have added three lines. You need to only add two lines of code.


You should only add the exact two lines I told you were correct:

Absolutely zero other code should be added.

The correct opening form tag (form action = .....) needs to be above the existing input element and the correct closing form tag (/form) needs to be below the existing input element. Putting the existing input in between the opening and closing from tag is what previous lessons called ‘nesting’.

This is everything I have: from line 1 to the last line (22)

<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>
    <input type="text" placeholder="cat photo URL">
    <form action="https://www.freecatphotoapp.com/submit-cat-photo"><input>
    </form>
</main>

I’ve edited your post for readability. 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 (’).

You need to make the fixes I pointed out above.

  1. remove the empty opening form tag you added

  2. remove the empty input element you added

  3. move the correct opening form tag above the correct input element

Thank you so very much - that worked. I am baffled as to how I would get to that from the example and no indication that the new copy would preceed the old.

I could hear your frustration but really appreciate the time/effort.

Good work getting there!

Example:

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

Instructions:

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.

Given code:

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

Final code:

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

I’m not sure how make those instructions clearer, but if you have any ideas, I’m all ears. It looks like straight line copy-paste of instructions into the example to me, but I’ve been writing code for a while.

If this helps - my logic was - you need to open a form before you can add an action - hence the extra line. Then there was that pesky “input” line in the example. Those were my two biggest issues that led me to try a multitude of variations. Hope this helps. Thanks again.

The input in the example was showing where the existing input goes though? And there wasn’t a lone <form> in the example?

Anyways, you got there in the end.

sorry instructions were not clear to me
no need to reply –

I’ve been looking everywhere for an answer to what I was doing wrong. Thank you so much for your comment! Your advice allowed me to continue on to the next lesson.

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