Learn HTML by Building a Cat Photo App - Step 40

HTML-CSS
1

Tell us what’s happening:
I’m stuck in the input function I don’t know how to do it

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">
0          <input type="text" name="catphotourl" cat photo url="">
0          <input type="text" name="catphotourl" cat photo url="">
0          <input type="text" name="catphotourl" cat photo url="">
0          <input type="text" name="catphotourl" cat photo url="">
0          <input type="text" name="catphotourl" cat photo url="">
0          <input type="text" name="catphotourl" cat photo url="">
0          <input type="text" name="catphotourl" cat photo url="">
0          <input type="text" name="catphotourl" cat photo url="">
0          <input type="https://freecatphotoapp.com" >
        </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/106.0.0.0 Safari/537.36 Edg/106.0.1370.37

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

Link to the challenge:

1 Like
2

You only need to keep one input element and add the attribute “placeholder” to it with a value of “cat photo URL” … it should look like this, for example:

<input placeholder="dog photo URL" type="text" name="dogphotourl">

the placeholder attribute is used to have a subdued text inside of a text box prior to the user inputting their own text.

3

I try that but the code don’t work and also

4

this looks wrong…

Please reset the step.
(click the reset button to change all of this back to what it was)

after this you will be presented with one line of code in the editor:
<input type="text" name="catphotourl">

You are to add a placeholder attribute to that one line of code.

Remember, an html attribute is just a key=“value” pair (just like type is an attribute with value of “text” for eg)

So add placeholder the same way you would add the type attribute

5

I don’t understand
I’ve try to replace the value of this but the refuse

6

which part did you not understand?

I hope you are able to click on the Reset button at least?

7

I did and I did as you said but the code still don’t work

8

okay, please post your new code here?

9

<input placeholder="https://freecatphotoapp.com" type="text" name="catphotourl" >

10

that’s my code

11

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

12

okay, you have a placeholder attribute now, that is a good step forward.
But you don’t have the proper value for it.
The exercise says:

Add the placeholder text cat photo URL to your input element.

So you should use the text they gave instead

13

I just try but it still no working

14

pls share new code pls

15

image
image922×36 5.63 KB

16

it’s still not working

17

I can’t test your code as you have posted an image.
Please post your actual code.

19

I can’t see it because you have not enclosed it in a code block.
Please take a look at the instructions I posted earlier

20 
 <input placeholder="cat photo URL" type="text" name="catphotourl">

I’ve try as you said but is not working