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对象的属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文档</title>
 6     <style type="text/css">
 7     </style>
 8 </head>
 9 <body>
10     <form id="form1" name="myform1" action="http://ww23w.51z32xw.n23et/" method="get">
11         <p>昵称：<input type="text" name="username"></p>
12         <p>密码：<input type="password" name="password"></p>
13         <p><input type="submit" value="提交"></p>
14     </form>
15     <script type="text/javascript">
16         var myform1=document.forms[0]
17         myform1.method='post'
18         document.write('<ol>')
19             document.write(
20                 '<li>表单的ID为'+myform1.id
21                 +'<li>表单的name为'+myform1.name
22                 +'<li>表单中的元素个数为：'+myform1.length
23                 +'<li>表单的提交方式：'+myform1.method
24             )
25         document.write('</ol>')
26     </script>
27 </body>
28 </html>

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文档</title>
 6     <style type="text/css">
 7     </style>
 8 </head>
 9 <body>
10 <form id="form1" name="myform1" action="#" method="get">
11         <p>昵称：<input type="text" name="username"></p>
12         <p>密码：<input type="password" name="password"></p>
13         <p><input type="submit" value="提交按钮"></p>
14         <p><input type="button" value="普通按钮" onclick="submit()"></p>
15         <p>
16             <input type="button" value="提交到5学网" onclick="sendPage1()">
17             <input type="button" value="提交到百度" onclick="sendPage2()">
18         </p>
19     </form>
20     <script type="text/javascript">
21         function sendPage1(){
22             myform1.action='http://w.53341z1xfdgw.com'
23             myform1.submit();
24         }
25         function sendPage2(){
26             myform1.action='https://www.baidu.com/'
27             myform1.submit();
28         }
29     </script>
30 </body>
31 </html>

四、测试题-简答题

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

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