什麼是表單? 一個表單有三個基本組成部分: 表單標簽:這裡麵包含了處理表單數據所用CGI程式的URL以及數據提交到伺服器的方法。 表單域:包含了文本框、密碼框、隱藏域、多行文本框、覆選框、單選框、下拉選擇框和文件上傳框等。 表單按鈕:包括提交按鈕、複位按鈕和一般按鈕;用於將數據傳送到伺服器上的CGI ...
什麼是表單?
一個表單有三個基本組成部分: 表單標簽:這裡麵包含了處理表單數據所用CGI程式的URL以及數據提交到伺服器的方法。 表單域:包含了文本框、密碼框、隱藏域、多行文本框、覆選框、單選框、下拉選擇框和文件上傳框等。 表單按鈕:包括提交按鈕、複位按鈕和一般按鈕;用於將數據傳送到伺服器上的CGI腳本或者取消輸入,還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
JavaScript與表單間的關係:JS最初的應用就是用於分擔伺服器處理表單的責任,打破依賴伺服器的局面,儘管目前web和javascript都有了長足的發展,web表單依然沒有為許多常見的任務提供現成的解決方案,很多開發人員不僅會在驗證表單的時候使用javascript,而且還會用來增強一些標準表單控制項的預設行為。
一 ,表單的基礎知識
在HTML中,表單由form標簽,在javascript中,表單對應HTMLFormElement類型,HTMLFormElement類型繼承HTMLElement類型,所有它和其他的Element元素有相同的預設屬性,同時它也有自己的屬性和方法:
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 特性。
要取得form表單元素的方法有: var form=document.getElementById('form1'); //通過id來取得表單元素
var firstForm=document.forms[0]; //通過document.forms來取得頁面中的所有表單元素,通過索引值’0‘,取得第一個表單元素
var form2=document.forms['form2']; //通過document.forms來取得頁面中的所有表單元素,通過name值取得特定的表單元素
提交表單:
<!-- 通用提交按鈕 -->
<input type="submit" value="Submit Form">
<!-- 自定義提交按鈕 -->
<button type="submit">Submit Form</button>
<!-- 圖像按鈕 -->
<input type="image" src="graphic.gif">
以這種方式提交表單時,瀏覽器會在將請求發送給伺服器之前觸發 submit 事件。這樣,我們就有
機會驗證表單數據,並據以決定是否允許表單提交。阻止這個事件的預設行為就可以取消表單提交
在JS中我們同樣可以以編程的方式調用submit()方法來提交表單:
var form = document.getElementById("myForm");
//提交表單
form.submit();
阻止表單提交(阻止預設事件):
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件對象
event = EventUtil.getEvent(event);
//阻止預設事件
EventUtil.preventDefault(event);
});
在表單數據無效而不能發送給伺服器時,可以使用這一技術
重置表單:
<!-- 通用重置按鈕 -->
<input type="reset" value="Reset Form">
<!-- 自定義重置按鈕 -->
<button type="reset">Reset Form</button>
在重置表單時,所有表單欄位都會恢復到頁面剛載入完畢時的初
始值
用JS方法來重置表單:
var form = document.getElementById("myForm");
//重置表單
form.reset();
阻止重置表單的預設操作: