Javascript高级编程学习笔记(73)—— 表单(1)表单基础
表单
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)表单基础的更多相关文章
- Javascript高级编程学习笔记(75)—— 表单(3)表单字段
表单字段 表单作为web应用中不可或缺的一部分,当然也是可以使用原生的 DOM 元素来访问的 除了标准的访问方式之外,每个表单都拥有一个 elements 属性,该属性保存着该表单所有 表单元素 的集 ...
- Javascript高级编程学习笔记(74)—— 表单(2)表单提交及重置
表单提交 表单的很大一部分作用就是帮助用户完成和服务器的交互 所以表单提交是表单中比较重要的部分 虽然现如今的大部分应用场景都使用 AJAX 的异步请求来代替表单,但是仍有部分操作需要使用表单来完成, ...
- JavaScript高级程序设计学习笔记第十四章--表单
1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...
- Javascript高级编程学习笔记(80)—— 表单(8)表单序列化
表单序列化 随着 Ajax 的出现,表单序列化成为一种常见需求 以将表单信息序列化为查询字符串为例 我们可以利用表单的 type 属性,以及 name 和 value 实现对表单的序列化 序列化应满足 ...
- Javascript高级编程学习笔记(78)—— 表单(6)HTML约束验证API
自动切换焦点 使用JS可以极大地提升表单的易用性 其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段 以下方的HTML代码为例: <input type="text&q ...
- Javascript高级编程学习笔记(77)—— 表单(5)过滤输入
在日常实践中,我们常常会需要用户按照某种规则输入数据 但是文本框在默认情况下缺少验证数据的手段,因此需要使用JS来完成此类过滤输入的操作 通过事件和DOM的结合手段就能够将普通的文本框转换为功能型控件 ...
- Javascript高级编程学习笔记(79)—— 表单(7)选择框脚本
选择框脚本 选择框由<option>和<select>元素创建,为了方便选择框的交互,除了提供表单字段的公有方法之外 HTMLSelectElement 类型还提供下列特有的属 ...
- Javascript高级编程学习笔记(76)—— 表单(4)选择文本
文本框脚本 在HTML中文本框有两种实现方式: <input> <textarea> 这两种实现方式虽然在多数情况下表现一致,但是两者之间仍存在许多重要区别 对于<inp ...
- Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表
操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...
随机推荐
- 发布后就很丢人的随笔(c++)
for循环条件中使用的变量 可以是循环条件中定义的变量 也可以是循环之外的变量 代码: #include <iostream> int main(){ int a = 1; int b = ...
- Git 操作简介
安装完成创建用户和邮箱 git config --global user.name "username"git config --global user.email "t ...
- 超简单的全新win10安装
1.准备工作! 这里说一下需要装系统的东西: 至少8G的U盘或内存卡 一台Windows电脑 在要安装的电脑上至少有16G的空间,最好至少64G. 2.现成电脑下载文件(已经有重装系统U盘跳过这一步) ...
- 在IDEA下导入Maven项目之后 Dependencies报红线
在IDEA中导入新的Maven项目之后,许多jar包出现波浪线的情况,在网上搜了很多办法都不管,什么直接删掉pom文件中的依赖,保存之后,刷新再ctrl+z 撤回 问题就消失了, 还有的说,你可以直接 ...
- SHELL脚本学习-练习写一个脚本4
#编写一个脚本时,自动生成”#!/bin/bash”这一行和相关注释信息. 把以下的代码保存为一个sh文件,比如test.sh , 新建脚本是使用 bash test.sh newfile 即可. ...
- HDU4460
#include <iostream> #include <queue> #include <vector> #include <cstring> #i ...
- 使用Jmeter进行http接口做功能、性能测试
在测试移动APP时,会有很多接口需要做测试,我在这里介绍一下对HTTP接口做功能.性能的测试.首先我们会从开发人员拿到接口数据. 一.测试需求描述 1. 本次测试的接口为http服务端接口 2 ...
- Java关键字this与super
this有两个用途: 1.引用隐式参数(出现在方法名前的参数,显示参数是出现在方法名后位于括号里的参数,如:e.raiseSalary(10%),e是隐式参数,10%是显示参数):这里比较常见.形式如 ...
- hw3
1. 2.将MAXPRIMES的值设为4,t2会发生越界错误,t1不会. 3.令n = 1,此时不满足while语句的判断条件,不执行while循环. 4. 点覆盖:{1,2,3,4,5,6,7,5, ...
- linu输出重定向
1.tee命令 ls | tee filename #若出现Permission Denied使用下面 ls | sudo tee filename #清空filename后重写 ls | sudo ...