詳解HTML5 表單屬性
- 零到壹度原創
- 2018-03-20 15:47:451410瀏覽
今天本文主要和大家詳細介紹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 表單屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn