欢迎学习表单!

本课程将 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 增强表单功能。

付款表单

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

地址表单

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

总结和后续步骤

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

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