表单

JS最初的一个用途就是帮助服务器分担处理表单的责任

时至今日,虽然web应用以及JS都有了长足的发展,但是表单依然是现在web应用中比较重要的部分。

因为默认的表单控件很丑,所以有时候我们会使用自定义的组件来完成表单的功能,这就需要我们对表单有一个较为详细的了解。

表单基础

在HTML中,表单是由 <form> 元素表示的,在JS中表单则对应了 HTMLFormElement 类型

该类型继承自 HTMLElement ,因此表单拥有与其它HTML元素相同的默认属性

不过表单也有自己独有的属性和方法,如下所示:

  • acceptCharset:服务器能够处理的字符集,等效于 accept-charset 特性
  • action:接收请求的URL,等价于HTML中的 action 特性
  • elements:表单中所有控件的集合(HTMLCollection)
  • enctype:请求的编码类型,等效于 enctype 特性
  • length:表单中的控件数量
  • method:发送的HTTP请求类型,等效于 method 特性
  • name:表单的名称,等效于 name 特性
  • reset():将表单中的所有控件重置为 reset
  • submit():提交表单
  • target:用于发送请求和接收响应窗口的名称,等价于HTML的target特性

表单的获取方式和其它的HTML元素的方式一样

但是通过 document.forms 可以获取页面中所有表单的集合,该集合可以通过表单的name和数值索引来获取特定的表单

如:

var form1 = document.forms[0];//获取页面中的第一个表单
var form2 = document.forms["form2"];//获取name为form2的表单

另外,在早期的浏览器中会将每个设置了name特性的表单作为属性保存在 document 对象上,以上面 name 为 form2的表单为例

var form2 = document.form2

但是这种用法只在向后兼容的浏览器中生效,所以应尽量避免使用

Javascript高级编程学习笔记(73)—— 表单(1)表单基础的更多相关文章

  1. Javascript高级编程学习笔记(75)—— 表单(3)表单字段

    表单字段 表单作为web应用中不可或缺的一部分,当然也是可以使用原生的 DOM 元素来访问的 除了标准的访问方式之外,每个表单都拥有一个 elements 属性,该属性保存着该表单所有 表单元素 的集 ...

  2. Javascript高级编程学习笔记(74)—— 表单(2)表单提交及重置

    表单提交 表单的很大一部分作用就是帮助用户完成和服务器的交互 所以表单提交是表单中比较重要的部分 虽然现如今的大部分应用场景都使用 AJAX 的异步请求来代替表单,但是仍有部分操作需要使用表单来完成, ...

  3. JavaScript高级程序设计学习笔记第十四章--表单

    1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...

  4. Javascript高级编程学习笔记(80)—— 表单(8)表单序列化

    表单序列化 随着 Ajax 的出现,表单序列化成为一种常见需求 以将表单信息序列化为查询字符串为例 我们可以利用表单的 type 属性,以及 name 和 value 实现对表单的序列化 序列化应满足 ...

  5. Javascript高级编程学习笔记(78)—— 表单(6)HTML约束验证API

    自动切换焦点 使用JS可以极大地提升表单的易用性 其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段 以下方的HTML代码为例: <input type="text&q ...

  6. Javascript高级编程学习笔记(77)—— 表单(5)过滤输入

    在日常实践中,我们常常会需要用户按照某种规则输入数据 但是文本框在默认情况下缺少验证数据的手段,因此需要使用JS来完成此类过滤输入的操作 通过事件和DOM的结合手段就能够将普通的文本框转换为功能型控件 ...

  7. Javascript高级编程学习笔记(79)—— 表单(7)选择框脚本

    选择框脚本 选择框由<option>和<select>元素创建,为了方便选择框的交互,除了提供表单字段的公有方法之外 HTMLSelectElement 类型还提供下列特有的属 ...

  8. Javascript高级编程学习笔记(76)—— 表单(4)选择文本

    文本框脚本 在HTML中文本框有两种实现方式: <input> <textarea> 这两种实现方式虽然在多数情况下表现一致,但是两者之间仍存在许多重要区别 对于<inp ...

  9. Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表

    操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...

随机推荐

  1. 使用xhprof对php7程序进行性能分析

    Xhprof是facebook开源出来的一个php轻量级的性能分析工具,跟Xdebug类似,但性能开销更低,还可以用在生产环境中,也可以由程序开关来控制是否进行profile. 对于还在使用php5的 ...

  2. dskinlite(uieasy mfc界面库)使用记录2:绘制动态元素(按钮控件绘制元素动态控制,改变图片和文字)

    效果图:这4个分别是按钮按下后4种状态的效果 第88行是显示默认的按钮文字,没有id,SetWindowText改的就是它了 第87行是左边的图片,id是ico,可以通过程序控制 第89行是蓝色的文字 ...

  3. OO课程第三次总结QWQ

    调研,然后总结介绍规格化设计的大致发展历史和为什么得到了人们的重视 emmm为这个问题翻遍百度谷歌知乎也没有得到答案,那我就把自己认为最重要的两点简要说明一下吧,欢迎大家补充~ 1.便于完成代码的重用 ...

  4. python 打包成 windows .EXE

    1. 升级pip python -m pip install --upgrade pip 2.安装 pyinstall (打包程序) pip install pyinstaller 3 开始打包(打包 ...

  5. MIUI通过xposed自动设置root权限

    在小米手机上,每次安装一个自己的插件总需要打开安全中心进行root权限授权,非常的麻烦,总共需要电5次确认,每次需要等5秒 因为插件开发的需求,希望重启计算机时候判断是否已经root,未root则自动 ...

  6. shell脚本学习-练习写一个脚本2

    # 1.依次展示/var目录下的对象,并说明是文件或者目录.格式如:Hello,$file. # 2.统计一个有多少个文件. #!/bin/bash #Program Description: #Au ...

  7. zookeeper名字服务

    10.12.67.31 #!/bin/shmkdir -p /data/zk-install/cd /data/zk-install/wget -q -O ons_agent-1.0.5.tar.gz ...

  8. https多网站1个IP多个SSL证书的Apache设置办法

    这些天接触了解SSL证书后,写了一篇<申请免费的SSL证书,开通https网站>博文,其中简单记录了Apache的设置,后来又涉及到多个域名.泛域名解析.通配符SSL证书.单服务器/多服务 ...

  9. Codeforces 888 简要题解

    文章目录 A题 B题 C题 D题 E题 F题 G题 传送门 A题 传送门 题意简述:给一个数列,问有多少个峰值点(同时比两边都大/小的点) 思路:按照题意模拟. 代码: #include<bit ...

  10. centos6安装oracle11g过程中报错Error in invoking target “install” of makefile ‘/home/oracle/app/oracle/product/11.2.0/dbhome_1/ctx/lib/ins_ctx.mk’

    报这个错误的原因是由于缺少compat_libstdc包所导致.安装即可 1.在http://www.rpm-find.net/linux/rpm2html/search.php?query=comp ...