freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fie...

---
id: 587d778b367417b2b2512aa7
title: 将单选按钮包裹在 fieldset 元素中以获得更好的可访问性
challengeType: 0
videoUrl: 'https://scrimba.com/c/cVJVefw'
forumTopicId: 301030
dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
---

# --description--

接下来的表单主题是关于单选按钮的可访问性。 在上一个挑战中，每个单选按钮都有一个包含 `for` 属性的 `label` 标签，这些属性值指向相关选项的 `id`。 然而单选按钮通常成组出现，而且用户必须选择其中一项。

`fieldset` 标签包裹整组单选按钮，实现这个功能。 它经常使用 `legend` 标签来提供分组的描述，以便屏幕阅读器用户会阅读 `fieldset` 元素中的每个选项。

当选项的含义很明确时，如“性别选择”，`fieldset` 与 `legend` 标签可以省略。 这时，使用包含 `for` 属性的 `label` 标签就足够了。

举个例子：

```html
<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>
```

# --instructions--

当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。 他添加了一组单选按钮，并从我们之前的课程中吸取了教训，为每个选项使用带有 `for` 属性的 `label` 标签。 Camper Cat 加油！ 然而，他仍然需要一些帮助。 请将包含单选按钮组的 `div` 标签替换为 `fieldset` 标签；将 `p` 标签替换为 `legend` 标签。

# --hints--

应存在 1 个 `fieldset` 标签包含单选按钮组。

```js
assert($('fieldset').length == 1);
```

确保 `fieldset` 标签是闭合的。

```js
assert(
  code.match(/<\/fieldset>/g) &&
    code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
);
```

应存在 1 个包含询问用户忍者等级内容文字的 `legend` 标签。

```js
assert($('legend').length == 1);
```

不应存在 `div` 标签。

```js
assert($('div').length == 0);
```

不应存在包含询问用户忍者等级内容文字的 `p` 标签。

```js
assert($('p').length == 4);
```

# --seed--

## --seed-contents--

```html
<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <section>
    <form>
      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
      <label for="email">Email:</label>
      <input type="text" id="email" name="email">


      <!-- Only change code below this line -->
      <div>
        <p>What level ninja are you?</p>
        <input id="newbie" type="radio" name="levels" value="newbie">
        <label for="newbie">Newbie Kitten</label><br>
        <input id="intermediate" type="radio" name="levels" value="intermediate">
        <label for="intermediate">Developing Student</label><br>
        <input id="master" type="radio" name="levels" value="master">
        <label for="master">Master</label>
      </div>
      <!-- Only change code above this line -->


      <input type="submit" name="submit" value="Submit">
    </form>
  </section>
  <article>
    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Is Chuck Norris a Cat Person?</h2>
    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>
```

# --solutions--

