JavaScript红宝书14-脚本表单(Scripting Forms)

JavaScript的最原始功能是把处理表单职责转移到浏览器上，而不是依赖服务器解决，尽管自那时起前端和JavaScript都有了进化，但是仍然还有或多或少未改变的地方，web表单无法为常见问题提供简单的解决方案，导致开发人员不仅使用JavaScript进行表单验证，还使用JavaScript来增强标准表单控件的默认行为。

表单基础

web表单通过元素
来表示，它是HTMLFormElement类型，继承自HTMLElement类型，有以下的属性和方法：

acceptCharset：服务器可处理的字符集等价于HTML可接受字符集。

action：向指定URL发送请求，等价于HTML的action属性。

elements：HTMLCollection控制的表单。

enctype：请求的编码类型，等价于HTML的enctype属性。

length：表单中的控制数量。

method：请求的类型 get或者post，等价于HTML的method属性。

name：表单的名称，等价于HTML的name属性。

target：窗口的名称用于发送请求和接收响应，等价于HTML的target属性

reset()：重置表单区域的值为默认值。

submit()：提交表单。

获取表单元素的引用有很多的方法，最常用的方式getElementById()方法，也可以通过array或者map的方式获取：

ini 复制代码

let form = document.getElementById("form1")

// array + index
let firstForm = document.forms[0];

// map
let myForm = document.forms["form2"];

提交表单

表单的提交通常是用户点击提交按钮，提交按钮使用或者定义：

bash 复制代码

<input id="form1" value="Submit Form" type="submit">

<button type="submit">Submit Form</button>

如果提交按钮中有表单，那么按Enter键也能提交表单

注意：如果表单没有配套提交按钮，那么不能提交，按Enter键也不会提交

当表单提交，提交时间会触发在发送给服务器之前，提供了机会校验表单的数据和是否允许表单提交通过，阻止事件提交可以通过preventDefault()方法

csharp 复制代码

form.addEventListener('submit', (event) => {
  event.preventDefault()
})

preventDefault()方法会阻止正在提交的表单，这个方法应该在数据在表单中是无效的，并且不应该提交到服务器才使用。

可以通过JavaScript的submit()方法以编程的方式提交表单，这个方法可以在任何时候被调用去提交方法，且可以不需要提交按钮，比如这样

javascript 复制代码

let form = document.getElementById("form1");
form.addEventListener('submit', (event) => {
  event.submit()
})

避免用户多次点击

有时用户在点击按钮发现页面没有反应，可能连续点击多次，解决多次点击有两种方法：

1、在点击一次之后，就把按钮变成disable，使用户不能再点击

2、使用onsubmit事件处理器取消其他多余的表单提交

重置表单

重置表单可通过创建或者
调整属性为reset实现，比如：

ini 复制代码

<input type="reset" value="Reset Form">

当用户点击重置按钮，会触发重置事件，这个重置事件也提供取消事件，用法和之前类似

csharp 复制代码

form.addEventListener("reset", (event) => {
 event.preventDefault();
})

表单域

表单元素和页面其他元素一样，可以被同样的通过原生DOM方式访问，除此之外，所有表单元素都是元素集合的一部分，元素集合是有序的引用所有表单域，包含所有的, , , , and 元素。

常用表单域属性

disabled：布尔值，指代表单域是否disable

form：指向表单域的的所属，只读属性

name：域的名称

readOnly：布尔值，代表域是否是只读的

tabIndex：指代域的顺序

type：域的类型，比如checkbox，或者radio等

value：将被提交到服务器的表单域的值，对于文件表单，这个属性是只读属性

表单序列化

随着Ajax的出现，表单序列化成为了必要，表单可以被JavaScript序列化，使用type、name、value属性，一起序列化表单。

serialize()函数的基本实现：定义一个名为parts的数组，来保存将要创建字符串的各个部分，接下来for循环遍历每一个表单域，存储在域变量中，一但域引用被持有，就会通过Switch检查类型，序列化中涉及最多的是元素，无论是单选还是多选，如果有选项被选中，序列化都是循环所有的选项控制或者添加选项的值。编辑富文本 web应用最需要的功能之一：编辑富文本，所见即所得。HTML页面中元素的属性designMode，设置on或者off使文件可以进行编辑富文本。富文本交互大多数浏览器可以支持以下这些设置：backcolor、bold、copy、italic等