提交表单

提交表单

大多数网站和应用都包含网络表单。笑话网站(例如 DoWebsitesNeedToLookExactlyTheSameInEveryBrowser.com)可能没有表单,但即使是起源于愚人节笑话的 MachineLearningWorkshop.com (MLW) 也有表单,尽管是虚假表单。MLW 的主要“号召性用语”是机器注册表单,供机器注册参加研讨会。此表单包含在

元素中。

HTML 元素用于标识包含用于提交信息的交互式控件的文档地标。嵌套在 中,您会找到构成该表单的所有交互式(和非交互式)表单控件。

HTML 功能强大。本部分重点介绍 HTML 的强大功能,介绍 HTML 在不添加 JavaScript 的情况下可实现的功能。

在客户端使用表单数据以某种方式更新界面通常涉及 CSS 或 JavaScript,本文不会对此进行讨论。您可以完整学习“了解表单”课程。我们不会在此一一列出,但会介绍几个表单控件以及支持这些控件的 HTML 属性。

借助表单,您可以让用户与您的网站或应用互动、验证输入的信息,并将数据提交到服务器。HTML 属性可以让您要求用户选择表单控件或输入值。HTML 属性可以定义值必须符合的特定条件,以便其有效。当用户尝试提交表单时,所有表单控件值都会经过客户端约束条件验证,并且在数据与所需条件匹配之前,系统会阻止提交;所有这些都无需 JavaScript。您还可以关闭此功能:在 上设置 novalidate 属性(更常见的是,在按钮上设置 formnovalidate),保存表单数据以供日后完成,从而防止验证。

提交表单

当用户激活表单中嵌套的提交按钮时,表单会提交。将 用于按钮时,“value”是按钮的标签,并显示在按钮中。使用

对于非常简单的表单,您需要一个 元素(其中包含一些表单输入)和一个提交按钮。不过,提交表单并非如此。

元素的属性用于设置提交表单所用的 HTTP 方法和处理表单提交的网址。可以,无需任何 JavaScript 即可提交、处理表单,以及加载新页面。 元素就是这么强大。

元素的 action 和 method 属性值分别定义了用于处理表单数据的网址和用于提交数据的 HTTP 方法。默认情况下,表单数据会发送到当前页面。否则,请将 action 属性设置为应将数据发送到的网址。

发送的数据由表单的各种表单控件的名称/值对组成。默认情况下,这包括嵌套在表单中且具有 name 的所有表单控件。不过,借助 form 属性,您可以在 外部添加表单控件,并忽略嵌套在 中的表单控件。在表单控件和

上支持,form 属性将其值作为其关联控件的 id 值,而不一定是其嵌套的形式。这意味着表单控件无需实际嵌套在 中。

警告:不过请注意:使用 form 属性时,如果将表单控件包含在空值或错误值中,则可以将表单控件与其表单解除关联。

method 属性定义请求的 HTTP 协议:通常为 GET 或 POST。使用 GET 时,表单数据会作为 name=value 对的参数字符串发送,并附加到 action 的网址。

使用 POST 时,数据会附加到 HTTP 请求的正文中。在发送安全数据(如密码和信用卡信息)时,请始终使用 POST。

此外,还有 DIALOG 方法。如果 位于

内,提交表单将关闭对话框;虽然数据既未清除也未提交,但会触发提交事件。同样,无需 JavaScript。对话框部分将对此进行讨论。请注意,由于这不会提交表单,因此您可能需要在提交按钮上同时添加 formmethod="dialog" 和 formnovalidate。

表单按钮可以具有本部分开头所述的属性以外的其他属性。如果按钮包含 formaction、formenctype、formmethod、formnovalidate 或 formtarget 属性,则用于启用表单提交的按钮上设置的值优先于 上设置的 action、enctype、method 和 target。限制条件验证发生在表单提交之前,但前提是已启用的提交按钮上没有 formnovalidate, 上没有 novalidate。

如需捕获用于提交表单的按钮,请为该按钮分配 name。在表单提交时,没有名称或值的按钮不会随表单数据一起发送。

提交表单后

当用户提交已填好的在线表单时,系统会提交相关表单控件的名称和值。名称是 name 属性的值。这些值来自 value 属性的内容,或来自用户输入或选择的值。