大学Web 前端开发基础（HTML/CSS/JavaScript）上册《表单与数据验证》练习题

共 27 道沉淀题 · AI 对照课标原创 · 三重审校答案可核对

需要完整试卷（Web 前端开发基础（HTML/CSS/JavaScript）上册《表单与数据验证》单元测试卷）？

按本单元考点 AI 生成整卷：正卷 + 答案页 + 逐题解析，PDF 精排 / Word 可编辑 / 打印装订寄到家。

本单元考点（5 个）

表单元素与结构表单控件属性HTML5内置验证JavaScript自定义校验表单提交与数据序列化

本单元练习题（27 题）

选择题 ★ 精品详情 →

1. 在 HTML5 中，某同学编写了一个用户注册表单，其中用户名输入框的代码为：<input type="text" name="username">。若要在提交表单后服务器端能接收到该输入框的数据，<input> 标签中起关键作用的属性是（　） A. type　　B. name　　C. id　　D. placeholder

登录查看答案

判断题 ★ 精品详情 →

2. 某表单为 `<form action="/send" method="get"><input name="user" value="Lin Q"><input type="checkbox" name="tag" value="web" checked><input type="checkbox" name="opt" value="yes"><input type="submit" value="提交"></form>`，用户点击提交按钮。判断：浏览器提交的查询字符串为 `user=Lin+Q&tag=web&opt=yes`。

登录查看答案

填空题 ★ 精品详情 →

3. 在表单中有三个单选按钮，前两个的name属性均为"g1"，第三个的name属性为"g2"。已知用户当前已选中第一个按钮。若要求该按钮保持选中状态不变，则用户还能再选中的单选按钮最多有____个。

登录查看答案

判断题 ★ 精品详情 →

4. 判断题：在 JavaScript 自定义表单校验中，当输入框的值不符合要求时，可以调用该输入框的 setCustomValidity() 方法传入自定义错误文字，此时表单提交会被阻止并显示该提示；若输入合法，则应调用 setCustomValidity('') 传入空字符串以清除错误状态，否则即使输入正确也无法正常提交表单。

登录查看答案

填空题 ★ 精品详情 →

5. 在 JavaScript 自定义表单校验中，若检测到输入框内容不符合要求，需调用输入框的____方法并传入错误提示文本，设置自定义校验错误。

登录查看答案

判断题 ★ 精品详情 →

6. 判断：某表单中有一个输入框写的是 <input type="email" required>，另一个写的是 <input type="text" required minlength="5" maxlength="10">。当用户在第一个输入框中填入"abc@"并提交时，浏览器会因其不满足 minlength="5" 而阻止提交；而第二个输入框中填入 8 个字符的任意内容一定能通过验证。

登录查看答案

选择题 ★ 精品详情 →

7. 下列哪个 HTML5 属性用于规定表单控件在提交前必须填写内容，否则浏览器会阻止提交并给出提示？ A. placeholder　B. required　C. autofocus　D. autocomplete

登录查看答案

判断题 ★ 精品详情 →

8. 某页面将一个 <form> 元素直接嵌套在另一个 <form> 元素内，并认为这种写法符合 HTML 表单结构规范。判断该说法是否正确。

登录查看答案

选择题 ★ 精品详情 →

9. 某登录表单代码如下：<form> 用户名：<input type='text' name='user' required> 密码：<input type='password' name='pwd' required minlength='8'> <button type='submit'>登录</button> </form>。现用户在用户名框输入'admin'，在密码框输入'pass123'（共7个字符）后点击提交按钮。在支持 HTML5 内置验证的浏览器中，实际发生的验证结果与提交行为是：A. 密码框触发 minlength 验证失败，表单不提交，密码框提示长度不足 B. 两个输入框均验证通过，表单正常提交 C. 密码框验证通过，因密码以数字结尾，表单提交 D. 用户名框触发 required 验证失败，表单不提交

登录查看答案

判断题 ★ 精品详情 →

10. 某表单包含 <input type="email" required>，且 <form> 设置了 novalidate。该输入框留空后，用户点击普通提交按钮，浏览器仍会依据 required 阻止表单提交。判断此说法是否正确。

登录查看答案

填空题 ★ 精品详情 →

11. 某表单中有控件 <input type="number" min="1.25" max="8.9" step="1.5">。若浏览器按 HTML5 内置验证规则检查该控件，且只考虑 min、max、step 的约束，则不超过 max 的最大有效输入值是 ___。

登录查看答案

选择题 ★ 精品详情 →

12. 某页面包含表单：<form action="/save" method="post"><input name="title" value="a&b"><input name="tag" value="C++"></form>，用户点击提交按钮后，浏览器将请求体发送到 /save。若采用默认的 urlencoded 序列化方式，该请求体应为（　　） A. title=a&b&tag=C++ B. title=a%26b&tag=C%2B%2B C. title=a%26b,tag=C%2B%2B D. title=a+b&tag=C++

登录查看答案

选择题 ★ 精品详情 →

13. 某页面通过 `fetch` 发送表单数据，代码为 `const fd = new FormData(form); const body = new URLSearchParams(fd); fetch('/submit', {method:'POST', body});`。表单中有两个成功控件：`<input name="tag" value="blue sky">` 与 `<input name="tag" value="R&D">`。请求体的序列化结果是哪一项？ A. `tag=blue+sky&tag=R%26D`　B. `tag=blue%20sky&tag=R%26D`　C. `tag=R%26D&tag=blue+sky`　D. `tag=blue+sky`

