在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 選擇器的使用等。
在客戶端，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="獲取選中項" onclick="getChoice();" /> <input type="button" value="設置第1項被選中" onclick="setChoice(0);" /> |
需要保證同一組單選按鈕的name 屬性值相同即可。