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 langzh-CN head meta charsetUTF-8 title学员信息表/title /head body h2学员信息收集表/h2 form action methodpost enctypemultipart/form-data p姓名: input typetext nameusername/p p密码: input typepassword namepwd/p p年级: 大一input typeradio namegrade valuefreshman 大二input typeradio namegrade valuesophomore 大三input typeradio namegrade valuejunior /p p兴趣: 编程input typecheckbox namehobby valuecode 设计input typecheckbox namehobby valuedesign 游戏input typecheckbox namehobby valuegame /p p上传头像: input typefile nameavatar/p pinput typereset value重置 input typesubmit value提交/p /form /body /html ​五、完整代码运行效果截图六、代码逐行详细讲解1. !DOCTYPE html 声明这是HTML5页面。2. html 、 head 、 body 网页基本结构。3. meta charsetUTF-8 防止中文乱码。4. form 表单区域设置提交方式和上传格式。5. input typetext 姓名输入框。6. input typepassword 密码框内容隐藏。7. input typeradio 单选框一组 name 相同。8. input typecheckbox 复选框可多选。9. input typefile 选择文件上传。10. reset 清空表单 submit 提交表单。七、运行效果打开文件后页面显示- 姓名、密码输入框- 年级单选、兴趣多选- 上传头像按钮- 重置、提交按钮所有功能均可正常使用。八、实验心得通过这次实验我学会了HTML表单的基本写法知道了不同 input 类型的用处理解了表单是网页收集数据的重要方式。动手写代码后对标签和属性更熟悉为以后学习网页开发打下了基础。