How do I 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>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

2

What have you tried? It looks like you just have the starter code?

3 
<label><input type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
1 Like
4

Its cool that you know how to do it @dungtv09. Do you have anything that you can add to that single line of code to help @Chudi147 understand what’s going on rather than just providing a partial solution?

5

Thanks @dungtv09 Really appreciate

1 Like
6

What i need to know is if i need to create a new code or i should just put label in the existing code

7

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

You are supposed to modify the existing code, per the challenge description.

1 Like