详解HTML5 表单属性

2020-07-19 07:18:11
今天本文主要和大家详细介绍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>