Maison  >  Article  >  interface Web  >  Explication détaillée des propriétés du formulaire HTML5

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

零到壹度
零到壹度original
2018-03-20 15:47:451377parcourir

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>

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:HTML appelle PHPArticle suivant:HTML appelle PHP