欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

DOM基礎(chǔ)教程之使用DOM控制表單

 更新時(shí)間：2015年01月20日 16:31:06   投稿：hebedich  
這篇文章主要介紹了DOM基礎(chǔ)教程之使用DOM控制表單的相關(guān)資料,需要的朋友可以參考下

1.表單簡(jiǎn)介

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

復(fù)制代碼 代碼如下:
document.forms["form1"]

不僅如此，還可以通過表單在文檔中的索引來引用表單對(duì)象。例如

復(fù)制代碼 代碼如下:
document.forms[1]

表示引用文檔中的第二個(gè)表單對(duì)象

以下為一個(gè)包含多種form元素，每個(gè)元素都有l(wèi)abel標(biāo)記，綁定在元素上，這樣通過點(diǎn)擊文字就能定為和選擇到表格，提高了用戶體驗(yàn)。

復(fù)制代碼 代碼如下:

<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">看書</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">睡覺</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.訪問表單中的元素

表單中的元素，無論文本框、單選按鈕、下拉按鈕、下拉列表框或者其他的內(nèi)容，都包含在form的elements集合中，可以利用元素在集合中的位置或元素的name屬性來獲得該元素的引用。

復(fù)制代碼 代碼如下:

var oForm = document.forms["form1"]//獲取表單
        var otextForm = oForm.elements[0]; //獲取第一個(gè)元素
        var otextPasswd = oForm.elements["passwd"] //獲取name屬性為passwd的元素

使用效果最高，最直觀的方法引用：

復(fù)制代碼 代碼如下:
var otextcomments = oForm.elements.comments; //獲取name屬性為comments的元素

3.公共屬性與方法

所有表單中的元素（除了隱藏元素）都有一些共同的屬性、方法。這里將一些常用的羅列

復(fù)制代碼 代碼如下:

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中的提交通過按鈕或者具備按鈕功能的圖片來完成

復(fù)制代碼 代碼如下:

<input type="submit" name="btnsubmit" id="btnSubmit" value="Submit">
        <input type="image" name="picSubmit" id="picSSubmit" src="Submit.jpg">

當(dāng)用戶按回車鍵或者單擊其中一個(gè)按鈕時(shí)，就可以完成表單的提交，無需其他代碼?？梢酝ㄟ^form中的action屬性來檢測(cè)是否提交。

復(fù)制代碼 代碼如下:
<form method="post" name="form1" action="javascript:alert('submited')"></form>

用戶在提交表單的過程中可能因?yàn)榫W(wǎng)速過慢而反復(fù)單擊提交按鈕，這對(duì)服務(wù)器而言是很大的負(fù)擔(dān)，可以通過使用disabled屬性來禁止這種行為。例如：

復(fù)制代碼 代碼如下:
<input type="button" value="Submit" />

相關(guān)文章

最新評(píng)論