欢迎学习表单!

本课程将 HTML 表单分为易于理解的部分。 在接下来的几个单元中,您将了解 HTML 表单的工作原理,以及如何在您的项目中有效使用 HTML 表单。 使用学习表单徽标旁边的菜单窗格可浏览各个模块。

您将了解如何构建基本 HTML 表单、介绍 HTML 表单元素、设置表单样式、帮助用户重新输入数据、确保表单可访问且安全、如何测试表单,以及特定的表单类型。

每个单元都包含互动式演示和自我评估,方便您测试自己的知识掌握情况。

本课程适合初级和高级 HTML 开发者。 前几个单元可帮助您开始构建 HTML 表单,其他单元会详细介绍。您可以完整浏览本系列课程,以便大致了解 HTML 表单,也可以选择特定的单元来详细了解相关信息。

前提条件

在开始学习本课程之前,您应该先了解 HTML。 如果您刚开始接触 Web 开发,请查看 MDN 中的 HTML 简介课程,以了解如何编写标记。

样本歌曲

对于大多数演示,我们使用 CodePen

查看演示时,您可能想知道这些样式来自哪里。 我们使用所有演示中包含的通用样式表,因此这里只显示相关的样式。在 CodePen 中,您可以从“设置”中选择包含的 CSS 文件。

表单控件和表单字段

表单控件是一种支持用户互动和数据输入或选择的元素:<input><select><textarea><button>

“表单字段”有时用于指表单控件,尤其是文本输入的特定元素:<input><textarea>

以下是您将了解的内容

使用表单获取用户数据

观看此表单元素简介,了解在网页上使用表单的基础知识。

帮助用户在表单中输入数据

简要介绍您在构建表单时可以选择的各种表单元素。

帮助用户避免在表单中重新输入数据

让用户更方便地填写表单。

帮助用户在表单中输入正确的数据

了解如何在前端验证您的表单。

测试表单

了解如何测试和分析您的表单。

设计基础知识

了解如何构建方便用户使用的表单。

无障碍功能

如何构建包容性表单。

国际化和本地化

为国际数据格式做好准备,并了解如何规划本地化表单。

安全和隐私保护

了解如何确保表单的安全性和用户数据的私密性。

自动填充

全面了解自动填充和 autocomplete 属性。

如何测试表单的易用性

了解如何进行易用性测试,确保您的表单适合所有用户。

跨设备和平台的测试表单

请确保您的表单适用于不同的设备、浏览器、平台和不同情境。

收集数据

了解如何衡量和分析您的表单。

表单元素详细介绍

详细了解表单元素、何时应使用表单,以及表单的工作原理。

表单字段深入介绍

了解您可以使用的不同表单字段,以及如何选择正确的表单元素。

表单属性详细介绍

全面了解表单属性:如何修改屏幕键盘的布局、启用内置验证功能等。

设置表单样式

使用 CSS 设置表单样式,同时确保表单对所有人都易用、易读。

设置表单控件样式

了解如何使用 CSS 实现表单控件。

JavaScript

了解如何使用 JavaScript 增强表单功能。

付款表单

通过构建更好的付款方式提高转化率。

地址表单

帮助用户快速轻松地填写地址表单。

总结和后续步骤

有助于您采取后续行动的其他资源。

准备好学习表单了吗?让我们开始吧