本课程将 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 增强表单功能。
付款表单
通过构建更好的付款方式提高转化率。
地址表单
帮助用户快速轻松地填写地址表单。
总结和后续步骤
有助于您采取后续行动的其他资源。
准备好学习表单了吗?让我们开始��。