Learn HTML by Building a Cat Photo App - Step 61

HTML-CSS
1

Um, I am in Australia and I am a newbie to this.
I do not know step 61 so can someone help me please???

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">

<!-- User Editable Region -->

 <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" > Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving"> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic"> Energetic</label>
          </checked> </fieldset>

<!-- User Editable Region -->

          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6.1 Safari/605.1.15

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 61

1 Like
2

checked is not a valid html element name. checked is an attribute, to check a radio or checkbox by default you can add checked inside the opening tag of that input element

2 Likes
3

But I don’t know how to add the first checked.

4

It also says this:
Your first radio button, with the id set to indoor , should have the checked attribute.

5

The requirement says:



In order to make a checkbox checked or radio button selected by default, you need to add the checked attribute to it. There's no need to set a value to the checked attribute. Instead, just add the word checked to the input element, making sure there is space between it and other attributes.

Make the first radio button and the first checkbox selected by default.

checked as @ILM said is an attribute. So let’s start there. What’s an attribute?
You have other examples of it, already in

<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>

id="indoor" is an attribute to the element input.
type="radio" is an attribute to the same element input.
What is required then? It is asking to add a new attribute named checked which it will not have a value set to it, not like the examples and that it has to be inside an element named input. Which one? It says:

Make the first radio button and the first checkbox selected by default.

2 Likes
6

you need to add an attribute named “checked” to the first 2 radio buttons. An attribute is written inside the element tag. like <p class=“” id=“”>

7

So do I say name=“checked”
???

8

no, the attribute itself is “checked”

1 Like
9

What you wrote means an attribute named name with the value checked.
Just checked without a value. Just the word alone, inside the element where the first radio bottom is.

2 Likes
10

But I still don’t get it, could someone just please give me the whole code???

11

Instead of giving you the code, it’s better for you to figure it out alone. don’t hesitate to google " html checked attribute"

1 Like
12

If I were to give you the whole code, I will be doing you a disservice and preventing you from learn it. It is the effort what it makes you learn and understand.
Be patient and go through the message again if you must. Try again and post what you try.

2 Likes
13

I did google it but it is confusing

14

HTML checked Attribute.

I used this web

15

Let’s try this:
I give you the following element:

<label><input>Enter something</label>

And I ask you to add the attribute type with a value of radio in the element input, where would you place it?

1 Like
16

To make the first radio button and the first checkbox selected by default, you need to add the checked attribute to the respective input elements. Here is the modified code:

Is your cat an indoor or outdoor cat? Indoor Outdoor What's your cat's personality? Loving Lazy Energetic

In this updated code, the checked attribute has been added to the first radio button (id="indoor") and the first checkbox (id="loving"), making them selected by default.

17

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.