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. zookeeper 配置文件说明（zoo.cfg）

    clientPort      # 客户端连接server的port,即对外服务port,一般设置为2181. dataDir        # 存储快照文件snapshot的文件夹. 默认情况下.事 ...

  2. v-for实现循环嵌套

    <!DOCTYPE html> <html lang="en"> <head> <title></title> < ...

  3. Android Gradle统一依赖管理

    目的: 避免在依赖包出新版本时,需要对每个module中的build.gradle文件都进行修改(如appcompat-v7包),使用这种方式即只需一次修改. 方法一 在项目的根目录创建一个gradl ...

  4. iCarousel——在iOS和Mac OS应用中实现3D CoverFlow旋转木马效果的开源类库

    前言 iCarousel一个简单.可高度定制的3D CoverFlow开源类库,旨在简化在 iPhone, iPad和Mac OS中生成各种类型的cover flow(视图切换)效果(分页.滚动视图) ...

  5. bootstrap 时间控件带（时分秒）选择器(需要修改才能显示，请按照参数说明后面的步骤进行修改)

    1.控件下载地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm,参数设置说明也在这个链接下面: 2.具体参数说明(复制原链接) ...

  6. 【z04】计算系数

    [题目链接]:http://noi.qz5z.com/viewtask.asp?id=z04 [题解] 用二项式定理可以写出下列通式 组合数可以用杨辉三角搞出来; a的x次方直接乘就好了;指数也不大. ...

  7. 【Codeforces Round #437 (Div. 2) C】 Ordering Pizza

    [链接]h在这里写链接 [题意]     给你参赛者的数量以及一个整数S表示每块披萨的片数.     每个参数者有3个参数,si,ai,bi;     表示第i个参赛者它要吃的披萨的片数,以及吃一片第 ...

  8. CSS布局开篇

    原文: 简书原文:https://www.jianshu.com/p/2c78b927f8c4 开篇 这是我写CSS布局的第一篇文章,之所以将布局从中摘出来单独放一部分是因为我觉得光是布局这块内容就有 ...

  9. 微信小程序开发中如何实现侧边栏的滑动效果？

    原文链接:https://mp.weixin.qq.com/s/7CM18izpZqf0oc0D75IGmQ 1 概述 在手机应用的开发中侧边栏滑动是很常见的功能,当然在小程序中也不会例外,很多特效还 ...

  10. 【微信小程序】自定义模态框实例

    原文链接:https://mp.weixin.qq.com/s/23wPVFUGY-lsTiQBtUdhXA 1 概述 由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自 ...