Web 表单构建块

本模块提供了一系列文章，帮助你掌握 Web 表单的基础知识。Web 表单是与用户交互的非常强大的工具 - 最常见的是它们用于收集用户的数据，或允许他们控制用户界面。然而，由于历史和技术原因，如何充分利用它们的潜力并不总是显而易见的。在下面列出的文章中，我们将介绍 Web 表单的所有基本方面，包括标记 HTML 结构、设置表单控件的样式、验证表单数据以及向服务器提交数据。

¥This module provides a series of articles that will help you master the essentials of web forms. Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. However, for historical and technical reasons, it's not always obvious how to use them to their full potential. In the articles listed below, we'll cover all the essential aspects of Web forms including marking up their HTML structure, styling form controls, validating form data, and submitting data to the server.

先决条件

¥Prerequisites

在开始本模块之前，你至少应该完成我们的 HTML 简介。此时你应该会发现入门指南很容易理解，并且也能够使用我们的基本的原生表单控件指南。

¥Before starting this module, you should at least work through our Introduction to HTML. At this point you should find the Introductory guides easy to understand, and also be able to make use of our Basic native form controls guide.

然而，掌握表单不仅仅需要 HTML 知识，你还需要学习一些特定的技术来设计表单控件的样式，并且需要一些脚本知识来处理验证和创建自定义表单控件等事情。因此，在你查看下面列出的其他部分之前，我们建议你先学习一些 CSS 和 JavaScript。

¥Mastering forms however requires more than just HTML knowledge — you also need to learn some specific techniques to style form controls, and some scripting knowledge is required to handle things like validation and creating custom form controls. Therefore, before you look at the other sections listed below we'd recommend that you go away and learn some CSS and JavaScript first.

上面的文本很好地说明了为什么我们将 Web 表单放入其自己的独立模块中，而不是尝试将其中的一些内容混合到 HTML、CSS 和 JavaScript 主题区域中 — 表单元素比大多数其他 HTML 更复杂元素，并且它们还需要相关 CSS 和 JavaScript 技术的紧密结合才能充分利用它们。

¥The above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the HTML, CSS, and JavaScript topic areas — form elements are more complex than most other HTML elements, and they also require a close marriage of related CSS and JavaScript techniques to get the most out of them.

注意：如果你正在使用无法创建自己的文件的计算机/平板电脑/其他设备，你可以尝试在线编码程序（例如 JSBin 或 Glitch）中的（大部分）代码示例。

¥Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

入门指南

¥Introductory guides

你的第一个表格: 我们系列的第一篇文章为你提供了创建 Web 表单的初次体验，包括设计一个简单的表单、使用正确的 HTML 元素实现它、通过 CSS 添加一些非常简单的样式以及如何将数据发送到服务器。
如何构建网络表单: 了解了基础知识后，我们现在更详细地了解用于为表单的不同部分提供结构和含义的元素。

不同的表单控件

¥The different form controls

基本的原生表单控件: 我们从本节开始，详细了解原始 HTML <input> 类型的功能，了解可用于收集不同类型数据的选项。
HTML5 输入类型: 在这里，我们继续深入研究 <input> 元素，查看 HTML5 发布时提供的附加输入类型，以及它们提供的各种 UI 控件和数据收集增强功能。此外，我们还查看 <output> 元素。
其他表单控件: 接下来我们看一下所有非 <input> 表单控件和相关工具，例如 <select>、<textarea>、<meter> 和 <progress>。

表单样式指南

¥Form styling guides

设计网页表单: 本文介绍了如何使用 CSS 设计表单，包括基本样式任务可能需要了解的所有基础知识。
高级表单样式: 在这里，我们了解一些更高级的表单样式技术，在尝试处理一些更难以设计样式的表单元素时需要使用这些技术。
UI 伪类: UI 伪类简介，使 HTML 表单控件能够根据其当前状态进行定位。

验证并提交表单数据

¥Validating and submitting form data

客户端表单验证: 发送数据还不够 - 我们还需要确保用户输入表单的数据格式正确，才能成功处理数据，并且不会破坏我们的应用。我们还希望帮助我们的用户正确填写我们的表单，并且在尝试使用我们的应用时不会感到沮丧。表单验证帮助我们实现这些目标 - 本文告诉你需要了解的内容。
发送表单数据: 本文着眼于用户提交表单时会发生什么 - 数据去了哪里，以及当数据到达那里时我们如何处理它？我们还研究了与发送表单数据相关的一些安全问题。

进阶文章

¥Advanced articles

以下文章对于学习路径来说并不是必不可少的，但当你掌握了上述技术并想了解更多信息时，它们将变得有趣且有用。

¥The following articles aren't essential to the learning pathway, but they'll prove interesting and useful when you've mastered the above techniques and want to know more.

如何构建自定义表单控件: 你会遇到一些情况，原生表单小部件无法提供你所需要的内容，例如因为样式或功能。在这种情况下，你可能需要使用原始 HTML 构建自己的表单小部件。本文通过实际案例研究解释了如何执行此操作以及执行此操作时需要注意的事项。
通过 JavaScript 发送表单: 本文着眼于使用表单组装 HTTP 请求并通过自定义 JavaScript（而不是标准表单提交）发送它的方法。它还着眼于你为什么要这样做，以及这样做的影响。（另见使用 FormData 对象。）
表单控件的 CSS 属性兼容性表: 最后一篇文章提供了一个方便的参考，允许你查找哪些 CSS 属性与哪些表单元素兼容。

也可以看看

¥See also