HTML表单实验报告实战【零基础入门，快来快来！！！】
一 、实验目的
二、实验环境
三、核心知识点总结(HTML表单的核心标签)
四、完整代码实现（表单）
五、代码运行效果截图
六、代码逐行详细讲解
七、运行的效果
八、实践实验心得
一、实验目的
1.掌握HTML表单标签的使用。
2.学会使用文本框、密码框、单选框、复选框、上传、提交、重置按钮。
3.理解 form 、 input 、 name 、 type 等属性作用。
4.能独立写出可运行的表单页面并运行该结果。
二、实验环境
-系统：Windows 10/11
- 编辑器：VS Code
- 浏览器：华为浏览器
- 语言：HTML5
三、核心知识点
1. <form> 是表单容器，负责包裹所有表单项。
2. <input> 标签的type属性
控制表单控件的类型：- 如text 文本框
- password 密码框
- radio 单选框
- checkbox 复选框
- file 文件上传
- submit 提交按钮
- reset 重置按钮
3. name 属性： 是控件名字，用于后端接收数据。
4. 同一组单选框 name 必须相同，才能只选一个。
5. value 属性：是指控制的默认值/提交值，单选框、复选框提交到后端的就是value的值。
6.enctype 属性：是指表单数据的编码方式，上传文件时必须设置为multipart/form-data
四、完整代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>学员信息表</title> </head> <body> <h2>学员信息收集表</h2> <form action="" method="post" enctype="multipart/form-data"> <p>姓名: <input type="text" name="username"></p > <p>密码: <input type="password" name="pwd"></p > <p>年级: 大一<input type="radio" name="grade" value="freshman"> 大二<input type="radio" name="grade" value="sophomore"> 大三<input type="radio" name="grade" value="junior"> </p > <p>兴趣: 编程<input type="checkbox" name="hobby" value="code"> 设计<input type="checkbox" name="hobby" value="design"> 游戏<input type="checkbox" name="hobby" value="game"> </p > <p>上传头像: <input type="file" name="avatar"></p > <p><input type="reset" value="重置"> <input type="submit" value="提交"></p > </form> </body> </html> 五、完整代码运行效果截图
六、代码逐行详细讲解
1. <!DOCTYPE html> ：声明这是HTML5页面。
2. <html> 、 <head> 、 <body> ：网页基本结构。
3. <meta charset="UTF-8"> ：防止中文乱码。
4. <form> ：表单区域，设置提交方式和上传格式。
5. <input type="text"> ：姓名输入框。
6. <input type="password"> ：密码框，内容隐藏。
7. <input type="radio"> ：单选框，一组 name 相同。
8. <input type="checkbox"> ：复选框，可多选。
9. <input type="file"> ：选择文件上传。
10. reset ：清空表单； submit ：提交表单。
七、运行效果
打开文件后，页面显示：
- 姓名、密码输入框
- 年级单选、兴趣多选
- 上传头像按钮
- 重置、提交按钮
所有功能均可正常使用。
八、实验心得
通过这次实验，我学会了HTML表单的基本写法，知道了不同 input 类型的用处，理解了表单是网页收集数据的重要方式。动手写代码后，对标签和属性更熟悉，为以后学习网页开发打下了基础。