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. Redis笔记教程

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

  2. 作为一个新人，怎样学习嵌入式Linux？(韦东山）

    这篇文章是引用韦老师的部分关于新人怎么学习嵌入式Linux的经验,引用如下: 1.电脑一开机,那些界面是谁显示的?是BIOS,它做什么?一些自检,然后从硬盘上读入windows,并启动它. 类似的, ...

  3. Web安全之Cookie劫持

    1. Cookie是什么? 2. 窃取的原理是什么? 3. 系统如何防Cookie劫持呢? 看完这三个回答, 你就明白哪位传奇大侠是如何成功的!!! Cookie: HTTP天然是无状态的协议, 为了 ...

  4. 4、基于JZ2440之编写测试代码处理（处理图片识别人脸）

    1.代码如下: void detectAndDisplay(Mat image) { CascadeClassifier ccf; //创建脸部对象 //ccf.load(xmlPath); //导入 ...

  5. 【Codeforces Round #437 (Div. 2) C】 Ordering Pizza

    [链接]h在这里写链接 [题意]     给你参赛者的数量以及一个整数S表示每块披萨的片数.     每个参数者有3个参数,si,ai,bi;     表示第i个参赛者它要吃的披萨的片数,以及吃一片第 ...

  6. DateTime与timeStamp的转换

    DateTime转换为timeStamp: DateTime dt = DateTime.Now;            DateTime startTime = TimeZone.CurrentTi ...

  7. HDU 2577 How to Type DP也可以模拟

    http://acm.hdu.edu.cn/showproblem.php?pid=2577 大意: 大家都打过字吧,现在有个有趣的问题:给你一串字符串,有大写有小写,要求你按键次数最少来输出它,输出 ...

  8. C++项目參考解答：累加求圆周率

    [项目-累加求圆周率] 用例如以下公式求π的近似值(计算直到最后一项的绝对值小于10−5) π4=1−13+15−17+... [參考解答] #include <iostream> usi ...

  9. （八）RabbitMQ消息队列-通过Topic主题模式分发消息

    原文:(八)RabbitMQ消息队列-通过Topic主题模式分发消息 前两章我们讲了RabbitMQ的direct模式和fanout模式,本章介绍topic主题模式的应用.如果对direct模式下通过 ...

  10. 【42.59%】【codeforces 602A】Two Bases

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...