JavaScript 表單及表單事件

一、JavaScript 表單

1.1 JavaScript 表單概述

1.1.1 表單介紹
一個表單有三個基本組成部分：

表單標籤：這裏麪包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。
表單域：包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框和文件上傳框等。
表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用於將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

1.1.2 JavaScript與表單
JS最初的應用就是用於分擔服務器處理表單的責任，打破依賴服務器的局面，儘管目前web和javascript都有了長足的發展，web表單依然沒有爲許多常見的任務提供現成的解決方案，很多開發人員不僅會在驗證表單的時候使用javascript，而且還會用來增強一些標準表單控件的默認行爲。

1.2 JavaScript 表單語法

1.2.1 語法格式
表單內部可以使用input、menus、textarea、fieldset、legend和label等元素
<form>標籤的語法格式如下

<body>
	<form action="" method="get" id="form1" name="form1">
		<fieldset style="width: 250px;">
		    <legend align="center">賬戶信息</legend>
			賬 戶：	<input type="text" name="account" placeholder="請輸入賬戶名"/><br />
			密 碼：	<input type="password" name="password" placeholder="請輸入密碼"/><br />
		</fieldset>
		<br />
		<fieldset style="width: 250px;">
		    <legend align="center">個人資料</legend>
			姓 名：	<input type="text" name="name" placeholder="請輸入姓名"/><br />
			性 別：	<input type="radio" name="sex" checked="checked"/>男
					<input type="radio" name="sex"/>女<br />
			年 齡：	<input type="text" name="age" placeholder="請輸入年齡"/><br />
			電 話：	<input type="text" name="tel" placeholder="請輸入電話"/><br />
			郵 箱：	<input type="text" name="mail" placeholder="請輸入郵箱"/><br />
			愛 好：	<input type="checkbox" name="sing"/>唱
					<input type="checkbox" name="dance"/>跳
					<input type="checkbox" name="rap"/>Rap
					<input type="checkbox" name="ball"/>籃球<br />
			地 址：	<select name="address">
						<option value="BJ">北京</option>
						<option value="SH">上海</option>
						<option value="GZ" selected="selected">廣州</option>
						<option value="SZ">深圳</option>
					</select><br />
			簡介：	<textarea name="show" rows="5" cols="20" placeholder="請輸入簡介"></textarea>
		</fieldset><br />
		<button type="submit">提交</button>
		<button type="reset">重置</button>
	</form>
</body>

頁面展示如下

1.2.2 常見表單標籤屬性
在HTML中，表單由form標籤，在javascript中，表單對應HTMLFormElement類型，HTMLFormElement類型繼承HTMLElement類型，所有它和其他的Element元素有相同的默認屬性，同時它也有自己的屬性

acceptCharset：服務器能夠處理的字符集，等價於 HTML 中的 accept-charset 特性。
action：接受請求的 URL，等價於 HTML 中的 action 特性，規定了提交表單是向何處發送表單數據。
autocomplete：只有on和off兩種狀態，規定是否啓用表單的自動完成功能。
elements：表單中所有控件的集合（HTMLCollection）。
enctype：請求的編碼類型，；等價於 HTML 中的 enctype 特性。
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
length：表單中控件的數量。
method：要發送的 HTTP 請求類型，通常是"get"或"post"，等價於 HTML 的 method 特性。
name：表單的名稱，等價於 HTML 的 name 特性。
target：用於發送請求和接收響應的窗口名稱，等價於 HTML 的 target 特性。
- _blank
- _self
- _parent
- _top
- framename
style：設置標籤的相關元素的CSS 樣式。
novalidate：如果使用該屬性，則提交表單時不進行驗證。

1.2.2 常用獲取表單方法
通過id獲取

 var form=document.getElementById('id1');

通過document.forms獲取
通過document.forms來取得頁面中的所有表單元素，通過索引值’0‘，取得第一個表單元素

//通過document.forms來取得頁面中的所有表單元素，通過索引值'0‘，取得第一個表單元素
var firstForm = document.forms[0]; 

//通過document.forms來取得頁面中的所有表單元素，通過name值取得特定的表單元素
var form2 = document.forms['name1'];

二、JavaScript 表單事件

2.1 JavaScript 表單事件示例

