Https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes

HTML-CSS
1

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="/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 action="/submit-sandwich">
  <label><input type="radio" name="bread" value="wheat"> Wheat</label>
  <input><input  type="radio" name="bread" value="ciabatta"> ciabatta</label><br>

  <label><input type="checkbox" name="fillings" value="chicken"> Chicken</label>
  <lable><input type="checkbox" name="fillings" value="tuna"> Tuna</lable>
  <label><input type="checkbox" name="fillings" value="mayo"> Mayo</label><br>

<textarea placeholder="Allergies, and extra information"></textarea><br>

<button type="submit">Order Sandwich</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/77.0.3865.120 Safari/537.36.

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes

2

One of your radio buttons should have the value of "indoor"

The radio button labeled Indoor needs this attribute and value. It’s the same for the other four inputs.

3

That is where am confused and could you please explain futher because i cant figure where one of my radio buttons should have the value of “indoor”

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

Do the same for the rest.

5

I tried it in this manner and it didn’t work.

6

Show me your code so far

7

we are better to help you if u update the new code you made after the first one :3

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

   <input type="radio" name="indoor-outdoor" value="Indoor">
   <input type="radio" name="indoor-outdoor" value="outdoor">
   <input type="checkbox" name="indoor-outdoor" value="loving">
   <input type="checkbox" name="indoor-outdoor" value="lazy">
   <input type="checkbox" name="indoor-outdoor" value="energetic">

  </form>
</main>
10

I passed the challenge, in the instructions it said to pass all the values must be in lowercase

11

you have not added a value…

12

My bad, I wasn’t paying attention. The values should be lowercase.

13

2 posts were split to a new topic: New to the forum!

15

I am still not getting it and worse part is that the code gets confusing to arrange.

16

reset the lesson, change the existing code instead of adding new lines

your issue is that the tests do not recognise the extra code you are adding and expect you to change what’s already there

17

Hope am not going to start all over again if i reset?

18

You can just copy&past things right?

19

Yes i can copy and paste things.

20

then just copy past your code in notepad our whatever before reset?

21

I have tried severally to copy and paste but showing cut and copy and more reason i type a code all over again to fix a correction like this. i copied and paste in a notepad and have reset it. Now to paste it back has become a problem