提交表单

提交表单

大多数网站和应用程序都包含 Web 表单。像 DoWebsitesNeedToLookExactlyTheSameInEveryBrowser.com 这样的笑话网站可能没有表单,但即使是最初作为愚人节玩笑的 MachineLearningWorkshop.com (MLW) 也有表单,尽管是假的。MLW 的主要“行动号召”是机器注册参加研讨会的表单。此表单包含在

元素中。

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

HTML 非常强大。本节重点介绍 HTML 的强大功能,涵盖 HTML 在不添加 JavaScript 的情况下可以执行的操作。在客户端使用表单数据以某种方式更新 UI 通常涉及 CSS 或 JavaScript,此处不讨论这些内容。有一个完整的学习表单课程。我们不会在此处重复该部分,但我们将介绍几个表单控件以及赋予它们权力的 HTML 属性。

通过表单,您可以让用户与您的网站或应用程序互动,验证输入的信息,并将数据提交到服务器。HTML 属性可以启用要求用户选择表单控件或输入值。HTML 属性可以定义值必须匹配才能有效的特定条件。当用户尝试提交表单时,所有表单控件值都将通过 客户端约束验证,并且可以阻止提交,直到数据与所需条件匹配;所有这些都不需要 JavaScript。您也可以关闭此功能:在 上设置 novalidate 属性,或者更常见的是在按钮上设置 formnovalidate,保存表单数据以供稍后完成,从而阻止验证。

提交表单

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

对于非常简单的表单,您需要一个 元素,其中包含一些表单输入,以及一个提交按钮。但是,提交表单不仅仅如此。

元素的属性设置了 HTTP 方法,表单通过该方法提交,以及处理表单提交的 URL。是的,表单可以提交、处理,并且可以加载新页面,而无需任何 JavaScript。 元素 就是如此强大。

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

发送的数据由表单的各种表单控件的名称/值对组成。默认情况下,这包括嵌套在表单中且具有 name 的所有表单控件。但是,使用 form 属性,可以包含 外部的表单控件,并省略嵌套在 中的表单控件。form 属性在表单控件和

上受支持,它将与控件关联的表单的 id 作为其值,不一定是控件嵌套在其中的表单。这意味着表单控件不需要物理嵌套在 中。

警告: 但请注意:使用 form 属性可能会导致表单控件与其表单取消关联,方法是将其包含在空值或错误值中。

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

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

还有一种 DIALOG 方法。如果 位于

中,则提交表单将关闭对话框;尽管有提交事件,但数据既未清除也未提交。同样,无需 JavaScript。这在 对话框部分中讨论。请注意,由于这不会提交表单,因此您可能需要在提交按钮上同时包含 formmethod="dialog" 和 formnovalidate。

表单按钮可以具有比本节开头描述的属性更多的属性。如果按钮包含 formaction、formenctype、formmethod、formnovalidate 或 formtarget 属性,则在激活表单提交的按钮上设置的值优先于在 上设置的 action、enctype、method 和 target。约束验证发生在表单提交之前,但前提是在激活的提交按钮上既没有 formnovalidate,也没有在 上设置 novalidate。

要捕获用于提交表单的按钮,请为按钮指定一个 name。没有名称或值的按钮不会随表单数据一起在表单提交时发送。

提交表单后

当用户提交已完成的在线表单时,相关表单控件的名称和值将被提交。名称是 name 属性的值。值来自 value 属性的内容或用户输入或选择的值。