Radio button case

HTML-CSS
1

Tell us what’s happening:
I just can not get the radio button code can someone please try and explain it to me more

  **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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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://www.freecatphotoapp.com/submit-cat-photo">
 <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button> <label> 
</form>
</main>

  **Your browser information:**

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

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2

In order to create the radio button, you will need to use an input like you used for text in previous challenge. Instead of setting the type=“text”, you have to set the type=“radio” to create the radio button.

By setting the type to radio, you are essentially telling the html to create an input where users can select a radio button.

4

it actually does not work cause am supposed to like nest . I’ve copied the question:( Add a pair of radio buttons to your form, each nested in its own label element. One should have the option of indoor and the other should have the option of outdoor . Both should share the name attribute of indoor-outdoor to create a radio group.)

5

Would you be able to show me what you have done so far? :sweat_smile:

you can use preformatted text function in the reply section.

7 
<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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://www.freecatphotoapp.com/submit-cat-photo">
 <label>  <input type="radio" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>
8

I had previously sent you the question

9

i can see replying but i dont see the the reply

10

it seems you are missing the label closing tag, and the text inside the label

11

Okay, I see the problem.

I think the question can be confusing so I will breakdown the task into smaller steps.

What questions is asking to do:

First step:

  • Add a pair of radio buttons, nested in its own label element.

→ So you will need to add two inputs with the type=“radio” in between the first input with the type=“text” and button element.

which will look like:

 <form action="https://www.freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required>
    <label><input type="radio"></label>
    <label><input type="radio"></label>
    <button type="submit">Submit</button>
  </form>

Your second step:

  • One label element should have the text of ‘indoor’ and the other should have ‘outdoor’

Your third step:

  • add the name attribute of ‘indoor-outdoor’ inside the input tag.

You can see the example provided by the FCC on the page, if you are still finding difficult:

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

You will need to follow this rule and create one for outdoor as well.

Hope this help!

12

this seems weird but i would really like you to sort of teach me more , the code actually worked am so happy we got it maybe if you add me on IG if you dont mind sul

13

Hey

You are welcome to add me on Insta but I am also fairly new so it will be beneficial for both of us if we both learn from each other?!?

IG: soyy_the_cabage-savage

Shoot me a dm to let me know :slight_smile:

14

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