这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战
前言
表单是前端程序员必不可少的要处理解决的，今天我们来谈谈我一些对表单的理解JavaScript 较早的一个用途是承担一部分服务器端表单处理的责任。虽然 Web 和 JavaScript 都已经发了很多年,但 Web 表单的变化不是很大。由于不能直接使用表单解决问题,因此开发者不得不使用 Script 既做表单验证,又用于增强标准表单控件的默认行为。
表单基础
Web 表单在 HTML 中以< form >元素表示,在 JavaScript 中则以 HTMLFormElement 类型表示。 HTMLFormElement 类型继承自 HTMLElement 类型,因此拥有与其他 HTML 元素一样的默认属性。不过, HTMLFormElement 也有自己的属性和方法。
- acceptCharset :服务器可以接收的字符集,等价于 HTML 的 accept — charset 属性。
- action :请求的 URL ,等价于 HTML 的 action 属性。
- elements :表单中所有控件的 HTMLCollectiono
- enctype :请求的编码类型,等价于 HTML 的 enctype 属性。
- length :表单中控件的数量。
- method : HTTP 请求的方法类型,通常是" get "或" post ",等价于 HTML 的 method 属性。
- name :表单的名字,等价于 HTML 的 name 属性。
- reset:把表单字段重置为各自的默认值。
- submit:提交表单。
- target :用于发送请求和接收响应的窗口的名字,等价于 HTML 的 target 属性。 有几种方式可以取得对< form >元素的引用。最常用的是将表单当作普通元素为它指定一个 id 属性,从而可以使用 getElement ById ()来获取表单,比如: let form = document , getElementById (＂form1"); 此外,使用 document , forms 集台可以狭取贝面上所有的表单元素。然后,可以进一步使用数字索引或表单的名字( name )来访回特定的表单。
若通过getElementBy Id ()来获取表单,比如:
1et form = document . getElement ById (＂form1");
此外,使用 document . forms 集合可以获取页面上所有的表单元素。然后,可以进一步使用数字素引或表单的名字( name )来访问特定的表单。比如
取得页面中的第一个表单
let firstForm = document . forms [0];
//取得名字为"form2"的表单
let myForm = document . forms [＂form2＂];
较早的浏览器,或者严格向后兼容的浏览器,也会把每个表单的 name 作为 document 对象的属性例如,名为form2的表单可以通过 document .form2来访问。不推荐使用这种方法,因为容易出错而且这些属性将来可能会被浏览器删除。 注意,表单可以同时拥有 id 和 name ,而且两者可以不相同。
提交表单 表单是通过用户点击提交按钮或图片按钮的方式提交的。提交按钮可以使用 type 属性为" submit "的< input >或< button >元素来定义,图片按钮可以使用 type 属性为" image "的< input >元素来定义。点击下面例子中定义的所有按钮都可以提交它们所在的表单:
