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. shell-查看手机分辨率

    使用如下命令,可以查看手机分辨率 adb shell dumpsys window displays 运行结果如下 Display: mDisplayId= init=1080x1920 480dpi ...

  2. vanzo-代码共享平台地址

    网页编辑.烧录代码 1.登录服务器 192.168.1.52 2.选择modules 3.选择builder 4.在 Project Name:填入要拉的项目名 选择版本:user,eng,userd ...

  3. 11. ZooKeeper之启动、停止服务。

    转自:https://blog.csdn.net/en_joker/article/details/78673607 启动服务 首先我们来看下如何启动ZooKeeper服务.常见的启动方式有两种. J ...

  4. 学习笔记（二）：javascript之dom操作

    一.document.getElementById()    根据Id获取元素节点 <div id="div1"> <p id="p1"> ...

  5. Redis笔记教程

    一.redis简介 1.1.1.什么是redis? REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. 读 ...

  6. noi25 最长最短单词（为什么会出现运行时错误）

    noi25 最长最短单词(为什么会出现运行时错误) 一.总结 一句话总结:比如除以零,数组越界,指针越界,使用已经释放的空间,数组开得太大,超出了栈的范围,造成栈溢出 1.c++报runtime er ...

  7. 微信支付v2开发(8) 维权通知

    本文介绍微信支付中如何获得维权通知. 一.维权通知URL 在 微信支付开发(1) 微信支付URL配置 已提到,维权通知URL为 http://www.doucube.com/wxpay/rights. ...

  8. LM4990音频功放芯片

    我们选用的一种封装:我们用的是DGK封装. 典型电路图: 下面是示意图:四中封装的示意图是不一样的: 下面是真正的原理图: 高放大倍数的原理图: 查分式的: 单个输入的原理图: 下面是有关电源的选择:

  9. [D3] Create Chart Axes with D3 v4

    Most charts aren’t complete without axes to provide context and labeling for the graphical elements ...

  10. 挖一挖不经常使用到而又非常有用的重载-Split

    Split这个基本上全部的程序开发者都用到,一般使用单字符和长字符串拆分字符串的较多.事实上另一个重载很好用.那就是多种组合字符来进行拆分. 比如: "aaaaaaaaaa{@}bbbbbb ...