javascript表单控件实例讲解

本文实例为大家分享js表单控件多个实例讲解，供大家参考，具体内容如下
实例一：遍历表单的所有控件

<script type="text/javascript">//遍历表单的所有控件function getValues（）{var f = document.forms[0]; //获取表单DOMvar elements = f.elements; //获取所有的控件数组var str = "";//拼接字符串//循环遍历for（var i=0; i<elements.length; i++）{var e = elements[i];//当前的控件str += e.value; //拼接控件的值str += "
";//拼接分隔符}alert（str）; //用提示框展示结果}</script><form> 文本框：<input type="text" name="myText"/><br/>单选框：<input type="radio" name="myRadio"value="1"/>1<input type="radio" name="myRadio" value="2"/>2<br/>下拉列表：<select name="mySelect"><option value="">==请选择==</option><option value="1">1</option><option value="2">2</option></select><br/><input type="button" value="得到所有控件的值" onclick="getValues（）"/></form>

实例二：通过控件名访问特定的控件

<script type="text/javascript">//通过控件名访问特定的控件function getFormDom（）{var f = document.forms[0]; //获取表单DOMvar myText = f.myText; //通过名字获取控件DOM//提示控件的name和valuealert（myText.name + " : " + myText.value）;}</script><form> 文本框：<input type="text" name="myText"/><br/><input type="button" value="获取控件" onclick="getFormDom（）"/></form>

实例三：获取表单内文本框的个数

<script type="text/javascript">//获取表单内文本框的个数function getInputCount（）{var f = document.forms[0]; //获取表单DOMvar 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]; //获取表单DOMvar method = f.myMethod.value; //选择的方法f.method = method; //修改选择的提交方法//用提示框展示结果alert（"表单当前的提交方法：" + method）;}</script><form method="post">请选择提交方法：<select name="myMethod"><option value="">==请选择==</option><option value="get">get</option><option value="post">post</option></select><br/><input type="button" value="修改提交方法" onclick="modifyMethod（）"/></form>

实例五：动态指定表单的动作属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
如果省略 action 属性，则 action 会被设置为当前页面。

<script type="text/javascript">//动态指定表单的动作属性function modifyAction（）{var f = document.forms[0]; //获取表单DOMvar newURL = f.newURL.value;//选择的方法f.action = newURL; //修改提交表单的action地址//用提示框展示结果alert（"表单当前的动作：" + f.action）;}</script><form method="post">请选择提交方法：<input type="text" name="newURL"/><br/><input type="button" value="修改提交Action" onclick="modifyAction（）"/></form>

实例六：动态选择聚焦的控件

<script type="text/javascript">//第一个单选框为焦点function focusIt（）{var f = document.forms[0]; //获取表单DOMvar myRadio = f.myRadio;//获取单选框myRadio[0].focus（）; //第一个单选框获得焦点}</script><form> 文本框：<input type="text" name="myText"/><br/>单选框：<input type="radio" name="myRadio" value="1"/><input type="radio" name="myRadio" value="2"/><br/>下拉列表：<select name="mySelect"><option value="">==请选择==</option><option value="1">1</option><option value="2">2</option></select><br/><input type="button" value="第一个单选框为焦点" onclick="focusIt（）"/></form>

实例七：初始化表单里的所有控件的值到最初状态

<script type="text/javascript">//初始化表单里的所有控件的值到最初状态function init（）{var f = document.forms[0]; //获取表单DOMf.reset（）; //使用reset（）函数}</script>

实例八：批量为所有的表单控件加一个说明

<script type="text/javascript">//批量为所有的表单控件加一个说明function batchComment（）{var f = document.forms[0]; //获取表单DOMvar children = f.childNodes;//获取表单的所有子元素var newArr = [];//定义新的元素数组var j = 0; //为新元素数组定义下标//循环遍历子元素for（var i=0; i<children.length; i++）{var e = children[i];//当前子元素newArr[j++] = e;//添加到新数组里//判断是否为控件if（e.tagName == "INPUT" || e.tagName == "SELECT"）{//添加一个文字说明的节点var text = document.createTextNode（" 此项必填"）;newArr[j++] = text; //为新数组加入节点}}//清空现有的表单内容f.innerHTML = "";//批量加上说明for（var i=0; i<newArr.length; i++）{//把老的元素和说明节点加入formf.appendChild（newArr[i]）;}}</script>

实例九：使用隐藏控件为表单添加参数

<script type="text/javascript"> //展示表单参数的函数function showParams（）{//设置隐藏变量的值，这个值也可以通过标签的value指定document.forms[0].myhidden.value = "我是隐藏的";//定义字符拼接变量var str = "表单将提交的参数包括：";//拼接年份参数str += "
年份:" + document.forms[0].myyear.value;//拼接姓名参数str += "
姓名:" + document.forms[0].myname.value;//拼接隐藏参数str += "
隐藏变量:" + document.forms[0].myhidden.value;alert（str）; //展示字符的值}</script><form> <input type="hidden" name="myhidden"/>年份：<select name="myyear"><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option></select><br/><br/>姓名：<input type="text" name="myname"/><br/><br/><input type="button" value="提交" onclick="showParams（）;"/></form>

实例十：全部勾选所有复选框

<script type="text/javascript"> //勾选所有的函数function checkAll（c）{//获取所有的复选框var arr = document.getElementsByName（"myname"）;if（c）{ //是否全选//遍历所有的复选框for（var i=0;i<arr.length;i++）{arr[i].checked = true;//选中}}else{ //否则，全不选//遍历所有的复选框for（var i=0;i<arr.length;i++）{arr[i].checked = false;//不选中}}}</script><form> 你的兴趣：<br><input type="checkbox" name="myall" onclick="checkAll（this.checked）"/>全选<br><input type="checkbox" name="myname" />全选<input type="checkbox" name="myname" />全选<input type="checkbox" name="myname" />全选</form>

实例十一：为表单的聚焦控件设置醒目的样式

<script type="text/javascript"> function init（）{var f = document.forms[0]; //获取表单DOMvar elements = f.elements; //获取所有的控件数组var str = "";//拼接字符串//循环遍历for（var i=0; i<elements.length; i++）{var e = elements[i];//当前的控件e.onfocus = function（）{ //定义聚焦的样式回调//修改边框为红色this.style.border = "1px solid red"; }e.onblur = function（）{ //失去焦点的回调this.style.border = ""; //恢复原有边框样式}}}</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。