Learn HTML by Building a Cat Photo App - Step 38

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

Hey wonderful community,

Here is my code and some extra information about the exercise and a hint to solve it.

I don’t know how exactly to solve this.
Can you explain me how to do this and give me some background information about the topic we’re dealing with?

I do hope that you are having a good day so far!

The exercise is about:
"There are many kinds of inputs you can create using the type attribute. You can easily create a password field, reset button, or a control to let users select a file from their computer.

Create a text field to get text input from a user by adding the type attribute with the value text to the input element."

The hint is:
“form element should only contain the input element. Remove any extra HTML elements or text between the form element’s tags.”

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <input <type="text"> >
        </form>
      </section>
    </main>
  </body>
</html>

Your browser information:

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

Challenge: Learn HTML by Building a Cat Photo App - Step 38

Link to the challenge:

2

form element should only contain the input element. Remove any extra HTML elements or text between the form element’s tags.

3

This is your form.

Is your input element valid? It doesn’t look like any of your other elements.

4

An HTML element is defined by its opening (and in most cases closing) tags, which are enclosed in < and >. You do not need these characters inside your element, around the attributes.

5

The form element passed the test before I added the input and type element.
Plus I didn’t understand how to place the text element in it.

Thank you for replying so fast.

6

The instructions say

adding the type attribute with the value text to the input element

How did you add a target attribute to the a element? How did you add the href attribute to the a element? How did you add the src attribute to the img element? How did you add the action attribute to the form element?

You need to add the type attribute to the input element the same way.

2 Likes
7

Solved it.

I love the way you described that without giving me the solution right away.
Thank you so much!

Have a wonderful evening or day wherever you are.

2 Likes
8

Understood you after I solved it.

Thank you so much for replying so fast and describing it.
Have a wonderful day or night!

1 Like
9

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