Explication détaillée des propriétés du formulaire HTML5-tutoriel HTML-php.cn

Explication détaillée des propriétés du formulaire HTML5

零到壹度

Libérer： 2018-03-20 15:47:45

original

1453 Les gens l'ont consulté

Aujourd'hui, cet article vous présente principalement en détail les attributs de formulaire HTML5. Les amis qui en ont besoin peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Événements de formulaire :
oninput : déclenchés lorsque l'utilisateur saisit.
oninvalid : déclenché lorsque la vérification échoue.

démo.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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!