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. web service 原理

    Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的 ...

  2. OpenAL音频播放

    // // OpenALPlayer.m // live // // Created by lujunjie on 2016/11/5. // Copyright © 2016年 lujunjie. ...

  3. 使用Maven构建eclipse项目 (以zorka为例)

    第一步:下载和配置Maven 下载地址:http://maven.apache.org/download.cgi 下载第二项(binary zip)后解压,如图. 第二步:添加环境变量 MAVEN_H ...

  4. 怎样判断一个P2P平台是否靠谱?

    判断一个网站,是否靠谱,是有规律可循的,P2P平台算是个新兴的电商类网站.   网上欺诈类的网站,不限于P2P,实在是太多了,真的有必要总结下最关键的几个靠谱指标.   最关键的2个   1.创始人和 ...

  5. 小米R2D samba共享配置

    编辑samba配置文件 vi /etc/config/samba 需要注意的是,samba有自己的配置文件 /etc/samba/smb.conf,但是修改这个文件是不生效的,这个配置文件会在重启路由 ...

  6. java学习笔记之基础语法（一）

    1.java语言基础由关键字.标识符.注释.常量和变量.运算符.语句.函数和数组等组成. 2.1关键字 定义:被java语言赋予了特殊含义的单词 特点:关键字中所有的字母都是小写. 2.2用于定义数据 ...

  7. 【z05】聪明的质检员

    [题目链接]:http://noi.qz5z.com/viewtask.asp?id=z05 [题解] 显然w越大,最后的Y也就越大; 可以依靠这个搞二分: 如果二分枚举的tw得到的Y比S小,则减小t ...

  8. [RxJS] Multicasting shortcuts: publish() and variants

    Because using multicast with a new Subject is such a common pattern, there is a shortcut in RxJS for ...

  9. sql海量数据优化

    1.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,如: select id from t where num is null 可以在num上设 ...

  10. 调试 之gdb thread命令 与 ltrace/strace

    我们可以通过  1)  gdb prog_name -> r               用在逐步调试自己的程序时 2)  gdb -> attach process_id       正 ...