js进阶-9-3/4 form对象有哪些常用属性

一、总结

一句话总结：

1、一般html标签有哪些常用属性：name id value

2、form对象有哪些常用属性（特有）：action method

1、注意：

1、element的属性可以取值，大部分也可以赋值的情况。属性存取两用。myformElement.method='post'

1、怎么实现将表单提交到不同的URL？

解答：用form的submit方法。function sendPage2(){                    myform1.action='https://www.baidu.com/'                    myform1.submit();                }

二、表单相关的属性

Form 对象集合
  • elements[]包含表单中所有元素的数组
Form 对象属性
  • action 设置或返回表单的action 属性
  • length 返回表单中的元素数目
  • id/name/target/method
  • ......

三、实例

实例1：Form对象的属性

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <style type="text/css">

     </style>

 </head>

 <body>

     <form id="form1" name="myform1" action="http://ww23w.51z32xw.n23et/" method="get">

         <p>昵称：<input type="text" name="username"></p>

         <p>密码：<input type="password" name="password"></p>

         <p><input type="submit" value="提交"></p>

     </form>

     <script type="text/javascript">

         var myform1=document.forms[]

         myform1.method='post'

         document.write('<ol>')

             document.write(

                 '<li>表单的ID为'+myform1.id

                 +'<li>表单的name为'+myform1.name

                 +'<li>表单中的元素个数为：'+myform1.length

                 +'<li>表单的提交方式：'+myform1.method

             )

         document.write('</ol>')

     </script>

 </body>

 </html>

实例2：将表单提交到不同的URL

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <style type="text/css">

     </style>

 </head>

 <body>

 <form id="form1" name="myform1" action="#" method="get">

         <p>昵称：<input type="text" name="username"></p>

         <p>密码：<input type="password" name="password"></p>

         <p><input type="submit" value="提交按钮"></p>

         <p><input type="button" value="普通按钮" onclick="submit()"></p>

         <p>

             <input type="button" value="提交到5学网" onclick="sendPage1()">

             <input type="button" value="提交到百度" onclick="sendPage2()">

         </p>

     </form>

     <script type="text/javascript">

         function sendPage1(){

             myform1.action='http://w.53341z1xfdgw.com'

             myform1.submit();

         }

         function sendPage2(){

             myform1.action='https://www.baidu.com/'

             myform1.submit();

         }

     </script>

 </body>

 </html>

四、测试题-简答题

1、怎么实现将表单提交到不同的URL？

解答：用form的submit方法。function sendPage2(){                    myform1.action='https://www.baidu.com/'                    myform1.submit();                }

 

js进阶-9-3/4 form对象有哪些常用属性的更多相关文章

  1. js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）

    js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...

  2. js sort方法根据数组中对象的某一个属性值进行排序（实用方法）

    js sort方法根据数组中对象的某一个属性值进行排序 sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {nam ...

  3. js判断一个对象{}是否为空对象，没有任何属性

    // js如何判断一个对象{}是否为空对象,没有任何属性 if (typeof model.rows === "object" && !(model.rows in ...

  4. js sort方法根据数组中对象的某一个属性值进行排序

    sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {name:'zopp',age:0}, {name:'gpp' ...

  5. (GoRails) Form对象设计风格： 用自建的Model来对参数进行操作。

    视频:https://gorails.com/episodes/form-objects-design-pattern?autoplay=1 git代码 :https://github.com/gor ...

  6. js进阶 9-5 js如何确认form的提交和重置按钮

    js进阶 9-5 js如何确认form的提交和重置按钮 一.总结 一句话总结: 1.这个并不好做:onsubmit 里面的代码必须返回false才能取消onsubmit方法的执行,所以,有return ...

  7. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  8. js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）

    js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...

  9. js进阶正则表达式实现过滤字符串（RegExp对象操作正则表达式）（正则：regular）（表达式：expression）

    js进阶正则表达式实现过滤字符串(RegExp对象操作正则表达式)(正则:regular)(表达式:expression) 一.总结 1.str_replace:正则作用:高效快速匹配 2.break ...

随机推荐

  1. SQL-.db 数据库查看常用指令（转载）

    一下内容转载自http://blog.sina.com.cn/s/blog_74dfa9f401017s69.html 简介sqlite3一款主要用于嵌入式的轻量级数据库,本文旨在为熟悉sqlite3 ...

  2. 【CS Round #43 D】Bad Triplet

    [链接]点击打开链接 [题意] 给你n个点m条边的无权无向联通图; 让你找3个点A,B,C 使得A->B=B->C=A->C 这里X->Y表示点X到点Y的最短路长度. [题解] ...

  3. Android开发之搜芽项目的图片载入问题(使用Volley进行网络图片载入)

    搜芽的移动开发这几天进度相对来说很的快. 可是美中不足的就是网络图片的载入问题. 我有两套方案: 1)沿用迅雷动漫的图片载入.迅雷动漫也是用的一个开源的库.可是不知道是我使用出了问题还是真的是它的问题 ...

  4. 微软重生：4年市值U型大逆转，超越谷歌重返巅峰！

    划重点: 智东西(公众号:zhidxcom)文 | 寓扬 在最近的两个星期里,微软和谷歌正在进行一场市值大比拼,双方在7700亿美元上下厮杀正紧,抢夺着全球市值第三大公司的宝座(前两位为市值超过900 ...

  5. 边缘独立（marginal independent）的理解及举例

    1. 定义 ∀xi∈dom(X),yj∈dom(Y),yk∈dom(Y),如果满足, P(X=xi|Y=yj)==P(X=xi|Y=yk)P(X=Xi) 则称随机变量 X 边缘独立于随机变量 Y. 理 ...

  6. 微信支付v2开发(2) 微信支付账号体系

    本文介绍微信支付账号体系各参数. 商户在微信公众平台提交申请资料以及银行账户资料,资料审核通过并签约后,可以获得表6-4所示帐户(包含财付通的相关支付资金账户),用于公众帐号支付. 帐号 作用 app ...

  7. JS数据类型的转换规则

    数据类型转换的规则 1 如果只有一个值,判断这个值是真还是假,遵循只有0,NaN,'',null,undefined这五个是假的,其余的都是真 2 如果是两个值比较是否相等,遵循以下规则: ![]-& ...

  8. loadrunne-- Analysis 分析器

    本文转自:https://www.cnblogs.com/Chilam007/p/6445165.html Analysis简介 分析器就是对测试结果数据进行分析的组件,它是LR三大组件之一,保存着大 ...

  9. postman和fiddler的基本使用

    本文转自:https://www.cnblogs.com/qq909283/p/6826578.html 写在前面:本文主要的章节规划: 1.什么是接口测试 另外,有的时候会直接调用别的公司的接口,比 ...

  10. jmeter--参数化的四种方法

    本文转自:http://www.cnblogs.com/imyalost/p/6229355.html 参数化是自动化测试脚本的一种常用技巧.简单来说,参数化的一般用法就是将脚本中的某些输入使用参数来 ...