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 在提交表单之前调用。

三、实例

代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <style type="text/css">

     </style>

 </head>

 <body>

     <form name="myform1" action="#">

         <p>昵称：<input type="text" name="username"></p>

         <p>密码：<input type="password" name="password"></p>

         <p><input type="button" value="提交" onclick="getValue()"></p>

     </form>

     <script>

         function getValue(){

             var form1=document.forms[0];

             // var user=form1.elements[0].value

             // alert(user)

             var user=form1.username.value='zhangsan'

             alert(user)

             form1.password.style.background='pink'

         }

     </script>

 </body>

 </html>