Beginner to this stuff

HTML-CSS
1

Tell us what’s happening:
having a hard time with this
Give each of the radio and checkbox inputs the value attribute. Use the input label text, in lowercase, as the value for the attribute.

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

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

2

You simply need to add ‘value = …’ in each of the input. Look at the example.

3

Hi @trevinoivan486,

The input tag can also have an attribute called value. This value attribute lets other parts of your application get that value when needed.

For this example, you have:

<input type="radio" name="indoor-outdoor"> Indoor

So right now, there isn’t a value attribute within the input tag. The word Indoor is outside the input tag, so it would only be displayed on your page and not the actual value of the input tag.

You can try something like this:

<input type="radio" name="indoor-outdoor" value="indoor"> Indoor

You would then just add the value attribute to each input tag that you are using and the value should equal whatever the input label text is, so in this case it was indoor.

Good luck & happy coding!

1 Like