Dict.CN 在線詞典, 英語學習, 在線翻譯
 
 


 
 
 


          
	

          都市淘沙者
          

          荔枝FM Everyone can be host
          

          


          
	
		

          統計
          
	
		

          留言簿(23)
          


        

          積分與排名
          


		
		
          優秀學習網站
          
		
				
			
	
		
          友情連接
          
		
				
			
	

        

          閱讀排行榜
          


		

          評論排行榜
          


	

          

          
	
					
	
          
		
          
			深入解析form標簽
		
          
		http://www.nowamagic.net/html/html_FormAnalysis.php
          

          

          在Javascript中，頁面上的每一對<form>標記都解析為一個對象，即form對象。
          

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

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

          
獲得該表單對象的方法：
          
view source
          
print?
          
1    document.forms["frm1"];   // 根據name屬性值
          
2    document.forms[0];        // 根據索引號
          
3    document.frm1;            // 直接根據name值獲得對象
          
form 表單應該注意的屬性
          

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

          
enctype：設置或獲取表單的多用途網際郵件擴展(MIME)編碼。這個屬性的默認值為：application/x-www-form-urlencoded，如果要上傳文件，則應該設置為：multipart/form-data。
          
form 表單中的          <label>標記
          

          
每一個表單元素的文字描述都應該使用          <label>標記。
          

          
該標記用于將文字綁定到對應的表單元素上，它的for屬性指定它所要綁定的表單元素id值。綁定后單擊該文字，鼠標將聚焦到對應的文本框中或選中對應的選項。
          

          
若安裝了某些桌面主題，某些表單元素還會變換顏色來予以提示，這大大提高了用戶體驗。
          

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

          
注意：
          

          
    * 每個表單元素應當盡量使用          <label>標簽來提高用戶體驗；
          
    * 每個表單元素應當分配 name 屬性和 id 屬性。name 屬性：用來將數據提交到服務器；id 屬性：用來在客戶端做相應的操作；如：          <label>標簽的綁定、CSS 選擇器的使用等。 ( name 屬性和 id 屬性應該盡可能地使用相同的或相關的值。)
          

          
在客戶端，Javascript對表單及表單元素的操作，更青睞于使用其name屬性。因為，對于某些特定的表單元素（如：單選按鈕等），使用其name屬性更易于獲得元素值，也更方便向服務器傳送數據！
          

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

          
    * defaultChecked 設置或獲取復選框或單選鈕的狀態。
          
    * defaultValue 設置或獲取對象的初始內容。
          
    * disabled 設置或獲取控件的狀態。
          

          
提交表單
          

          
提交表單的示例：
          
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="禁用反復提交" onclick="this.disabled=true; this.form.submit();">
          
4              </form>
          

          
注意：
          

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

          
設置文本框
          

          
控制文本框的字符個數：
          
view source
          
print?
          
01              <script language="javascript">
          
          02    function LessThan(_textArea){
          
          03        //返回文本框字符個數是否符號要求的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>中輸入字符時，換行也算一個字符；
          

          
鼠標經過時，自動選中文本框：
          
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="默認值被選中" />
          

          
實現了行為與結構的分離。
          
設置單選按鈕
          

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

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

          
設置復選框的“全選”、“全不選”及“反選”功能：
          
view source
          
print?
          
01              <script language="javascript">
          
          02    function changeBoxes(_action){
          
          03        var myForm = document.forms["myForm1"];
          
          04        //myCheckbox 為所有復選框的name屬性值
          
          05        var oCheckBox = myForm.myCheckbox;
          
          06      
          
          07        for(var i=0;i<oCheckBox.length;i++)    //遍歷每一個選項
          
          08            if(_action < 0)//反選
          
          09                oCheckBox[i].checked = !oCheckBox[i].checked;
          
          10            else
          
          11                //_action為1是則全選,為0時則全不選
          
          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>
          
設置下拉列表框
          

          
下拉列表框的multiple 屬性用于設置或獲取下拉列表框是否可以選中多個選項。
          

          
下拉列表框默認只能選中一項，若要設置為可以選中多項，則          <select multiple = "multiple">即可。
          

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

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

          
查看下拉列表框的選項（單選項 & 多選項）：
          
view source
          
print?
          
01              <script language="javascript">
          
          02    function getSelectValue(_myselect){
          
          03        var oForm = document.forms["myForm1"];
          
          04        //根據參數(下拉列表框的name屬性值)獲得下拉菜單項
          
          05        var oSelectBox = oForm.elements[_myselect];
          
          06        //判斷是單選還是多選
          
          07        if(oSelectBox.type == "select-one"){
          
          08            var iChoice = oSelectBox.selectedIndex;    //獲取選中項
          
          09            alert("單選，您選中了" + oSelectBox.options[iChoice].text);
          
          10        }
          
          11        else{
          
          12            var aChoices = new Array();
          
          13            //遍歷整個下拉菜單
          
          14            for(var i=0;i<oSelectBox.options.length;i++)
          
          15                if(oSelectBox.options[i].selected)//如果被選中
          
          16                  //壓入到數組中
          
          17                  aChoices.push(oSelectBox.options[i].text);
          
          18            //輸出結果
          
          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="查看選項" />
          

          
添加下拉列表框的選項
          

          
追加新選項到末尾：
          
view source
          
print?
          
1              <script language="javascript">
          
          2    function AddOption(Box){ //追加選項到末尾
          
          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>
          

          
插入新選項到指定位置：
          
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，先添加選項到最后，再移動
          
          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()方法插入選項，將會在IE中出現一個空選項的bug。為了解決IE的這個bug，只能使用先追加新選項到末尾，然后再使用insertBefore()方法將其移動到相應的位置。
          

          
類似這樣：為了跳過瀏覽器的某些bug或限制，實現預定目的的小技巧，通常稱之為hack。
          

          
替換某一選項：
          
view source
          
print?
          
01              <script language="javascript">
          
          02    //替換選項
          
          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 個選項
          
          08    }
          
          09    </script>
          
10              <input type="button" value="替換選項" onclick="ReplaceOption('selName',1);" />
          

          
通過oBox.options[_num] = oOption 直接將創建的新選項替換掉指定位置的選項。
          

          
刪除某一選項：
          
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;    //刪除選項
          
          06    }
          
          07    </script>
          
08              </head>
          
09              <body>
          
10              <select id="mysel" name="mysel" multiple="multiple">
          
11    
          
12              <input type="button" value="刪除選項" onclick="RemoveOption('mysel',1);" />
          

          
直接通過oBox.options[_num] = null 刪除選項。
          

          

          

          

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


	


          
	    
    




          








          

				

          



    







          
        
	




主站蜘蛛池模板：
礼泉县|
五大连池市|
岳阳县|
日照市|
磐安县|
诸城市|
兴义市|
商河县|
铅山县|
呼图壁县|
乳山市|
宜兰县|
万载县|
钟祥市|
新宾|
太保市|
裕民县|
昌平区|
湘西|
叶城县|
西乡县|
资源县|
钦州市|
黑龙江省|
珠海市|
洪雅县|
慈利县|
双城市|
天门市|
翼城县|
惠东县|
东山县|
固阳县|
德州市|
广灵县|
临颍县|
敦煌市|
五原县|
长乐市|
正阳县|
扎兰屯市|