2.1.1 表單事件介紹
<form>標籤表單提交時，可以觸發事件，將表單信息提交單指定的url地址。
<form>標籤支持HTML的全局事件

2.1.2 表單事件示例
頁面顯示代碼

<body>
	<form action="" method="get" id="form1" name="form1">
		<fieldset style="width: 250px;">
		    <legend align="center">賬戶信息</legend>
			賬 戶：	<input type="text" name="account" placeholder="請輸入賬戶名"/><br />
			密 碼：	<input type="password" name="password" placeholder="請輸入密碼"/><br />
		</fieldset>
		<br />
		<fieldset style="width: 250px;">
		    <legend align="center">個人資料</legend>
			姓 名：	<input type="text" name="name" placeholder="請輸入姓名"/><br />
			性 別：	<input type="radio" name="sex" value="男" checked="checked"/>男
					<input type="radio" name="sex" value="女"/>女<br />
			年 齡：	<input type="text" name="age" placeholder="請輸入年齡"/><br />
			電 話：	<input type="text" name="tel" placeholder="請輸入電話"/><br />
			郵 箱：	<input type="text" name="mail" placeholder="請輸入郵箱"/><br />
			愛 好：	<input type="checkbox" name="hobby" value="唱"/>唱
					<input type="checkbox" name="hobby" value="跳"/>跳
					<input type="checkbox" name="hobby" value="Rap"/>Rap
					<input type="checkbox" name="hobby" value="籃球"/>籃球<br />
			地 址：	<select name="address">
						<option value="BJ">北京</option>
						<option value="SH">上海</option>
						<option value="GZ" selected="selected">廣州</option>
						<option value="SZ">深圳</option>
					</select><br />
		</fieldset><br />
		<button type="button" onclick="test()">提交</button>
		<button type="reset">重置</button>
	</form>
</body>

當輸入信息，並點擊提交時，就會將表單信息提交，通過按鈕點擊事件調用test()方法
JS代碼

<script>
	function test(){
		//通過id屬性獲取表單信息
		var form1 = document.getElementById("form1");
		//獲取表單中的元素值
		var account = form1.account.value;
		var password = form1.password.value;
		console.log("account = " + account + " password = " + password);
		
		//通過forms獲取所有表單信息，再通過[index]獲取第幾個表單的信息
		var form2 = document.forms[0];
		//獲取表單中的元素值
		var name = form2.name.value;
		var sex = form2.sex.value;
		console.log("name = " + name + " sex = " + sex);
		
		//通過標籤名獲取表單信息
		var form3 = document.getElementsByTagName("form")[0];
		//獲取表單中的元素值
		var tel = form3.tel.value;
		console.log("tel = " + tel);
		var hobbys = form3.hobby;
		for(var i = 0; i < hobbys.length; i++){
			console.log("hobby = " + hobbys[i].value);
		}
	}
</script>

輸入以下表單信息，並點擊提交按鈕

下面是幾種方式獲取到的表單信息，通過上述方法就成功的獲取到了form表單以及表單的具體元素的信息。

2.1.3 elements 屬性示例
通過elements可以獲取到表單中所有元素，並組成一個集合，如下示例

<body>
	<form action="" method="get" id="form1" name="form1">
		<fieldset name="fieldset1" style="width: 250px;">
			<legend align="center">賬戶信息</legend>
			賬 戶：	<input type="text" name="account" placeholder="請輸入賬戶名"/><br />
			密 碼：	<input type="password" name="password" placeholder="請輸入密碼"/><br />
		</fieldset>
		<br />
		<fieldset name="fieldset2" style="width: 250px;">
			<legend align="center">個人資料</legend>
			姓 名：	<input type="text" name="name" placeholder="請輸入姓名"/><br />
			性 別：	<input type="radio" name="sex" value="男" checked="checked"/>男
					<input type="radio" name="sex" value="女"/>女<br />
			年 齡：	<input type="text" name="age" placeholder="請輸入年齡"/><br />
			電 話：	<input type="text" name="tel" placeholder="請輸入電話"/><br />
			郵 箱：	<input type="text" name="mail" placeholder="請輸入郵箱"/><br />
			愛 好：	<input type="checkbox" name="hobby" value="唱"/>唱
					<input type="checkbox" name="hobby" value="跳"/>跳
					<input type="checkbox" name="hobby" value="Rap"/>Rap
					<input type="checkbox" name="hobby" value="籃球"/>籃球<br />
			地 址：	<select name="address">
						<option value="BJ">北京</option>
						<option value="SH">上海</option>
						<option value="GZ" selected="selected">廣州</option>
						<option value="SZ">深圳</option>
					</select><br />
		</fieldset><br />
		<button type="button" onclick="test()">提交</button>
		<button type="reset">重置</button>
	</form>
