form表单,小技巧-大学问

form 表单，小技巧-大学问 在 Javascript 中，页面上的每一对 标记都解析为一个对象， 即 form 对象。 可以通过 document.forms 获取以源顺序排列的文档中所有 form 对象 的集合。 如果一个表单对象定义如下： 获得该表单对象的方法： i document.forms“frm1“; / 根据 name 属性值 ii document.forms0; / 根据索引号 iii document.frm1; / 直接根据 name 值获得对象 form 表单应该注意的属性： elements：获取以源顺序排列的给定表单中所有控件的集合。但是 对象不在此集合内。 var txtName = myform.elements0; /获得表单的第一个元素 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 表单中的 标记： 每一个表单元素的文字描述都应该使用 标记！ 该标记用于将文字绑定到对应的表单元素上，它的 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 控制文本框的字符个数 function LessThan(_textArea) /返回文本框字符个数是否符号要求的 boolean 值 return _textArea.value.length 文本框: 多行文本框: 注意：多行文本框 中的 maxlength 为自定义属性；如果在 中输入 字符时，换行也算一个字符； ii 鼠标经过时，自动选中文本框 window.onload = function() var txtName = document.getElementsByName(“myName“)0; txtName.onmouseover = function() this.focus(); ; txtName.onfocus = function() this.select(); ; 实现了行为与结构的分离。 设置单选按钮 获取选中的单选按钮 /radioName 是单选按钮的 name 属性值 var aChoices = oForm.radioName; /遍历整个单选项表 for(i=0;i /调用代码 需要保证同一组单选按钮的 name 属性值相同即可。 设置复选框 设置复选框的“全选”、“全不选”及“反选”功能 function changeBoxes(_action) var myForm = document.forms“myForm1“; /myCheckbox 为所有复选框的 name 属性值 var oCheckBox = myForm.myCheckbox; for(var i=0;i aa bb 设置下拉列表框 下拉列表框的 multiple 属性用于设置或获取下拉列表框是否可以选中 多个选项。 下拉列表框默认只能选中一项，若要设置为可以选中多项，则 即可。 type 属性：javascript 语言根据 type 属性的值获得下拉列表框 select 控件的类型。 type 属性的值为：select-multiple 或 select-one （注意：下拉列 表框的类型由 multiple 属性控制） i 查看下拉列表框的选项（单选项 /根据参数(下拉列表框的 name 属性值)获得下拉菜单项 var oSelectBox = oForm.elements_myselect; /判断是单选还是多选 if(oSelectBox.type = “select-one“) var iChoice = oSelectBox.selectedIndex; /获取选中项 alert(“单选，您选中了“ + oSelectBox.optionsiChoice.text); else var aChoices = new Array(); /遍历整个下拉菜单 for(var i=0;i AA BB CC ii 添加下拉列表框的选项 追加新选项到末尾 function AddOption(Box) /追加选项到末尾 var oForm = document.forms“myForm1“; var oBox = oForm.elementsBox; var oOption = new Option(“乒乓球“,“Pingpang“); oBox.optionsoBox.options.length = oOption; 插入新选项到指定位置 function AddOption(_select,_num) var oForm = document.forms“myForm1“; var oBox = oForm.elements_select; var oOption = new Option(“text 值“,“value 值“); /兼容 IE7，先添加选项到最后，再移动 oBox.optionsoBox.options.length = oOption; oBox.insertBefore(oOption,oBox.options_num); 注意：如果直接使用 insertBefore( ) 方法插入选项，将会在 IE 中 出现一个空选项的 bug。为了解决 IE 的这个 bug ，只能使用先追加新 选项到末尾，然后再使用 insertBefore( ) 方法将其移动到相应的位 置。 类似这样：为了跳过浏览器的某些 bug 或限制，实 现预定目的的小技巧，通常称之为 hack 。 iii 替换某一选项 /替换选项 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 个选项 通过 oBox.options_num = oOption 直接将创建的新选项替换掉指定位置的选项。 iv