实例一：遍历表单的所有控件
<script type="text/javascript"> //遍历表单的所有控件 function getValues(){ var f = document.forms[0]; //获取表单DOM var elements = f.elements; //获取所有的控件数组 var str = ''; //拼接字符串 //循环遍历 for(var i=0; i<elements.length; i++){ var e = elements[i]; //当前的控件 str += e.value; //拼接控件的值 str += '\n'; //拼接分隔符 } alert(str); //用提示框展示结果 } </script> <form> 文本框： <input type="text"/> <br/> 单选框： <input type="radio"value="1"/>1 <input type="radio" value="2"/>2 <br/> 下拉列表： <select> <option value="">==请选择==</option> <option value="1">1</option> <option value="2">2</option> </select> <br/> <input type="button" value="得到所有控件的值"/> </form>
实例二：通过控件名访问特定的控件
<script type="text/javascript"> //通过控件名访问特定的控件 function getFormDom(){ var f = document.forms[0]; //获取表单DOM var myText = f.myText; //通过名字获取控件DOM //提示控件的name和value alert(myText.name + " : " + myText.value); } </script> <form> 文本框： <input type="text"/> <br/> <input type="button" value="获取控件"/> </form>
实例三：获取表单内文本框的个数
<script type="text/javascript"> //获取表单内文本框的个数 function getInputCount(){ var f = document.forms[0]; //获取表单DOM var elements = f.elements; //获取所有的控件数组 var count = 0; //统计总数 //循环遍历 for(var i=0; i<elements.length; i++){ //当前的控件 var e = elements[i]; //是否为文本框 if(e.tagName == 'INPUT' && e.type == 'text'){ count++; //总数自加 } } //用提示框展示结果 alert("文本框一共有：" + count + "个"); } </script>
实例四：修改表单的提交方法
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST），使用 GET 时，表单数据在页面地址栏中是可见的，POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
<script type="text/javascript"> //修改表单的提交方法 function modifyMethod(){ var f = document.forms[0]; //获取表单DOM var method = f.myMethod.value; //选择的方法 f.method = method; //修改选择的提交方法 //用提示框展示结果 alert("表单当前的提交方法：" + method); } </script> <form method="post"> 请选择提交方法： <select> <option value="">==请选择==</option> <option value="get">get</option> <option value="post">post</option> </select> <br/> <input type="button" value="修改提交方法"/> </form>
实例五：动态指定表单的动作属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
如果省略 action 属性，则 action 会被设置为当前页面。
<script type="text/javascript"> //动态指定表单的动作属性 function modifyAction(){ var f = document.forms[0]; //获取表单DOM var newURL = f.newURL.value; //选择的方法 f.action = newURL; //修改提交表单的action地址 //用提示框展示结果 alert("表单当前的动作：" + f.action); } </script> <form method="post"> 请选择提交方法： <input type="text"/> <br/> <input type="button" value="修改提交Action"/> </form>
实例六：动态选择聚焦的控件
<script type="text/javascript"> //第一个单选框为焦点 function focusIt(){ var f = document.forms[0]; //获取表单DOM var myRadio = f.myRadio; //获取单选框 myRadio[0].focus(); //第一个单选框获得焦点 } </script> <form> 文本框： <input type="text"/> <br/> 单选框： <input type="radio" value="1"/> <input type="radio" value="2"/> <br/> 下拉列表： <select> <option value="">==请选择==</option> <option value="1">1</option> <option value="2">2</option> </select> <br/> <input type="button" value="第一个单选框为焦点"/> </form>
实例七：初始化表单里的所有控件的值到最初状态
<script type="text/javascript"> //初始化表单里的所有控件的值到最初状态 function init(){ var f = document.forms[0]; //获取表单DOM f.reset(); //使用reset()函数 } </script>
实例八：批量为所有的表单控件加一个说明