测验

第 4 周概念自测，题目取自本周四篇概念文档（表单、控件、数据校验、UI术语手册）。提交后立即看答案与解析。

单选

1. 提交表单后，浏览器跳出一个文件下载提示，下载下来的正是 save.php 的源代码。最可能的原因是？

浏览器版本太旧，不支持表单提交 服务器不支持 PHP，Web 服务器把这个文件当作非 html 页面的普通附件直接返回 表单的 action 地址写错了 enctype 属性漏掉了

2. 表单出现之前与之后，浏览器与服务器之间数据方向的变化是？

没有变化，一直都是双向的 之前只能拉取（pull）读取信息，表单让浏览器能向服务器推送（push）数据、写入信息 之前只能推送，表单让浏览器能拉取 表单只是页面装饰，与数据方向无关

3. 一个执行"删除"操作的表单，如果用了 method="get"，最大的危险是？

GET 传输速度比 POST 慢 数据会显示在地址栏里，不好看 搜索引擎等第三方客户端默认会访问和触发所有 GET 请求，等于替用户执行了删除 GET 方式无法把数据发送到后端

4. GET 与 POST 两种方式下，表单数据分别放在哪里？

都放在 HTTP 报文头部 GET 把数据附加到 URL 的查询字符串，POST 把数据封装在 HTTP 报文里发送 GET 封装在报文里，POST 附加在 URL 上 都放在 URL 上，只是分隔符不同

5. 在社交站点登录成功后，你没有在地址栏键入任何地址，却立刻看到了首页。这最可能是后端做了什么？

浏览器的历史记录功能 登录脚本在校验通过后发起了一个 HTTP 重定向 服务器把首页直接塞进了登录页的响应里 前端 JavaScript 偷偷帮你输入了地址

6. 一组单选框（radio）出现在页面上，却发现个个都能同时选中，单选失效。最常见的原因是？

忘记写 value 属性 这组单选框各写了不同的 name 浏览器不支持这么多单选框 没有设置 checked 属性

7. 关于控件的 name 与 id 两个属性，课程给出的记法是？

name 是前端属性，id 是后端属性 name 是后端属性（服务端脚本按 name 读取控件的值），id 是前端属性 两者完全等价，可互换 id 才是传给后端的，name 只用于样式

8. HTML5 新增的 input 类型（tel、email、date、color 等）与老类型相比，正确的理解是？

只是外观画得不一样，行为完全相同 除了外观，还会切换手机键盘、打开系统原生选择器、自带基础校验 主要为了让 CSS 更容易选中它们 是给后端识别字段类型用的，与浏览器无关

9. 为什么客户端校验不能作为唯一的防线，服务端校验必须存在？课程给出的两处缺失是？

前端校验速度慢、写法麻烦 既拦得住人也拦得住绕过（F12 删 required、curl 直接发请求），只是成本高 一处是可被绕过（按 F12 删掉 required 或用 curl 直接发请求），另一处是答不了只有服务器才知道的事（如用户名是否已被注册） 前端校验只在 Chrome 生效，其它浏览器不支持

10. "两次输入的密码必须相同"这条规则，为什么用 required/pattern 这类校验属性写不出来？

因为正则表达式能力不够 因为它不是任何单个字段自身的规则，而是两个字段之间的关系，声明式属性只能描述单字段 因为密码字段不允许加属性 其实写得出来，只是没人这么用

11. 注册页上填完用户名还没点提交，就提示"该用户名已被注册"。这条校验算前端校验吗？

算，因为提示是浏览器显示的 不算，这是前端触发的服务端校验——浏览器发请求去问，查证与裁决始终在服务端 算，因为浏览器本地有全站用户名列表 不算，这只是页面特效，与校验无关

12. modal、popover、tooltip、toast 四个常被统称"弹窗"的组件中，挡住背后内容、必须先处理它才能继续操作的是？

popover tooltip modal toast

多选

1. 关于前端（客户端）校验，下列说法正确的有哪些？（多选）

即时反馈，填完立刻提示，不用等一趟网络 省资源，非法输入根本不发出请求，服务器白干的活全免了 能防止恶意用户绕过检查 能查出用户名是否已被别人注册

2. 数据校验的"三道防线"中，各道防线拦的是什么？（多选）

前端校验拦体验问题 服务端校验拦恶意与错误 数据库约束（NOT NULL、UNIQUE 等）兜底，在写入的最后一刻拒绝脏数据 数据库约束可以替代服务端校验，后端就不用再检查了

3. 关于 modal、popover、tooltip、toast 四个组件的说法，正确的有哪些？（多选）

toast 是几秒后定时自动消失的操作回执，如「已保存」 popover 锚定在触发点旁边，点外部即收起 tooltip 挡住背后内容，必须先处理它 modal 挡住背后的那层灰色叫 scrim（遮罩），「点遮罩关闭」是它的常用交互

4. 按课程的收敛光谱，下列控件中提交值"只能是预置选项之一"（值域封闭）的有哪些？（多选）

单选框 复选框 下拉列表 文本框 数字输入框

5. 界面术语的四层架构中，下列说法正确的有哪些？（多选）

控件层回答"用户输入什么"，如按钮、单选框、开关 组件层回答"可复用的界面块长什么样"，如模态框、标签页、面包屑 模式层回答"一类问题怎么解"，如搜索加自动补全、分页、空状态 风格层与组件层绑定死了，换了风格组件就得重写