HTML 中表单form 的相关知识
在Javascript 中，頁面上的每一對<form> 標記都解析為一個對象，即form 對象。
可以通過document.forms 獲取以源順序排列的文檔中所有form 對象的集合。
| 如果一個表單對象定義如下： |
| <form?name="frm1"?method="post"?action="login.aspx"> |
| 獲得該表單對象的方法： |
| ??i>??document.forms["frm1"];???//?根據name屬性值 |
| ?ii>??document.forms[0];????????//?根據索引號 |
| iii>??document.frm1;????????????//?直接根據name值獲得對象 |
?
form 表單應該注意的屬性：
elements：獲取以源順序排列的給定表單中所有控件的集合。但是<input? type="image" > 對象不在此集合內。
| var?txtName?=?myform.elements[0];?????????//獲得表單的第一個元素 |
| var?txtName?=?myform.elements["txtName"];?//獲得name屬性值為"txtName"的元素 |
| var?txtName?=?myform.elements.txtName;????//獲得name屬性值為"txtName"的元素 |
?
enctype：設置或獲取表單的多用途網際郵件擴展(MIME) 編碼。
??????????????????? 這個屬性的默認值為：application/x-www-form-urlencoded
??????????????????? 如果要上傳文件，則應該設置為：multipart/form-data
?
form 表單中的<label> 標記：
?
每一個表單元素的文字描述都應該使用<label> 標記！
?????? 該標記用于將文字綁定到對應的表單元素上，它的for 屬性指定它所要綁定的表單元素id 值。綁定后單擊該文字，鼠標將聚焦到對應的文本框中或選中對應的選項。
?????? 若安裝了某些桌面主題，某些表單元素還會變換顏色來予以提示，這大大提高了用戶體驗。
示例代碼：
| <form?method="post"?name="frm1"> |
| ????<label?for="txt">點我將聚焦到文本框</label> |
| ????<input?type="text"?id="txt"?name="myname"> |
| <br/> |
| ????<label?for="rdo">點我將選中單選框</label> |
| ????<input?type="radio"?id="rdo"?name="male"/> |
| <br/> |
| ????<label?for="cbo">點我將選中復選框</label> |
| ????<input?type="checkbox"?id="cbo"?name="hobby"> |
| </form> |
注意：
i >??? 每個表單元素應當盡量使用<label>標簽來提高用戶體驗；
ii >?? 每個表單元素應當分配?name 屬性? 和?id 屬性。
????????name 屬性：用來將數據提交到服務器；
???????????????id 屬性：用來在客戶端做相應的操作；如：<label>標簽的綁定、CSS 選擇器的使用等。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ( name 屬性和 id 屬性應該盡可能地使用相同的或相關的值。)
?
在客戶端，Javascript 對表單及表單元素的操作，更青睞于使用其name 屬性。
因為，對于某些特定的表單元素(如：單選按鈕等)，使用其name 屬性更易于獲得元素值，也更方便向服務器傳送數據！
?
Javascript 操作form 表單元素，比較少用的屬性：
defaultChecked?設置或獲取復選框或單選鈕的狀態。
defaultValue?設置或獲取對象的初始內容。
disabled?設置或獲取控件的狀態。
?
提交表單
提交表單的示例：
| ??<form?name="frm"?method="post"?action="javascript:alert('提交成功！');"> |
| ?????<input?type="button"?value="提交功能"? ??????????? onclick="document.forms['frm'].submit();"> |
| ?????<input?type="button"?value="禁用反復提交"? ??????????? onclick="this.disabled=true;?this.form.submit();"> |
| ??</form> |
注意：
i >?? 如果使用submit( ) 方法來提交表單，則不會觸發<form> 表單元素的onsubmit 事件，
?????? 這是與用<input? type="submit">提交元素不同的地方；
ii >? 可以在按鈕的提交或點擊事件中，使用disabled 屬性來禁用用戶反復點擊提交按鈕的行為，
?????? 減少服務器的響應負擔；
?
設置文本框
i >?? 控制文本框的字符個數
| <script language="javascript"> |
| function?LessThan(_textArea){ |
| ????//返回文本框字符個數是否符號要求的boolean值 |
| ????return?_textArea.value.length?<?_textArea.getAttribute("maxlength"); |
| } |
| </script> |
| <label?for="name">文本框:</label> |
| <input?type="text"?name="name"?id="name"?value="姓名"?maxlength="10"></p> |
| <br> |
| <label?for="comments">多行文本框:</label> |
| <textarea?name="comments"?id="comments"?cols="40"?rows="4"?maxlength="50"onkeypress="return?LessThan(this);"></textarea> |
注意：多行文本框<textarea> 中的maxlength 為自定義屬性；如果在<textarea> 中輸入字符時，換行也算一個字符；
?
ii >? 鼠標經過時，自動選中文本框
| <script language="javascript"> |
| window.onload?=?function(){ |
| ????var?txtName?=?document.getElementsByName("myName")[0]; |
| ????txtName.onmouseover?=?function(){ |
| ???????this.focus(); |
| ????}; |
| ????txtName.onfocus?=?function(){ |
| ???????this.select(); |
| ????}; |
| } |
| </script> |
| <INPUT?TYPE="text"?NAME="myName"?value="默認值被選中"?/> |
實現了行為與結構的分離。
?
設置單選按鈕
獲取選中的單選按鈕 & 設置單選按鈕被選中
| <script?language="javascript"> |
| //獲取選中項 |
| function?getChoice(){ |
| ????var?oForm?=?document.forms["myForm1"]; |
| ????//radioName是單選按鈕的name屬性值 |
| ????var?aChoices?=?oForm.radioName; |
| ????//遍歷整個單選項表 |
| ????for(i=0;i<aChoices.length;i++)??? |
| ????????if(aChoices[i].checked)??? |
| ????????????break;?//如果發現了被選中項則退出 |
| ????alert("您選中的是："+aChoices[i].value); |
| } |
| //設置選中項 |
| function?setChoice(_num){ |
| ????var?oForm?=?document.forms["myForm1"]; |
| ????//radioName是單選按鈕的name屬性值 |
| ????oForm.radioName[_num].checked?=?true; //其它選項的checked值會自動設置為false |
| } |
| </script> //調用代碼 <input type="button" value="獲取選中項" οnclick="getChoice();" /> <input type="button" value="設置第1項被選中" οnclick="setChoice(0);" /> |
需要保證同一組單選按鈕的name 屬性值相同即可。
?
設置復選框
設置復選框的“全選”、“全不選”及“反選”功能
| <script?language="javascript"> |
| function?changeBoxes(_action){ |
| ????var?myForm?=?document.forms["myForm1"]; |
| ????//myCheckbox?為所有復選框的name屬性值 |
| ????var?oCheckBox?=?myForm.myCheckbox; |
| ? |
| ????for(var?i=0;i<oCheckBox.length;i++)????//遍歷每一個選項 |
| ????????if(_action?<?0)//反選 |
| ????????????oCheckBox[i].checked?=?!oCheckBox[i].checked; |
| ????????else? |
| ????????????//_action為1是則全選,為0時則全不選 |
| ????????????oCheckBox[i].checked?=?_action; |
| } |
| </script> |
| <form?name="myForm1"> |
| <input?type="checkbox"?name="myCheckbox">aa |
| <input?type="checkbox"?name="myCheckbox">bb |
| <input?type="button"?value="全選"?onclick="changeBoxes(1);"?/> |
| <input?type="button"?value="全不選"?onclick="changeBoxes(0);"?/> |
| <input?type="button"?value="反選"?onclick="changeBoxes(-1);"?/> |
| </form> |
?
設置下拉列表框
下拉列表框的multiple 屬性用于設置或獲取下拉列表框是否可以選中多個選項。
下拉列表框默認只能選中一項，若要設置為可以選中多項，則<select? multiple = "multiple"> 即可。
type 屬性：javascript 語言根據type 屬性的值獲得下拉列表框select 控件的類型。
type?屬性的值為：select-multiple 或 select-one （注意：下拉列表框的類型由multiple 屬性控制）
i >??查看下拉列表框的選項（單選項 & 多選項）
| <script?language="javascript"> |
| function?getSelectValue(_myselect){ |
| ????var?oForm?=?document.forms["myForm1"]; |
| ????//根據參數(下拉列表框的name屬性值)獲得下拉菜單項 |
| ????var?oSelectBox?=?oForm.elements[_myselect]; |
| ????//判斷是單選還是多選 |
| ????if(oSelectBox.type?==?"select-one"){ |
| ????????var?iChoice?=?oSelectBox.selectedIndex;????//獲取選中項 |
| ????????alert("單選，您選中了"?+?oSelectBox.options[iChoice].text); |
| ????} |
| ????else{ |
| ????????var?aChoices?=?new?Array(); |
| ????????//遍歷整個下拉菜單 |
| ????????for(var?i=0;i<oSelectBox.options.length;i++) |
| ????????????if(oSelectBox.options[i].selected)//如果被選中 |
| ??????????????//壓入到數組中 |
| ??????????????aChoices.push(oSelectBox.options[i].text); |
| ????????//輸出結果 |
| ????????alert("多選，您選了："?+?aChoices.join()); |
| ????} |
| } |
| </script> |
| <form?method="post"?name="myForm1"> |
| <select?id="mysel"?name="mysel"?multiple="multiple"?style="height:60px;"> |
| ????<option?value="a">AA</option> |
| ????<option?value="b">BB</option> |
| ????<option?value="c">CC</option> |
| </select> |
| <input?type="button"?onclick="getSelectValue('mysel')"?value="查看選項"?/> |
?
ii >??添加下拉列表框的選項
追加新選項到末尾
| <script?language="javascript"> |
| function?AddOption(Box){?//追加選項到末尾 |
| ????var?oForm?=?document.forms["myForm1"]; |
| ????var?oBox?=?oForm.elements[Box]; |
| ????var?oOption?=?new?Option("乒乓球","Pingpang"); |
| ????oBox.options[oBox.options.length]?=?oOption; |
| } |
| </script> |
插入新選項到指定位置
| <script?language="javascript"> |
| function?AddOption(_select,_num){ |
| ????var?oForm?=?document.forms["myForm1"]; |
| ????var?oBox?=?oForm.elements[_select]; |
| ????var?oOption?=?new?Option("text值","value值"); |
| ????//兼容IE7，先添加選項到最后，再移動 |
| ????oBox.options[oBox.options.length]?=?oOption; |
| ????oBox.insertBefore(oOption,oBox.options[_num]); |
| } |
| </script> |
| <input?type="button"?value="添加乒乓球"?onclick="AddOption('myselect',1);"?/> |
注意：如果直接使用insertBefore( ) 方法插入選項，將會在IE 中出現一個空選項的bug。為了解決IE 的這個bug ，只能使用先追加新選項到末尾，然后再使用insertBefore( ) 方法將其移動到相應的位置。
?
類似這樣：為了跳過瀏覽器的某些bug 或限制，實現預定目的的小技巧，通常稱之為hack 。
?
iii >??替換某一選項
| <script?language="javascript"> |
| //替換選項 |
| function?ReplaceOption(_select,_num){ |
| ????var?oForm?=?document.forms["myForm1"]; |
| ????var?oBox?=?oForm.elements[_select]; |
| ????var?oOption?=?new?Option("text值","value值"); |
| ????oBox.options[_num]?=?oOption;?//替換第_num?個選項 |
| } |
| </script> |
| <input?type="button"?value="替換選項"?onclick="ReplaceOption('selName',1);"?/> |
通過oBox.options[_num] = oOption 直接將創建的新選項替換掉指定位置的選項。
?
iv >??刪除某一選項
| <script?language="javascript"> |
| function?RemoveOption(_select,_num){ |
| ????var?oForm?=?document.forms["myForm1"]; |
| ????var?oBox?=?oForm.elements[_select]; |
| ????oBox.options[_num]?=?null;????//刪除選項 |
| } |
| </script> |
| </head> |
| <body> |
| <select?id="mysel"?name="mysel"?multiple="multiple"> |
| ...... |
| <input?type="button"?value="刪除選項"?onclick="RemoveOption('mysel',1);"?/> |
直接通過oBox.options[_num] = null 刪除選項。
?
| 作者：?XuGang ??網名：鋼鋼 |
| 出處：?http://xugang.cnblogs.com |
| 聲明：?本文版權歸作者和博客園共有。轉載時必須保留此段聲明，且在文章頁面明顯位置給出原文連接地址！ |
總結
以上是生活随笔為你收集整理的HTML 中表单form 的相关知识的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： weblogic部署连接池
- 下一篇： web.xml 中的filter