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