Learn HTML by Building a Cat Photo App - Step 42

Tell us what’s happening:
Where do I add the type attribute to the code? I get that it is after the button element though.

  **Your code so far**
<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <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" name="catphotourl" placeholder="cat photo URL" required>
        <button>Submit</button>
      </form>
    </section>
  </main>
</body>
</html>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0

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

Link to the challenge:

It doesn’t look like you added the necessary type attribute to the button. Do you have a specific question about this step? You’ve added many attributes to elements already, such as the action attribute to the <form> tag. It’s the same idea to add the type attribute to a button.

This part of the step instructions " You learned previously that the button submits the form by default, but you can explicitly add the type attribute with the value submit to make it clearer. Go ahead and do this to specify where this button should submit the form" is basically what is confusing me a lot…

Ya, it could be a little clearer as to why they are having you add this type attribute if the button automatically submits the form in the first place. It’s because it is better to explicitly state things in code than to rely on defaults, because someone else looking at your code may not know the default value. Or you may go back to your code a year later and forget what the default value is. So programmers have a tendency to want to make their code crystal clear so there is no possibility for confusion. Thus, since there is a type attribute then we should use it to make it perfectly clear that this button will submit the form when clicked.

Im really really sorry but this is making me more confused at the current moment…

Sorry about that. I guess you’ll need to explain what is confusing to you if you want a better answer.

Is there like a certain set up that there is supposed to be to get past this level? Like on how it is supposed to be like? Just not the answer? And I’m really sorry for making this more complicated then it is supposed to be.

I’m not exactly sure I understand your question. The instructions are asking you to do one thing: add the type attribute with value submit to the button. You have added a bunch of attributes to elements already, such as the action attribute on the <form> tag. They want you to do the same thing to the <button> except of course with a different attribute name and value.

I got it. Thank you so much for your help. I spent so long on it!

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