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>

js进阶 9-6 js如何通过name访问指定指定表单控件的更多相关文章

  1. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  2. Vue.js学习笔记——表单控件实践

    最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...

  3. vue.js 2的表单控件

    静下心,抄一段sample,以后可以快点到这里来抄...: <!DOCTYPE html> <html> <head> <meta charset=" ...

  4. 关于vue.js中v-model与表单控件的双向绑定。

    单选框:<input type="checkbox" id="checkbox" v-model="checked"><l ...

  5. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

  6. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  7. Vue进阶之表单控件绑定

    1.单行input <html> <head> <meta charset="UTF-8"> <meta name="viewp ...

  8. 关于vue.js中表单控件绑定练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  9. js进阶 11-22/23 js如何实现选项卡

    js进阶 11-22/23 js如何实现选项卡 一.总结 一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. ...

随机推荐

  1. elasticsearch选举master

    数据节点确定了master以后.会开启MasterPinger线程来与其保持心跳通信的逻辑假设通信过程中链接断开,会通过MasterNodeFailureListener监听器进行回调处理处理过程中会 ...

  2. 40.lombok在IntelliJ IDEA下的使用

    转自:https://www.cnblogs.com/yjmyzz/p/lombok-with-intellij-idea.html lombok是一款可以精减java代码.提升开发人员生产效率的辅助 ...

  3. golang sort

    package main import ( "fmt" "strings" "sort" ) type Animals []string f ...

  4. VC 常见问题百问

    http://www.cnblogs.com/cy163/archive/2006/06/19/429796.html 经典Vc书 Charles Petzold 的<Programming W ...

  5. mybatis中整合ehcache缓存框架的使用

    mybatis整合ehcache缓存框架的使用 mybaits的二级缓存是mapper范围级别,除了在SqlMapConfig.xml设置二级缓存的总开关,还要在具体的mapper.xml中开启二级缓 ...

  6. Surging 分布式微服务框架使用入门

    原文:Surging 分布式微服务框架使用入门 前言 本文非 Surging 官方教程,只是自己学习的总结.如有哪里不对,还望指正. 我对 surging 的看法 我目前所在的公司采用架构就是类似与S ...

  7. 防止 Chrome 屏蔽 非官方 扩展程序 教程（一）

    说明 Google Chrome,又称 Google 浏览器,是一个由 Google(谷歌)公司开发的网页浏览器.该浏览器是基于其它开源软件所撰写.包含 WebKit,目标是提升稳定性.速度和安全性. ...

  8. (转)nginx的root和alias指令的区别

    转自 http://www.cnblogs.com/tintin1926/archive/2012/07/11/2586813.html nginx配置下有两个指定目录的执行,root和alias   ...

  9. FTP、SSH、NFS等环境工具的安装

    注意:通过ftp互传文件或者通过ssh登录的时候,ubuntu需要使用bridged上网环境 ftp: sudo apt-get install vsftpd sudo vi /etc/vsftpd. ...

  10. UIButton UIBarButtonItem用法

    #pragma mark 快速创建一个item - (UIBarButtonItem *)itemWithNormal:(NSString *)normal highlighted:(NSString ...