详解HTML5 表单属性

互联网 18-3-20

今天本文主要和大家详细介绍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 表单属性的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：属性