Rumah > Artikel > hujung hadapan web > 详解HTML5 表单属性
详解HTML5 表单属性
- 零到壹度asal
- 2018-03-20 15:47:451410semak imbas
今天本文主要和大家详细介绍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>Atas ialah kandungan terperinci 详解HTML5 表单属性. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML调用PHPArtikel seterusnya：数组filter对数组元素进行过滤的方法