Home >Web Front-end >HTML Tutorial >Detailed explanation of HTML5 form properties
Today this article mainly introduces the form attributes of HTML5 to you in detail. Friends who need it can refer to it. I hope it can help everyone.
Form events:
oninput: Triggered when the user inputs.
oninvalid: Triggered when verification fails.
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>
The above is the detailed content of Detailed explanation of HTML5 form properties. For more information, please follow other related articles on the PHP Chinese website!