How do i do this task

Tell us what’s happening:

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 .

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="https://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>
  <label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
<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>
  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:84.0) Gecko/20100101 Firefox/84.0.

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

You just add the value="<required_text>" attribute to respective input tags as mentioned.

value attributes associate the user entered text with that particular field/input element. Similar to how id uniquely associates that field/input element.

1 Like

remmeber that the element needs a value attribute included :
Energetic

in your code you are missing the value=" - " for each input

how do you add value

Example:

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

The clue is the for attribute in label tag and the id attribute in input tag indicate that particular checkbox input needs to have a value of “lazy”. So we add value=“lazy” in that input element.

I still dont understand it please can you illustrate a bit

Let us take a basic example. We have a form with three check boxes:

<form>
  <label for="one">
      <input type="checkbox" id="one">
      one
  </label>
  <br> <!-- Adds a line break -->
  <label for="two">
      <input type="checkbox" id="two">
      two
  </label>
  <br> <!-- Adds a line break -->
  <label for="three">
      <input type="checkbox" id="three">
      three
  </label>
</form>

What’s happening here? We have three checkboxes displayed; one, two and three respectively. Like so:
checkboxes

If you want to select checkbox one how do you do it?
You click on the checkbox next to one.
This is what it looks like after checking one:
checkboxes-checked
HOW did you know to select one?
Because you can see the checkbox is next to the text one.
As a user, on screen you can see which text refers to which textbox. We have managed to indicate that with the label element.

You want this selection to be selected when you come back to this page again. You have to update this selection to a server. Now, how do you tell you selected checkbox one to the server?

label isn’t sufficient in this case. Which is why we specify a value attribute to input element. Once user checks checkbox one and submits, this value attribute and its associated text is sent to server indicating the selected checkbox.

We modify the above form like so to include value attribute:

<form>
  <label for="one">
      <input type="checkbox" id="one" value="one">
      one
  </label>
  <br> <!-- Adds a line break -->
  <label for="two">
      <input type="checkbox" id="two" value="two">
      two
  </label>
  <br> <!-- Adds a line break -->
  <label for="three">
      <input type="checkbox" id="three" value="three">
      three
  </label>
</form>

Note that this value isn’t displayed on screen unlike the label text. It’s solely for server to know this particular checkbox has been selected.