首页 前端知识 【HTML5】的语法【九】

【HTML5】的语法【九】

2024-09-04 23:09:51 前端知识 前端哥 413 951 我要收藏

在这里插入图片描述

output元素的追加

在HTML 5中,追加了新的元素output。output元素定义不同类型的输出,比如计算结果或脚本的输出。output元素必须从属于某个表单,也就是说,必须将它书写在表单内部,或者对它添加form属性。到目前为止,该元素被Firefox 4以上、Opera 10以上、Chrome 10以上、Safari 5版本以及Edge浏览器的支持。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>output元素示例</title>
<script>function value_change()
{    var number=document.getElementById("range1").value; document.getElementById("output1").value=number;}
</script>
</head>
<form id="testform">请选择一个数值:
<input id="range1" type=range min=0 max=100 step=5 value=10 onchange="value_change()"/>
<output id="output1">10</output>
</form>

表单验证

自动验证

在HTML 5中,通过对元素使用属性的方法,可以实现在表单提交时执行的自动验证功能。
将在表单提交时自动验证输入的内容是否为数字,如果验证不通过,将显示错误信息文字。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>表单验证示例</title>
</head>
<body><form method="post">
	<input name="text" type="text" required pattern="^\w.*$">
	<input type="submit">
</form>
</body>

取消验证

有时可能要把表单临时提交一下,又不想进行表单中所有元素内容的有效性检查。譬如,一个非常大的表单需要分成两部分(或几部分),第二部分中的一个文本框是必须填写的,如果填写每一部分内容都要花费较大时间,或者填写完第一部分之后,第二部分要过一段时间再填写,在这种情况下应该允许用户先提交第一部分内容,同时需要临时取消第二部分中的内容表单验证。

有两种方法取消表单验证,第一种方法是利用form元素的novalidate属性来关闭整个表单验证。当整个表单的第二部分需要验证的内容比较多且想先提交表单的第一部分内容时,可以使用这种方法。先把novalidate属性设为true,关闭表单验证,提交第一部分内容,然后在提交第二部分时再把它设为false,打开表单验证,提交第二部分内容。

第二种方法是利用input元素或submit元素的formnovalidate属性,利用input元素的formnovalidate属性可以让表单验证对单个input元素失效,在前面所举例子中,当表单的第二部分需要验证的元素数量很少时,可以只利用这些元素的formnovalidate属性,让表单验证对这些元素失效。

如果对submit按钮使用了formnovalidate属性,单击该按钮时,相当于利用了form元素的novalidate属性,整个表单验证都失效了。

利用这一点,可以实现“假提交”与“真提交”的效果,例如在页面上显示一个提交按钮,不带表单验证,单击该按钮提交表单时不进行数据有效性检查,提交时临时保存到文件或其他地方,再显示另一个提交按钮,单击该按钮将表单进行提交后将表单数据保存到数据库中。

显式验证

除了对input元素添加属性进行元素内容有效性的自动验证外,在HTML 5中,form元素与input元素(包括select元素与textarea元素)都具有一个checkValidity方法。调用该方法,可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。checkValidity方法将验证结果用boolean的形式进行返回,checkValidity方法调用:

<!DOCTYPE html>
<meta chars
转载请注明出处或者链接地址:https://www.qianduange.cn//article/17610.html
标签
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!