Html中表单Form的相关知识.docx

在Javascript 中，页面上的每一对 标记都解析为一个对象，即form 对象。可以通过document.forms 获取以源顺序排列的文档中所有form 对象的集合。如果一个表单对象定义如下：获得该表单对象的方法： i document.formsfrm1; /根据name属性值ii document.forms0; /根据索引号iii document.frm1; /直接根据name值获得对象form 表单应该注意的属性：elements：获取以源顺序排列的给定表单中所有控件的集合。但是 对象不在此集合内。var txtName = myform.elements0; /获得表单的第一个元素var txtName = myform.elementstxtName; /获得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 _textArea.getAttribute(maxlength);文本框:多行文本框:注意：多行文本框 中的maxlength 为自定义属性；如果在 中输入字符时，换行也算一个字符；ii 鼠标经过时，自动选中文本框，实现了行为与结构的分离。window.onload = function() var txtName = document.getElementsByName(myName)0; txtName.onmouseover = function() this.focus(); ; txtName.onfocus = function() this.select(); ;设置单选按钮获取选中的单选按钮 & 设置单选按钮被选中。需要保证同一组单选按钮的name 属性值相同即可。/获取选中项function getChoice() var oForm = document.formsmyForm1; /radioName是单选按钮的name属性值 var aChoices = oForm.radioName; /遍历整个单选项表 for(i=0;iaChoices.length;i+) if(aChoicesi.checked) break; /如果发现了被选中项则退出 alert(您选中的是：+aChoicesi.value);/设置选中项function setChoice(_num) var oForm = document.formsmyForm1; /radioName是单选按钮的name属性值 oForm.radioName_num.checked = true; /其它选项的checked值会自动设置为false/调用代码设置复选框设置复框的“全选”、“全不选”及“反选”功能function changeBoxes(_action) var myForm = document.formsmyForm1; /myCheckbox 为所有复选框的name属性值 var oCheckBox = myForm.myCheckbox; for(var i=0;ioCheckBox.length;i+) /遍历每一个选项 if(_action 0)/反选 oCheckBoxi.checked = !oCheckBoxi.checked; else /_action为1是则全选,为0时则全不选 oCheckBoxi.checked = _action;aabb设置下拉列表框下拉列表框的multiple 属性用于设置或获取下拉列表框是否可以选中多个选项。下拉列表框默认只能选中一项，若要设置为可以选中多项，则 即可。type 属性：javascript 语言根据type 属性的值获得下拉列表框select 控件的类型。type 属性的值为：select-multiple 或 select-one （注意：下拉列表框的类型由multiple 属性控制）i 查看下拉列表框的选项（单选项 & 多选项）function getSelectValue(_myselect) var oForm = document.formsmyForm1; /根据参数(下拉列表框的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;ioSelectBox.options.length;i+) if(oSelectBox.optionsi.selected)/如果被选中 /压入到数组中 aChoices.push(oSelectBox.optionsi.text); /输出结果 alert(多选，您选了： + aChoices.join(); AA BB CCii 添加下拉列表框的选项追加新选项到末尾：function AddOption(Box) /追加选项到末尾 var oForm = document.formsmyForm1; var oBox = oForm.elementsBox; var oOption = new Option(乒乓球,Pingpang); oBox.optionsoBox.options.length = oOption;插入新选项到指定位置：function AddOption(_select,_num) var oForm = document.formsmyForm1; 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.formsmyForm1; var oBox = oForm.elements_select; var oOption = new Option(text值,value值); oBox.options_num = oOption; /替换第_num 个选项通过oBox.options_num