```html
<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <section>
    <form>
      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
      <label for="email">Email:</label>
      <input type="text" id="email" name="email">

      <fieldset>
        <legend>What level ninja are you?</legend>
        <input id="newbie" type="radio" name="levels" value="newbie">
        <label for="newbie">Newbie Kitten</label><br>
        <input id="intermediate" type="radio" name="levels" value="intermediate">
        <label for="intermediate">Developing Student</label><br>
        <input id="master" type="radio" name="levels" value="master">
        <label for="master">Master</label>
      </fieldset>

      <input type="submit" name="submit" value="Submit">
    </form>
  </section>
  <article>
    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Is Chuck Norris a Cat Person?</h2>
    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>
```
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								---
 								id: 587d778b367417b2b2512aa7
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								title: 将单选按钮包裹在 fieldset 元素中以获得更好的可访问性
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								challengeType: 0
-												fix(i18n): update Chinese translation of applied accessibility (#37920)



											
										
										
											2020-02-11 09:06:41 +00:00
+								videoUrl: 'https://scrimba.com/c/cVJVefw'
 								forumTopicId: 301030
-												feat(curriculum): restore seed + solution to Chinese (#40683)

* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
											
										
										
											2021-01-13 02:31:00 +00:00
+								dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								---
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								# --description--
-												chore(i18n,learn): processed translations (#41378)

* chore(i8n,learn): processed translations

* Update curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
											
										
										
											2021-03-05 15:43:24 +00:00
+								接下来的表单主题是关于单选按钮的可访问性。 在上一个挑战中，每个单选按钮都有一个包含 `for` 属性的 `label` 标签，这些属性值指向相关选项的 `id`。 然而单选按钮通常成组出现，而且用户必须选择其中一项。
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
-												chore(i18n,learn): processed translations (#41454)

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
											
										
										
											2021-03-12 14:30:30 +00:00
+								`fieldset` 标签包裹整组单选按钮，实现这个功能。 它经常使用 `legend` 标签来提供分组的描述，以便屏幕阅读器用户会阅读 `fieldset` 元素中的每个选项。
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
-												chore(i8n,learn): processed translations

											
										
										
											2021-02-06 04:42:36 +00:00
+								当选项的含义很明确时，如“性别选择”，`fieldset` 与 `legend` 标签可以省略。 这时，使用包含 `for` 属性的 `label` 标签就足够了。
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
-												fix(i18n): update Chinese translation of applied accessibility (#37920)



											
										
										
											2020-02-11 09:06:41 +00:00
+								举个例子：
 								```html
 								<form>
 								  <fieldset>
 								    <legend>Choose one of these three items:</legend>
 								    <input id="one" type="radio" name="items" value="one">
 								    <label for="one">Choice One</label><br>
 								    <input id="two" type="radio" name="items" value="two">
 								    <label for="two">Choice Two</label><br>
 								    <input id="three" type="radio" name="items" value="three">
 								    <label for="three">Choice Three</label>
 								  </fieldset>
 								</form>
 								```
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								# --instructions--
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(i8n,learn): processed translations

											
										
										
											2021-02-06 04:42:36 +00:00
+								当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。 他添加了一组单选按钮，并从我们之前的课程中吸取了教训，为每个选项使用带有 `for` 属性的 `label` 标签。 Camper Cat 加油！ 然而，他仍然需要一些帮助。 请将包含单选按钮组的 `div` 标签替换为 `fieldset` 标签；将 `p` 标签替换为 `legend` 标签。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								# --hints--
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								应存在 1 个 `fieldset` 标签包含单选按钮组。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```js
 								assert($('fieldset').length == 1);
 								```
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								确保 `fieldset` 标签是闭合的。
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
 								```js
 								assert(
 								  code.match(/<\/fieldset>/g) &&
 								    code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
 								);
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								```
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								应存在 1 个包含询问用户忍者等级内容文字的 `legend` 标签。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```js
 								assert($('legend').length == 1);
 								```
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								不应存在 `div` 标签。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```js
 								assert($('div').length == 0);
 								```
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												Chinese translation of responsive-web-design (#40607)


											
										
										
											2021-01-08 19:20:48 +00:00
+								不应存在包含询问用户忍者等级内容文字的 `p` 标签。
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								```js
 								assert($('p').length == 4);
-												Add languages Russian, Arabic, Chinese, Portuguese (#18305)


											
										
										
											2018-10-10 22:03:03 +00:00
+								```
-												fix(i18n): update Chinese translation of applied accessibility (#37920)



											
										
										
											2020-02-11 09:06:41 +00:00
-												feat(curriculum): restore seed + solution to Chinese (#40683)

* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
											
										
										
											2021-01-13 02:31:00 +00:00
+								# --seed--
 								## --seed-contents--
 								```html
 								<body>
 								  <header>
 								    <h1>Deep Thoughts with Master Camper Cat</h1>
 								  </header>
 								  <section>
 								    <form>
 								      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
 								      <label for="email">Email:</label>
 								      <input type="text" id="email" name="email">
 								      <!-- Only change code below this line -->
 								      <div>
 								        <p>What level ninja are you?</p>
 								        <input id="newbie" type="radio" name="levels" value="newbie">
 								        <label for="newbie">Newbie Kitten</label><br>
 								        <input id="intermediate" type="radio" name="levels" value="intermediate">
 								        <label for="intermediate">Developing Student</label><br>
 								        <input id="master" type="radio" name="levels" value="master">
 								        <label for="master">Master</label>
 								      </div>
 								      <!-- Only change code above this line -->
 								      <input type="submit" name="submit" value="Submit">
 								    </form>
 								  </section>
 								  <article>
 								    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
 								    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
 								  </article>
 								  <img src="samuraiSwords.jpeg" alt="">
 								  <article>
 								    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
 								    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
 								  </article>
 								  <img src="samuraiSwords.jpeg" alt="">
 								  <article>
 								    <h2>Is Chuck Norris a Cat Person?</h2>
 								    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
 								  </article>
 								  <footer>&copy; 2018 Camper Cat</footer>
 								</body>
 								```
-												chore(learn): Applied MDX format to Chinese curriculum files (#40462)


											
										
										
											2020-12-16 07:37:30 +00:00
+								# --solutions--
-												feat(curriculum): restore seed + solution to Chinese (#40683)

* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
											
										
										
											2021-01-13 02:31:00 +00:00
+								```html
 								<body>
 								  <header>
 								    <h1>Deep Thoughts with Master Camper Cat</h1>
 								  </header>
 								  <section>
 								    <form>
 								      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
 								      <label for="email">Email:</label>
 								      <input type="text" id="email" name="email">
 								      <fieldset>
 								        <legend>What level ninja are you?</legend>
 								        <input id="newbie" type="radio" name="levels" value="newbie">
 								        <label for="newbie">Newbie Kitten</label><br>
 								        <input id="intermediate" type="radio" name="levels" value="intermediate">
 								        <label for="intermediate">Developing Student</label><br>
 								        <input id="master" type="radio" name="levels" value="master">
 								        <label for="master">Master</label>
 								      </fieldset>
 								      <input type="submit" name="submit" value="Submit">
 								    </form>
 								  </section>
 								  <article>
 								    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
 								    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
 								  </article>
 								  <img src="samuraiSwords.jpeg" alt="">
 								  <article>
 								    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
 								    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
 								  </article>
 								  <img src="samuraiSwords.jpeg" alt="">
 								  <article>
 								    <h2>Is Chuck Norris a Cat Person?</h2>
 								    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
 								  </article>
 								  <footer>&copy; 2018 Camper Cat</footer>
 								</body>
 								```