Learn HTML by Building a Cat Photo App - Step 43

HTML-CSS
1

Tell us what’s happening:
i am unsure of how to input the type attribute correctly

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"</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/111.0.0.0 Safari/537.36

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

Link to the challenge:

2

You should add the attribute the same way as it is added into the input element. The difference is that you add the attribute and its value into the opening ‘button’ tag. Pay attention to the first letter of the attribute’s value. It is not the capital letter.

3

Hey! A word on that.
Attributes, and elements too, are case insensitives, meaning you could write type=“SuBmIt” if you want. But apparently it is advised to use lowercases letters. For obvious reasons :smile:

4

It is Ok for someone who is experienced and already knows about those little nuances. For the complete beginners it is not the case. That is why the instruction explicitly says: " Add the type attribute with the value submit to the button to make it clear that it is a submit button."

Many mistakes posted on the forum, are solely due to not reading the instruction carefully.

5

Yes, you are right. I just thought of that nuance as a fun fact. A cool thing to know!
Good luck to you both in your coding adventures :wink:

1 Like
6

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