创建调查表单
发布: (2026年1月31日 GMT+8 00:00)
3 min read
原文: Dev.to
Source: Dev.to
项目概述
尽管我已经在 DEV 上写了几篇文章，但我仍然在昨天完成了 freeCodeCamp 的 HTML 表格和表单 小测验。这让我进入了 构建调查表单——响应式网页设计课程中的第一个认证项目。
该项目包含十六个用户故事。全部完成后，项目即视为完成。和之前的实验一样，它提供了完成后效果的示例以及一些起始的 HTML 模板。
起始模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Survey Form</title>
</head>
<body>
<!-- Content will go here -->
</body>
</html>表单实现
我首先在 <body> 中构建了一个 <h1> 标题、一个描述性段落以及表单本身。表单包括：
- 文本、电子邮件和数字字段（数字字段使用下拉菜单进行选择）
- 复选框
- 单选按钮
- 用于补充评论的文本区域
我没有逐字复制示例，而是给它加入了个人风格，制作了一个 DEV Community 反馈表单。
完成的调查表单代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Survey Form</title>
</head>
<body>
<h2>DEV Community Feedback Form</h2>
<p>Help us improve our community by filling in this form.</p>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="age">Age:</label>
<input type="number" id="age" name="age" />
<p>Which option best describes your current experience level?</p>
<select name="experience" id="experience">
<option value="">Select your experience</option>
<option value="beginner">Beginner</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
<p>Would you recommend DEV Community to a friend/colleague?</p>
<label><input type="radio" name="recommend" value="yes" /> Yes</label>
<label><input type="radio" name="recommend" value="no" /> No</label>
<p>What would you like to see improved? (Check all that apply)</p>
<label><input type="checkbox" name="improve" value="articles" /> Articles</label>
<label><input type="checkbox" name="improve" value="moderation" /> Moderation</label>
<label><input type="checkbox" name="improve" value="onboarding" /> Onboarding</label>
<p>Any further suggestions to improve our community?</p>
<textarea name="suggestions" rows="4" cols="50"></textarea>
<button type="submit">Submit</button>
</form>
</body>
</html>后续步骤
响应式网页设计认证的 HTML 部分已基本完成，只剩下 可访问性 小节。我会在下次分享更多内容。像往常一样——继续编码吧！