zoukankan      html  css  js  c++  java
  • js入门·表单详解一(修改表单属性,修改表单元素值)

    其实在javascript入门·Document对象入门讲解(访问表单,创建新页,获取页标题) 一文中,我们已经把表单的一些基本访问等弄清楚了,下面我们深入的学下表单的属性以及对表单元素的简单操作!

    演示一 : 根据需求,定做表单

    你先按下提交提交表单,后退,然后再点修改表单,然后再提交表单,看效果

    现在的指向是 test.asp ,方法是 post

    其实做那么多都没有,直接作两个属性吧 田洪川的博客 网易 get post

    演示二 :修改表单内特定类型元素的值

    form.elements[]属性:除了跟踪表单中每种类型的元素外,浏览器还保留了一张表单中所有控件元素的列表,元素的顺序就是在HTML中的位置,所以对引用相当的方便。

    <%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>表单详解一(修改表单属性,修改表单元素值)</title>
    <script language="javascript">
    function gaibian()
    {
        
    var acti=document.getElementById("select").value;//得到ID为select元素的值
        var mont=document.getElementById("select2").value;//同上
        document.form1.action=acti;//设置值
        document.form1.method=mont;//同上
    }

    function bian()
    {
        
    var form=document.forms[1];//将当前页第二个表单赋给变量form,以便以后引用
        for(var i=0;i<form.elements.length;i++)//循环表单内的元素数组的最大项
        {
            
    if(form.elements[i].type=="text")//如果当前元素的类型是text
            {
                form.elements[i].value
    ="田洪川";//那就把他的值赋成 田洪川
            }
        
            
    if(form.elements[i].type=="checkbox")//如果是复选框
            {
                
    if(form.elements[i].checked)//如果是选中的
                {
                    form.elements[i].checked
    =null;//取消选择
                }

                
    else
                
    {
                    form.elements[i].checked
    ="checked"    //就给他选中
                }
        
            }

        }

    }

    </script>
    </head>

    <body>
    <p>其实在<href="http://www.cnblogs.com/thcjp/archive/2006/08/08/470997.html">javascript入门·Document对象入门讲解(访问表单,创建新页,获取页标题)</a> 一文中,我们已经把表单的一些基本访问等弄清楚了,下面我们深入的学下表单的属性以及对表单元素的简单操作!</p><hr />
    <p><strong>演示一 : 根据需求,定做表单</strong></p>
    <p>你先按下提交提交表单,后退,然后再点修改表单,然后再提交表单,看效果</p>
    <form id="form1" name="form1" method="post" action="http://127.0.0.1/">
      现在的指向是 test.asp ,方法是  post 
      
    <input type="submit" name="Submit2" value="提交表单" />
    </form>
    <p>其实做那么多都没有,直接作两个属性吧 
      
    <select name="select">
        
    <option value="http://thcjp.cnblogs.com/">田洪川的博客</option>
        
    <option value="http://163.com/">网易</option>
      
    </select>
      
    <select name="select2">
        
    <option value="GET">get</option>
        
    <option value="post">post</option>
      
    </select>
      
    <input type="submit" name="Submit" value="修改表单" onclick="gaibian()" />
    </p><hr />
    <p><strong>演示二 :修改表单内特定类型元素的值</strong></p>
    <p>form.elements[]属性:除了跟踪表单中每种类型的元素外,浏览器还保留了一张表单中所有控件元素的列表,元素的顺序就是在HTML中的位置,所以对引用相当的方便。</p>
    <p>注意,这个表单使用了动作 onsubmit=&quot;return false&quot;动作,你可以去掉试下 </p>
    <form name="form2" onsubmit="return false">
      
    <table width="371" border="0" cellspacing="5" cellpadding="5">
        
    <tr>
          
    <td width="168"><input type="text" name="textfield" /></td>
          
    <td width="197"><input type="text" name="textfield2" /></td>
        
    </tr>
        
    <tr>
          
    <td align="center"><input name="checkbox" type="checkbox" value="checkbox" /></td>
          
    <td align="center"><input name="checkbox2" type="checkbox" value="checkbox" checked="checked" /></td>
        
    </tr>
        
    <tr>
          
    <td colspan="2" align="center"><input name="" type="button" value="提交" onclick="bian()" /></td>
        
    </tr>
      
    </table>
    </form>
    <p>&nbsp;</p>
    </body>
    </html>
  • 相关阅读:
    jQuery选择器大全(48个代码片段+21幅图演示)
    抽象和模型
    什么叫做精通,我来给大家解释一下
    设置浏览器固定大小的固定位置的方法
    selenium对浏览器属性操作的方法
    selenium 最大化浏览器是解决浏览器和驱动不匹配的方法如下
    java selenium手动最大化chrome浏览器的方法
    java selenium启动火狐浏览器报错:Cannot find firefox binary in PATH. Make sure firefox is installed. OS appears to be: VISTA Build info: version: '3.8.1', revision: '6e95a6684b', time: '2017-12-01T19:05:14.666Z
    mygenerator().next() AttributeError: 'generator' object has no attribute 'next'
    马的遍历 搜索
  • 原文地址:https://www.cnblogs.com/thcjp/p/471565.html
Copyright © 2011-2022 走看看