Web 表单指南
这个模块提供了一系列帮助你掌握 web 表单的文章。web 表单是与用户交互的强大工具,它们经常用于收集用户的数据,或允许他们控制用户界面。然而,由于历史和技术上的原因,如何充分发挥它们的潜力并不总是显而易见的。在下方列出的文章中,我们将介绍 Web 表单的各个方面:HTML 结构、样式、验证表单数据,以及提交数据到服务器。
前提
在开始这个模块之前,你至少应该熟悉对 HTML 的介绍系列。此时此刻,你应该会发现基本指南很容易理解,并且能够使用我们的原生表单控件指南。
然而,掌握表单需要的不仅仅是 HTML 知识——你还需要学习一些特定的技术来设置表单控件的样式,并且需要一些编码知识来处理诸如验证和创建自定义表单控件之类的事情。因此,在你查看下面列出的其他部分之前,我们建议你先离开,并学习一些 CSS 和 JavaScript。
以上内容明确地说明了为什么我们将 web 表单独立放在一个模块中,而不是将其与 HTML、CSS 和 JavaScript 这些模块放在一起——表单元素比绝大多数其他的 HTML 元素都要复杂,并且它们还需要与相关的 CSS 和 JavaScript 技术紧密集合才能充分利用它们。
基本指南
- 你的第一个表单
-
本系列的第一篇文章提供了第一次创建 HTML 表单的经验,包括设计一个简单表单、使用正确的 HTML 元素实现它、通过 CSS 添加一些非常简单的样式,以及如何将数据发送到服务器。
- 如何构造 HTML 表单
-
有了基础知识,我们现在更详细地了解了用于为表单的不同部分提供结构和意义的元素。
不同的表单控件
- 原生表单控件
-
我们从详细了解原始 HTML
<input>
元素的类型开始,同时学习在收集不同类型数据时可用的选择。 - HTML5 input 的类型
-
在这里,我们深入挖掘
<input>
元素,了解 HTML5 发布时提供的其他 input 类型,以及它们提供的各种 UI 弓箭和数据收集增强功能。此外,我们可以了解<output>
元素。 - 其他表单控件
-
接下来,我们学习所有非
<input>
表单控件,以及相关的工具,如:<select>
、<textarea>
、<meter>
和<progress>
。
表单样式指南
验证和提交表单数据
高级指南
以下文章对于学习路径来说没那么重要,但是当你掌握了上述技术并向了解更多内容时,它们会变得有趣且实用。
- 如何构建自定义表单控件
-
在某些情况下,可能出于样式或功能的原因,原生表单部件无法提供你所需要的东西。在这种情况下,你可能需要使用原生 HTML 构建自己的表单小部件。本文将讲述一个实例,说明你将如何做到这一点,以及在实际操作时需要注意的事项。
- 通过 JavaScript 发送表单
-
本文将讨论如何使用表单来构建 HTTP 请求,并通过定制的 JavaScript 发送它,而不是标准的表单提交。它还说明了为什么要这么做,以及这样做的意义。(请参阅使用 FormData 对象。)
- 表单控件的 CSS 属性兼容性表
-
最后一篇文章提供了一个方便的参考,以确定 CSS 属性与表单元素的兼容性关系。