freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md

---
id: 587d78af367417b2b2512b03
title: 制作一个调查表格
challengeType: 3
forumTopicId: 301145
---

# --description--

**目标：** 使用 [CodePen.io](https://codepen.io) 搭建一个与这个功能上相似的 app：<https://codepen.io/freeCodeCamp/full/VPaoNP>。

在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。

你可以使用 HTML、JavaScript 以及 CSS 来完成项目。由于目前你只学到了 CSS 课程，所以我们建议你只使用 CSS 来完成这个项目，同时巩固一下你之前所学的内容。你也可以使用 Bootstrap 或者 SASS。我们不推荐你在这个项目中使用其他技术（比如 jQurey、React、Angular 或 Vue），否则，如果在编码中出现问题，你需要自行解决。在后续的其他项目中，你将有机会使用各种技术栈（比如 React）。如果你在使用上述推荐的技术栈编码的过程中发现问题，请提交给我们来处理。祝你编码愉快！

**需求 1：** 我能看见一个 H1 标签大小`id="title"`属性的标题。

**需求 2：** 我能看见一段 P 标签大小且带有`id="description"`属性的简述文字。

**需求 3：** 我能看见一个`id="survey-form"`的`form`。

**需求 4：** 在表单元素内，我需要在`id="name"`的字段中输入我的名字。

**需求 5：** 在表单元素内，我需要在`id="email"`的字段中输入邮箱。

**需求 6：** 如果我输入了格式不正确的邮箱，我将会看见 HTML5 验证错误信息

**需求 7：** 在表单内，我可以在`id="number"`的字段中输入数字。

**需求 8：** 如果我在数字输入框内输入非数字，我将会看见 HTML5 验证错误信息

**需求 9：** 如果我输入的数字超出了范围（使用`min`和`max`属性定义），我将会看见 HTML5 验证错误信息

**需求 10：** 对于表单中的名称，邮箱和数字输入框应该使用对应 id 为`id="name-label"`、`id="email-label"`、`id="number-label"`的描述标签。

**需求 11：** 在表单中的名称，邮箱和数字输入框中，我能看到各自的描述文字作为占位符。

**需求 12：** 在表单元素内，我可以在`id="dropdown"`的下拉列表中选择一个选项。

**需求 13：** 在表单元素内，我可以从一组或多组单选按钮中选择一个字段。每组使用`name`属性进行分组。

**需求 14：** 在表单元素内，我可以从一系列复选框中选择几个字段，每个复选框都必须具有 value 属性。

**需求 15：** 在表单元素内，我能看见在最后有个`textarea`用于附加注释。

**需求 16：** 在表单元素内，我能看见一个`id="submit"`的按钮，用于提交我所有的输入。

你可以通过 fork 这个项目 [CodePen](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目，也可以使用此 CDN 链接在任何你喜欢的环境中运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`。

完成项目并通过所有测试后，输入你的项目在 CodePen 上的链接。

完成之后，将你的 URL 提交到相应的项目，并测试通过。

# --hints--


# --solutions--