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属性可以实现选项卡的选项切换. ...
随机推荐
- openGLES(一)
准备工作 工具安装 jdk安装 sdk安装 IDE开发环境 一个手机 推荐使用真机,它可以反映真实的性能和结果. 虚拟机创建 Android SDK 执行SDK Manager.exe Tools-- ...
- SpringMVC-如何接收各种参数(普通参数,对象,JSON, URL)
在交互的过程中,其中一个关键的节点就是获取到客户端发送过来的请求参数,本篇文章,我们来罗列下SpringMVC对于各种数据的获取方式: 说明:以下重点在讲解如何获取参数上,所以返回的数据不是重点 1, ...
- [React & Debug] Quick way to debug Stateless component
For example we have the following code: const TodoList = (props) => ( <div className="Tod ...
- 从大整数乘法的实现到 Karatsuba 快速算法
Karatsuba 快速乘积算法是具有独特合并过程(combine/merge)的分治算法(Karatsuba 是俄罗斯人).此算法主要是对两个整数进行相乘,并不适用于低位数(如 int 的 32 位 ...
- 编程一一C语言问题,指针函数与函数指针
资料来源于网上: 一.指针函数:指返回值是指针的函数 类型标识符 *函数名(参数表) int *f(x,y); 首先它是一个函数,只不过这个函数的返回值是一个地址值.函数返 ...
- unmapping error
否则,会映射一个Getch的器件,就会报unmapping 的error
- ganglia错误解决
1. 运行: 解决: 这时重新启动gmetad,输入命令: service gmetad stop 显示: Shutting down GANGLIA gmetad: ...
- 嵌入式Qt-4.8.6显示中文并且改变字体大小和应用自己制作的字体库
问题: QT4.8.6在移植到开发板上的时候,中文支持是必不可少的,如何让QT支持中文,如何制作QT支持的字体文件,如何使QT UI编辑器中的字号与开发板中的字号一致. 详解: 1>如何让QT支 ...
- Oracle分页查询的一个存储过程:
create or replace procedure AspNetOraclePager( tableName in varchar2, --表名 fields in var ...
- 解题报告 之 HDU5305 Friends
解题报告 之 HDU5305 Friends Description There are people and pairs of friends. For every pair of friend ...