Use the value attribute with Radio Buttons and Checkboxes

HTML-CSS
1

`I am lost, please help me out. Thank you.’

`The code so far’

`html’

‘’’

CatPhotoApp

Click here to view more cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
Indoor Outdoor
Loving Lazy Energetic
Submit 


'**Your browser information:**'

'User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0</code>.'

'**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

Can you post your current progress you have from the challenge input? We’ll take a look!

3

‘’’
‘

CatPhotoApp

’
‘’
’

Click here to view more cat photos.

’
‘’’
‘A cute orange cat lying on its back.’
‘’’
‘

Things cats love:

’
‘
    ’
    ‘
  • cat nip
    • ’
    ‘
  • laser pointers
    • ’
    ‘
  • lasagna
    • ’
    ‘
’
‘

Top 3 things cats hate:

’
‘
    ’
    ’
  1. flea treatment
    2. ’
    ‘
  2. thunder
    3. ’
    ’
  3. other cats
    4. ’
    ‘
’
‘’
’ Indoor’
‘<input type=“radio”’
‘name=“indoor-outdoor”> Outdoor
’
’ Loving’
’ Lazy’
’ Energetic
’
‘’
‘Submit’
‘’
‘’
‘’’
4

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

5

there are “backticks” we use for code; if you have a windows PC it is ~ button. Use 3 before and 3 after

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

~Okay thank you~

~ Please can you kindly help me with my tutorial~

~i am totally stuck and i don’t know how to move forward~

~I am supposed 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.”~

7

Here is an example of one of the 5 you need to fill in:

<label><input value="lazy" type="checkbox" name="personality"> Lazy</label>

You need to add value into all of them, to lowercase!

8 
Thank you for your help
9 
  <form action="/submit-cat-photo">
    <label> <input value= "indoor"> <input type="radio" name="indoor-outdoor"> Indoor</label>
    <label> <input value= "outdoor"> <input type="radio"  
    name="indoor-outdoor"> Outdoor</label><br>
    <label> <input value= "loving"> <input type="checkbox" name="personality"> Loving</label>
    <label> <input value= "lazy"> <input type="checkbox" name="personality"> Lazy</label>
    <label> <input value= "energetic"> <input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

What am i doing wrong?
10

You are making 2 inputs.

This is incorrect:
<label><input value="lazy"> <input type="checkbox" name="personality"> Lazy</label>
This is correct:
<label><input value="lazy" type="checkbox" name="personality"> Lazy</label>

1 Like
11 
Thanks i got it now, moved to the next stage.
Thank you very much for your time and patience
2 Likes