Create a Form Element, help

HTML-CSS
1

Tell us what’s happening:
I have had 2 people try to explain this to me but i just cant get past it, can someone please just type me what i need to code to get past this and continue my progress. I have been stuck here all morning.

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://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>

  <form action="/submit-cat-photo"></form>
<main>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/create-a-form-element/

HTML
HTML993×431 52.1 KB

1 Like
2

So you’re REPLACING the input field with a form element. The test is asking you to NEST the input field WITHIN a form element.

See how all the <li> tags are nested in the <ul> opening and closing tags? That’s what they mean by nested. That element resides within its parent element. So put the input element inside the form element, between the opening <form> tag and the closing </form> tag.

3

so would i put inside of a ?

4

<input action="/submit-cat-photo">

5

inside of a <form> ?

6

So revert to the original code of the page (use the Reset all Code button). Now, you’ll see an input at the bottom of the HTML editor. That input should be wrapped with <form> and </form>.

The form element becomes the PARENT element of the text input. The text input is the CHILD element of the form, being nested (or contained) by it.

7

im so confused then, what about the submit-cat-photo, part

8

So the form element has an attribute, action, with the value submit-cat-photo. When you create those form elements, simply put any attributes in the OPENING (the first) tag. So, without giving you everything, you now have something like:

<form>
  <input type="text" placeholder="cat photo url" >
</form>

The input above has two attributes: type and placeholder. You want to add one attribute to form: action.

9

oh so you just add action="submit-cat-photo" . to that center line of code?

10

You add THAT line inside the <form> tag. The first line in my sample.

11

inputs don’t have actions. Generally, they don’t do stuff, they don’t go places, they don’t really have a life.

Forms, now… forms get out and about. They do things. They talk to servers and stuff. So forms have actions. :wink:

12

oh my gosh, so close. I am missing the middle check mark now. I have been working on this one part all day, i really appreciate the help.

13

I GOT IT, thank god. That took so long:joy::sob: thank you so much