这期内容当中小编将会给大家带来有关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 表单属性的实例了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。