通过编写猫咪相册应用学习 HTML - Step 46

告诉我们发生了什么:
在此详细描述你的问题。

如何使新建单选按钮位于第一个单选按钮的下方?

  **你目前的代码**

挑战: 通过编写猫咪相册应用学习 HTML - Step 46

挑战的链接:

You basically did it correctly except you didn’t capitalize the first letter in “Outdoor” in the label text. You must use the exact spelling that the instructions ask, including capitalization. I would recommend you copy/paste text from the instruction if possible to avoid these types of errors.

Also, it is much better to paste your HTML in here than use a pic of your code. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

hello,I have tried.,It still doesn’t work.
,Here is my complete code,I hope I can get your help,thank you! :heart:

<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <section>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</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">
        <label><input id="indoor" type="radio"> Indoor</label>
        <label><input id="Outdoor"type="radio"> Outdoor</label>
        <input type="text" name="catphotourl" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
      </form>
    </section>
  </main>
</body>
</html>
  **你的浏览器信

You did capitalize the label text correctly but you also capitalized the id value too. The instructions say that the id should be set to outdoor. Notice there is no capitalization. The id and the label text do not need to be exactly the same.

This is a problem:
Nest another radio button with the option Outdoor in a new labelelement. The new radio button should be placed after the first one. Also, set its id attribute value to:outdoor

  • This is my code syntax:
    Indoor
    <input id="outdoor"type=“radio”> outdoor
    My handwriting is wrong,The next hint says:
    Your new radio button and associated label should be below the first one. You have them in the wrong order.
  • I don’t understand and can’t find the correct syntax for the code :sob:

Ignore the hint you are getting, it’s not very good for the problem you are having. Your first HTML in the pic you posted is almost correct, you just didn’t capitalize Outdoor in the label text. In the second HTML you pasted in here you did capitalize Outdoor in the label text but then you made the mistake of capitalizing Outdoor for the id on the input too. You need to follow the instructions:

“The new radio button should be placed after the first one. Also, set its id attribute value to: outdoor

Once you fix that it will pass.

1 Like

Ok, I will continue to try. Thank you very much for your guidance :blush: