Form element must be created

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>

<a href="#"><img src="https://www.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 action=/https://www.freecatphotoapp.com/submit-cat-photo<input type="text" placeholder="cat photo URL"></form>
</main>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36

Challenge: Create a Form Element

Link to the challenge:

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>

<a href="#"><img src="https://www.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 action="/https://www.freecatphotoapp.com/submit-cat-photo"><input type="text" placeholder="cat photo URL"></form>
</main>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36

Challenge: Create a Form Element

Link to the challenge:

3 hours of my life has passed and I still don’t get this thing right!!

Hello @georgie1
You have to type <form> and </form> around <input type="text" placeholder="cat photo URL"> and give <form> an action attribute that goes to the link: “https://www.freecatphotoapp.com/submit-cat-photo”.

Hi @georgie1 ,

A few notes you might consider, based on your written code on the <form>...</form> part:

  1. First of all, the <form>...</form> element is required to collect all user input data, regardless of the type of user input entry (e.g., radio buttons, checkboxes, text bar); the data collected is submitted to the URL specified in the action attribute; you may add the attribute target with a value “_blank”;

  2. For this challenge, to submit for instance, a cat photo URL, you need to create a Submit button using the <button>...</button>, so that the data entered in the text bar could be collected as a ‘form data’ and submitted to the form’s specified URL; the button must have the attributes type and value, and the button name specified like ‘Submit’ or ‘Go’ as an example; the value attribute is important so that it would be recognized as a ‘submit’ form of data and not default to a mere ‘on-off’ switch; lastly remove the forward slash before https, as I’ve noticed.

Hope this helps to keep you going…

If you read the failing message it tells you what is incorrect. It says
Your form should have an actionattribute which is set to https://www.freecatphotoapp.com/submit-cat-photo

Your action attribute is set to
/https://www.freecatphotoapp.com/submit-cat-photo

See the difference?

@josemari.mercader64, all that you’ve mentioned is out of scope of the lesson. Please only provide help that is relevant to the particular lesson.

with all due respect, it’s not out of scope if you would only read it again.

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