Learn HTML by Building a Cat Photo App - Step 43

Tell us what’s happening:

Why we need to write type=submit here.
Without this form will not submit?

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</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" name="catphotourl" placeholder="cat photo URL" required>

<!-- User Editable Region -->

          <button type="submit">Submit</button>

<!-- User Editable Region -->

        </form>
      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 43

1 Like

Hey.
Read through this post, for what you need to know about the input type submit.

3 Likes

Hey
I don’t quite understand what your question is but I think forms are actually used to post or get data from a database later on in your journey you will learn that a form takes two methods Post and Get
and in order for this to work we must use a button for the UI interactions like sending the information in the form to a database.
The button can be used for different interactions but there are two types that are specifically meant for forms i.e type =“submit” and type=“cancel” so when dealing with forms you have to specify which of the type that you intend to use,that’s why we need to specify the type of submit to allow the form to be submitted when you click,So for this challenge and an input with type of submit like so

<input type="submit">Text here

Hope you understand

2 Likes

Thank you everyone for reply and solve my doubt!

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