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

一、实验结果这次实验主要是做一个学员信息收集表用的是 HTML 里的表单form。下面结合代码截图分部分跟你说清楚做了啥、效果咋样。1. 整体页面结构从代码截图能看到页面先搭了 HTML 的基础框架声明了 HTML5 文档类型设置了字符编码UTF-8还加了个适配手机屏幕的视口属性。页面标题是「学员信息收集表」用h2标出来整体结构很清晰就是一个标准的网页开头配置。2. 表单核心配置表单是整个实验的核心代码里form标签里这几个关键属性得重点说actionhttps://httpbin.org/post指定表单提交后数据会发到这个测试地址httpbin 是个常用的测试接口专门验证数据提交methodpost用 POST 方式提交数据比 GET 安全适合传密码、文件这种敏感 / 大体积内容target_blank提交后会在新标签页打开结果不会覆盖当前页面enctypemultipart/form-data这个是重点专门给文件上传用的后面上传头像就靠它。form actionhttps://httpbin.org/post methodpost target_blank enctypemultipart/form-data3. 表单控件核心功能1姓名和密码输入姓名用input typetext是普通的单行输入框还加了maxlength4最多只能输 4 个字符密码用input typepassword输入的内容会隐藏成黑点保护隐私maxlength8限制密码最多 8 位用b把 “姓名”“密码” 加粗再加brbr换行让表单排版更整齐看着不杂乱。b姓名/binput name账号 typetext maxlength4 brbr b密码/binput typepassword name密码 maxlength8 brbr2年级单选框做了 “大一、大二、大三” 三个选项用input typeradio实现。关键是这三个选项的name都叫「年级」这样才能实现「三选一」—— 选了大一就不能选大二互斥效果特别好。每个选项的value也和显示文字对应提交数据时不会出错。b年级 大一input name年级 typeradio value大一 大二input name年级 typeradio value大二 大三input name年级 typeradio value大三 brbr/b3兴趣复选框兴趣是「编程、设计、游戏」用input typecheckbox做的。和单选框不一样复选框能多选比如可以既选编程又选游戏每个选项的name独立设置能正常收集所有选中的内容。b兴趣 编程input typecheckbox name编程 value编程 设计input typecheckbox name设计 value设计 游戏input typecheckbox name游戏 value游戏 brbr/b4上传头像用input typefile做了个文件选择按钮点击后能从电脑里选图片头像配合前面表单的enctypemultipart/form-data就能把头像文件一起提交上去这个功能是表单里很实用的一个点。b上传头像/binput name选择文件 typefile brbr5重置和提交按钮最后加了两个按钮「重置」按钮typereset点一下就能清空所有输入的内容回到初始状态方便填错了重新填「提交」按钮typesubmit点一下就把表单里所有数据按配置的地址和方式提交出去完成整个收集流程。input name重置 typereset input name提交 typesubmit4. 实验最终效果整体代码写下来页面能正常显示所有表单控件输入框能打字、单选 / 复选框能点选、文件按钮能选文件、重置 / 提交按钮能正常交互。代码标签都闭合了没有语法错误浏览器能正常解析完全满足学员信息收集的实验要求。最终表格运行效果提交之后二、实验心得这次 HTML 表单实验是我第一次完整动手做一个带交互的表单比之前的列表、表格更有意思。