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. code-代码平台服务器路径

    下面记录的是各个平台的服务器路径(va使用) ("repo init -u ssh://vanzo/platform_89/manifest.git") ("repo i ...

  2. socket TCP简单通讯

    socket 服务器 // // main.m // socket_server // // Created by lujunjie on 2016/11/23. // Copyright © 201 ...

  3. Python图片的横坐标汉字

    给一个例子 : # -*- coding: utf-8 -*-import matplotlib.pyplot as plt  import py_hanzi as ch         #关键在于这 ...

  4. 转载的：Python os 和 os.path模块详解

    os.getcwd()获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cd os.curdi ...

  5. c++中的相对路径

           今天在vs2010里读取相对路径下的图片文件出了点问题.于是查了一下相对路径的编程知识,记录下来分享给大家:      问题描写叙述:path=".\\TrainData\\& ...

  6. ACdream 1127 Base Station (离线查询+树状数组)

    题目链接: http://acdream.info/problem?pid=1127 题目: 移动通信系统中,通信网的建立主要通过基站来完成. 基站可以分为主基站和子基站.子基站和各个移动用户进行连接 ...

  7. python 的spyder用法

    ctrl+tab可以进行跳转 https://blog.csdn.net/luckygirl0809/article/details/79929491

  8. 【转】CentOS/RHEL/OracleLinux使用UDEV配置ASMDISK

    转自:http://blog.csdn.net/staricqxyz/article/details/8332566 RHEL 5 / CentOS 5 / Oracle Linux 5 [root@ ...

  9. （转）oracle表空间使用率统计查询

    转自:http://www.cnblogs.com/xwdreamer/p/3511047.html 参考文献 文献1:http://blog.itpub.net/24104518/viewspace ...

  10. 2018VMware虚拟机安装Mac OS 10.12.1

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.下载安装中所需的镜像文件以及补丁工具 Mac OS 10.12.1 Sierra (16B2555) 懒人版(下载地址):ht ...