js进阶 9-6 js如何通过name访问指定指定表单控件
一、总结
一句话总结：form中控件的三种访问方式：2formElement 1document
1、form中控件的三种访问方式？
1、form中的控件可以通过formElement.控件名字的方式获取：form1.username.value
2、form控件获取传统方式：document.getElement方式
3、form控件通过formElement的elements属性方式获取：formElement的elements列表里面就是存的所有控件var user=formElement.elements[0].value
2、注意：
1、html中的大多数属性可以获取值，也可以设置值。
二、表单相关的属性和方法
Form 对象集合
- elements[]包含表单中所有元素的数组
Form 对象属性
- action 设置或返回表单的action 属性
- length 返回表单中的元素数目
- id/name/target/method
- ......
Form 对象方法
- reset()把表单的所有输入元素重置为它们的默认值。
- Submit()提交表单。
Form 对象事件句柄
- onreset 在重置表单元素之前调用。
- onsubmit 在提交表单之前调用。
三、实例
代码
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 name="myform1" action="#"> 11 <p>昵称：<input type="text" name="username"></p> 12 <p>密码：<input type="password" name="password"></p> 13 <p><input type="button" value="提交" onclick="getValue()"></p> 14 </form> 15 <script> 16 function getValue(){ 17 var form1=document.forms[0]; 18 // var user=form1.elements[0].value 19 // alert(user) 20 21 var user=form1.username.value='zhangsan' 22 alert(user) 23 form1.password.style.background='pink' 24 25 } 26 </script> 27 </body> 28 </html>