Web前端技术第四次作业：表单实验报告

一、实验结果

这次实验主要是做一个学员信息收集表，用的是 HTML 里的表单（form）。下面结合代码截图，分部分跟你说清楚做了啥、效果咋样。

1. 整体页面结构

从代码截图能看到，页面先搭了 HTML 的基础框架，声明了 HTML5 文档类型，设置了字符编码（UTF-8），还加了个适配手机屏幕的视口属性。页面标题是「学员信息收集表」，用<h2>标出来，整体结构很清晰，就是一个标准的网页开头配置。

2. 表单核心配置

表单是整个实验的核心，代码里<form>标签里这几个关键属性得重点说：

action="https://httpbin.org/post"：指定表单提交后，数据会发到这个测试地址（httpbin 是个常用的测试接口，专门验证数据提交）；

method="post"：用 POST 方式提交数据，比 GET 安全，适合传密码、文件这种敏感 / 大体积内容；

target="_blank"：提交后会在新标签页打开结果，不会覆盖当前页面；

enctype="multipart/form-data"：这个是重点，专门给文件上传用的，后面上传头像就靠它。

<form action="https://httpbin.org/post" method="post" target="_blank" enctype="multipart/form-data">

3. 表单控件（核心功能）

（1）姓名和密码输入

姓名用<input type="text">，是普通的单行输入框，还加了maxlength="4"，最多只能输 4 个字符；

密码用<input type="password">，输入的内容会隐藏成黑点，保护隐私，maxlength="8"限制密码最多 8 位；

用<b>把 “姓名”“密码” 加粗，再加<br><br>换行，让表单排版更整齐，看着不杂乱。

<b>姓名：</b><input name="账号" type="text" maxlength="4" > <br><br> <b>密码：</b><input type="password" name="密码" maxlength="8"> <br><br>

（2）年级单选框

做了 “大一、大二、大三” 三个选项，用<input type="radio">实现。关键是这三个选项的name都叫「年级」，这样才能实现「三选一」—— 选了大一就不能选大二，互斥效果特别好。每个选项的value也和显示文字对应，提交数据时不会出错。

<b>年级： 大一<input name="年级" type="radio" value="大一"> 大二<input name="年级" type="radio" value="大二"> 大三<input name="年级" type="radio" value="大三"> <br><br></b>

（3）兴趣复选框

兴趣是「编程、设计、游戏」，用<input type="checkbox">做的。和单选框不一样，复选框能多选，比如可以既选编程又选游戏，每个选项的name独立设置，能正常收集所有选中的内容。

<b>兴趣： 编程<input type="checkbox" name="编程" value="编程"> 设计<input type="checkbox" name="设计" value="设计"> 游戏<input type="checkbox" name="游戏" value="游戏"> <br><br></b>

（4）上传头像

用<input type="file">做了个文件选择按钮，点击后能从电脑里选图片（头像），配合前面表单的enctype="multipart/form-data"，就能把头像文件一起提交上去，这个功能是表单里很实用的一个点。

<b>上传头像：</b><input name="选择文件" type="file"> <br><br>

（5）重置和提交按钮

最后加了两个按钮：

「重置」按钮（type="reset"）：点一下就能清空所有输入的内容，回到初始状态，方便填错了重新填；

「提交」按钮（type="submit"）：点一下就把表单里所有数据，按配置的地址和方式提交出去，完成整个收集流程。

<input name="重置" type="reset" > <input name="提交" type="submit">

4. 实验最终效果

整体代码写下来，页面能正常显示所有表单控件，输入框能打字、单选 / 复选框能点选、文件按钮能选文件、重置 / 提交按钮能正常交互。代码标签都闭合了，没有语法错误，浏览器能正常解析，完全满足学员信息收集的实验要求。

最终表格运行效果：

提交之后：

二、实验心得

这次 HTML 表单实验，是我第一次完整动手做一个带交互的表单，比之前的列表、表格更有意思。