表單事件——表單基礎知識
阿新 • • 發佈：2018-11-11
文章目錄
一、概述
1.1 表單的私有屬性和方法
| 屬性或方法 | 描述 |
|---|---|
| acceptCharset | 伺服器能夠處理的字符集;等價於 HTML 中的 accept-charset 特性。 |
| action | 接受請求的 URL;等價於 HTML 中的 action 特性。 |
| elements | 表單中所有控制元件的集合(HTMLCollection) 。 |
| enctype | 請求的編碼型別;等價於 HTML 中的 enctype 特性。 |
| length | 表單中控制元件的數量。 |
| method | 要傳送的 HTTP 請求型別,通常是"get"或"post";等價於 HTML 的 method 特性。 |
| name | 表單的名稱;等價於 HTML 的 name 特性。 |
| reset() | 將所有表單域重置為預設值。 |
| submit() | 提交表單。 |
| target | 用於傳送請求和接收響應的視窗名稱;等價於 HTML 的 target 特性。 |
1.2 獲取表單的三種方式
- 通過id獲取。如var form = document.getElementById(“form1”);
- 通過 document.forms 可以取得頁面中所有的表單。如
var firstForm = document.forms[0];//取得頁面中的第一個表單
var myForm = document.forms[“form2”];//取得頁面中名稱為"form2"的表單 - 通過名字訪問，這個方法不推薦。如，,通過 document.form2 可以訪問到名為"form2"的表單。
二、提交表單
提交表單有三種方式：
- 將<input>的type設為submit
- 將<button>的type設為submit
- 將<input>的type設為image
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交</title>
</head>
<body>
<form action="" id="myForm">
<!-- 通用提交按鈕 -->
<input type="submit" value="Submit Form">
<!-- 自定義提交按鈕 -->
<button type="submit">Submit Form</button>
<!-- 影象按鈕 -->
<input type="image" src="icon.png">
</form>
<script type="text/javascript">
var form = document.getElementById("myForm");
form.addEventListener('submit',function (event) {
alert("點選了提交按鈕！！！");
//阻止提交哦啊事件
event.preventDefault();
})
</script>
</body>
</html>
執行結果：
javascript還可以程式設計進行表單提交，但是不會觸發submit事件。如：
var form = document.getElementById("myForm");
//提交表單
form.submit();
表單提交最大的問題就是重複提交。對策就是在第一次提交之後，在事件處理程式中禁用提交按鈕或在事件處理程式中取消後續提交。
三、重置表單
重置表單時，會把表單欄位重置為頁面剛載入完的初始值。重置表單有兩種方式：
- 將<input>的type設為reset
- 將<button>的type設為reset
需要注意的時，與表單提交不同，用程式設計方式重置表單是會出發reset事件的。
例子：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>表單提交</title>
</head>
<body>
<form action="" id="myForm">
<input type="text" value="初始值為text">
<input type="radio" name="danxuankuang"> 男</input>
<input type="radio" value="女" name="danxuankuang" checked>
女
</input>
<input type="reset"> 重置</input>
<button type="reset">重置</button>
</form>
</body>
</html>
效果：
三、表單欄位
4.1 表單的elements屬性
每個表單物件都有elements 屬性,該屬性是表單中所有表單元素(欄位)的集合。例子：
var form = document.getElementById("form1");
//取得表單中的第一個欄位
var field1 = form.elements[0];
//取得名為"textbox1"的欄位
var field2 = form.elements["textbox1"];
//取得表單中包含的欄位的數量
var fieldCount = form.elements.length;
4.2 表單欄位的共有屬性
| 共有屬性 | 描述 |
|---|---|
| disabled | 布林值,表示當前欄位是否被禁用。 |
| form | 指向當前欄位所屬表單的指標;只讀。 |
| name | 當前欄位的名稱。 |
| readOnly | 布林值,表示當前欄位是否只讀。 |
| tabIndex | 表示當前欄位的切換(tab)序號。 |
| type | 當前欄位的型別,如"checkbox"、“radio”,等等。 |
| value | 當前欄位將被提交給伺服器的值。對檔案欄位來說,這個屬性是隻讀的,包含著檔案在計算機中的路徑。 |
這裡我們舉一個避免重複提交的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單提交</title>
</head>
<body>
<form action="" id="myForm">
<input type="text" name="first_input" value="初始值為text">
<input type="text" id="second_input">
<input type="radio" name="danxuankuang">男</input>
<input type="radio" value="女" name="danxuankuang" checked> 女</input>
<input type="reset">
<input type="submit" name="sb" >
</form>
<script type="text/javascript">
var form=document.getElementById("myForm");
form.addEventListener("submit",function () {
alert("點選了提交按鈕");
var sb=form.elements["sb"];
sb.disabled=true;//提交成功後，會自動還原
sb.style.backgroundColor="red";
//event.preventDefault();
//這裡寫提交
})
</script>
</body>
</html>
4.3 表單欄位的共有方法
- focus():表單欄位獲取焦點。HTML5 為表單欄位新增了一個 autofocus 屬性。在支援這個屬性的瀏覽器中,只要設定這個屬性,
不用 JavaScript 就能自動把焦點移動到相應欄位。 - blur():表單欄位失去焦點
4.4 表單欄位的共有事件
- blur:當前欄位失去焦點時觸發。
- change:對於 和 元素,在它們失去焦點且 value 值改變時觸發;對於元素,在其選項改變時觸發。
- focus:當前欄位獲得焦點時觸發。