---
id: 587d78af367417b2b2512b03
challengeType: 3
forumTopicId: 301145
title: 制作一个调查表格
---
## Description
目标:使用 CodePen.io 搭建一个与这个功能上相似的 app:https://codepen.io/freeCodeCamp/full/VPaoNP。
在满足以下需求并能通过所有测试的前提下,你可以根据自己的喜好来美化你的 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 来构建你的项目,也可以使用此 CDN 链接在任何你喜欢的环境中运行测试:https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js
。
完成项目并通过所有测试后,输入你的项目在 CodePen 上的链接。
完成之后,将你的 URL 提交到相应的项目,并测试通过。
## Instructions
## Tests
## Challenge Seed
## Solution
```js
// solution required
```