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. MDaemon and Apache2

    MDaemon and Apache2 邮件服务器列表 http://down.chinaz.com/class/93_1.htm MDaemon11.03中文破解补丁 http://download ...

  2. Android学习笔记进阶十之Matrix错切变换

    刚开始我也不懂啥叫错切变换,一看效果图你就恍然大悟. 对图像的错切变换做个总结: x = x0 + b*y0; y = d*x0 + y0; 与之对应的方法是: Matrix matrix = new ...

  3. HorizontalListView中使用notifyDataSetChanged()和notifyDataSetInvalidated()

    今天在项目中用到了水平ListView控件HorizontalListView,也是我在网上找的个开源HorizontalListView直接在项目中使用.我是把HorizontalListView放 ...

  4. 关于腾讯云server使用FTP具体配置教程

    本文文件夹:-------------------------------------------------------- [-] 腾讯云server介绍 关于腾讯云server使用感受 作为开发人 ...

  5. __INLINE

  6. Centos NFS 简单设置

    Server 端: NFS的安装配置:centos 5 :yum install nfs-utils portmapcentos 6 :yum install nfs-utils rpcbind vi ...

  7. vim编辑器经常使用命令

    高级一些的编辑器,都会包括宏功能,vim当然不能缺少了.在vim中使用宏是很方便的: :qx     開始记录宏,并将结果存入寄存器xq     退出记录模式@x     播放记录在x寄存器中的宏命令 ...

  8. 嵌入式Linux学习笔记 NAND Flash控制器

    一.NAND Flash介绍和NAND Flash控制器的使用 NAND Flash在嵌入式系统中的作用,相当于PC上的硬盘 常见的Flash有NOR Flash和NAND Flash,NOR Fla ...

  9. 组合搜索（combinatorial search）在算法求解中的应用

    1. 分治.动态规划的局限性 没有合适的分割方式时,就不能使用分治法: 没有合适的子问题或占用内存空间太大时,就不能用动态规划: 此时还需要回到最基本的穷举搜索算法. 穷举搜索(exhaustive ...

  10. 安装及XShell软件的配置

    Linux系统centOS7在虚拟机下的安装及XShell软件的配置   前面的话 本文将详细介绍Linux系统centOS7在虚拟机下的安装 准备工作 [系统下载] 在安装centOS7之前,首先在 ...