0

0

HTML5中的表单

高洛峰

高洛峰

发布时间:2017-02-06 14:11:23

|

1456人浏览过

|

来源于php中文网

原创

相对于 html4 来说,html5中的元素与特性提供更大程度上的语义标记,同时还删除了大量在 html4 中因为脚本与样式缘故而存在的冗余元素。通过让表单在不同网站上表现的更加一致,及时响应用户输入的数据,html5的表单特性为用户提供了更好的使用体验。这些体验同样适用于那些禁用了浏览器脚本的用户。

这个话题会描述那些被 Gecko/Firefox4 或更高版本所支持的一些新特性或者改变的部分。

元素

的 type 特性拥有更多的值.

search: 这个元素呈现为一个搜索框。换行符会从输入值中去掉,此外没有其他的语法增强了。

立即学习前端免费学习笔记(深入)”;

tel: 这个元素可现为一个编辑电话号码的输入控件。换行符会从输入值中去掉,此外没有其他的语法增强了,因为电话号码国际化差异非常明显。你可以使用如 pattern 与 maxlength 等属性来限制输入到控件中的值。

url: 这个元素呈现为一个编辑URL 的输入控件。换行符与首尾的空格将会被自动去除。

email: 这个元素呈现为一个邮件地址。换行符会被自动去除。可以设置一个无效的邮件地址,但若满足输入框的限制,必须遵守在扩展的巴科斯范式(ABNF)中的规范:1( atext / "." ) "@" ldh-str 1( "." ldh-str ) 其中atext 在规范RFC 5322 section 3.2.3 中被定义,而ldh-str在规范RFC 1034 section 3.5 中被定义。.

注意: 若设置multiple属性, 区域中可以用逗号分割的方式,输入多个email, 但 Firefox不支持. 元素也拥有一些新的特性。

list: 元素的 ID,该元素的内容,

pattern: 一个正则表达式,用于检查控件的值,能够作用于 type 值是 text, tel, search, url, 和 email 的 input 元素。

form: 一个字符串,用于表明该 input 属于哪个

元素。一个 input 只能存在于一个表单中。

formmethod:一个字符串,用于表明表单提交时会使用哪个 HTTP 方法 (GET 或 POST);如果定义了它,则可以覆盖

元素上的 method 特性。只有当 type 值为 image 或 submit,并且 form 特性被设置的情况下, formmethod 才能生效。

x-moz-errormessage : 一个字符串,当表单字段验证失败后显示错误信息。该值为 Mozilla 扩展,并非标准。

元素

元素有了一个新特性:

novalidate:设置了该特性不会在表单提交之前对其进行验证。

元素

元素会在填写 字段时,显示一列

你可以使用 元素上的 list 特性来将一个特定的 input 与特定的 元素做关联。

元素

元素表示计算的结果。

你可以使用 for 特性来在 元素与文档内其他能够影响运算的元素(例如,input 或参数)建立关联。 for 特性的值是以空格做分隔的其他元素的 ID 列表。

Gecko 2.0 (其他浏览器并非如此) 支持为 元素自定义有效性约束(validity constraints)与错误信息,可以对其使用如下 CSS 伪类::invalid, :valid, :-moz-ui-invalid,与 :-moz-ui-valid。在如下情况会显得很有用:例如计算结果违反了业务规则,但却并非因为特定的 input 值出现错误(例如,「百分比总数不能超过100」)。

placeholder 特性

placeholder 特性作用于

autofocus 特性

autofocus 特性让你能够指定一个表单控件,当页面载入后该表单自动获得焦点,除非用户覆盖它,例如在另一个控件中输入值。一个文档内只有一个表单能够拥有 autofocus 特性,它是一个 Boolean 值。这个特性适用于

label.control DOM 属性

HTMLLabelElement DOM 接口除了为

表单大师AI
表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具,可以帮助用户快速、高效地生成各类专业表单。

下载

约束验证

HTML5 为客户端表单的验证提供了语法与 API。当然这些功能无法取代服务器端验证,出于安全性与数据完整性的考虑,服务器端验证仍然必不可少,但是客户端验证能够通过对输入数据的即时反馈来提供良好的用户体验。

如果 元素设置了 title 特性,当验证失败时,特性值会显示在提示信息中。如果 title 设置为空字符串,则不会显示提示信息。如果没有设置 title 特性,会使用标准验证信息(例如通过 x-moz-errormessage 特性指定,或调用 setCustomValidity() 方法) 代为显示。

注意: 约束验证不支持表单中的

下列 HTML5 语法中的条目用于为表单数据指定约束。

,

元素上的 pattern 特性用于限定元素值必须匹配一个特定的正则表达式。

元素上的 min 与 max 特性限定了能够输入元素的最大与最小值。

元素的 step 特性(与 min 与 max 特性结合使用) 限定了输入值的间隔。如果一个值与允许值的梯级不相符,则它无法通过验证。

type 的 url 与 email 值分别用于限制输入值是否为有效的 URL 或电子邮件地址。

此外,若要阻止对表单进行约束验证,你可以在

上设置 novalidate 特性,或在

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app电商系统实战精讲课程
uni-app电商系统实战精讲课程

共66课时 | 15.5万人学习

H5页面设计项目实战
H5页面设计项目实战

共32课时 | 3.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号