微信扫一扫打赏支持

js进阶 9-6 js如何通过name访问指定指定表单控件

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>

 

posted @ 2018-06-08 19:15  范仁义  阅读(908)  评论(0)  编辑  收藏  举报