深入理解表单脚本系列第一篇——表单对象
前面的话
javascript最初的一个应用就是分担服务器处理表单的责任,打破处处依赖服务器的局面。尽管目前的web和javascript已经有了长足的发展,但web表单的变化并不明显。由于web表单没有为许多常见任务提供现成的解决方法,很多开发人员不仅会在验证表单时使用javascript,而且还增强了一些标准表单控件的默认行为。本文是表单脚本系列第一篇——表单对象
表单属性
在HTML中,表单是由form元素来表示的,而在javascript中,表单对应的则是HTMLFormElement类型,HTMLFormElement继承了HTMLElement,但也有自己独有的属性和方法
acceptCharset 服务器能够处理的字符集;等价于HTML中的accept-charset特性
关于accept-charset属性的详细情况移步至此
action 接受请求的URL;等价于HTML中的action特性
关于action属性的详细情况移步至此
enctype 请求的编码类型;等价于HTML中的enctype特性
关于enctype属性的详细情况移步至此
<formname="form"action="#"></form>
<script>
varform=document.form;
console.log(form.acceptCharset);//''
console.log(form.action);//"file:///C:/Users/Administrator/Desktop/iframe.html#"
console.log(form.enctype);//application/x-www-form-urlencoded
</script>
elements 表单中所有控件的集合(HTMLCollection)
length 表单中控件的数量
<formname="form"action="#">
<inputtype="text">
<textarea></textarea>
</form>
<script>
varform=document.form;
console.log(form.elements)//[input,textarea]
console.log(form.length)//2
</script>
method 要发送的HTTP请求类型,通常是"get"或"post";等价于HTML的method特性
关于method属性的详细情况移步至此
name 表单的名称;等价于HTML的name特性
关于name属性的详细情况移步至此
target 用于发送请求和接收响应的窗口名称;等价于HTML的target特性
关于target属性的详细情况移步至此
<formname="form"action="#"></form>
<script>
varform=document.form;
console.log(form.method);//get
console.log(form.name);//form
console.log(form.target);//''
</script>
表单事件
reset事件 将所有表单域重置为默认值
submit事件 提交表单
<formname="form"action="#">
<inputname="test"value="1">
<inputtype="reset">
<inputtype="submit">
</form>
<script>
varform=document.form;
form.onreset= function(){
form.test.value= "2";//若不使用return false阻止默认事件,那么reset将会把form.test的value重新置成1
return false;
}
form.onsubmit= function(){
form.test.value= "3";
}</script>
style="width: 100%; height: 50px;" src="https://demo.xiaohuochai.site/html/formobj/f1.html" frameborder="0" width="320" height="240">
表单方法
submit()方法
在javascript中,以编程方式调用submit()方法也可以提交表单。而且,这种方式无需表单包含提交按钮,任何时候都可以正常提交表单
以调用submit()方法提交表单时,不会触发submit事件
reset()方法
在用户单击重置按钮时,表单会被重置。使用type特性值为"reset"的<input>或<button>都可以创建重置按钮
[注意]元素重置时,不再触发元素上的change和input事件
<inputtype="reset"value="Reset Form">
<buttontype="reset">Reset Form</button>
style="width: 100%; height: 40px;" src="https://demo.xiaohuochai.site/html/formobj/f2.html" frameborder="0" width="320" height="240">
与调用submit()方法不同,调用reset()方法会像单击重置按钮一样触发reset事件
点击外部提交按钮后,浏览器URL变成file:///C:/inetpub/wwwroot/test.html?test=1#,且没有触发onreset事件,input的value值没有变化
点击外部重置按钮后,触发reset事件,input的value值变成2
<formname="form"action="#">
<inputname="test"value="1">
</form>
<buttonid="btn1">外部提交</button>
<buttonid="btn2">外部重置</button>
<script>
varform=document.form;
form.onreset= function(){
form.test.value= "2";return false;
}
form.onsubmit= function(){form.test.value= "3";}
btn1.onclick= function(){form.submit();}
btn2.onclick= function(){form.reset();}</script>
style="width: 100%; height: 80px;" src="https://demo.xiaohuochai.site/html/formobj/f3.html" frameborder="0" width="320" height="240">
更多专业前端知识,请上 【猿2048】www.mk2048.com
深入理解表单脚本系列第一篇——表单对象相关推荐
- 深入理解javascript函数进阶系列第一篇——高阶函数
前面的话 前面的函数系列中介绍了函数的基础用法.从本文开始,将介绍javascript函数进阶系列,本文将详细介绍高阶函数 定义 高阶函数(higher-order function)指操作函数的函数 ...
- Base64系列第一篇 Base64介绍
本文地址:http://blog.csdn.net/morewindows/article/details/11871429转载请标明出处,谢谢. 欢迎关注微博:http://weibo.com/Mo ...
- Webpack系列-第一篇基础杂记
系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记 前言 公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然 ...
- 掌握 Angular2 的表单 - Angular2 系列 (4)
系统提示: 阅读此文大概需要我也不知道几分钟- 今天我们要带领大家走进一个新天地,那就是Angular2的表单;众所周知基本上所有的web系统都会涉及到关于表单的操作,在那些电商类的网站中,表单更是占 ...
- element 修改表单值后表单验证无效_javascript自学记录:表单脚本1
第14章 表单脚本 14.1 表单的基础知识 获得表单元素: // 取得id为form_1的元素var form = document.getElementById("form_1&quo ...
- Android 系统(243)---Android进程系列第一篇---进程基础
Android进程系列第一篇---进程基础 内容预览.png 概述: 本文主要讲解进程基础,更深入的认识有血有肉的进程,内容涉及进程控制块,信号,进程FD泄露等等.仅供参考,欢迎指正. 一.从Linu ...
- Java小白入门系列 第一篇 写在前面
2018年8月30日 22:00:17 郑州 多云 Sue Java小白入门系列 第一篇 写在前面 写在前面: 首先声明一下,本人也是正在学Java,并不是多么专业人士,只是最近受老师的启发,所 ...
- 小白学习Flink系列--第一篇(知识图谱)
小白学习Flink系列–第一篇(知识图谱) 如何学习Flink? 对于一门计算机技术来说,如何快速学习上手呢?具体的逻辑是什么呢?我认为有以下几条 了解技术的应用场景 技术的基本概念,如何使用,以 ...
- 自己动手实现蓝牙MESH应用系列 | 第一篇:蓝牙MESH基础概念介绍
文章目录 1. 前言 2. 概述 2.1. 蓝牙风格(Flavors) 2.2. mesh网络的动机 2.3. mesh网络中的消息传输方式 2.3.1. 以消息为中心的通信 - 发布/订阅(publ ...
最新文章
- 我的JavaScript学习笔记
- C# IPGlobalStatistics获取本机网络流量信息
- 各视频、各音频之间格式任意玩弄(图文详解)
- Linux服务器上监控网络带宽与监控性能命令大全
- 分支限界法|Branch and Bound Method(0-1背包问题)
- 使用计算机正确开机方法,电脑开关机的正确步骤
- 纯文字海报如何排版更引人注目?
- 腾讯云短信发送api(SendSms)--java
- Java堆溢出错误:java.lang.OutOfMemoryError: Java heap space
- 【笔记】软件质量保证(Software Quality Assurance)复习笔记
- 主数据管理项目建设经验分享
- 关于Efficient Subgraph Matching by Postponing Cartesian的批注
- 苹果六电池_苹果新产品发布,这次加量不加价!
- 广州大喜事婚庆公司报价表
- Flutter Image从网络加载图片刷新、强制重新渲染
- 运维之眼——流量采集网络
- 找到出问题的地方了啊
- 低功耗蓝牙BLE之连接事件、连接参数和更新方法
- 5. 项目管理之范围管理
- Android多线程方式
热门文章
- 一文完整MySQL连接查询,笛卡尔乘积,内连接外连接交叉连接
- Java多线程(2)--Thread类继承和Runnable接口创建线程
- 计算机管理设置,win10系统打开计算机管理的设置步骤
- win mysql 2003错误_windows MySql 报1067错误 2003错误
- 时间 '2018-08-06T10:00:00.000Z' 格式转化为本地时间(转)
- lengthOfLongestSubstring
- 解决checkbox与对应文字不对齐的问题
- 【iCore3 双核心板_ uC/OS-III】例程五:软件定时器
- android 开发
- 基于SharePoint 的企业信息平台架构