Check Radio Buttons and Checkboxes by Default 3

HTML-CSS
1

Tell us what’s happening:
Unsure of how to complete this lesson. Been stuck on it since last night.

Your code so far


<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default/

2

Hi LBDemaree!

This lesson is just saying that you can automatically check a checkbox or radio button. So when the webpage loads it is already checked.

All you have to do is type the word checked inside the input tag for your first checkbox AND your first radio button.

Example:

<input type="checkbox" name="example" checked>

3

Could you please give a more in depth explanation, @isaacwoodruff? I have a hard time understanding things, as I have a learning disability, sadly. That’s why I’m trying my best to learn coding, remember how to do it, and learn the best I can.

1 Like
4

I’m sorry to hear that. It can be hard to grasp concepts in the beginning. But you’ll get there!

First off, are you familiar with the checkbox or radio button input types?
If you are not then you should repeat the two previous lessons to understand what they are and how you make them.

If you are familiar with them, read on.

The purpose of this lesson is to learn about the checked attribute.

What the checked attribute does is automatically check a checkbox or radio button.

So for example this will load an already checked checkbox and radio button:

<input type="checkbox" name="example" checked>
<input type="radio" name="example" checked>

Notice the checked attribute at the end of the input tag.

The following code will load an unchecked checkbox and radio button:

<input type="checkbox" name="example">
<input type="radio" name="example">

Notice the difference between the two sets of examples.

You should try using the checked attribute in your lesson now.
I hope this makes things clearer for you!

1 Like
5

<h2>CatPhotoApp</h2>

<main>

<p>Click here to view more <a href=“#”>cat photos</a>.</p>

<a href=“#”><img src=“https://bit.ly/fcc-relaxing-cat” alt=“A cute orange cat lying on its back.”></a>

<p>Things cats love:</p>

<ul>

<li>cat nip</li>

<li>laser pointers</li>

<li>lasagna</li>

</ul>

<p>Top 3 things cats hate:</p>

<ol>

<li>flea treatment</li>

<li>thunder</li>

<li>other cats</li>

</ol>

<form action=“/submit-cat-photo”>

<label><input type=“checkbox” name=“indoor-outdoor” checked>Indoor</label>

<label><input type=“radio” name=“checked”> Outdoor</label><br>

<label><input type=“checkbox” name=“personality” checked> Loving</label>

<label><input type=“radio” name=“personality”> Lazy</label>

<label><input type=“radio” name=“personality”> Energetic</label><br>

<input type=“text” placeholder=“cat photo URL” required>

<button type=“submit”>Submit</button>

</form>

</main>

It said I almost had it right. What am I doing wrong for the first box?

6

You have changed the name attribute to have the value "checked", instead of adding the new attribute checked. You did it correctly for the checkbox, just not for the radio-button.

You have this for the checkbox:

<label><input type="checkbox" name="indoor-outdoor" checked>Indoor</label>

You have this for the radio-button:

<label><input type="radio" name="checked"> Outdoor</label><br>

Can you spot the difference?

7

I see that the bottom one for the radio has:

<label><input type-“radio” name=“checked”> Outdoor</label><br>

And that the checkbox one doesn’t.

8

I want to try and help you without just giving you the answer, let’s see if I can.

This is how the radio button looked originally, before you made any changes:

<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

And this is what you have now:

<label><input type="radio" name="checked"> Outdoor</label><br>

Can you see that you change what the name is equal to? The name value should still be the same as it was originally (name="indoor-outdoor"). So let do that first.

OK. Now we are back to the original code again:

<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

So where are you supposed to put the checked attribute on this element? Look at your code for the checkbox again, where did you put the checked attribute on it?

Lets compare the two:

<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="indoor-outdoor" checked>Indoor</label>

What is the radio button missing that the checkbox has? Look at the blue text that is the attributes.

9

I’m sorry, @lasjorg, but I don’t understand, exactly. I’ve tried to understand it, but, it’s all confusing my brain right now. I have been stuck on this one since last night, and I am having trouble figuring it out.

10
  1. Change the radio button with the Outdoor label back to this.
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  1. Add the checked attribute to it, it is an empty attribute and looks like this.
<label><input type="radio" name="indoor-outdoor" checked> Outdoor</label><br>

I would suggest something you might not like at first. When you get this to pass, reset the code and do it again. Click the “Reset all code” button, don’t worry it is just for the one challenge not all of them.

Repetition is vital. In fact, I would suggest trying to go back to other challenges you have already completed and doing them again. Remember to take breaks, do something else and then come back with fresh eyes.

11

How do I go back to the very first lesson? I’m new to this site, as I’ve learned about it yesterday from my professor in college, and I’ve been going through lessons, not thinking about downloading the lessons to remember how to do them.

12

If you go to the page https://learn.freecodecamp.org it will list all the challenges. But you can’t really download them, you can copy the code and save it to a file if you want.

Also, if it is only your second day don’t be surprised that it seems pretty hard right now. I mean how good would you be at speaking Japanese on your second day of learning it? Give it time. We all learn at different paces.

Some people learn better using physical interaction, try grabbing a pen and paper and write some of the simple challenges down. Maybe try taking some notes for each challenge.

I will reiterate that taking breaks is very, very important. Try going for no more than 30 minutes then force yourself to take a break for at least 5 minutes.

1 Like
13

Alright. Thank you so much!

And I will. I’m actually about to call it a night from doing coding so I can get to bed early tonight. I am tired, and all of this coding is making me sleepy.

14

Sleep well, soon you will be dreaming about code. Sounds far fetch? Trust me at some point it will happen, your brain will start to work on problems when you sleep. It can be both fun and a bit annoying. :slight_smile:

15

Thanks, but insomnia kicked in. I took a short nap this afternoon, and seeing as it’s almost 9 at night here, I can’t sleep at all. I hate insomnia, but I guess that’s my brain telling me to learn code again, lol.