Web forms — Collecting data from users

本模块提供了一系列文章,可帮助您掌握Web表单的基本知识. Web表单是与用户进行交互的非常强大的工具-最常见的是,它们用于从用户收集数据或允许他们控制用户界面. 但是,由于历史和技术原因,如何充分利用它们并不总是很明显. 在下面列出的文章中,我们将介绍Web表单的所有基本方面,包括标记它们的HTML结构,样式化表单控件,验证表单数据以及将数据提交到服务器.

Prerequisites

在开始本模块之前,您至少应该通读我们的HTML简介 . 在这一点上,您应该找到易于理解的入门指南 ,并且还可以使用我们的基本本机表单控件指南.

但是,掌握表单不仅需要HTML知识,还需要学习一些特定的技术来设置表单控件的样式,还需要一些脚本知识来处理诸如验证和创建自定义表单控件之类的事情. 因此,在阅读下面列出的其他部分之前,我们建议您先学习一些CSSJavaScript .

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

注意 :如果您在无法创建自己的文件的计算机/平板电脑/其他设备上工作,则可以尝试(大多数)在线编码程序中的代码示例,例如JSBinGlitch .

Introductory guides

Your first form
The first article in our series provides your very first experience of creating a web form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.
How to structure a web form
在不了解基础知识的情况下,我们现在将更详细地研究用于为表单的不同部分提供结构和含义的元素.

The different form controls

Basic native form controls
我们从详细了解原始HTML <input>类型的功能开始,并查看可用于收集不同类型数据的选项的开始.
The HTML5 input types
在这里,我们继续深入研究<input>元素,查看发布HTML5时提供的其他输入类型,以及它们提供的各种UI控件和数据收集增强功能. 另外,我们看一下<output>元素.
Other form controls
接下来,我们看一下所有非<input>表单控件和关联的工具,例如<select><textarea><meter><progress> .

Form styling guides

Styling web forms
本文对CSS样式表进行了介绍,其中包括基本样式任务可能需要了解的所有基本知识.
Advanced form styling
在这里,我们看一些更高级的表单样式化技术,这些样式化技术在尝试处理一些较难样式化的表单元素时需要使用.
UI pseudo-classes
UI伪类简介,使HTML表单控件可以根据其当前状态作为目标.

Validating and submitting form data

Client-side form validation
仅发送数据还不够-我们还需要确保用户输入表单的数据格式正确才能成功处理,并且不会破坏我们的应用程序. 我们还希望帮助我们的用户正确填写我们的表格,而不会在尝试使用我们的应用程序时感到沮丧. 表单验证可帮助我们实现这些目标-本文告诉您您需要了解的内容.
Sending form data
本文着眼于用户提交表单时会发生什么—数据将流向何处,以及到达表单后如何处理? 我们还将研究与发送表单数据相关的一些安全问题.

Advanced articles

以下文章对学习路径不是必不可少的,但是当您精通上述技术并想了解更多信息时,它们将变得有趣而有用.

How to build custom form controls
您会遇到某些情况,例如,由于样式或功能的原因,本机表单窗口小部件无法提供所需的内容. 在这种情况下,您可能需要使用原始HTML构建自己的表单窗口小部件. 本文通过一个实际的案例研究来说明您将如何执行此操作以及在执行此操作时需要注意的注意事项.
Sending forms through JavaScript
本文探讨了使用表单来组合HTTP请求并通过自定义JavaScript(而不是标准表单提交)发送请求的方法. 它还探讨了为什么要这样做以及这样做的含义. (另请参见使用FormData对象 .)
CSS property compatibility table for form controls
上一篇文章提供了一个方便的参考,使您可以查找哪些CSS属性与哪些表单元素兼容.

See also