今天本文主要和大家详细介绍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>









