Mikel
[转载]HTML 中表单form 的相关知识 – xugang – 博客园.
在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 属性值相同即可。
设置复选框
设置复选框的“全选”、“全不选”及“反选”功能。
| <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 直接将创建的新选项替换掉指定位置的选项。
iiii > 删除某一选项
| <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 删除选项。
