在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 設置或獲取復選框或單選鈕的狀態(tài)。
defaultValue 設置或獲取對象的初始內容。
disabled 設置或獲取控件的狀態(tài)。
提交表單
提交表單的示例：
<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( ) 方法來提交表單，則不會觸發(fā)<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; //如果發(fā)現了被選中項則退出
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 屬性值相同即可。
設置復選框
設置復選框的“全選”、“全不選”及“反選”功能
<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 直接將創(chuàng)建的新選項替換掉指定位置的選項。
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 刪除選項。
