DOM基礎(chǔ)教程之使用DOM控制表單
1.表單簡(jiǎn)介
表單<form>是網(wǎng)頁(yè)中交互最多的形式之一,它通過(guò)各種形式接收用戶的數(shù)據(jù),包括下拉列表框,單選按鈕,復(fù)選框和文本框,本篇主要介紹表單中常用的屬性和方法
javascript中可以很方便的操作表單,例如獲得表單數(shù)據(jù)進(jìn)行有效驗(yàn)證,自動(dòng)給表單域賦值,處理表單事件等。
此時(shí)每個(gè)form都解析為一個(gè)對(duì)象,即form對(duì)象,可以通過(guò)document.forms集合來(lái)引用這些對(duì)象,例如一個(gè)nama屬性為form1的表單可以使用
不僅如此,還可以通過(guò)表單在文檔中的索引來(lái)引用表單對(duì)象。例如
表示引用文檔中的第二個(gè)表單對(duì)象

以下為一個(gè)包含多種form元素,每個(gè)元素都有l(wèi)abel標(biāo)記,綁定在元素上,這樣通過(guò)點(diǎn)擊文字就能定為和選擇到表格,提高了用戶體驗(yàn)。
<form method="post" name="myForm1" action="addInfo.aspx">
<p><label for="name">請(qǐng)輸入您的姓名:</label><br><input type="text" name="name" id="name"></p>
<p><label for="passwd">請(qǐng)輸入您的密碼:</label><br><input type="password" name="passwd" id="passwd"></p>
<p><label for="color">請(qǐng)選擇你最喜歡的顏色:</label><br>
<select name="color" id="color">
<option value="red">紅</option>
<option value="green">綠</option>
<option value="blue">藍(lán)</option>
<option value="yellow">黃</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select></p>
<p>請(qǐng)選擇你的性別:<br>
<input type="radio" name="sex" id="male" value="male"><label for="male">男</label><br>
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label></p>
<p>你喜歡做些什么:<br>
<input type="checkbox" name="hobby" id="book" value="book"><label for="book">看書(shū)</label>
<input type="checkbox" name="hobby" id="net" value="net"><label for="net">上網(wǎng)</label>
<input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">睡覺(jué)</label></p>
<p><label for="comments">我要留言:</label><br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">
<input type="reset" name="btnReset" id="btnReset" value="Reset"></p>
</form>
通常每個(gè)表單元素應(yīng)該有name和id屬性,name用于交給服務(wù)器,id用于綁定和功能篩選。
2.訪問(wèn)表單中的元素
表單中的元素,無(wú)論文本框、單選按鈕、下拉按鈕、下拉列表框或者其他的內(nèi)容,都包含在form的elements集合中,可以利用元素在集合中的位置或元素的name屬性來(lái)獲得該元素的引用。
var oForm = document.forms["form1"]//獲取表單
var otextForm = oForm.elements[0]; //獲取第一個(gè)元素
var otextPasswd = oForm.elements["passwd"] //獲取name屬性為passwd的元素
使用效果最高,最直觀的方法引用:
3.公共屬性與方法
所有表單中的元素(除了隱藏元素)都有一些共同的屬性、方法。這里將一些常用的羅列

var oForm = document.forms["form1"]; //獲取表單
var otextcomments = oForm.elements.comments; //獲取name屬性為comments的元素
alert(oForm.type); //查看元素類型
var otextPasswd = oForm.elements["passwd"]; //獲取name屬性為passwd的元素
otextPasswd.focus(); //聚焦到特定的元素上
4.表單的提交
form中的提交通過(guò)按鈕或者具備按鈕功能的圖片來(lái)完成
<input type="submit" name="btnsubmit" id="btnSubmit" value="Submit">
<input type="image" name="picSubmit" id="picSSubmit" src="Submit.jpg">
當(dāng)用戶按回車鍵或者單擊其中一個(gè)按鈕時(shí),就可以完成表單的提交,無(wú)需其他代碼??梢酝ㄟ^(guò)form中的action屬性來(lái)檢測(cè)是否提交。
用戶在提交表單的過(guò)程中可能因?yàn)榫W(wǎng)速過(guò)慢而反復(fù)單擊提交按鈕,這對(duì)服務(wù)器而言是很大的負(fù)擔(dān),可以通過(guò)使用disabled屬性來(lái)禁止這種行為。例如:
- IE在DOM操作有表單控件時(shí)的bug
- JavaScript DOM 學(xué)習(xí)第五章 表單簡(jiǎn)介
- JavaScript DOM學(xué)習(xí)第六章 表單實(shí)例
- JavaScript DOM 學(xué)習(xí)第七章 表單的擴(kuò)展
- JavaScript DOM學(xué)習(xí)第八章 表單錯(cuò)誤提示
- JQuery動(dòng)態(tài)創(chuàng)建DOM、表單元素的實(shí)現(xiàn)代碼
- 使用原生javascript創(chuàng)建通用表單驗(yàn)證——更鋒利的使用dom對(duì)象
- jquery中dom操作和事件的實(shí)例學(xué)習(xí)-表單驗(yàn)證
相關(guān)文章
對(duì)JavaScript客戶端應(yīng)用編程的一些建議
這篇文章主要介紹了對(duì)JavaScript客戶端應(yīng)用編程的一些建議,主要針對(duì)MVC框架框架的一些相關(guān)使用問(wèn)題,需要的朋友可以參考下2015-06-06
使用Grunt.js管理你項(xiàng)目的應(yīng)用說(shuō)明
以前我們可能使用NodeJS自己寫(xiě)一個(gè)build程序,但是現(xiàn)在Grunt.js能夠提供我們需要的一切2013-04-04
10分鐘徹底搞懂Http的強(qiáng)制緩存和協(xié)商緩存(小結(jié))
這篇文章主要介紹了10分鐘徹底搞懂Http的強(qiáng)制緩存和協(xié)商緩存(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
使用javascipt---實(shí)現(xiàn)二分查找法
本篇文章,小編為大家介紹使用javascipt---實(shí)現(xiàn)二分查找法的方法,有需要的朋友可以參考一下2013-04-04
簡(jiǎn)述JavaScript對(duì)傳統(tǒng)文檔對(duì)象模型的支持
這篇文章主要介紹了簡(jiǎn)述JavaScript對(duì)傳統(tǒng)文檔對(duì)象模型的支持,是JS學(xué)習(xí)進(jìn)階中的重要知識(shí),需要的朋友可以參考下2015-06-06
簡(jiǎn)介JavaScript中的italics()方法的使用
這篇文章主要介紹了JavaScript中的italics()方法使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06

