本模块提供了一系列文章，将帮助您掌握 Web 表单的基础知识。Web 表单是与用户交互的非常强大的工具 — 最常见的是它们用于从用户收集数据，或允许他们控制用户界面。但是，由于历史和技术原因，如何充分利用它们并不总是显而易见的。在下面列出的文章中，我们将介绍 Web 表单的所有基本方面，包括标记其 HTML 结构、设置表单控件的样式、验证表单数据以及将数据提交到服务器。
希望成为前端 Web 开发人员？
我们整理了一门课程，其中包括您实现目标所需的所有基本信息。
立即开始
先决条件
在开始本模块之前，您至少应该完成我们的HTML简介。此时，您应该会发现介绍性指南易于理解，并且还能够使用我们的基本本机窗体控件指南。
但是，掌握表单不仅需要 HTML 知识，还需要学习一些特定技术来设置表单控件的样式，并且需要一些脚本知识来处理验证和创建自定义表单控件等操作。因此，在你看下面列出的其他部分之前，我们建议你先去学习一些CSS和JavaScript。
上面的文本很好地表明了为什么我们将Web表单放入它自己的独立模块中，而不是试图将其中的一部分混合到HTML，CSS和JavaScript主题领域 - 表单元素比大多数其他HTML元素更复杂，它们还需要相关CSS和JavaScript技术的紧密结合才能充分利用它们。
注意：如果您在计算机/平板电脑/其他设备上工作，而您无法创建自己的文件，则可以在在线编码程序（如JSBin或Glitch）中尝试（大多数）代码示例。
介绍性指南
您的第一个表单
我们系列的第一篇文章提供了您创建Web表单的第一次体验，包括设计一个简单的表单，使用正确的HTML元素实现它，通过CSS添加一些非常简单的样式，以及如何将数据发送到服务器。
如何构建 Web 表单
有了基础知识，我们现在更详细地研究了用于为表单的不同部分提供结构和含义的元素。
不同的窗体控件
基本本机窗体控件
本节开始时，我们将详细查看原始 HTML <input> 类型的功能，了解哪些选项可用于收集不同类型的数据。
HTML5 输入类型
在这里，我们继续深入研究该元素，查看HTML5发布时提供的其他输入类型，以及它们提供的各种UI控件和数据收集增强功能。此外，我们还将查看 <输出>元素。<input>
其他窗体控件
接下来，我们来看看所有非窗体控件和关联的工具，例如<select><textarea>，<meter>和<progress>。<input>
表单样式指南
设置 Web 表单的样式
本文介绍了使用 CSS 设置窗体的样式，包括基本样式设置任务可能需要了解的所有基础知识。
高级表单样式
在这里，我们来看看在尝试处理一些更难设置样式的表单元素时需要使用的一些更高级的表单样式技术。
UI 伪类
介绍使 HTML 窗体控件能够根据其当前状态确定其目标的 UI 伪类。
验证和提交表单数据
客户端表单验证
发送数据是不够的 - 我们还需要确保用户输入到表单中的数据采用正确的格式才能成功处理它，并且它不会破坏我们的应用程序。我们还希望帮助我们的用户正确填写我们的表单，而不是在尝试使用我们的应用程序时感到沮丧。表单验证有助于我们实现这些目标 — 本文将告诉您您需要了解的内容。
发送表单数据
本文将介绍当用户提交表单时会发生什么 - 数据去哪里，以及当它到达那里时我们如何处理它？我们还将介绍与发送表单数据相关的一些安全问题。
高级文章
以下文章对于学习路径不是必需的，但是当您掌握了上述技术并想了解更多信息时，它们将证明是有趣和有用的。
如何生成自定义窗体控件
您会遇到一些本机表单小部件无法提供所需内容的情况，例如，由于样式或功能。在这种情况下，您可能需要使用原始 HTML 构建自己的表单小部件。本文通过一个实际的案例研究解释了您如何执行此操作以及执行此操作时需要注意的注意事项。
通过 JavaScript 发送表单
本文介绍如何使用表单来组装HTTP请求并通过自定义JavaScript（而不是标准表单提交）发送它。它还会查看您为什么要这样做，以及这样做的影响。（另请参见使用 FormData 对象。
窗体控件的 CSS 属性兼容性表
最后一篇文章提供了一个方便的参考，允许您查找哪些CSS属性与哪些表单元素兼容。
