明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

詳細說明HTML5 表單屬性

發(fā)表時間：2023-09-13 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]今天本文主要和大家詳細介紹HTML5的表單屬性,需要的朋友可以參考下，希望能幫助到大家。表單事件: oninput:當用戶輸入的時候觸發(fā)。oninvalid:當驗證未通過時觸發(fā)。demo.html：<!DOCTYPE html><html lang="en"&...
今天本文主要和大家詳細介紹HTML5的表單屬性,需要的朋友可以參考下，希望能幫助到大家。

表單事件:
oninput:當用戶輸入的時候觸發(fā)。
oninvalid:當驗證未通過時觸發(fā)。

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:當用戶輸入的時候觸發(fā)。 oninvalid:當驗證未通過時觸發(fā)。
	var txt1 = document.getElementById("userName");
	var txt2 = document.getElementById("pwd");
	var txt3 = document.getElementById("email");
	var num = 0;

	//oninput:當用戶輸入的時候觸發(fā)該事件
	txt1.oninput = function() {
		num++;
		txt2.value = num;
	};

	//oninvalid:驗證不通過時觸發(fā)該事件
	txt3.oninvalid = function() {
		this.setCustomValidity("自定義的提示文本");  //設(shè)置驗證不通過時的提示文本
	};
</script>

</html>

以上就是詳解HTML5 表單屬性的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。