合肥网站优化软件,加强品牌建设,天津建设网证件查询,小城市网站建设在Javascript 中#xff0c;页面上的每一对form 标记都解析为一个对象#xff0c;即form 对象。 可以通过document.forms 获取以源顺序排列的文档中所有form 对象的集合。 如果一个表单对象定义如下#xff1a;form namefrm1 methodpost页面上的每一对form 标记都解析为一个对象即form 对象。 可以通过document.forms 获取以源顺序排列的文档中所有form 对象的集合。 如果一个表单对象定义如下form namefrm1 methodpost actionlogin.aspx获得该表单对象的方法 i document.forms[frm1]; // 根据name属性值 ii document.forms[0]; // 根据索引号iii document.frm1; // 直接根据name值获得对象 form 表单应该注意的属性 elements获取以源顺序排列的给定表单中所有控件的集合。input typeimage 对象不在此集合内。 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 methodpost namefrm1 label fortxt点我将聚焦到文本框/label input typetext idtxt namemynamebr/ label forrdo点我将选中单选框/label input typeradio idrdo namemale/br/ label forcbo点我将选中复选框/label input typecheckbox idcbo namehobby/form 效果如下 点我将聚焦到文本框 点我将选中单选框 点我将选中复选框 注意 i 每个表单元素应当尽量使用label标签来提高用户体验 ii 每个表单元素应当分配 name 属性 和 id 属性。 name 属性用来将数据提交到服务器 id 属性用来在客户端做相应的操作如label标签的绑定、CSS 选择器的使用等。 在客户端Javascript 对表单及表单元素的操作更青睐于使用其name 属性。 因为对于某些特定的表单元素(如单选按钮等)使用其name 属性更易于获得元素值也更方便向服务器传送数据 Javascript 操作form 表单元素比较少用的属性 defaultChecked 设置或获取复选框或单选钮的状态。defaultValue 设置或获取对象的初始内容。disabled 设置或获取控件的状态。 提交表单 提交表单的示例 form namefrm methodpost actionjavascript:alert(提交成功); input typebutton value提交功能 onclickdocument.forms[frm].submit(); input typebutton value禁用反复提交 onclickthis.disabledtrue; this.form.submit(); /form 注意 i 如果使用submit( ) 方法来提交表单则不会触发form 表单元素的onsubmit 事件 这是与用input typesubmit提交元素不同的地方 ii 可以在按钮的提交或点击事件中使用disabled 属性来禁用用户反复点击提交按钮的行为 减少服务器的响应负担 设置文本框 i 控制文本框的字符个数 script languagejavascriptfunction LessThan(_textArea){ //返回文本框字符个数是否符号要求的boolean值 return _textArea.value.length _textArea.getAttribute(maxlength);}/scriptlabel forname文本框:/labelinput typetext namename idname value姓名 maxlength10/pbrlabel forcomments多行文本框:/labeltextarea namecomments idcomments cols40 rows4 maxlength50 onkeypressreturn LessThan(this);/textarea 注意多行文本框textarea 中的maxlength 为自定义属性如果在textarea 中输入字符时换行也算一个字符 ii 自动选中文本框 script languagejavascriptwindow.onload function(){ var txtName document.getElementsByName(myName)[0]; txtName.onmouseover function(){ this.focus(); }; txtName.onfocus function(){ this.select(); };}/scriptINPUT TYPEtext NAMEmyName value默认值被选中 / 遵循了行为与结构分离的原则。 设置单选按钮 获取选中的单选按钮 设置单选按钮被选中。代码如下 script languagejavascript//获取选中项function getChoice(){ var oForm document.forms[myForm1]; //radioName是单选按钮的name属性值 var aChoices oForm.radioName; //遍历整个单选项表 for(i0;iaChoices.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 typebutton value获取选中项 οnclickgetChoice(); /input typebutton value设置第1项被选中 οnclicksetChoice(0); / 需要保证同一组单选按钮的name 属性值相同即可。 设置复选框 设置复选框的“全选”、“全不选”及“反选”功能。 script languagejavascriptfunction changeBoxes(_action){ var myForm document.forms[myForm1]; //myCheckbox 为所有复选框的name属性值 var oCheckBox myForm.myCheckbox; for(var i0;ioCheckBox.length;i) //遍历每一个选项 if(_action 0)//反选 oCheckBox[i].checked !oCheckBox[i].checked; else //_action为1是则全选,为0时则全不选 oCheckBox[i].checked _action;}/scriptform namemyForm1input typecheckbox namemyCheckboxaainput typecheckbox namemyCheckboxbbinput typebutton value全选 onclickchangeBoxes(1); /input typebutton value全不选 onclickchangeBoxes(0); /input typebutton value反选 onclickchangeBoxes(-1); //form 设置下拉列表框 下拉列表框的multiple 属性用于设置或获取下拉列表框是否可以选中多个选项。 下拉列表框默认只能选中一项若要设置为可以选中多项则select multiple multiple 即可。 type 属性javascript 语言根据type 属性的值获得下拉列表框select 控件的类型。 type 属性的值为select-multiple 或 select-one 注意下拉列表框的类型由multiple 属性控制 i 查看下拉列表框的选项单选项 多选项 script languagejavascriptfunction 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 i0;ioSelectBox.options.length;i) if(oSelectBox.options[i].selected)//如果被选中 //压入到数组中 aChoices.push(oSelectBox.options[i].text); //输出结果 alert(多选您选了 aChoices.join()); }}/scriptform methodpost namemyForm1select idmysel namemysel multiplemultiple styleheight:60px; option valueaAA/option option valuebBB/option option valuecCC/option/selectinput typebutton onclickgetSelectValue(mysel) value查看选项 / ii 添加下拉列表框的选项 追加新选项到末尾 script languagejavascriptfunction 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 languagejavascriptfunction 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]);}/scriptinput typebutton value添加乒乓球 onclickAddOption(myselect,1); / 注意如果直接使用insertBefore( ) 方法插入选项将会在IE 中出现一个空选项的bug。为了解决IE 的这个bug 只能使用先追加新选项到末尾然后再使用insertBefore( ) 方法移动到具体位置的办法。 类似这样为了跳过浏览器的某些bug 或限制实现预定目的的小技巧通常称之为hack 。 iii 替换某一选项 script languagejavascript//替换选项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 个选项}/scriptinput typebutton value替换选项 onclickReplaceOption(selName,1); / 通过oBox.options[_num] oOption 直接将创建的新选项替换掉指定位置的选项。 iiii 删除某一选项 script languagejavascriptfunction RemoveOption(_select,_num){ var oForm document.forms[myForm1]; var oBox oForm.elements[_select]; oBox.options[_num] null; //删除选项}/script/headbodyselect idmysel namemysel multiplemultiple......input typebutton value删除选项 onclickRemoveOption(mysel,1); / 直接通过oBox.options[_num] null 删除选项。 转自:http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html?login1#commentform 转载于:https://www.cnblogs.com/jhxk/articles/1798332.html
