javascript表单控件实例讲解
本文实例为大家分享js表单控件多个实例讲解,供大家参考,具体内容如下
实例一:遍历表单的所有控件
<scripttype="text/javascript"> //遍历表单的所有控件 functiongetValues(){ varf=document.forms[0];//获取表单DOM varelements=f.elements;//获取所有的控件数组 varstr='';//拼接字符串 //循环遍历 for(vari=0;i<elements.length;i++){ vare=elements[i];//当前的控件 str+=e.value;//拼接控件的值 str+='\n';//拼接分隔符 } alert(str);//用提示框展示结果 } </script> <form> 文本框: <inputtype="text"name="myText"/> <br/> 单选框: <inputtype="radio"name="myRadio"value="1"/>1 <inputtype="radio"name="myRadio"value="2"/>2 <br/> 下拉列表: <selectname="mySelect"> <optionvalue="">==请选择==</option> <optionvalue="1">1</option> <optionvalue="2">2</option> </select> <br/> <inputtype="button"value="得到所有控件的值"onclick="getValues()"/> </form>
实例二:通过控件名访问特定的控件
<scripttype="text/javascript"> //通过控件名访问特定的控件 functiongetFormDom(){ varf=document.forms[0];//获取表单DOM varmyText=f.myText;//通过名字获取控件DOM //提示控件的name和value alert(myText.name+":"+myText.value); } </script> <form> 文本框: <inputtype="text"name="myText"/> <br/> <inputtype="button"value="获取控件"onclick="getFormDom()"/> </form>
实例三:获取表单内文本框的个数
<scripttype="text/javascript"> //获取表单内文本框的个数 functiongetInputCount(){ varf=document.forms[0];//获取表单DOM varelements=f.elements;//获取所有的控件数组 varcount=0;//统计总数 //循环遍历 for(vari=0;i<elements.length;i++){ //当前的控件 vare=elements[i]; //是否为文本框 if(e.tagName=='INPUT'&&e.type=='text'){ count++;//总数自加 } } //用提示框展示结果 alert("文本框一共有:"+count+"个"); } </script>
实例四:修改表单的提交方法
method属性规定在提交表单时所用的HTTP方法(GET或POST),使用GET时,表单数据在页面地址栏中是可见的,POST的安全性更加,因为在页面地址栏中被提交的数据是不可见的。
<scripttype="text/javascript"> //修改表单的提交方法 functionmodifyMethod(){ varf=document.forms[0];//获取表单DOM varmethod=f.myMethod.value;//选择的方法 f.method=method;//修改选择的提交方法 //用提示框展示结果 alert("表单当前的提交方法:"+method); } </script> <formmethod="post"> 请选择提交方法: <selectname="myMethod"> <optionvalue="">==请选择==</option> <optionvalue="get">get</option> <optionvalue="post">post</option> </select> <br/> <inputtype="button"value="修改提交方法"onclick="modifyMethod()"/> </form>
实例五:动态指定表单的动作属性
action属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常,表单会被提交到web服务器上的网页。
如果省略action属性,则action会被设置为当前页面。
<scripttype="text/javascript"> //动态指定表单的动作属性 functionmodifyAction(){ varf=document.forms[0];//获取表单DOM varnewURL=f.newURL.value;//选择的方法 f.action=newURL;//修改提交表单的action地址 //用提示框展示结果 alert("表单当前的动作:"+f.action); } </script> <formmethod="post"> 请选择提交方法: <inputtype="text"name="newURL"/> <br/> <inputtype="button"value="修改提交Action"onclick="modifyAction()"/> </form>
实例六:动态选择聚焦的控件
<scripttype="text/javascript"> //第一个单选框为焦点 functionfocusIt(){ varf=document.forms[0];//获取表单DOM varmyRadio=f.myRadio;//获取单选框 myRadio[0].focus();//第一个单选框获得焦点 } </script> <form> 文本框: <inputtype="text"name="myText"/> <br/> 单选框: <inputtype="radio"name="myRadio"value="1"/> <inputtype="radio"name="myRadio"value="2"/> <br/> 下拉列表: <selectname="mySelect"> <optionvalue="">==请选择==</option> <optionvalue="1">1</option> <optionvalue="2">2</option> </select> <br/> <inputtype="button"value="第一个单选框为焦点"onclick="focusIt()"/> </form>
实例七:初始化表单里的所有控件的值到最初状态
<scripttype="text/javascript"> //初始化表单里的所有控件的值到最初状态 functioninit(){ varf=document.forms[0];//获取表单DOM f.reset();//使用reset()函数 } </script>
实例八:批量为所有的表单控件加一个说明
<scripttype="text/javascript"> //批量为所有的表单控件加一个说明 functionbatchComment(){ varf=document.forms[0];//获取表单DOM varchildren=f.childNodes;//获取表单的所有子元素 varnewArr=[];//定义新的元素数组 varj=0;//为新元素数组定义下标 //循环遍历子元素 for(vari=0;i<children.length;i++){ vare=children[i];//当前子元素 newArr[j++]=e;//添加到新数组里 //判断是否为控件 if(e.tagName=='INPUT'||e.tagName=='SELECT'){ //添加一个文字说明的节点 vartext=document.createTextNode("此项必填"); newArr[j++]=text;//为新数组加入节点 } } //清空现有的表单内容 f.innerHTML=''; //批量加上说明 for(vari=0;i<newArr.length;i++){ //把老的元素和说明节点加入form f.appendChild(newArr[i]); } } </script>
实例九:使用隐藏控件为表单添加参数
<scripttype="text/javascript"> //展示表单参数的函数 functionshowParams(){ //设置隐藏变量的值,这个值也可以通过标签的value指定 document.forms[0].myhidden.value='我是隐藏的'; //定义字符拼接变量 varstr='表单将提交的参数包括:'; //拼接年份参数 str+='\n年份:'+document.forms[0].myyear.value; //拼接姓名参数 str+='\n姓名:'+document.forms[0].myname.value; //拼接隐藏参数 str+='\n隐藏变量:'+document.forms[0].myhidden.value; alert(str);//展示字符的值 } </script> <form> <inputtype="hidden"name="myhidden"/> 年份: <selectname="myyear"> <optionvalue="2012">2012</option> <optionvalue="2013">2013</option> <optionvalue="2014">2014</option> </select> <br/><br/> 姓名:<inputtype="text"name="myname"/> <br/><br/> <inputtype="button"value="提交"onclick="showParams();"/> </form>
实例十:全部勾选所有复选框
<scripttype="text/javascript"> //勾选所有的函数 functioncheckAll(c){ //获取所有的复选框 vararr=document.getElementsByName('myname'); if(c){//是否全选 //遍历所有的复选框 for(vari=0;i<arr.length;i++){ arr[i].checked=true;//选中 } }else{//否则,全不选 //遍历所有的复选框 for(vari=0;i<arr.length;i++){ arr[i].checked=false;//不选中 } } } </script> <form> 你的兴趣:<br> <inputtype="checkbox"name="myall"onclick="checkAll(this.checked)"/>全选<br> <inputtype="checkbox"name="myname"/>全选 <inputtype="checkbox"name="myname"/>全选 <inputtype="checkbox"name="myname"/>全选 </form>
实例十一:为表单的聚焦控件设置醒目的样式
<scripttype="text/javascript"> functioninit(){ varf=document.forms[0];//获取表单DOM varelements=f.elements;//获取所有的控件数组 varstr='';//拼接字符串 //循环遍历 for(vari=0;i<elements.length;i++){ vare=elements[i];//当前的控件 e.onfocus=function(){//定义聚焦的样式回调 //修改边框为红色 this.style.border='1pxsolidred'; } e.onblur=function(){//失去焦点的回调 this.style.border='';//恢复原有边框样式 } } } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。