Web前端技术实验

实验04　酒店筛选表单

课程代码 ZY070018｜适用：2024级、2025级｜第4次
2026—2027学年第一学期
字段内容字段内容
大纲锚点实验项目四：通过表单实现酒店筛选学时拆分完整项目（2学时）
项目属性基础验证型 / 必做 / 1人一组课程目标LO1、LO2、LO3
本次实验按任务书完成并现场验收；单次成绩按100分记录，课程总评按本年级教学大纲执行。

一、学习目标

  • 掌握form、label、input、select、textarea、fieldset、legend和button。
  • 能设置合适的type、name、value、required、min、max等属性。
  • 理解标签关联、错误提示和键盘操作是表单质量的一部分。

二、核心任务

  1. 制作酒店筛选表单，包含目的地、入住/离店日期、人数、价格区间、设施和排序方式。
  2. 所有控件都应有可见label；相关选项使用fieldset和legend分组。
  3. 使用HTML约束完成必填、日期和数值范围校验，并设计清晰的提交/重置按钮。
  4. 提交时用JavaScript读取FormData，将已选条件显示在页面摘要区，不跳转服务器。

三、验收标准

序号可观察条件记录
1鼠标和键盘均可完成填写与提交。□通过　□需修改
2必填和范围错误能被浏览器或页面明确提示。□通过　□需修改
3提交摘要与实际选项一致，控制台无错误。□通过　□需修改

四、提交物

  • 筛选表单源码
  • 有效输入截图
  • 无效输入提示截图
  • 实验报告

统一命名：学号_姓名_实验04

五、90分钟流程

时间活动
0—10说明与安全检查
10—25预测、演示、最小验证
25—65独立完成核心任务
65—80测试与同伴复核
80—90抽查与退出记录

六、评分量规（100分）

维度分值判定要点
功能与任务完成45必做功能可运行，数据和交互正确
测试与问题修复20有边界或错误测试，并保留复测记录
代码与页面质量15结构、命名规范，控制台无未解释错误
报告与证据15报告、截图与源码相互对应
现场解释5能解释关键实现和至少一项修改

七、拓展与思考

选做：根据筛选条件从给定酒店数组中显示匹配数量。

思考：为什么placeholder不能替代label？

八、AI辅助记录

如使用AI，记录问题、采用或拒绝的建议、本人修改及验证方法；未使用则注明“未使用”。