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

**URL:** <https://forum.freecodecamp.org/t/html-step-57/535528>\
**Category:** General\
**Created:** [July 28, 2022, 10:12am UTC](https://forum.freecodecamp.org/t/html-step-57/535528 "2022-07-28T10:12:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hezining](https://avatars.discourse-cdn.com/v4/letter/h/67e7ee/32.png) [@hezining](https://forum.freecodecamp.org/u/hezining)\
**Post date:** [July 28, 2022, 10:12am UTC](https://forum.freecodecamp.org/t/html-step-57/535528/1 "2022-07-28T10:12:08Z")

</div>

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

1. Add another checkbox after the one you just added. The `id` attribute value should be `lazy` and the `name` attribute value should be the same as the last checkbox.

2. Also add a `label` element to the right of the new checkbox with the text `Lazy`. Make sure to associate the `label` element with the new checkbox using the `for` attribute.  
如何创建新的复选按钮，且按照提示正确赋值？我需要一个标准的语法答案。  
My difficulties：  
这是写完代码下方给出的错误提示  
Your new checkbox should have an `id` attribute with the value `lazy` and a `name` attribute with the value `personality`. Check that there is a space after the opening tag’s name and/or there are spaces before all attribute names.  
**你目前的代码图片**  

```html
<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">
        <fieldset>
          <legend>Is your cat an indoor or outdoor cat?</legend>
          <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
          <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
        </fieldset>
        <fieldset>
          <legend>What's your cat's personality?</legend>
          <input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
          **<input id="lazy" type="checkbox" neme="personality"> <label for="lazy">Lazy</label>**
        </fieldset>
        <input type="text" name="catphotourl" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
      </form>
    </section>
  </main>
</body>
</html>

```

**挑战：** 通过编写猫咪相册应用学习 HTML - Step 57

**挑战的链接：**

> **[freeCodeCamp.org](https://www.freecodecamp.org/chinese/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-57)**
>
> 免费学习编程

---

<div class="post-metadata">

**Author:** ![luojiyin1987](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/luojiyin1987/32/241573_2.png) [@luojiyin1987](https://forum.freecodecamp.org/u/luojiyin1987)\
**Post date:** [July 28, 2022, 1:45pm UTC](https://forum.freecodecamp.org/t/html-step-57/535528/2 "2022-07-28T13:45:28Z")

</div>

`neme ` 写错了  
应该是 `name`

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 7, 2025, 3:48pm UTC](https://forum.freecodecamp.org/t/html-step-57/535528/3 "2025-01-07T15:48:54Z")

</div>

Closed on January 7, 2025, 3:48pm UTC


