亚洲成年网站在线观看,亚洲精品无码激情AV,亚洲国产精品SSS在线观看AV

深入解析form標(biāo)簽

http://www.nowamagic.net/html/html_FormAnalysis.php

在Javascript中，頁(yè)面上的每一對(duì)<form>標(biāo)記都解析為一個(gè)對(duì)象，即form對(duì)象。

可以通過(guò)document.forms獲取以源順序排列的文檔中所有form對(duì)象的集合。

如果一個(gè)表單對(duì)象定義如下：
view source
print?
1    <form name="frm1" method="post" action="login.aspx">

獲得該表單對(duì)象的方法：
view source
print?
1    document.forms["frm1"];   // 根據(jù)name屬性值
2    document.forms[0];        // 根據(jù)索引號(hào)
3    document.frm1;            // 直接根據(jù)name值獲得對(duì)象
form 表單應(yīng)該注意的屬性

elements：獲取以源順序排列的給定表單中所有控件的集合。但是<input type="image">對(duì)象不在此集合內(nèi)。
view source
print?
1    var txtName = myform.elements[0];         //獲得表單的第一個(gè)元素
2    var txtName = myform.elements["txtName"]; //獲得name屬性值為"txtName"的元素
3    var txtName = myform.elements.txtName;    //獲得name屬性值為"txtName"的元素

enctype：設(shè)置或獲取表單的多用途網(wǎng)際郵件擴(kuò)展(MIME)編碼。這個(gè)屬性的默認(rèn)值為：application/x-www-form-urlencoded，如果要上傳文件，則應(yīng)該設(shè)置為：multipart/form-data。
form 表單中的<label>標(biāo)記

每一個(gè)表單元素的文字描述都應(yīng)該使用<label>標(biāo)記。

該標(biāo)記用于將文字綁定到對(duì)應(yīng)的表單元素上，它的for屬性指定它所要綁定的表單元素id值。綁定后單擊該文字，鼠標(biāo)將聚焦到對(duì)應(yīng)的文本框中或選中對(duì)應(yīng)的選項(xiàng)。

若安裝了某些桌面主題，某些表單元素還會(huì)變換顏色來(lái)予以提示，這大大提高了用戶體驗(yàn)。

示例代碼：
view source
print?
01    <form method="post" name="frm1">
02        <label for="txt">點(diǎn)我將聚焦到文本框</label>
03        <input type="text" id="txt" name="myname">
04    <br/>
05        <label for="rdo">點(diǎn)我將選中單選框</label>
06        <input type="radio" id="rdo" name="male"/>
07    <br/>
08        <label for="cbo">點(diǎn)我將選中復(fù)選框</label>
09        <input type="checkbox" id="cbo" name="hobby">
10    </form>

注意：

    * 每個(gè)表單元素應(yīng)當(dāng)盡量使用<label>標(biāo)簽來(lái)提高用戶體驗(yàn)；
    * 每個(gè)表單元素應(yīng)當(dāng)分配 name 屬性和 id 屬性。name 屬性：用來(lái)將數(shù)據(jù)提交到服務(wù)器；id 屬性：用來(lái)在客戶端做相應(yīng)的操作；如：<label>標(biāo)簽的綁定、CSS 選擇器的使用等。 ( name 屬性和 id 屬性應(yīng)該盡可能地使用相同的或相關(guān)的值。)

在客戶端，Javascript對(duì)表單及表單元素的操作，更青睞于使用其name屬性。因?yàn)椋瑢?duì)于某些特定的表單元素（如：?jiǎn)芜x按鈕等），使用其name屬性更易于獲得元素值，也更方便向服務(wù)器傳送數(shù)據(jù)！

Javascript操作form表單元素，比較少用的屬性：

    * defaultChecked 設(shè)置或獲取復(fù)選框或單選鈕的狀態(tài)。
    * defaultValue 設(shè)置或獲取對(duì)象的初始內(nèi)容。
    * disabled 設(shè)置或獲取控件的狀態(tài)。

提交表單

提交表單的示例：
view source
print?
1    <form name="frm" method="post" action="javascript:alert('提交成功！');">
2         <input type="button" value="提交功能" onclick="document.forms['frm'].submit();">
3         <input type="button" value="禁用反復(fù)提交" onclick="this.disabled=true; this.form.submit();">
4    </form>

注意：

    * 如果使用submit()方法來(lái)提交表單，則不會(huì)觸發(fā)<form>表單元素的onsubmit事件，這是與用<input type="submit">提交元素不同的地方；
    * 可以在按鈕的提交或點(diǎn)擊事件中，使用disabled 屬性來(lái)禁用用戶反復(fù)點(diǎn)擊提交按鈕的行為，減少服務(wù)器的響應(yīng)負(fù)擔(dān)；

設(shè)置文本框

