表单的理解

由也_
200 阅读3分钟

这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战

前言

吃饱饭才有力气写代码~

今天学一学表单~JavaScript较早的一个用途是承担一部分服务器端的表单处理的责任。由于不能直接使用表单解决问题，因此开发者不得不用JavaScript既做表单验证，又用于增强标准表单控件的默认行为。

表单基础

Web表单在HTML中用

<form>

表示，在JavaScript中则以HTMLFORMElement类型表示；它继承于HTMLElement类型，所以有与其它HTML元素一样的默认属性，此外它也有一些自己特有的属性和方法：

  • acceptCharset: 服务器可以接收的字符集，等价于HTML的accept-charset属性
  • action: 请求的URL，等价于HTML的action属性
  • elements: 表单中所有控件的HTMLCollection
  • enctype: 请求的编码类型，等价于HTML的enctype属性
  • length: 表单中控件的数量
  • method: HTTP请求的方法类型，通常是get或者是post，等价于HTML的target属性
  • name: 表单的名字，等价于HTML的name属性
  • reset(): 把表单字段重置为各自的默认值
  • submit(): 提交表单
  • target: 用于发送请求和接收响应的窗口的名字，等价于HTML的target属性 最常用的取得对表单元素的引用的方法：

把表单当作普通元素为它指定一个id属性，从而可以使用getElementById()来获取表单；

let form = document.getElementById("form1");

此外还可以使用document.forms集合可以获取页面上所有的表单元素，然后进一步使用数字索引或表单中的名字来访问特定的表单，比如：

let firstForm = document.forms[0];
let secondForm = document.forms["form2"];

提交表单

表单是通过用户点击提交按钮或图片按钮的方式提交的，提交按钮可以使用type属性为"submit"的input 或 button 元素来定义，图片按钮可以使用type属性为"image"的input元素来定义。

<input type = "submit" value = "Submit Form">
<button type = "submit">Submit Form</button>
<input type = "image" src = "gaoxiao.gif">

以这种方式提交表单会在向服务器发送请求之前触发submit事件，这样就提供了一个验证表单数据的机会，可以根据验证结果决定是否真的提交，阻止这个事件的默认行为可以取消提交表单：

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

调用preventDefault()方法可以阻止表单提交，通常在表单数据无效以及不应该发送到服务器时可以这样处理。
当然也可以在JavaScript中用submit()方法提交表单，可以在任何时候调用这个方法提交，而且就算表单中不存在提交按钮也不影响提交：

let form = document.getElementById("form1");
form.submit();

通过submit()提交表单时submit事件不会触发，所以要在调用这个方法之前做数据验证。

注意

表单提交的最大问题就是可能会重复提交，如果提交表单之后没有什么反应，那么有些人可能会多次点击提交按钮，结果可能造成服务器重复处理请求，甚至可能比如说用户在购物造成多次下单；解决这个问题的方法主要有两种：

  • 在表单提交后禁用提交按钮
  • 通过onsubmit事件处理程序消失之后的表单提交
avatar
文章
阅读
粉丝