HTML5有哪些新的表单属性

HTML5有哪些新的表单属性,第1张

新增表单元素:

用于表单的密钥对生成器字段

不同类型的输出,比如脚本的输出。

新增表单属性:

autocomplete 自动完成

novalidate不验证数据

formaction 用于描述表单提交的URL地址,会覆盖

元素中的action属性.

formenctype 表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

formmethod 表单提交方式,会覆盖 的method 属性。

formnovalidate 表单提交无需被验证,会覆盖 元素的novalidate属性.

formtarget 表单提交数据接收后,怎么的展示。

list 表示input输入域的 datalist(datalist 是输入域的选项列表)

min max step ** 用来给input 类型为数字或日期的添加限定约束的

multiple 多种多样表示 元素中可选择多个值。

pattern 正则表达式用于验证 元素的值。

placeholder 占位提供一种提示(hint),描述输入域所期待的值。

required 被要求的,必须的, 规定必须在提交之前填写输入域(不能为空)。

step 步伐、一步、步长,规定输入域合法的数字间隔

在HTML5中内置了很多表单的验证规则,这些验证规则会根据用户在input元素中输入的内容返回一个布尔值来告诉我们表单验证的状态。下面我们就来列举一些我们比较常用的内置验证规则吧:

ValueMising规则

示例:<input type="text" required value="" >

目的:确保表单控件(input元素在页面中是以一个控件的形式呈现的)中的值已填写。

用法:在表单控件中将required属性设置为true。因为required属性的默认值为true所以如示例中所示:在input元素中接添加required属性也是可以的。

详细说明:如果表单控件设置了required特性,那么在用户填写或者通过代码调用方式填值之前,控件会一直处于无效状态。例如,在示例中我们设置该控件的值为空,空的文本输入框无法通过必填检查,除非在其中输入任意文本。输入值为空时,valueMissing会返回true。表示没有通过验证。

typeMismatch规则

示例:<input type=“url” value=“miaomiaoxue”/ >

目的:保证控件值与预期类型相匹配(如numbe、email、URL等)。

用法: 指定表单控件的type特性值为numbe、email、URL等规定文本输入规则的类型。

详细说明: 特殊的表单控件类型不只是用来定制手机键盘,如果浏览器能够识别出来表单控件中的输入不符合对应的类型规则,比如email地址中没有@符号,或者number型控件的输入值不是有效的数字,示例中URL型的空间不是一个标准的链接格式。那么浏览器就会把这个控件标记出来以提示类型不匹配。无论哪种出错情况,typeMismatch将返回true。表示没有通过验证。

patternMismatch规则

示例:<input type="text" pattern=“/^[A-z]+$/" value=“1234“/>

目的:根据表单控件上设置的格式规则验证输入的文本是否为有效格式

用法:在表单控件上设置pattern特性,井赋予适当的匹配规则。

详细说明:pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后,只要输入控件的值不符合模式规则,如示例中设定的正则表达式规则该控件的值含有字母和$符号,这里设置的值为1234,不符合规则设定,因此patternMismatch就会返回true值。从引导用户和技术参考两方面考虑,

你应该在包含pattern特性的表单控件中设置title特性以说明规则的作用。

tooLong规则

示例:<input type=“text” maxlength=“3” value=“hello“/ >

目的:避免输入值包含过多字符。

用法:在表单控件上设置maxLength特性。

详细说明:如果输入值的长度超过maxLength,示例中最大限制设置为3,但值为hello, *** 过了3个字符的限制,tooLong规则就会返回true。虽然表单控件通常会在用户输入时限制最大长度,但在有些情况下,如通过程序设置,还是会超出最大值。

rangeUnderflow规则

示例:<input type=“text” min=“3” max=“5” value=“0" />

目的:限制数值型控件的最小值。

用法:为表单控件设置min属性,并赋予允许的最小值。

详细说明:在需要做数值范围检查的表单控件中,数值很可能会暂时低于设置的下限,如示例中设置的值为0,而设置的min属性为3。此时,rangeUnderflow属性将返回true。

rangeOverflow规则

示例:<input type=“text” min=“3” max=“5” value=“7" />

目的:限制数值型控件的最大值。

用法:为表单控件设置max属性,并赋予允许的最大值。

详细说明:与rangeUnderflow类似,如果一个表单控件的值比max属性值更大,如示例中设置的值为7,而设置的max属性为5。此时,rangeOverflow属性将返回true。

stepMismatch规则

示例:<input type=“text” min=“0” max=“100” step=“5” value=“17" />

目的:确保输入值符合min、max及step即设置。

用法:为表单控件设置step特性,指定数值的增量。

详细说明:此约束条件用来保证数值符合min、max和step的要求。换句话说,当前值必须是最小值与step属性值的倍数之和。如示例中设置的数值范围为0到100,step特性值为5,此时就不允许出现17,而可以是“0+5*X”X为(0~20)中任意一个值皆可。否则stepMismatch返回true值。

valid规则

示例:<input type=“range” min=“5” max=“20” step=“5” value=“10" />

目的:验证表单控件是否满足所有的表单验证规则

用法:适用于所有的input表单控件。

详细说明:当该表单控件满足所有验证规则时,valid属性就是true,否则,只要有一项验证规则没通过,valid属性会返回false。如示例所示就满足所有验证条件所以valid属性会返回true。注意前面几个验证属性是没有通过的情况下返回true。推荐你去教程网站秒秒学上过一遍相关知识,希望对你有帮助。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7601641.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-07
下一篇 2023-04-07

发表评论

登录后才能评论

评论列表(0条)

保存