HTML 表单：联系表单
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
在这个实验中，你将学习如何创建 HTML 表单，这是网页交互的基础。
表单用于收集用户输入，是登录、注册、联系等功能的核心组件。
你将学到：
- 使用
<form>创建表单容器 - 各种
<input>类型的使用 - 使用
<label>关联表单元素 - HTML5 表单验证属性
Beginner⏱ 20-25 min
Learning Objectives
- 掌握 form 标签的基本属性
- 学会使用各种 input 类型
- 理解 label 与 input 的关联
- 使用 HTML5 验证属性
Scenario
你正在为公司官网设计一个联系表单。
表单需要收集：
- 用户姓名（必填）
- 电子邮箱（必填，需验证格式）
- 电话号码（可选）
- 留言内容（必填）
Why Do This
- HTML determines semantics and accessibility — it is the foundation for CSS/JS maintainability.
- Clear structure matters more than visual effects; styling and interaction will both benefit later.
- Semantic tags improve SEO, readability, and team collaboration efficiency.
Hands-on Practice
- Restructure the page using semantic tags.
- Check that heading levels are sequential (h1 -> h2 -> h3).
- Add accessibility attributes to key elements.
Common Mistakes
- Using div for everything without semantic layering.
- Heading levels are chaotic, making the page structure unreadable.
- Forms and media elements missing required attributes.
Deliverable
A semantic page skeleton template (structural sections + heading hierarchy + a11y checklist).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was the most important semantic structure change you made?
What accessibility details did you add?
How reusable is this HTML structure?
Tags
HTML5FormsInputValidation