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. telnet不是内部命令也不是外部命令

    转自:https://www.cnblogs.com/sishang/p/6600977.html 处理办法: 依次打开“开始”→“控制面板”→“打开或关闭Windows功能”,在打开的窗口处,寻找并 ...

  2. Mysql学习总结（14）——Mysql主从复制配置

    mysql主从复制 怎么安装mysql数据库,这里不说了,只说它的主从复制,步骤如下: 1.主从服务器分别作以下操作:   1.1.版本一致   1.2.初始化表,并在后台启动mysql   1.3. ...

  3. 洛谷—— P2234 [HNOI2002]营业额统计

    https://www.luogu.org/problem/show?pid=2234 题目描述 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业 ...

  4. POJ 3041 Asteroids 最小覆盖数

    http://poj.org/problem?id=3041 题目大意: 一辆宇宙飞船在一个小行星带中,你知道,这很危险.他有一种武器,可以清除掉一行或一列的小行星.问把小行星全部清除最少的武器使用次 ...

  5. 【例题 6-15 UVA - 10129】Play on Words

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 拓扑大水题 [代码] #include <bits/stdc++.h> using namespace std; con ...

  6. 使用Samba在Linux服务器上搭建共享文件服务

    最近我们的小团队需要在服务器上共分出一个共享文件夹用于大家存放公共的资源文档, 大家想啊,这肯定很简单呀,在Windows下面只要创建相关的windows account,共享某个文件夹,把读/写权限 ...

  7. UVA 11461 - Square Numbers 数学水题

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  8. 如何获取AppStore软件安装包的路径

    本帖最后由 chinald 于 2015-10-16 13:59 编辑 前言:本文介绍在Mac下如何找到AppStore下载的安装包路径,以及如何提取出来供以后使用,希望对大家有所帮助(前提:想要提取 ...

  9. SpringBoot学习：获取yml和properties配置文件的内容（转）

    项目下载地址:http://download.csdn.net/detail/aqsunkai/9805821 (一)yml配置文件: pom.xml加入依赖: <!-- 支持 @Configu ...

  10. 【JAVA编码专题】UNICODE,GBK,UTF-8区别 分类： B1_JAVA 2015-02-10 21:07 153人阅读 评论(0) 收藏

    简单来说,unicode,gbk和大五码就是编码的值,而utf-8,uft-16之类就是这个值的表现形式．而前面那三种编码是一兼容的,同一个汉字,那三个码值是完全不一样的．如＂汉＂的uncode值与g ...