大家好，我是糖糖～今天带大家做个 “兴趣星球” 注册页面，把 HTML 表单元素吃透！从基础输入框到单选 / 复选、下拉选择，一步步拆解，新手也能跟着做出交互友好的表单 👇
一、先看效果，明确目标
这是个典型的注册表单，包含 用户名、邮箱、性别（带图标）、出生日期、兴趣爱好、个人介绍、协议勾选 等功能。做完能掌握：
- 各类表单元素（
input/select/textarea）的用法 - 如何用
<label>提升交互体验（点击文字 / 图标选单选框） - 表单元素的分组与关联（单选互斥、复选多选）
二、项目文件结构
项目采用清晰的分层结构，方便管理代码和资源：
registration-page/
├── images/ # 存放图标资源
│ ├── man.png # 男性性别图标
│ └── women.png # 女性性别图标
└──club.html # 注册页主文件
三、逐步骤写代码（带详细拆解）
步骤 1：HTML 基础骨架
先创建标准 HTML5 页面，放好标题和表单容器：
<!DOCTYPE html>
<html lang="zh-CN">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兴趣星球 - 注册</title>
</head>
<body>
<h4>兴趣星球-你的爱好社交圈</h4>
<!-- 用表格让表单元素对齐更整齐 -->
<table>
<!-- 表单内容逐步添加 -->
</table>
</body>
</html>
步骤 2：用户名 & 邮箱输入框
用 type="text" 和 type="email" 分别实现文本、邮箱输入，浏览器还会自动校验邮箱格式～
<!-- 第一行：用户名 -->
<tr>
<td>用户名</td>
<td>
<input type="text" placeholder="请输入昵称" />
</td>
</tr>
<!-- 第二行：电子邮件 -->
<tr>
<td>电子邮件</td>
<td>
<input type="email" placeholder="请填真实邮箱" />
</td>
</tr>
placeholder：给用户输入提示，让表单更友好type="email"：输入非邮箱格式时，提交会自动报错（浏览器自带校验）
步骤 3：带图标的性别单选框
重点用 <label> 关联 “文字 + 图标 + 单选框”，点击任意部分都能选！
<!-- 第三行：性别选择 -->
<tr>
<td>性别</td>
<td>
<!-- 男选项：label关联input -->
<label for="male">
<input type="radio" name="sex" value="男" id="male">
<img src="images/man.png" alt="男性图标"> 男 </label>
<!-- 女选项：同理 -->
<label for="female">
<input type="radio" name="sex" value="女" id="female">
<img src="images/women.png" alt="女性图标"> 女 </label>
</td>
</tr>
-
核心逻辑：
name="sex"让 “男 / 女” 互斥（同一name组只能选一个）<label for="id">与input id="id"关联，点击文字 / 图标 → 选中单选框src="images/man.png"：图标存放在images文件夹，路径需对应
步骤 4：出生日期下拉选择
用 <select> 做下拉框，嵌套 <option> 选项，实现年份、月份、日期选择：
<!-- 第四行：出生日期 -->
<tr>
<td>出生日期</td>
<td>
<!-- 年份选择 -->
<select>
<option>请选择年份</option>
<option>2007</option>
<option>2006</option>
<!-- ...更多年份 -->
</select>
<!-- 月份选择 -->
<select>
<option>请选择月份</option>
<option>01</option> <option>02</option>
<!-- ...更多月份 -->
</select>
<!-- 日期选择 -->
<select>
<option>请选择日期</option>
<option>01</option>
<option>02</option>
<!-- ...更多日期 -->
</select>
</td>
</tr>
- 可根据需求补充更多年份 / 日期，也能通过 JS 动态生成（进阶技巧，后续可拓展）
步骤 5：兴趣爱好复选框
用 type="checkbox" 实现多选，checked 让 “音乐” 默认选中：
<!-- 第五行：兴趣爱好 -->
<tr>
<td>兴趣爱好</td>
<td>
<input type="checkbox" name="hobby" value="音乐" checked> 音乐
<input type="checkbox" name="hobby" value="运动"> 运动
<input type="checkbox" name="hobby" value="阅读"> 阅读
</td>
</tr>
name="hobby"：同一name不影响多选（和单选框逻辑不同）checked：默认选中 “音乐” 选项
步骤 6：个人介绍 & 提交按钮
用 <textarea> 做多行输入，type="submit" 实现表单提交（需结合后端才能真正提交，这里先做前端样式）：
<!-- 第六行：个人介绍 -->
<tr>
<td>个人介绍</td>
<td>
<textarea rows="4" placeholder="分享你的兴趣故事"></textarea>
</td>
</tr>
<!-- 第七行：注册按钮 -->
<tr>
<td></td>
<td>
<input type="submit" value="立即注册" />
</td>
</tr>
rows="4"：设置文本域默认高度，可自由调整
步骤 7：协议勾选 & 承诺
最后加用户协议和社区规范，用复选框让用户确认：
<!-- 第八行：用户协议 -->
<tr>
<td></td>
<td>
<input type="checkbox"> 我已阅读并同意 <a href="#">《兴趣星球用户协议》</a>
</td>
</tr>
<!-- 第九行：社区规范 -->
<tr>
<td></td>
<td>
<h5>我承诺遵守社区规范</h5>
</td>
</tr>
四、手写笔记（仅供参考）
五、总结 & 拓展方向
通过这个表单，你已经掌握：
- 7 种表单元素（
text/email/radio/select/checkbox/textarea/submit）的用法 <label>提升交互的技巧（点击文字 / 图标选单选框）- 表单元素的分组（单选互斥、复选多选）
下一步可以拓展：
- 用 CSS 美化：给输入框加样式、调整表格布局，让页面更美观
- 用 JavaScript 做表单验证：比如检查用户名是否为空、协议是否勾选，提交前拦截错误
- 结合 后端语言（如 PHP/Node.js） ：实现真正的注册功能，把数据存到数据库
如果想让表单更 “聪明”，比如自动检查输入格式、提交时弹出确认框，可以留言说 “想学习表单验证”，我继续教大家用 JS 实现！
我的代码仓库：github.com/TANG1110/fr…（欢迎查看）
觉得有收获的话，欢迎点赞 + 收藏，你的支持是我更新的动力呀 💕
