Form Element Help

Form Element Help
0.0 0

#1

action=’/submit-cat-photo

Hello. New Code student. question
Create a Form Element

Nest your text input element within a form element.
Make sure your form has an action attribute which is set to /submit-cat-photo
Make sure your form element has a closing tag.


#2

Post your code so that we can see what you did.


#3

Hi. Question? Looking back on front end coding, is hard when you first begin I find my self asking question all the time about learning code on freecodecamp. Working on The Cat Photo App, Having problems with Form Element for placement in code line. How do you learn code on freecodecamp ? With so many new problems that show up when you are new to Code…

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src='//discourse-user-assets.s3.amazonaws.com/original/3X/6/1/61a3499c5abb165be990aa0c1abd23342e60c663.jpg'></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">

#4

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

It does not appear you have added any new code to the existing challenge code. Do you understand what text field the challenge instructions are referring? If not, you might want to review a previous challenge on text fields (see below).

Once you know what a text field is, then you should use the one in the existing code and nest it into a form element (which you will need to create) and then give the form element an action attribute and set it equal to “/submit-cat-photo”. It is that simple.