控制文本框的字符個(gè)數(shù)：
view source
print?
01    <script language="javascript">
02    function LessThan(_textArea){
03        //返回文本框字符個(gè)數(shù)是否符號(hào)要求的boolean值
04        return _textArea.value.length < _textArea.getAttribute("maxlength");
05    }
06    </script>
07    <label for="name">文本框:</label>
08    <input type="text" name="name" id="name" value="姓名" maxlength="10"></p>
09    <br>
10    <label for="comments">多行文本框:</label>
11    <textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea>

注意：多行文本框<textarea>中的maxlength為自定義屬性；如果在<textarea>中輸入字符時(shí)，換行也算一個(gè)字符；

鼠標(biāo)經(jīng)過(guò)時(shí)，自動(dòng)選中文本框：
view source
print?
01    <script language="javascript">
02    window.onload = function(){
03        var txtName = document.getElementsByName("myName")[0];
04        txtName.onmouseover = function(){
05           this.focus();
06        };
07        txtName.onfocus = function(){
08           this.select();
09        };
10    }
11    </script>
12    <INPUT TYPE="text" NAME="myName" value="默認(rèn)值被選中" />

實(shí)現(xiàn)了行為與結(jié)構(gòu)的分離。
設(shè)置單選按鈕

獲取選中的單選按鈕 & 設(shè)置單選按鈕被選中：
view source
print?
01    <script language="javascript">
02    //獲取選中項(xiàng)
03    function getChoice(){
04        var oForm = document.forms["myForm1"];
05        //radioName是單選按鈕的name屬性值
06        var aChoices = oForm.radioName;
07        //遍歷整個(gè)單選項(xiàng)表
08        for(i=0;i<aChoices.length;i++)
09            if(aChoices[i].checked)
10                break; //如果發(fā)現(xiàn)了被選中項(xiàng)則退出
11        alert("您選中的是："+aChoices[i].value);
12    }
13    //設(shè)置選中項(xiàng)
14    function setChoice(_num){
15        var oForm = document.forms["myForm1"];
16        //radioName是單選按鈕的name屬性值
17        oForm.radioName[_num].checked = true; //其它選項(xiàng)的checked值會(huì)自動(dòng)設(shè)置為false
18    }
19    </script>
20    //調(diào)用代碼
21    <input type="button" value="獲取選中項(xiàng)" onclick="getChoice();" />
22    <input type="button" value="設(shè)置第1項(xiàng)被選中" onclick="setChoice(0);" />

需要保證同一組單選按鈕的name屬性值相同即可。
設(shè)置復(fù)選框

設(shè)置復(fù)選框的“全選”、“全不選”及“反選”功能：
view source
print?
01    <script language="javascript">
02    function changeBoxes(_action){
03        var myForm = document.forms["myForm1"];
04        //myCheckbox 為所有復(fù)選框的name屬性值
05        var oCheckBox = myForm.myCheckbox;
06
07        for(var i=0;i<oCheckBox.length;i++)    //遍歷每一個(gè)選項(xiàng)
08            if(_action < 0)//反選
09                oCheckBox[i].checked = !oCheckBox[i].checked;
10            else
11                //_action為1是則全選,為0時(shí)則全不選
12                oCheckBox[i].checked = _action;
13    }
14    </script>
15    <form name="myForm1">
16    <input type="checkbox" name="myCheckbox">aa
17    <input type="checkbox" name="myCheckbox">bb
18    <input type="button" value="全選" onclick="changeBoxes(1);" />
19    <input type="button" value="全不選" onclick="changeBoxes(0);" />
20    <input type="button" value="反選" onclick="changeBoxes(-1);" />
21    </form>
設(shè)置下拉列表框

下拉列表框的multiple 屬性用于設(shè)置或獲取下拉列表框是否可以選中多個(gè)選項(xiàng)。

下拉列表框默認(rèn)只能選中一項(xiàng)，若要設(shè)置為可以選中多項(xiàng)，則<select multiple = "multiple">即可。

type 屬性：javascript語(yǔ)言根據(jù)type屬性的值獲得下拉列表框select控件的類型。

type 屬性的值為：select-multiple 或 select-one（注意：下拉列表框的類型由multiple 屬性控制）。

查看下拉列表框的選項(xiàng)（單選項(xiàng) & 多選項(xiàng)）：
view source
print?
01    <script language="javascript">
02    function getSelectValue(_myselect){
03        var oForm = document.forms["myForm1"];
04        //根據(jù)參數(shù)(下拉列表框的name屬性值)獲得下拉菜單項(xiàng)
05        var oSelectBox = oForm.elements[_myselect];
06        //判斷是單選還是多選
07        if(oSelectBox.type == "select-one"){
08            var iChoice = oSelectBox.selectedIndex;    //獲取選中項(xiàng)
09            alert("單選，您選中了" + oSelectBox.options[iChoice].text);
10        }
11        else{
12            var aChoices = new Array();
13            //遍歷整個(gè)下拉菜單
14            for(var i=0;i<oSelectBox.options.length;i++)
15                if(oSelectBox.options[i].selected)//如果被選中
16                  //壓入到數(shù)組中
17                  aChoices.push(oSelectBox.options[i].text);
18            //輸出結(jié)果
19            alert("多選，您選了：" + aChoices.join());
20        }
21    }
22    </script>
23    <form method="post" name="myForm1">
24    <select id="mysel" name="mysel" multiple="multiple" style="height:60px;">
25        <option value="a">AA</option>
26        <option value="b">BB</option>
27        <option value="c">CC</option>
28    </select>
29    <input type="button" onclick="getSelectValue('mysel')" value="查看選項(xiàng)" />

