Web 表单构建块本模块提供的系列文章意在帮助你掌握 Web 表单的基本知识。Web 表单是用于和用户交互的强大工具——其常用于收集用户数据和控制用户界面。然而,出于历史和技术原因,如何发挥 Web 表单的全部潜力并不总是显而易见的。在下面的文章中,你会学习 Web 表单的全部基本内容,包括:标记表单的 HTML 结构、为表单控件添加样式、验证表单数据,以及向服务器提交数据。
前提在开始本模块之前,你应该至少学习过 HTML 简介。此时此刻,你应该会发现入门指南很容易理解,并且也能够使用基本的原生表单控件指南。
然而,掌握表单需要的不仅仅是 HTML 知识——你还需要学习一些为表单控件添加样式的特定技术,一些用于处理诸如验证和创建自定义表单控件等内容的脚本知识。因此,在学习下列其他文章之前,我们会建议你先离开去学习一些 CSS 和 JavaScript。
以上内容很好地表明了我们为什么将 Web 表单放在单独模块中,而不是将其混入 HTML、CSS 和 JavaScript 主题中——表单元素比大多数其他的 HTML 元素要复杂,并且它们还需要与相关的 CSS 和 JavaScript 技术紧密配合才能充分利用。
备注:
如果你工作的计算机/掌上电脑/其他设备无法创建文件,可以使用在线编码程序(例如,JSBin 或者 Glitch)实验(大多数)代码示例。
入门指南
你的第一个表单
本系列的第一篇文章让你拥有第一次创建 Web 表单的体验,包括,设计一个简单表单、使用正确的 HTML 元素实现表单、通过 CSS 添加一些非常简单的样式,以及向服务器发送数据。
如何构造 Web 表单
已经有了基础知识,现在深入学习为表单的不同部分提供结构和含义的元素。
不同的表单控件
基本的原生表单控件
从详细学习原始 HTML 类型的功能开始,同时学习在收集不同类型的数据时,还有哪些可用的选择。
HTML5 input 类型
继续深入学习 元素,了解 HTML5 发布时提供的其他 input 类型,以及这些类型提供的各种 UI 控件和数据收集增强功能。此外,还会学习
其他表单控件
接下来学习所有非 表单控件,以及相关的工具,例如:
表单样式指南
为 Web 表单添加样式
这篇文章介绍如何使用 CSS 为表单添加样式,包括完成基本样式任务所需了解的全部基础知识。
高级表单样式
在这里学习一些更高级的表单样式技术,用于处理一些很难设置样式的表单元素。
UI 伪类
一篇 UI 伪类的介绍——根据表单的当前状态定位到 HTML 表单控件。
验证和提交表单数据
客户端表单验证
仅仅发送数据还不够——还需要确保用户填写的表单数据的格式是正确的,以便后续能正确处理,也要确保数据不会破坏应用程序。我们也想帮助用户正确填写表单,让用户在使用应用程序时不会感到困扰。表单验证帮助我们实现这些目标——这篇文章讲解你需要了解的内容。
发送表单数据
这篇文章讨论的是当用户提交表单时,会发生什么——表单数据的去向,以及当表单数据到达之后如何处理?还研究一些与发送表单数据有关联的安全问题。
高级文章以下文章对于学习路径来说没那么重要,但是当你掌握了上述技术并想了解更多内容时,它们会变得有趣且实用。
如何构建自定义表单控件
在某些情况下,出于样式或功能的原因,原生表单微件无法提供你所需的东西。在这种情况下,你会需要使用原生 HTML 构建表单微件。这篇文章通过一个案例研究说明你将如何做到这一点,以及在实际操作时需要注意的事项。
通过 JavaScript 发送表单
这篇文章将讨论如何使用表单来构建 HTTP 请求,并通过自定义的 JavaScript 而不是标准的表单提交发送请求。这篇文章还说明为什么要这么做,以及这样做的意图。(参见使用 FormData 对象。)
表单控件的 CSS 属性兼容性表
最后一篇文章提供的参考意在方便查找 CSS 属性与表单元素的兼容性关系。
参见
HTML 表单元素参考
HTML 类型参考
HTML 属性参考
用户输入方式和控件