Problem in HTML

HTML-CSS
#1

hi
kindly help me?

Tell us what’s happening:

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 .

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

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes

#2

You need to add the word “required” to this way:

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" required> Indoor</label>
  <label><input type="radio" name="indoor-outdoor" required> Outdoor</label><br>
  <label><input type="checkbox" name="personality" required> Loving</label>
  <label><input type="checkbox" name="personality" required> Lazy</label>
  <label><input type="checkbox" name="personality" required> Energetic</label><br>
  <input type="text" placeholder="cat photo URL">
  <button type="submit">Submit</button>
</form>
1 Like
#3

You haven’t set the value attribute for any of the input tags.

Let’s look at the first input tag you have:

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

It currently has two attributes set.
type="radio" sets the attribute type equal to radio.
name="indoor-outdoor" sets the attribute name equal to indoor-outdoor.

To solve the problem, you need to set the attribute value on each of the five input tags.

For example, the first input could look like this:

<input type="radio" name="indoor-outdoor" value="indoor">
2 Likes
#4

This is the code for the solution. This requires you to set the attribute value on each input tags, as this is necessary to way get the user inputs.

    <label><input type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" value="loving"> Loving</label>
    <label><input type="checkbox" name="personality" value="lazy"> Lazy</label>
    <label><input type="checkbox" name="personality" value="energetic"> Energetic</label>
1 Like
#5

You haven’t used a value attribute anywhere, and so your input elements only have labels, but no actual values to track.

For example:

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

should be

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

Continue the pattern for the rest of the radio buttons and checkboxes. The exact location of the value attribute doesn’t matter as long as it’s within the the input tag (additionally the challenge only accepts lower case values).

1 Like
#6