在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 的相关知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。