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>
版权申明:欢迎转载,但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明,如果侵权请联系我删除。
在校每年国奖、每年专业第一,加拿大留学,先后工作于华东师范大学和香港教育大学。
2025-01-31:宅加太忙,特此在网上找女朋友,坐标上海,非诚勿扰,vx:fan404006308
AI交流资料群:753014672
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步