Web 表单在 HTML 中以
窗体顶端
元素表示,在 JavaScript 中则以 HTMLFormElement 类型表示。 HTMLFormElement 类型继承自 HTMLElement 类型,因此拥有与其他 HTML 元素一样的默认属性。不 过,HTMLFormElement 也有自己的属性和方法。 acceptCharset:服务器可以接收的字符集,等价于 HTML 的 accept-charset 属性。
action:请求的 URL,等价于 HTML 的 action 属性。
elements: 表单中所有控件的 HTMLCollection。
enctype:请求的编码类型,等价于 HTML 的 enctype 属性。
length:表单中控件的数量。
method:HTTP 请求的方法类型,通常是"get"或"post",等价于 HTML 的 method 属性。
name:表单的名字,等价于 HTML 的 name 属性。
reset():把表单字段重置为各自的默认值。
submit():提交表单。
target:用于发送请求和接收响应的窗口的名字,等价于 HTML 的 target 属性。 有几种方式可以取得对元素的引用。最常用的是将表单当作普通元素为它指定一个 id 属 性,从而可以使用 getElementById()来获取表单,比如:
let form = document.getElementById("form1");
此外,使用 document.forms 集合可以获取页面上所有的表单元素。然后,可以进一步使用数字 索引或表单的名字(name)来访问特定的表单。比如:
// 取得页面中的第一个表单 let firstForm = document.forms[0];
// 取得名字为"form2"的表单 let myForm = document.forms["form2"];
窗体底端
窗体底端
较早的浏览器,或者严格向后兼容的浏览器,也会把每个表单的 name 作为 document 对象的属性。 例如,名为"form2"的表单可以通过 document.form2 来访问。不推荐使用这种方法,因为容易出错, 而且这些属性将来可能会被浏览器删除。
注意,表单可以同时拥有 id 和 name,而且两者可以不相同。
2、提交表单
表单是通过用户点击提交按钮或图片按钮的方式提交的。提交按钮可以使用 type 属性为"submit" 的或元素来定义,图片按钮可以使用 type 属性为"image"的元素来定义。 点击下面例子中定义的所有按钮都可以提交它们所在的表单: Submit Form
如果表单中有上述任何一个按钮,且焦点在表单中某个控件上,则按回车键也可以提交表单。 (textarea 控件是个例外,当焦点在它上面时,按回车键会换行。)注意,没有提交按钮的表单在按回 车键时不会提交。
以这种方式提交表单会在向服务器发送请求之前触发 submit 事件。这样就提供了一个验证表单数 据的机会,可以根据验证结果决定是否真的要提交。阻止这个事件的默认行为可以取消提交表单。例如, 下面的代码会阻止表单提交: letform=document.getElementById("myForm"); form.addEventListener("submit", (event) => { // 阻止表单提交 event.preventDefault(); });
调用 preventDefault()方法可以阻止表单提交。通常,在表单数据无效以及不应该发送到服务 器时可以这样处理。
当然,也可以通过编程方式在 JavaScript 中调用 submit()方法来提交表单。可以在任何时候调用 这个方法来提交表单,而且表单中不存在提交按钮也不影响表单提交。下面是一个例子:
let form = document.getElementById("myForm");
// 提交表单
form.submit();
通过 submit()提交表单时,submit 事件不会触发。因此在调用这个方法前要先做数据验证。
表单提交的一个最大的问题是可能会提交两次表单。如果提交表单之后没有什么反应,那么没有耐 心的用户可能会多次点击提交按钮。结果是很烦人的(因为服务器要处理重复的请求),甚至可能造成 损失(如果用户正在购物,则可能会多次下单)。解决这个问题主要有两种方式:在表单提交后禁用提 交按钮,或者通过 onsubmit 事件处理程序取消之后的表单提交
提交表单POST请求
最新推荐文章于 2024-07-15 21:55:24 发布