本课程将 HTML 表单分解为易于理解的部分。在接下来的几个模块中,您将学习 HTML 表单的工作原理以及如何在您的项目中有效地使用它们。使用Learn Forms 标志旁边的菜单窗格来导航模块。
您将学习如何构建基本的 HTML 表单、HTML 表单元素、设置表单样式、帮助用户重新输入数据、确保表单可访问且安全、如何测试您的表单以及特定表单类型。
每个模块都包含交互式演示和自我评估,供您测试您的知识。
本课程适合初学者和高级 HTML 开发人员。前几个模块帮助您开始构建 HTML 表单,其他模块提供更多详细信息。您可以从头到尾浏览整个系列,以大致了解 HTML 表单,或者选择您想要了解更多信息的特定模块。
先决条件
在开始本课程之前,您应该了解 HTML。对于 Web 开发新手,请查看 MDN 的HTML 简介课程,了解有关如何编写标记的所有信息。
演示
对于大多数演示,我们使用 CodePen。
查看演示时,您可能想知道样式来自哪里。我们使用包含在所有演示中的通用样式表,因此仅显示相关的样式。在 CodePen 中,您可以从“设置”中选择包含的 CSS 文件。
表单控件和表单字段
表单控件是一个允许用户交互和数据输入或选择的元素:<input>
、<select>
、<textarea>
或 <button>
。
有时表单字段用于指代表单控件,特别是用于文本输入的元素:<input>
和 <textarea>
。
您将学到什么
使用表单从用户处获取数据
通过本 form 元素简介,了解在 Web 上使用表单的基础知识。
帮助用户在表单中输入数据
您可以从中选择以构建表单的各种表单元素的概述。
帮助用户避免在表单中重复输入数据
使用户填写表单更加方便。
帮助用户在表单中输入正确的数据
了解如何在前端验证您的表单。
测试您的表单
了解如何测试和分析您的表单。
设计基础知识
了解如何构建用户友好的表单。
无障碍功能
如何构建包容性表单。
国际化和本地化
为国际数据格式做好准备,并学习如何为本地化规划您的表单。
安全和隐私
了解如何使您的表单安全并保护用户的隐私数据。
自动填充
全面了解自动填充和 autocomplete 属性。
如何测试表单的可用性
了解如何进行可用性测试并确保您的表单对所有用户都有效。
跨设备和平台测试表单
确保您的表单在不同的设备、浏览器、平台和不同的上下文中都能正常工作。
收集数据
了解如何衡量和分析您的表单。
深入了解 form 元素
全面了解 form 元素、何时应使用表单以及表单如何详细工作。
深入了解表单字段
了解您可以使用的不同表单字段,以及如何选择正确的表单元素。
深入了解表单属性
全面了解表单属性:如何修改屏幕键盘的布局、激活内置验证等等。
设置表单样式
使用 CSS 设置表单样式,同时确保它们对所有人保持可用和可读。
设置表单控件样式
了解如何使用 CSS 实现表单控件。
JavaScript
了解如何使用 JavaScript 来增强您的表单。
付款表单
通过构建更好的付款表单来提高转化率。
地址表单
帮助用户快速轻松地填写地址表单。
结论和后续步骤
帮助您采取后续步骤的更多资源。
那么,您准备好学习表单了吗?让我们开始吧。