Heute stellt Ihnen dieser Artikel hauptsächlich die Formularattribute von HTML5 im Detail vor. Freunde, die es benötigen, können darauf verweisen.
Formularereignisse:
oninput: Wird ausgelöst, wenn der Benutzer etwas eingibt.
oninvalid: Wird ausgelöst, wenn die Überprüfung fehlschlägt.
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>Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der HTML5-Formulareigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Einführung in Artikel-Tag-Attribute
Der Unterschied zwischen HTML und HTML5
So löschen Sie leere Seiten in Word, ohne dass sich dies auf andere Formate auswirkt
Allgemeine Tags für dedecms
So erstellen Sie eine Datenbank in MySQL
So sehen Sie Live-Wiedergabeaufzeichnungen auf Douyin
PHP-Entwicklungstools
