HTML5表單屬性的實例-創(chuàng)新互聯

這期內容當中小編將會給大家?guī)碛嘘PHTML5 表單屬性的實例,文章內容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。

讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:空間域名、網站空間、營銷軟件、網站建設、湄潭網站維護、網站推廣。

表單事件:
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("自定義的提示文本");  //設置驗證不通過時的提示文本
	};
</script>

</html>

上述就是小編為大家分享的HTML5 表單屬性的實例了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注創(chuàng)新互聯網站制作公司行業(yè)資訊頻道。

文章名稱:HTML5表單屬性的實例-創(chuàng)新互聯
新聞來源:http://www.muchs.cn/article30/ddedso.html

成都網站建設公司_創(chuàng)新互聯,為您提供網頁設計公司、小程序開發(fā)ChatGPT、App開發(fā)搜索引擎優(yōu)化、網站收錄

廣告

聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯

成都網頁設計公司