添加下拉列表框的選項(xiàng)

追加新選項(xiàng)到末尾：
view source
print?
1    <script language="javascript">
2    function AddOption(Box){ //追加選項(xiàng)到末尾
3        var oForm = document.forms["myForm1"];
4        var oBox = oForm.elements[Box];
5        var oOption = new Option("乒乓球","Pingpang");
6        oBox.options[oBox.options.length] = oOption;
7    }
8    </script>

插入新選項(xiàng)到指定位置：
view source
print?
01    <script language="javascript">
02    function AddOption(_select,_num){
03        var oForm = document.forms["myForm1"];
04        var oBox = oForm.elements[_select];
05        var oOption = new Option("text值","value值");
06        //兼容IE7，先添加選項(xiàng)到最后，再移動(dòng)
07        oBox.options[oBox.options.length] = oOption;
08        oBox.insertBefore(oOption,oBox.options[_num]);
09    }
10    </script>
11    <input type="button" value="添加乒乓球" onclick="AddOption('myselect',1);" />

注意：如果直接使用insertBefore()方法插入選項(xiàng)，將會(huì)在IE中出現(xiàn)一個(gè)空選項(xiàng)的bug。為了解決IE的這個(gè)bug，只能使用先追加新選項(xiàng)到末尾，然后再使用insertBefore()方法將其移動(dòng)到相應(yīng)的位置。

類似這樣：為了跳過(guò)瀏覽器的某些bug或限制，實(shí)現(xiàn)預(yù)定目的的小技巧，通常稱之為hack。

替換某一選項(xiàng)：
view source
print?
01    <script language="javascript">
02    //替換選項(xiàng)
03    function ReplaceOption(_select,_num){
04        var oForm = document.forms["myForm1"];
05        var oBox = oForm.elements[_select];
06        var oOption = new Option("text值","value值");
07        oBox.options[_num] = oOption; //替換第_num 個(gè)選項(xiàng)
08    }
09    </script>
10    <input type="button" value="替換選項(xiàng)" onclick="ReplaceOption('selName',1);" />

通過(guò)oBox.options[_num] = oOption 直接將創(chuàng)建的新選項(xiàng)替換掉指定位置的選項(xiàng)。

刪除某一選項(xiàng)：
view source
print?
01    <script language="javascript">
02    function RemoveOption(_select,_num){
03        var oForm = document.forms["myForm1"];
04        var oBox = oForm.elements[_select];
05        oBox.options[_num] = null;    //刪除選項(xiàng)
06    }
07    </script>
08    </head>
09    <body>
10    <select id="mysel" name="mysel" multiple="multiple">
11

12 <input type="button" value="刪除選項(xiàng)" onclick="RemoveOption('mysel',1);" />

直接通過(guò)oBox.options[_num] = null 刪除選項(xiàng)。

posted on 2011-03-15 10:04 都市淘沙者閱讀(326) 評(píng)論(0) 編輯收藏所屬分類: JSP/PHP

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: 深入解析form標(biāo)簽 JavaScript prototype原型對(duì)象 IE和FireFox下通用的Javascript模擬回車－－點(diǎn)擊事件(轉(zhuǎn)) Js表單常用處理方法控制textarea文本長(zhǎng)度,限制輸入字?jǐn)?shù)(帶統(tǒng)計(jì))的特效[zhuan] 也談一下文件上傳說(shuō)說(shuō)大型高并發(fā)高負(fù)載網(wǎng)站的系統(tǒng)架構(gòu) 不同Web主機(jī)上的Servlet之間數(shù)據(jù)對(duì)象的相互傳輸(轉(zhuǎn)) Servlet 監(jiān)聽(tīng)器應(yīng)用（轉(zhuǎn)） B/S系統(tǒng)權(quán)限控制的一種簡(jiǎn)單方法 (轉(zhuǎn))

都市淘沙者

導(dǎo)航

公告

隨筆分類

文章分類

隨筆檔案

文章檔案

相冊(cè)

統(tǒng)計(jì)

留言簿(23)

積分與排名

優(yōu)秀學(xué)習(xí)網(wǎng)站

友情連接

閱讀排行榜

評(píng)論排行榜

深入解析form標(biāo)簽