Form action doesn't work

HTML-CSS
1

Tell us what’s happening:
I have tried to input the “form action” numerous ways…even cutting and pasting the answer from the community comments didn’t work. I’m stumped.

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

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Safari/605.1.15

Challenge: Create a Form Element

Link to the challenge:

2

You have multiple inputs and forms… that can’t be right.

And this orphaned code looks wrong…

I would back up and reset the code. You have added a bunch of things to this code that aren’t needed. You should only add a single form element around the existing input element.

3

The code shown above was my zillionth try — Is this another situation where I have to delete some lines of code to complete the current assignment???

I will reset and try again. Thats for the suggestion.

4

You don’t have to delete anything from the starter code. You should only add two lines to the starter code - one opening form tag and one closing form tag.

5

Sorry Jeremy - I’m feeling very dense - so I don’t need to put in the full url?

6

This is the starter code:

<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>
  <input type="text" placeholder="cat photo URL">
</main>

You need to add exactly 2 lines to this code. You need to add an opening form tag that is similar to the example and a closing form tag exactly like the example:

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

Make sure that you set the correct url in the action.

7

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>
8

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…

9

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

10

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.

11

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>
12

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

13

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 .

14

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.

15

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 .

16

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

17 
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>
18

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.

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

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

19

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

20

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.