登录查看答案

填空题 ★ 精品详情 →

14. 某活动报名表单包含三个控件：一个文本输入框（name 为 nick，设置了 required 和 disabled），一个电子邮件输入框（name 为 mail，设置了 required），一个提交按钮（value 为“提交”，设置了 formnovalidate）。用户未填写任何内容，直接点击“提交”。浏览器____（填“会”或“不会”）因 mail 为空而阻止提交；提交后后端收到的表单数据中，name 为 nick 的字段____（填“存在”或“不存在”）。

登录查看答案

选择题 ★ 精品详情 →

15. 某页面表单片段如下： <form> <input id="p" type="text" required value=" "> <input id="q" type="text" required readonly value=""> <input id="r" type="text" required pattern="[0-9]{4}" value="1234"> <input id="s" type="text" required value=""> </form> 点击普通 submit 按钮时，HTML5 内置验证会因哪些元素的存在而阻止表单提交？ A. 仅 s B. p 和 s C. 仅 q 和 s D. 仅 p

登录查看答案

选择题详情 →

16. 某表单包含 <input type="text" required pattern="[A-Z]{2}[0-9]{3}"> 和 <input type="number" required min="2" max="10" step="3">，提交按钮为普通 submit 按钮，表单未设置 novalidate。哪组输入能通过浏览器的 HTML5 内置验证并提交？ A. AB123 和 5　B. Ab123 和 5　C. AB123 和 6　D. AB123 和 11

登录查看答案

判断题详情 →

17. 在 HTML 中，<form> 元素可包裹表单控件；<input>、<select> 和 <textarea> 可作为表单控件，<label> 用于提供控件标签。判断该表述是否正确。

登录查看答案

填空题详情 →

18. 在 HTML 表单中使用 JavaScript 自定义校验时，若输入框设置了 required 属性但希望浏览器采用自定义错误提示，需在 JS 中调用输入框的 setCustomValidity 方法，并在校验通过时传入参数 ____，否则浏览器会一直认为该输入无效。

登录查看答案

判断题详情 →

19. 判断：在 JavaScript 自定义表单校验中，为输入框设置 pattern 属性后，用户提交表单时浏览器会自动完成格式校验，因此开发者无需再通过监听表单的 submit 或 input 事件编写任何校验代码，自定义校验就已完成。

登录查看答案

填空题详情 →

20. 在 JavaScript 自定义表单校验中，若要阻止表单提交并在输入框下方显示自定义错误信息，应在表单的 submit 事件处理函数中调用 event.____() 阻止默认提交，再通过 validity 属性判断后调用输入框的 setCustomValidity() 设置提示文字，最后还需调用该输入框的 reportValidity() 方法让提示显示出来。

登录查看答案

填空题详情 →

21. 在 HTML 中，用于定义表单容器的元素是 ____；若要创建一个可多行输入的文本控件，应使用 ____ 元素；若要为输入框提供说明文字并实现点击文字聚焦控件的效果，应使用 ____ 元素（配合 for 属性与控件的 id 关联）。

登录查看答案

判断题详情 →

22. 判断：在 HTML5 表单中，<input type="number" min="1" max="10"> 会在用户提交时由浏览器检查输入值是否处于 1 到 10 的范围内；超出范围时，浏览器会阻止表单提交。

登录查看答案

选择题详情 →

23. 在 HTML 表单中，若要求某个文本输入框必须填写内容才能提交，应在该 input 控件中添加哪个属性？ A. placeholder B. required C. value D. maxlength

登录查看答案

判断题详情 →

24. 判断：若某文本输入框设置了 required 属性，且用户提交时该框为空，则浏览器会阻止表单提交并提示该字段为必填项。

登录查看答案

填空题详情 →

25. 某注册表单要求用户填写账号，账号不能为空且最多输入 18 个字符。为实现这两项约束，应分别在文本输入控件上设置 ____ 属性和 ____ 属性（按“不能为空、限制长度”的顺序填写）。

登录查看答案

选择题详情 →

26. 某预约表单需要把“就诊人信息”中的多个相关控件组织为一个语义分组，并为该分组提供标题。应使用哪种元素组合？ A. <fieldset> 与 <legend>　B. <section> 与 <title>　C. <select> 与 <option>　D. <div> 与 <caption>

登录查看答案

填空题详情 →

27. 某页面有如下表单结构代码：<form> <fieldset> <legend>联系方式</legend> <input type='text' name='phone'> <input type='text' name='email'> </fieldset> <input type='text' name='remark'> </form>。请按代码填写：该表单中直接定义表单控件的元素共有 ____ 个；fieldset 内部用于为分组提供标题的元素是 ____；若要把'联系方式'分组中的两个输入框与分组外的 remark 输入框区分开，语义上分组的边界由 ____ 元素划定。

登录查看答案

Web 前端开发基础（HTML/CSS/JavaScript）其他单元练习题

HTML 基础（9题）CSS 基础（27题）CSS 布局与响应式（27题）JavaScript 语法基础（27题）DOM 操作与事件（27题）面向对象与ES6+（27题）综合实战项目（27题）

题目由 AI 对照课标原创生成并经机审+人审，如发现质量问题可联系我们。