Use the value attribute with Radio Buttons and Checkboxes Assigment

Tell us what’s happening:

  **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="https://freecatphotoapp.com/submit-cat-photo">
  <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
  <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
  <label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
  <label for="energetic"><input id="energetic" 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 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36.

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

2 Likes

The first failing test says:

One of your radio buttons should have the value attribute of indoor .

When I look at the corresponding radio button, I see no value attribute:

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

If I add in the correct value attribute, that test passes.

I suspect that if I do the same for all the inputs, they will all pass.

If you don’t know how a value attribute should look, there is an example in the description:

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

Does that help?

1 Like

not really i just started today so its hard to understand all of this codes but ill try my best and I appreciate the help thank you.

Well, we all had to start out somewhere. No one starts coding and knows it instantly.

OK, so, can you see the example that was given in the problem?

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

Can you see where there is value="indoor" inside the input element? A simplified version would be: <input value="indoor"> This is removing the other attributes and just leaving the value attribute.

Don’t remove the other attributes, but make sure that your input elements all have value attributes with corresponding values. The description and the test outputs will help you to know what to use.

If this is not clear, please state clearly what is tripping you up. In general, the more specific the question, the better the answers in quality and quantity.

6 Likes

Thank you for taking your time to help me I think I understand it all I just have one question. What is a value attribute and how do I do it?

We help people out here - that’s what we do. You’ll be doing it yourself in no time.

An attribute is information that we pass to an element. In the input example given in the description of the problem:

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

This input has four attributes" id, value, type, and name. They are give the values of “indoor”, “indoor”, “radio”, and “indoor-outdoor” respectively.

For this challenge, you need to:

Give each of the radio and checkbox inputs the value attribute. Use the input label text, in lowercase, as the value for the attribute.

So, for the first one:

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

The input only has id, type, and name attributes. You need to add a value attribute. It should match the label text. In this case the label text is “Indoor” - convert it to lowercase and use it as your value.

Do this for each input element.

If you run into trouble, show us what you have so far and we’ll help you out.

1 Like

ight bet thank you I appreciate your help. Hopefully, in 6 months, I know everything about coding.

Right now im stuck how do i get one of my checkboxes to have the value attribute of loving .??

Wow? Only 6 months? I’ve been doing this for years and I’m not even close to know everything about coding. :wink:

Every coder is a learner - we’re just on different points on the path.

Right now im stuck how do i get one of my checkboxes to have the value attribute of loving .??

It should be the same basic thing you did to the others. Can you show what you’ve tried?

This what I have so far. Wow, 1 year and you don’t know everything about coding guesses it is a longer process than I expected but it’s fine ill put the time and grind into it. Tell me if you need the whole coding script, also I have a question you been coding for years what are some good things out of this?? Have you made your own app or got a job doing coding? Sorry i didn’t respond i had to do other stuff.

Right, this is a lot easier if you just cut and paste the code. Just put three backticks on the line before your code block and do the same on the line after (so it formats correctly).

I can’t see the checkboxes, and I’m not sure why the radio buttons got moved out of the form. Sometimes things get just too messed up - hit the Reset All Code button and start over. From there, you just need to add value attributes to the inputs inside the form - it should be 5 places. You did it correctly for the radio buttons, you just need to do the same for the others.

my work
I thought I had it what did I do wrong??
If you run the test i have everything except for the energetic box.

You can’t link to your work like that. That links to the challenge, but the data about your code is stored in your browser so we can’t see it.

Just cut and paste your code.

1 Like

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="https://freecatphotoapp.com/submit-cat-photo">
  <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
  <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
  <label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
  <label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
<label for="loving">
<input id="loving" value="loving" type="checkbox" name="indoor-outdoor">Loving</label>
<label for="lazy"><input id="lazy" value="lazy" type="checkbox" name="indoor-outdoor">Lazy</label>
 <label for="energetic"><input id="energetic" value="energetic" type="checkbox" name="indoor-outdoor">energetic</label>
</main>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36.

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

that what i have so far

OK, you haven’t just moved those inputs, you’ve copied them.

Like I said, just reset the code and start over. Once you start over, add the value attribute in 5 places, each of those label wrapped `input’s.

I tried it and I completed it now I understand thank you. I appreciated it I finally passed it after like 2 hrs its was so simple and easy i made it so complicated lol but thanks again.

1 Like

Yeah, we were all there at one point. This is hard stuff - if it wasn’t it would be done by high school dropouts and pay minimum wage. Just keep at it, you’ll get there.

1 Like

yeah honestly without your help i would have been stuck their for even longer so thank you. I want to study to become a neurosurgeon but everything revolves around coding so I also want to learning coding just in case in the future i need it. Who knows i could be good at it and make a carrer at of it.

I want to study to become a neurosurgeon but everything revolves around coding …

Everything in neurosurgery? Or everything in life? I think people can excel in both of those without becoming a coder, at any level. I don’t think we’re ever going to reach a point where you need to learn how to code to function in the world. Learn coding because it’s fun.