Learn HTML by Building a Cat Photo App - Step 48

HTML-CSS
1

Step 48

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.

** Hey I am struggling to understand what the value means and where to put it** Any help greatly appreciated!!

<section>
  <h2>Cat Form</h2>
  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>
    <input type="text" name="catphotourl" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</section>
``` 
  **Your browser information:**

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

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

Link to the challenge:

2

Hello

You need to set new attributes to your input elements.
These attributes are called value. Its just another attribute.

The source of confusion is this:
Generally speaking, we have situation:

<element someattribute="somevalue">.....</element>

But in this case it’s a little tricky, because attribute itself is called value.

2 Likes
3

@admit8490 I am sorry I have tried do you mean this…

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

As this comes up in error.
The Indoor radio button’s value attribute should be set to indoor . You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks.

Tricky for sure !!!

4

Hi @Alanna,

Now you have the value attribute with the correct values. But, you’ve omitted the id attribute.

You should have both the value and id attributes for each radio input.

1 Like
5

@spark07

I have tried this…
Indoor
Outdoor

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

I am not understanding, to the point I feel in
door and outdoor are not real words :rofl:
Am I remotely close?

6

@spark07 I got it, I actually couldn’t wrap my head around it for so long!
Appreciate the help!!

      <label><input id="indoor" value="indoor" name="indoor-outdoor"> Indoor</label>
      <label><input id="outdoor" value="outdoor" name="indoor-outdoor"> Outdoor</label>
1 Like
7

You did it :clap:
And the tests did accept your answer.
But, you are still missing one attribute, one important attribute.

If you look at the result window, you have text inputs when you should have radio buttons.

So what do you think you are missing?

8

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