Building a Cat Photo App - Step 43

HTML-CSS
1

Tell us what’s happening:
Hey, so I partially understand what I have to do but my problem is where to put the input with the button command. If I could at least get some guidance (NOT THE ANSWER YA WIMBLES) and possibly get back on track

Your code so far

<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="radio" name="Indoor"
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button>Submit <input type="Submit" value="Send request"</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS aarch64 15054.114.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hi!

Let’s look at the lesson instructions again.

Add the type attribute with the value submit to the button to make it clear that it is a submit button.

It does not mention adding an input here. But the lesson wants a type attribute with the value of submit added to the button element.

This is done with the same syntax as adding a link value to a href attribute.

Hope this helps!

1 Like
3

@EllaGriff So I understand that part, I just have no clue how to add a type attribute to the button

1 Like
4

So this is the syntax for adding attributes and values to any html element.

<element attribute=“value”></element>

When you add a attribute and value to an anchor element it looks like this.

<a href=“example.com”></a>

The attribute here is href and the value is example.com.

So to add a type attribute to a button with the value of submit, you need to follow this same syntax pattern.

Does that make sense?

5

all attributes are handled the same way in HTML

You add them to the opening tag of an element.
Right now your code is not correct, so adding a type attribute will not help.
You can pick between a <button> or an <input> but not both.

Then add your type attribute only if you have an input element.

6

A little. In my head the code would be <a type="submit>

7

no an <a is an anchor element for making links

an input element is this <input>

You add the type attribute to it. (within the brackets)
Then you add an equal then you add the value “Submit”

8

I don’t understand then

9

alright, here’s what I see when this step is restarted

        <button>Submit</button>

This is a button element.

They want you to add a type attribute to it and set its value to “Submit”
So all you have to do is

  • put your mouse next to the word button in the opening tag <button>
  • then add one space
  • then add the word type
  • then add an equal sign
  • then add the word “Submit”

Then check your work.

1 Like
10

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