How do i use the value attribute with Radio Buttons and Checkboxes?

HTML-CSS
1

Tell us what’s happening:

Hello Guys

Can anybody help me. i am stuck and i am not sure how to crack this code.
I have tried lookingg at the hints and unfortunately that was no help and there is no video for me to get a better understanding.

Please Help!

Kind Regards

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/81.0.4044.138 Safari/537.36.

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

2

What have you tried? This looks like the starter code.

3 Likes
3

You add the value attribute just like you would any other attribute (value="something"). It affects how data is sent using the form. Another example is here.

3 Likes
4

Hello @brenmt3,

Basically, the input element with type = "radio" and type = "checkbox" requires both a name and value attribute.

The name attribute groups related inputs and the value attribute makes each one of them unique.

When the form is submitted, the value of every checked input is being submitted as well.

In the case of radio inputs, the name attribute is also used to prevent the user from selecting multiple options.

Here is an example that prompts users to enter their gender.

 <label><input type="radio" name="gender" value="male"> Male</label>
 <label><input type="radio" name="gender" value="female">Female</label>

Both inputs have the same name attribute so they form a group. This way the user can’t select both options.

I hope you now understand

2 Likes
5

Mind sensoring your code? You can do this with the spoiler
[sp oiler] [/ sp oiler]
We try to help so they learn themself not flat out give the answer

2 Likes
6

Thank you very much for your help!

1 Like