I can't understand this part

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **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://www.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://www.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 (Linux; Android 10; SM-A013G) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.105 Mobile Safari/537.36.

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

2

which part u don’t understand?

3

Add a value attribute with the text given in the challenge panel.

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

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

One of your checkboxes should have the value attribute of loving .

One of your checkboxes should have the value attribute of lazy .

One of your checkboxes should have the value attribute of energetic .

4

So far you have used attributes like for, name, and id. Now it’s time to add one more which is value.

5

Give me an example of one code

6

How to insert the value attribute

7

<label for="option1"><input id="option1" type="radio" name="optionone" value="option1">Option 1</label>

8

Lets break it down

label is what you see “labelled” as. in this example the label is Option 1, label has for attribute which is same as id of input. this is because when u click on the text Option 1, it will select that <input>

<input> has four attribute

id - which I explained above
type - what type of input it is, other options are text etc.
name - we can use it for reference
value - is what value should it hold, this is the data that goes into the database or u can get what value the user has selected.

Hope this makes sense?

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.