form表单小技巧-大学问.docx

form表单，小技巧-大学问 在Javascript 中，页面上的每一对 标记都解析为一个对象，即form 对象。可以通过document.forms 获取以源顺序排列的文档中所有form 对象的集合。如果一个表单对象定义如下：获得该表单对象的方法：idocument.formsfrm1; /根据name属性值iidocument.forms0; /根据索引号iiidocument.frm1; /直接根据name值获得对象 form 表单应该注意的属性：elements：获取以源顺序排列的给定表单中所有控件的集合。但是 对象不在此集合内。vartxtName=myform.elements0;/获得表单的第一个元素vartxtName=myform.elementstxtName;/获得name属性值为txtName的元素vartxtName=myform.elements.txtName;/获得name属性值为txtName的元素 enctype：设置或获取表单的多用途网际邮件扩展(MIME) 编码。 这个属性的默认值为：application/x-www-form-urlencoded 如果要上传文件，则应该设置为：multipart/form-data form 表单中的 标记：每一个表单元素的文字描述都应该使用 标记！ 该标记用于将文字绑定到对应的表单元素上，它的for 属性指定它所要绑定的表单元素id 值。绑定后单击该文字，鼠标将聚焦到对应的文本框中或选中对应的选项。 若安装了某些桌面主题，某些表单元素还会变换颜色来予以提示，这大大提高了用户体验。示例代码：点我将聚焦到文本框 点我将选中单选框 点我将选中复选框 注意：i 每个表单元素应当尽量使用标签来提高用户体验；ii 每个表单元素应当分配 name 属性 和 id 属性。 name 属性：用来将数据提交到服务器； id 属性：用来在客户端做相应的操作；如：标签的绑定、CSS 选择器的使用等。 ( name 属性和 id 属性应该尽可能地使用相同的或相关的值。)在客户端，Javascript 对表单及表单元素的操作，更青睐于使用其name 属性。因为，对于某些特定的表单元素(如：单选按钮等)，使用其name 属性更易于获得元素值，也更方便向服务器传送数据！ Javascript 操作form 表单元素，比较少用的属性：defaultChecked 设置或获取复选框或单选钮的状态。defaultValue 设置或获取对象的初始内容。disabled 设置或获取控件的状态。 提交表单提交表单的示例： 注意：i 如果使用submit( ) 方法来提交表单，则不会触发 表单元素的onsubmit 事件， 这是与用提交元素不同的地方；ii 可以在按钮的提交或点击事件中，使用disabled 属性来禁用用户反复点击提交按钮的行为， 减少服务器的响应负担； 设置文本框i 控制文本框的字符个数functionLessThan(_textArea) /返回文本框字符个数是否符号要求的boolean值 return_textArea.value.length_textArea.getAttribute(maxlength);文本框:多行文本框:注意：多行文本框 中的maxlength 为自定义属性；如果在 中输入字符时，换行也算一个字符； ii 鼠标经过时，自动选中文本框window.onload=function() vartxtName=document.getElementsByName(myName)0; txtName.onmouseover=function() this.focus(); ; txtName.onfocus=function() this.select(); ;实现了行为与结构的分离。 设置单选按钮获取选中的单选按钮 & 设置单选按钮被选中/获取选中项functiongetChoice() varoForm=document.formsmyForm1; /radioName是单选按钮的name属性值 varaChoices=oForm.radioName; /遍历整个单选项表 for(i=0;iaChoices.length;i+) if(aChoicesi.checked) break;/如果发现了被选中项则退出 alert(您选中的是：+aChoicesi.value);/设置选中项functionsetChoice(_num) varoForm=document.formsmyForm1; /radioName是单选按钮的name属性值 oForm.radioName_num.checked=true; /其它选项的checked值会自动设置为false/调用代码需要保证同一组单选按钮的name 属性值相同即可。 设置复选框设置复选框的“全选”、“全不选”及“反选”功能functionchangeBoxes(_action) varmyForm=document.formsmyForm1; /myCheckbox为所有复选框的name属性值 varoCheckBox=myForm.myCheckbox; for(vari=0;ioCheckBox.length;i+) /遍历每一个选项 if(_action0)/反选 oCheckBoxi.checked=!oCheckBoxi.checked; else /_action为1是则全选,为0时则全不选 oCheckBoxi.checked=_action;aabb 设置下拉列表框下拉列表框的multiple 属性用于设置或获取下拉列表框是否可以选中多个选项。下拉列表框默认只能选中一项，若要设置为可以选中多项，则 即可。type 属性：javascript 语言根据type 属性的值获得下拉列表框select 控件的类型。type 属性的值为：select-multiple 或 select-one （注意：下拉列表框的类型由multiple 属性控制）i 查看下拉列表框的选项（单选项 & 多选项）functiongetSelectValue(_myselect) varoForm=document.formsmyForm1;/根据参数(下拉列表框的name属性值)获得下拉菜单项 varoSelectBox=oForm.elements_myselect; /判断是单选还是多选 if(oSelectBox.type=select-one) variChoice=oSelectBox.selectedIndex; /获取选中项 alert(单选，您选中了+oSelectBox.optionsiChoice.text); else varaChoices=newArray(); /遍历整个下拉菜单 for(vari=0;ioSelectBox.options.length;i+) if(oSelectBox.optionsi.selected)/如果被选中 /压入到数组中 aChoices.push(oSelectBox.optionsi.text); /输出结果 alert(多选，您选了：+aChoices.join(); AA BB CCii 添加下拉列表框的选项追加新选项到末尾functionAddOption(Box)/追加选项到末尾 varoForm=document.formsmyForm1; varoBox=oForm.elementsBox; varoOption=newOption(乒乓球,Pingpang); oBox.optionsoBox.options.length=oOption;插入新选项到指定位置functionAddOption(_select,_num) varoForm=document.formsmyForm1; varoBox=oForm.elements_select; varoOption=newOption(text值,value值); /兼容IE7，先添加选项到最后，再移动 oBox.optionsoBox.options.length=oOption; oBox.insertBefore(oOption,oBox.options_num);注意：如果直接使用insertBefore( ) 方法插入选项，将会在IE 中出现一个空选项的bug。为了解决IE 的这个bug ，只能使用先追加新选项到末尾，然后再使用insertBefore( ) 方法将其移动到相应的位置。 类似这样：为了跳过浏览器的某些bug 或限制，实现预定目的的小技巧，通常称之为hack 。iii 替换某一选项/替换选项functionReplaceOption(_select,_num) varoForm=document.formsmyForm1; varoBox=oForm.elements_select; varoOption=newOption(text值,value值); oBox.options_num=oOption;/替换第_num个选项通过oBox.options_nu