项目3：HTML5表单

黑龙江旅游职业技术学院 · 《网页设计与制作》
授课教师：刘继峰

🎯 教学目标

知识目标

1. 掌握HTML5表单的基本概念及 <form> 标签语法。
2. 掌握 <input>、<select>、<textarea> 等核心控件的使用。

能力目标

1. 能够使用表单控件制作登录、注册及调查问卷页面。
2. 能够利用CSS对表单进行基础美化。

素质目标

1. 培养精益求精的工匠精神。
2. 培养团队协作与解决技术难题的能力。

🚩 任务1：制作“大学生社会实践调研表”

💡 任务分析： 表单是网页与用户交互的核心。本任务旨在通过构建一个调研表，掌握表单域的创建及基本控件的使用。

🛠️ 相关知识点

表单标签 <form>： 定义表单域，是包含提示信息与控件的容器。必须包含 action (提交地址) 和 method (提交方式) 属性。
输入控件 <input>： 最常用的表单元素。通过 type 属性改变形态（如 text, password, radio, checkbox）。
单选与复选： 单选按钮 (radio) 需设置相同的 name 属性以实现互斥；复选框 (checkbox) 可多选。

⚙️ 知识点：表单基础

表单域 <form>： 所有表单控件必须放在 <form>...</form> 内部。

						<form action="process.php" method="post">

						  <label for="name">姓名：</label>

						  <input type="text" id="name" name="username">

						  <input type="submit" value="提交">

						</form>

属性	值	说明
`action`	URL地址	指定接收并处理表单数据的服务器程序地址。
`method`	get / post	get：数据在URL可见，不安全但快；post：数据在请求体中，更安全。

📱 HTML5 Input 常用新类型

HTML5 引入了多种新的输入类型，提供了更好的输入控制和验证，特别是在移动端设备上能唤起专用的键盘。

📝 任务2：学生信息注册表

请综合运用所学标签，完成下方的学生注册表单设计。注意必填项标记及表单对齐。

🚀 知识点：高级表单标签

除了基础的 input，HTML5 还提供了一些增强用户体验的高级标签。

1. datalist (数据列表)

为 input 提供预定义的选项列表，类似于“自动补全”功能。

选择浏览器：

2. output (计算结果)

用于显示计算的结果或用户操作的输出。

3. keygen (密钥对生成器 - 已废弃但需了解)

注意：此标签在现代浏览器中支持度较差，主要用于旧版安全表单。

规定用于表单的密钥对生成器字段。

📝 随堂测试

请回答以下问题，检验学习成果：

1. 在HTML5中，用于创建滑块控件的 input type 是？

A. range B. slider C. number

2. 哪个属性用于规定输入字段的必填项？

A. validate B. required C. need

📌 课堂总结

表单结构：掌握 <form> 及其 action/method 属性的作用。
Input 家族：熟练运用 text, password, radio, checkbox, file 等基础类型。
HTML5 增强：学会使用 email, url, date, range 等新类型提升交互体验。
语义化标签：理解 label (关联点击), fieldset (分组), legend (标题) 的重要性。
属性验证：利用 required, placeholder, pattern 进行简单的客户端验证。