Web 表单

本模块提供一系列文章,帮助您掌握 Web 表单的基础知识。Web 表单是与用户交互的强大工具——最常见的用法是收集用户数据,或允许用户控制用户界面。然而,由于历史和技术原因,充分发挥其潜力并不总是显而易见的。在下面列出的文章中,我们将涵盖 Web 表单的所有基本方面,包括标记其 HTML 结构、样式化表单控件、验证表单数据以及将数据提交到服务器。

预备知识

在开始学习本模块之前,您至少应该阅读我们的 HTML 入门指南。此时,您应该会发现 入门教程 易于理解,并且也能够使用我们的 基本原生表单控件 教程。

然而,精通表单需要的不只是 HTML 知识——您还需要学习一些特定的技术来样式化表单控件,并且需要一些脚本知识来处理诸如验证和创建自定义表单控件之类的事情。因此,在您查看下面列出的其他部分之前,我们建议您先去学习一些 CSSJavaScript

以上文本很好地表明了为什么我们将 Web 表单放在一个独立的模块中,而不是试图将其部分内容混入 HTML、CSS 和 JavaScript 的主题区域——表单元素比大多数其他 HTML 元素更复杂,并且它们还需要与相关的 CSS 和 JavaScript 技术紧密结合才能充分发挥其作用。

注意:如果你正在使用的电脑、平板电脑或其他设备无法创建文件,你可以尝试在在线编辑器中运行代码,例如CodePenJSFiddle

入门教程

你的第一个表单

我们系列的第一篇文章将带您体验创建 Web 表单的整个过程,包括设计一个简单的表单、使用正确的 HTML 元素实现它、通过 CSS 添加一些非常简单的样式,以及数据如何发送到服务器。

如何构建 Web 表单

在掌握了基础知识之后,我们现在将更详细地研究用于为表单的不同部分提供结构和含义的元素。

不同的表单控件

基本的原生表单控件

在本节中,我们将详细研究原始 HTML <input> 类型的 [功能],了解收集不同类型数据的可用选项。

HTML5 输入类型

在这里,我们将继续深入研究 <input> 元素,关注 HTML5 发布时提供的其他输入类型,以及它们提供的各种 UI 控件和数据收集增强功能。此外,我们还将研究 <output> 元素。

其他表单控件

接下来,我们将查看所有非 <input> 的表单控件和相关工具,例如 <select><textarea><meter><progress>

表单样式教程

为网页表单添加样式

本文档提供 CSS 表单样式入门指南,包括您可能需要了解的基本样式任务的所有基础知识。

高级表单样式

在这里,我们将研究一些更高级的表单样式技术,这些技术在尝试处理一些更难样式化的表单元素时需要使用。

可定制的 select 元素

本文档解释了如何结合使用专用的、现代的 HTML 和 CSS 功能来创建完全自定义的 <select> 元素。这包括完全控制样式化选择按钮、下拉选择器、箭头图标、当前选择的复选标记以及每个单独的 <option> 元素。

UI 伪类

介绍 UI 伪类,使 HTML 表单控件能够根据其当前状态进行定位。

验证和提交表单数据

客户端表单验证

发送数据是不够的——我们还需要确保用户输入的表单数据格式正确,以便成功处理,并且不会破坏我们的应用程序。我们还希望帮助用户正确填写我们的表单,并在使用我们的应用程序时避免感到沮丧。表单验证可以帮助我们实现这些目标——本文档将告诉您需要了解的内容。

发送表单数据

本文档将探讨当用户提交表单时会发生什么——数据去了哪里?我们如何处理它?我们还将探讨发送表单数据时的一些安全问题。

附加教程

以下文章不包含在学习路径中,但在您掌握了上述技术并想了解更多时,它们会非常有趣且有用。

如何构建自定义表单控件

在某些情况下,原生表单控件无法满足您的需求,例如,由于样式或功能原因。在这种情况下,您可能需要用纯 HTML 构建自己的表单控件。本文档将解释您将如何做到这一点以及在这样做时需要注意的事项,并提供一个实际案例研究。

通过 JavaScript 发送表单

本文档将探讨使用表单组装 HTTP 请求并通过自定义 JavaScript 发送它的方法,而不是标准的表单提交。它还将探讨您为什么要这样做,以及这样做可能产生的后果。(另请参阅 使用 FormData 对象。)

旧版浏览器中的 HTML 表单

如果您需要支持旧版浏览器中的 HTML 表单,本文档将提供技巧和窍门,以帮助缓解相关痛点。

用户输入方法和控制

本文档展示了用户与表单和其他 Web 内容交互的不同方式,并提供了管理用户输入、真实世界示例和进一步信息链接的建议。

另见