全部学科
Python全栈
python
NodeJS全栈
nodejs

表单进阶与验证专题测试

20 题 45 分钟 难度:★★

考察知识点

  • 原生表单验证:required/pattern/min/max/step属性、约束验证API
  • 表单提交与编码:enctype编码类型、method提交方法、target目标窗口
  • 表单高级控件:datalist数据列表、output输出元素、fieldset/legend分组
  • 表单无障碍:label关联、aria属性、表单可访问性
💡 参考答案在文末
判断题
1

HTML5 的 pattern 属性值需要用斜杠包裹正则表达式,如 pattern="/^[a-z]+$/"

A

B

2

<input type="date"> 的值格式为 "YYYY-MM-DD",例如 "2024-03-15"。

A

B

3

设置 <fieldset disabled> 后,其内部的所有表单控件都会被禁用,无法接收用户输入。

A

B

4

enctype="text/plain" 是表单提交的推荐编码类型,适用于大多数表单。

A

B

5

使用 method="GET" 提交包含密码的表单是安全的,因为数据会被编码。

A

B

单选题
6

使用 <input type="email"> 时,以下哪个输入值会通过浏览器验证?

A

test

B

test@

C

test@example

D

test@example.com

7

HTML form 元素的 method 属性默认值是?

A

POST

B

GET

C

PUT

D

DELETE

8

使用默认编码类型提交表单,输入内容为 "A & B = C",服务器接收到的数据是什么?

HTML
<form action="/submit" method="POST">
  <input name="content" value="A & B = C">
</form>
A

content=A & B = C

B

content=A%20%26%20B%20%3D%20C

C

content=A+%26+B+%3D+C

D

content=A%26B%3DC

9

以下关于 HTML5 required 属性的说法,正确的是?

A

required 属性可以用于所有表单元素

B

required 属性只适用于 input 元素

C

设置 required 后,用户必须填写才能提交表单

D

required 属性需要配合 JavaScript 才能生效

10

HTML5 的 <datalist> 元素的作用是?

A

创建下拉选择框,替代 select 元素

B

为 input 元素提供预定义的选项建议列表

C

创建多级下拉菜单

D

验证 input 输入是否在选项范围内

11

以下关于 form 元素的 action 属性,说法正确的是?

A

action 属性是必需的,省略会导致表单不提交

B

省略 action 时,表单提交到当前页面 URL

C

action 只能是相对路径

D

action 不能包含查询字符串

12

设置 <form target="_blank"> 后,表单提交后会发生什么?

A

表单在当前页面提交,刷新当前页面

B

表单在新窗口/标签页中提交,响应显示在新页面

C

表单在父级窗口中提交

D

表单不提交,target 属性无效

13

以下代码中,如何让"同意条款"复选框成为必选项?

HTML
<form>
  <label>
    <input type="checkbox" name="agree">
    同意用户条款
  </label>
  <button type="submit">注册</button>
</form>
A

<input type="checkbox" name="agree" required>

B

<input type="checkbox" name="agree" min="1">

C

<input type="checkbox" name="agree" checked required>

D

checkbox 不支持 required,需要用 JavaScript 验证

多选题
14

关于 HTML5 的 step 属性,以下说法正确的有?

A

step 属性可以用于 type="number" 的 input 元素

B

step="0.01" 可以让用户输入两位小数

C

step 默认值为 1,适用于大多数数字类型

D

step 属性也可以用于 type="time" 的 input 元素

15

关于 HTML form 的 enctype 属性,以下说法正确的有?

A

enctype 默认值是 application/x-www-form-urlencoded

B

enctype="multipart/form-data" 用于上传文件

C

enctype="text/plain" 会保留空格但不编码特殊字符

D

上传文件时必须使用 enctype="multipart/form-data"

16

关于 HTML5 的 <output> 元素,以下说法正确的有?

A

output 元素用于显示计算结果或用户操作的结果

B

output 元素的值可以通过 for 属性关联表单控件

C

output 元素是表单控件,用户可以编辑其内容

D

output 元素可以通过 JavaScript 动态更新值

17

以下关于 HTML5 新增 input 类型的说法,正确的有?

A

type="url" 会验证输入是否为有效的 URL 格式

B

type="tel" 会验证输入是否为有效的电话号码格式

C

type="number" 会验证输入是否为数字

D

type="date" 会提供日期选择器界面

填空题
18

完成以下代码,创建一个必须填写且格式为6位数字的验证码输入框:

HTML
<input type="text"
       !!1_required!!
       !!2_pattern="[0-9]{6}"!!
       title="请输入6位数字验证码"
       placeholder="验证码">
19

完成以下代码,创建一个可上传图片的表单:

HTML
<form action="/upload"
      !!1_method="POST"!!
      !!2_enctype="multipart/form-data"!!>
  <input type="file" name="image" accept="image/*">
  <button type="submit">上传</button>
</form>
20

完成以下代码,创建一个带有标题的用户信息分组:

HTML
<____________>
  <____________>用户基本信息</legend>
  <input name="username" placeholder="用户名">
  <input name="email" placeholder="邮箱">
</____________>
参考答案
1.错误 2.正确 3.正确 4.错误 5.错误 6.D 7.B 8.C 9.C 10.B 11.B 12.B 13.A 14.A;B;C;D 15.A;B;C;D 16.A;B;D 17.A;C;D 18.required;pattern="[0-9]{6}" 19.method="POST";enctype="multipart/form-data" 20.fieldset;legend
想在手机上练习这套试卷?
使用微信卷王开发者小程序,打开首页顶部扫码功能识别二维码
← 上一套试卷 多媒体与嵌入内容专题测试
扫码体验小程序
加载中
想在手机上刷题学习?
使用微信卷王开发者小程序,打开首页顶部扫码功能识别二维码