html5属性详解,详解HTML5表单属性

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

表单事件:

oninput:当用户输入的时候触发。

oninvalid:当验证未通过时触发。

demo.html：

Document

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;

}

表单事件

用户名：

密码：

邮箱：

//表单事件: 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("自定义的提示文本"); //设置验证不通过时的提示文本

};