Learn HTML by Building a Cat Photo App - Step 49

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here. If you select the Indoor radio button and submit the form, the form data for the button is based on its name and value attributes. Since your radio buttons do not have a value attribute, the form data will include indoor-outdoor=on, which is not useful when you have multiple buttons.

Add a value attribute to both radio buttons. For convenience, set the button’s value attribute to the same value as its id attribute.

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">

<!-- User Editable Region -->

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

<!-- User Editable Region -->

          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36 Edg/108.0.1462.76

Challenge: Learn HTML by Building a Cat Photo App - Step 49

Link to the challenge:

2

Hi there, you’re expected to add a value attribute to both radio buttons and set the button’s value attribute to the same value as its id attribute.

3 
              <label><input id="indoor" type="radio"  id="indoor-outdoor"> Indoor</label>
      <label><input id="outdoor" type="radio"  id="indoor-outdoor"> Outdoor</label>
4

Try adding a value attribute inside the input element to both radios.

5

Hi there, can you let us know what is your question? Is there something you don’t understand about the instructions for example?

6

what is
value attribute ? is that id=“radio”

7

ah, thanks for clarifying your question. This will make it easier to help you now.

The value attribute is the name of attribute (just like the ‘id’ attribute but it is called ‘value’).

You need to add this ‘value’ attribute to the input tag just like you added id before.

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

value=“id”

9

don’t put an extra < in between input and value
there should be one space instead there

also value should be written the same way as id so you need to give it an equal sign and the actual value just like id has (same exact value as id)

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

<value value=“indoor” </value"

11

value is an attribute not an element

click reset button (it looks like an arrow turning) and try this exercise again.

12 
  <label><input value id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
      <label><input value id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
13 
      <fieldset><label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label></fieldset>
      <fieldset><label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label></fieldset>

i checked out some other forms they added fieldset why did that it was not in the question

14

now you have an extra value in each input
(You already have one correct value attribute there so delete all the extra words ‘value’)

15

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