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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。