本文实例为大家分享js表单控件多个实例讲解，供大家参考，具体内容如下
实例一：
遍历表单的所有控件获取表单DOM
var elements = f.elements; //获取所有的控件数组
var str = ''; //拼接字符串
//循环遍历
for(var i=0; i提示框展示结果
}
实例二：
通过控件名访问特定的控件获取表单DOM
var myText = f.myText; //通过名字获取控件DOM
//提示控件的name和value
alert(myText.name + " : " + myText.value);
}
实例三：
获取表单内文本框的个数获取表单内文本框的个数
function getInputCount(){
var f = document.forms[0]; //获取表单DOM
var elements = f.elements; //获取所有的控件数组
var count = 0; //统计总数
//循环遍历
for(var i=0; i提示框展示结果
alert("文本框一共有：" + count + "个");
}
实例四：
修改表单的提交方法method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST），使用 GET 时，表单数据在页面地址栏中是可见的，POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
修改表单的提交方法
function modifyMethod(){
var f = document.forms[0]; //获取表单DOM
var method = f.myMethod.value; //选择的方法
f.method = method; //修改选择的提交方法
//用提示框展示结果
alert("表单当前的提交方法：" + method);
}
修改提交方法" onclick="modifyMethod()"/>
<form method="post">
请选择提交方法：
<select name="myMethod">
<option value="">==请选择==
<option value="get">get
<option value="post">post
修改提交方法" onclick="modifyMethod()"/>
实例五：
动态指定表单的动作属性action 属性定义在提交表单时执行的动作。 向服务器提交表单的通常做法是使用提交按钮。 通常，表单会被提交到 web 服务器上的网页。 如果省略 action 属性，则 action 会被设置为当前页面。
属性
function modifyAction(){
var f = document.forms[0]; //获取表单DOM
var newURL = f.newURL.value; //选择的方法
f.action = newURL; //修改提交表单的action地址
//用提示框展示结果
alert("表单当前的动作：" + f.action);
}
<form method="post">
请选择提交方法：
<input type="text" name="newURL"/>
<input type="button" value="修改提交Action" onclick="modifyAction()"/>
实例六：
动态选择聚焦的控件实例七：
初始化表单里的所有控件的值到最初状态获取表单DOM
f.reset(); //使用reset()函数
}
实例八：
批量为所有的表单控件加一个说明获取表单DOM
var children = f.childNodes; //获取表单的所有子元素
var newArr = []; //定义新的元素数组
var j = 0; //为新元素数组定义下标
//循环遍历子元素
for(var i=0; i添加到新数组里
//判断是否为控件
if(e.tagName == 'INPUT' || e.tagName == 'SELECT'){
//添加一个文字说明的节点
var text = document.createTextNode(" 此项必填");
newArr[j++] = text; //为新数组加入节点
}
}
//清空现有的表单内容
f.innerHTML = '';
//批量加上说明
for(var i=0; i
实例九：
使用隐藏控件为表单添加参数函数
function showParams(){
//设置隐藏变量的值，这个值也可以通过标签的value指定
document.forms[0].myhidden.value = '我是隐藏的';
//定义字符拼接变量
var str = '表单将提交的参数包括：';
//拼接年份参数
str += '\n年份:' + document.forms[0].myyear.value;
//拼接姓名参数
str += '\n姓名:' + document.forms[0].myname.value;
//拼接隐藏参数
str += '\n隐藏变量:' + document.forms[0].myhidden.value;
alert(str); //展示字符的值
}
实例十：
全部勾选所有复选框函数
function checkAll(c){
//获取所有的复选框
var arr = document.getElementsByName('myname');
if(c){ //是否全选
//遍历所有的复选框
for(var i=0;i
实例十一：
为表单的聚焦控件设置醒目的样式获取表单DOM
var elements = f.elements; //获取所有的控件数组
var str = ''; //拼接字符串
//循环遍历
for(var i=0; i修改边框为红色
this.style.border = '1px solid red';
}
e.onblur = function(){ //失去焦点的回调
this.style.border = ''; //恢复原有边框样式
}
}
}
