如何理解JavaScript表單的基礎知識
HTMLFormElement繼承了HTMLElement,它自己獨有的屬性和方法有:
acceptCharset:服務器能夠處理的字符集,等價於HTML的accept-charset特性 action:接收請求的URL,等價於HTML中的action特性。 elements:表單中所有控件的集合(HTMLCollection) enctype:請求的編碼類型 length:表單中控件的數量 method:要發送的HTTP請求類型,通常是get或post name:表單的名稱 reset():將所有表單域重置為默認值 submit():提交表單 target:用於發送請求和接收響應的窗口名稱;
取得form元素的引用可以是getElementById、也可以是s中數值索引或name值;
一、提交表單
提交表單的按鈕有三種:
以上面這種方法提交表單會在瀏覽器請求發送給服務器之前觸發submit事件,這樣就可以驗證表單數據和決定是否允許提交表單,如下面的代碼就可以阻止表單的提交:
var form = lementById("myForm");ventListener("submit", function () { entDefault();});
另外也可以通過js腳本調用submit()方法提交表單,在調用submit()提交表單不會觸發submit事件。
var form = lementById("myForm");it();
第一次提交表單後如果長時間沒有迴應,用户會變得不耐煩,往往多次點擊提交按鈕,導致重複提交表單,因此應該在第一次提交表單後就禁用提交按鈕或利用onsubmit事件阻止後續操作。
var submitBtn = lementById("submitBtn");ick = function () { //處理表格和提交等等 bled = true;};
二、重置表單
重置表單應該使用input或button:
當用户單擊重置按鈕重置表單時,會觸發reset事件,可以在必要的時候取消重置操作:
var resetBtn = lementById("resetBtn");ventListener("reset", function () { entDefault();});
另外也可以通過js腳本調用reset()方法重置表單,在調用reset()方法重置表單時會觸發reset事件。
var form = lementById("myForm");t();
三、表單字段
每個表單都有一個elements屬性,該屬性是表單中所有表單(字段)的集合:
var form = s["myForm"];var list = [];//取得表單中第一個字段var firstName = ents[0];();//取得表單中名為lastName的字段var lastName = ents["lastName"];();// 取得表單中包含的.字段的數量var fieldCount = th;(fieldCount);(ring()); //firstName,lastName,4
多個表單控件使用一個name(單選按鈕),那麼會返回以該name命名的NodeList:
name都是color,在訪問elements["color"]時,返回NodeList:
var list = [];var form = s["myForm"];var radios = ents["color"];(th) //3
共有的表單字段屬性
disabled: 布爾值,表示當前字段是否被禁用; form: 指向當前字段所屬表單的指針:只讀; name: 當前字段的名稱; readOnly: 布爾值,表示當前字段是否只讀; tabIndex: 表示當前字段的切換(tab)序號; type: 當前字段的類型; value: 當前字段被提交給服務器的值。對文件字段來説,這個屬性是隻讀的,包含着文件在計算機中的路徑;
可通過submit事件在提交表單後禁用提交按鈕,但不可以用onclick事件,因為onclick在不同瀏覽器中有“時差”;
共有表單字段方法
focus(): 激活字段,使其可以響應鍵盤事件; blur(): 失去焦點,觸發;使用的場合不多;
可以在偵聽頁面的load事件上添加該focus()方法:
ventListener("load", function () { s["myForm"]ents["lastName"]s();});
需要注意,第一個表單字段是input,如果其type特性為“hidden”,或者css屬性的display和visibility屬性隱藏了該字段,就會導致錯誤。
在HTML5中,表單中新增加了autofocus屬性,自動把焦點移動到相應字段。
autofocus
如:
或者檢測是否設置了該屬性,沒有的話再調用focus()方法:
ventListener("load", function () { var form = s["myForm"]; if (form["lastName"]focus !== true) { form["lastName"]s(); };});
共有的表單字段事件
除了支持鼠標鍵盤更改和HTML事件之外,所有的表單字段都支持下列3個事件:
blur: 當前字段失去焦點時觸發;
change:input元素和textarea元素,在它們失去焦點且value值改變時觸發;select元素在其選項改變時觸發(不失去焦點也會觸發);
focus:當前字段獲得焦點時觸發;
如:
var form = s["myForm"];var firstName = ents["firstName"];ventListener("focus", handler);ventListener("blur", handler);ventListener("change", handler);function handler() { switch () { case "focus": if (groundColor !== "red") { groundColor = "yellow"; }; break; case "blur": if (th < 1) { groundColor = "red"; } else { groundColor = ""; }; break; case "change": if (th < 1) { groundColor = "red"; } else { groundColor = ""; }; break; }}
-
網頁設計黃金配色原則是什麼
身為網頁設計新手的你,是不是還在糾結於你製作的網頁找不到一組完美的配色方案?在本教程中我們將與你分享6條肯定會火,並且“錯不了”的指導方針,你可以按照這些原則把握最基本的色彩規律。現在我們分享的這些原則都不是規則,你會在你的職業生涯中創造出更多的配色...
-
javascript設置創建動態表格的方法
兩種JavaScript動態創建table表格的方法,分享給大家,具體實現如下方法一:最原始的方法,創建一一元素vara1=teElement("table");vara2=teElement("tbody");vara3=teElement("tr");vara4=teElement("td");//開始appendchild()追加各個元素ndChild(a4);ndChild(a3);nd...
-
JavaScript 小型打飛機遊戲實現和原理説明
JavaScript小型打飛機遊戲實現和原理説明玩法説明:上下左右控制移動,空格發彈。每打中一個敵機就加100分,每提升5000分,玩家的飛機的一次發彈數就加一,最多四,被敵機撞到或者讓敵機飛到底部就算輸。。。。演示代碼:http://demo./js/FlyBeat/遊戲目前的功能還是比較簡...
-
Dedecms中常用數據調用的sql語句
本文實例彙總了Dedecms中常用數據調用的'sql語句。分享給大家供大家參考。具體如下:{dede:sqlsql="selectcount(*)ascfromdede_archiveswherechannel=1"}共有文章:[field:c/]篇{/dede:sql}{dede:sqlsql="selectcount(*)ascfromdede_archiveswherechannel=2"}共...