全部学科

GO后端

golang gorm gin

Web前端

TypeScript vue CSS HTML javascript npm pinia vite

Python全栈

NodeJS全栈

通用技术

redis git docker nginx mysql zookeeper rabbitmq

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

📝 1 篇文章 20 道配套习题

HTML表单进阶与验证专题

专题说明

本专题系统讲解HTML5表单进阶技术，包括原生验证属性的使用、表单提交与编码配置、高级表单控件、HTML5新增输入类型的验证等内容。

学习目标

掌握required、pattern、min/max、step等原生验证属性
掌握表单method、enctype、target属性的配置
掌握datalist、fieldset/legend、output等高级控件
掌握email、url、tel、number、date等HTML5输入类型验证
掌握按钮form*属性系列覆盖表单默认设置

学习内容

原生验证：required必填、pattern正则、min/max范围、step步进
表单提交：method(GET/POST)、enctype编码类型、target响应位置
高级控件：datalist预定义选项、fieldset分组、output输出显示
输入类型：email邮箱验证、url链接验证、number数字验证、date日期验证
按钮属性：formaction、formmethod、formenctype、formtarget、formnovalidate

学习建议

原生验证属性可减少JavaScript代码，优先使用HTML5原生能力
pattern不自动添加锚点，需手动处理完整匹配
文件上传必须使用enctype="multipart/form-data"
tel类型无原生验证，需配合pattern实现特定格式验证
按钮form*属性可实现同一表单多种提交行为

📝 配套习题（20 题）

💡 参考答案在文末

判断题

1

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

A

对

B

错

2

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

A

对

B

错

3

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

A

对

B

错

4

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

A

对

B

错

单选题

5

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

A

test

B

test@

C

test@example

D

test@example.com

6

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

A

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

B

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

C

创建多级下拉菜单

D

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

7

为什么 <input type="tel"> 不提供原生电话号码格式验证？

A

电话号码格式因国家和地区不同，无法统一验证

B

tel 类型是早期 HTML 版本遗留，还未实现验证

C

电话号码验证需要网络请求，不适合客户端

D

tel 类型验证已被废弃，应使用 text 类型

8

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

A

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

B

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

C

表单在父级窗口中提交

D

表单不提交，target 属性无效

9

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

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 验证

10

使用默认编码类型提交表单，输入内容为 "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

11

以下关于 HTML5 required 属性的说法，正确的是？

A

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

B

required 属性只适用于 input 元素

C

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

D

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

12

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

A

POST

B

GET

C

PUT

D

DELETE

多选题

13

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

A

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

B

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

C

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

D

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

14

datalist 可以配合以下哪些 input 类型使用？

A

type="text"

B

type="email"

C

type="range"

D

type="color"

15

以下关于表单提交按钮的 form* 属性系列，说法正确的有？

A

formaction 可以覆盖 form 的 action 属性

B

formmethod 可以覆盖 form 的 method 属性

C

formenctype 可以覆盖 form 的 enctype 属性

D

formtarget 可以覆盖 form 的 target 属性

16

关于 HTML form 的 enctype 属性，以下说法正确的有？

A

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

B

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

C

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

D

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

17

关于 HTML5 的 step 属性，以下说法正确的有？

A

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

B

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

C

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

D

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

填空题

18

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

HTML

<____________>
  <____________>用户基本信息</legend>
  <input name="username" placeholder="用户名">
  <input name="email" placeholder="邮箱">
</____________>

19

完成以下代码，创建一个年龄输入框（18-100岁整数）：

HTML

<input type="____________"
       !!2_min="18"!!
       !!3_max="100"!!
       step="1"
       placeholder="年龄">

20

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

HTML

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

参考答案

1.错误 2.错误 3.正确 4.错误 5.D 6.B 7.A 8.B 9.A 10.C 11.C 12.B 13.A;B;D 14.A;B;C;D 15.A;B;C;D 16.A;B;C;D 17.A;B;C;D 18.fieldset;legend 19.number;min="18";max="100" 20.required;pattern="[0-9]{6}"

想在手机上练习这套专题？

使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码