</body>
<script>
	function test(){
		var form = document.getElementById("form1");
		var elements = form.elements;
		for(var i = 0; i < elements.length; i++){
			console.log("elements元素有 = " + elements[i].name + "  元素value = " + elements[i].value +  "  元素type = " + elements[i].type)
		}
	}
</script>

輸入表單信息並提交後得到如下結果

2.1.4 reset 屬性示例
一般情況下，表單信息在提交之後需要將頁面顯示的內容清除掉，這時除了用按鈕點擊清楚外，還可以利用屬性reset自動刪除。

//獲取表單對象
var form = document.getElementById("form1");
//進行表單內容的提取
....
//將頁面表單顯示內容清除
form.reset();

2.1.5 表單的其他屬性操作
獲取表單的屬性

<body>
	<form accept-charset="ISO-8859-1" action="index.jsp" enctype="application/x-www-form-urlencoded" method="get" id="form1" name="form1" target="_blank">
		<fieldset name="fieldset1" style="width: 250px;">
			<legend align="center">賬戶信息</legend>
			賬 戶：	<input type="text" name="account" placeholder="請輸入賬戶名"/><br />
			密 碼：	<input type="password" name="password" placeholder="請輸入密碼"/><br />
		</fieldset>
		<br />
		<fieldset name="fieldset2" style="width: 250px;">
			<legend align="center">個人資料</legend>
			姓 名：	<input type="text" name="name" placeholder="請輸入姓名"/><br />
			性 別：	<input type="radio" name="sex" value="男" checked="checked"/>男
					<input type="radio" name="sex" value="女"/>女<br />
			年 齡：	<input type="text" name="age" placeholder="請輸入年齡"/><br />
			電 話：	<input type="text" name="tel" placeholder="請輸入電話"/><br />
			郵 箱：	<input type="text" name="mail" placeholder="請輸入郵箱"/><br />
			愛 好：	<input type="checkbox" name="hobby" value="唱"/>唱
					<input type="checkbox" name="hobby" value="跳"/>跳
					<input type="checkbox" name="hobby" value="Rap"/>Rap
					<input type="checkbox" name="hobby" value="籃球"/>籃球<br />
			地 址：	<select name="address">
						<option value="BJ">北京</option>
						<option value="SH">上海</option>
						<option value="GZ" selected="selected">廣州</option>
						<option value="SZ">深圳</option>
					</select><br />
		</fieldset><br />
		<button type="button" onclick="test()">提交</button>
		<button type="reset">重置</button>
	</form>
</body>
<script>
	function test(){
		var form = document.getElementById("form1");
		console.log(" acceptCharset = " + form.acceptCharset);
		console.log(" action = " + form.action);
		console.log(" enctype = " + form.enctype);
		console.log(" id = " + form.id);
		console.log(" length = " + form.length);
		console.log(" method = " + form.method);
		console.log(" target = " + form.target);
	}
</script>

2.1.6 其他屬性

onreset：在重置表單元素之前調用
onsubmit：在提交表單之前調用

JavaScript（五）—— JavaScript 表單及表單事件

JavaScript 表單及表單事件

一、JavaScript 表單

1.1 JavaScript 表單概述

1.2 JavaScript 表單語法

二、JavaScript 表單事件

2.1 JavaScript 表單事件示例

如何使用 JS 判斷用戶是否處於活躍狀態

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

Redis 數據庫（三）—— Linux 系統安裝和操作 Redis 數據庫

JavaScript（四）—— JavaScript 函數與事件

Redis 數據庫（四）—— Redis 持久化

JavaScript（三）—— JavaScript HTML DOM對象

JAVA 設計模式（四）—— 設計模式之原型模式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結