HTML Form with Radio Buttons and Input Fields for Cat Photo Submission" STEP 44

HTML-CSS
1

I am currently working on a quiz related to creating radio buttons and encountered some issues with the submission. Despite following the instructions, my code was marked incorrect.

Here is the code I submitted:
To ensure the radio buttons are positioned above the text input, and follow the correct syntax, here’s how you can adjust your HTML:

html

Copy code

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <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>
      <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">
          <!-- Radio buttons for location options -->
          <input id="indoor" type="radio" name="indoor-outdoor" value="indoor">
          <label for="indoor">Indoor</label><br>

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

          <!-- Text input for URL -->
          <input type="text" name="catphotourl" placeholder="cat photo URL" required><br>

          <!-- Submit button -->
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
2

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like
3

Thank you for your guidance. I’ve used the “Ask for Help” button, but I’m still having trouble resolving the issue. Could you please provide additional insights or possible solutions for the specific challenge with Step 44? I’m looking for more detailed assistance to correct the radio button implementation.

Thank you for your support!

4

please include a link to the challenge

Usually the help button does it for you but in your case it is missing.

1 Like
5
6

not sure where all this code came from.

I suggest you reset this step and add just the one radio button requested by this step.

7

Hi Mam, Here you no need to type all the stuff.

Here kindly put input tag and then after that put the word Indoor after it.

That is that much simple, Hope You Understand !!

1 Like
8

Step 44

You can use radio buttons for questions where you want only one answer out of multiple options.

Here is an example of a radio button with the option of cat:

Example Code

<input type="radio"> cat

Remember that an input element is a void element.

Before the text input, add a radio button with the option set as:

Indoor

here and i tried so many times to give the best answer but still wrong…

      <input type="radio" name="Indoor" value="Indoor"> Indoor </input><br>

it said
Sorry, your code does not pass. Hang in there.

You should create an input element for your radio button. Check the syntax.

9

Why does your code not look like the example they gave you?

11

Photo CAt
Photo CAt1917×925 114 KB

even though I’m following the given example, I’m still wrong.
I’ve been trying more syntax and searching just to give the best… but cant work hehehehe

(https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-44)

12

Hi there,

Your code in the picture is correct.

But it looks like you deleted the default given code on line 38:

<input type="text" name="catphotourl" placeholder="cat photo URL" required>

You should reset the code and try again. This time, only put your code on line 37, and don’t make changes to other lines.

2 Likes
13

thank you so much Sir it works now

1 Like