Learn HTML by Building a Cat Photo App - Step 43

HTML-CSS
1

Tell us what’s happening:

This question is twofold:

  1. What is the point of adding a type attribute to a submit button that already is labeled and functions as a submit button?

  2. How is this even done? The instructions are super vague and trying to mimic the code I find on Google is NOT working at all.

type=“submit”><Submit
type=“submit”>Submit
type=“submit”<Submit
type=“submit” Submit

…are all apparently wrong

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/126.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 43

2

The instructions already answered your first question:

The button you added will submit the form by default. However, relying on default behavior may cause confusion. Add the type attribute with the value submit to the button to make it clear that it is a submit button.

They don’t want you to rely on the default behaviour in case the browser doesn’t act as expected. So being explicit is better.

For how to add an attribute called type with a value of submit, well it is exactly like how you would add any other attribute (think of every attribute you have learned so far like href, src, alt, id, etc)

They are all added into the opening tag and they are all added with the name of the attribute first folllowed by an equal sign and followed by the value in double quotes.

(I noticed you seem to be changing the direction of the angled brackets for some reason? You should never need to do that. All html tags start with a a < and end with a >)

1 Like
3

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