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 在提交表单之前调用。
三、实例
代码
<!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访问指定指定表单控件的更多相关文章
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- Vue.js学习笔记——表单控件实践
最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...
- vue.js 2的表单控件
静下心,抄一段sample,以后可以快点到这里来抄...: <!DOCTYPE html> <html> <head> <meta charset=" ...
- 关于vue.js中v-model与表单控件的双向绑定。
单选框:<input type="checkbox" id="checkbox" v-model="checked"><l ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- Vue进阶之表单控件绑定
1.单行input <html> <head> <meta charset="UTF-8"> <meta name="viewp ...
- 关于vue.js中表单控件绑定练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- js进阶 11-22/23 js如何实现选项卡
js进阶 11-22/23 js如何实现选项卡 一.总结 一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. ...
随机推荐
- Android Studio将Eclipse的项目作为module的依赖库
情形: 我们现在有一个eclipse的项目,我们想把这个项目作为android studio的module的一个依赖库. 以前我们在eclipse的时候常常是在一个工作区里面把一个A工程 as a l ...
- "C:\Program Files\Internet Explorer\iexplore.exe" -extoff 无加载项启动IE 浏览器打开时全屏模式
"C:\Program Files\Internet Explorer\iexplore.exe" -extoff 无加载项启动IE浏览器打开时全屏模式
- 洛谷 P3131 [USACO16JAN]子共七Subsequences Summing to Sevens
P3131 [USACO16JAN]子共七Subsequences Summing to Sevens 题目描述 Farmer John's NN cows are standing in a row ...
- [D3] Build an Area Chart with D3 v4
Similar to line charts, area charts are great for displaying temporal data. Whether you’re displayin ...
- 2017.1-TOP5 Android开源库
Colorful (Github) Colorful简单实用,通过这个开源库可以通过编码的方式来改变应用的主题,不再需要定义不同的style dependencies { compile 'com.g ...
- 微信支付v2开发(1) 微信支付URL配置
本文介绍微信支付申请时如何设置授权目录及URL. 在申请微信支付时,第一项就会碰到下图的配置. 下面就对这一设置进行讲解! 一.选择支付类型 目前有两种支付类型 JS API网页支付 Native原生 ...
- 写PPT的先扬后抑的思路
近期给一个客户做IT战略规划. 基本结束了,客户要求写点有高度的东西.我想也是,尽管眼下的PPT也触及到战略和行业的问题,可是没有总结出来.于是就挖空心思,琢磨了三天.写了4页PPT.改动了几遍.还算 ...
- 嵌入式Linux学习笔记 NAND Flash控制器
一.NAND Flash介绍和NAND Flash控制器的使用 NAND Flash在嵌入式系统中的作用,相当于PC上的硬盘 常见的Flash有NOR Flash和NAND Flash,NOR Fla ...
- 11、V4L2摄像头获取单幅图片测试程序
#根据网上常见的一个测试程序修改而来 by rockie cheng#include <stdio.h>#include <stdlib.h>#include <stri ...
- C++利用SOAP开发WebService
// soapconsole.cpp : Defines the entry point for the console application.// #include "stdafx.h& ...