详解HTML5 表单属性-html教程-PHP中文网

首页

web前端

html教程

详解HTML5 表单属性

零到壹度

Mar 20, 2018 pm 03:47 PM

html5 属性表单

今天本文主要和大家详细介绍HTML5的表单属性,需要的朋友可以参考下，希望能帮助到大家。

表单事件:
oninput:当用户输入的时候触发。
oninvalid:当验证未通过时触发。

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		form {  
            width: 100%;  
            max-width: 640px;  
            min-width: 320px;  
            margin: 0 auto;  
            font-family: "Microsoft Yahei";  
            font-size: 20px;  
        }  
  
        input {  
            display: block;  
            width: 100%;  
            height: 30px;  
            margin: 10px 0;  
        } 
	</style>

	
</head>
<body>
	<form action="" >
		<fieldset>
			<legend>表单事件</legend>
            <label>
            	用户名：<input type="text" name="userName" id="userName">
            </label>
            <label>
            	密码：<input type="text" name="pwd" id="pwd">
            </label>
            <label>
            	邮箱：<input type="email" name="email" id="email">
            </label>

			<input type="submit">
		</fieldset>
	</form>
</body>

<script>
	//表单事件: oninput:当用户输入的时候触发。 oninvalid:当验证未通过时触发。
	var txt1 = document.getElementById("userName");
	var txt2 = document.getElementById("pwd");
	var txt3 = document.getElementById("email");
	var num = 0;

	//oninput:当用户输入的时候触发该事件
	txt1.oninput = function() {
		num++;
		txt2.value = num;
	};

	//oninvalid:验证不通过时触发该事件
	txt3.oninvalid = function() {
		this.setCustomValidity("自定义的提示文本");  //设置验证不通过时的提示文本
	};
</script>

</html>

登录后复制

以上是详解HTML5 表单属性的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

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