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(); }