contact-module-local.zip

好的，这里给出联系表单组件的讲义，格式按照你课程的“教材化”要求来写，确保与《Web前端技术》课程标准的知识点、能力点一一对应。

讲义：联系表单组件

一、组件说明

联系表单（Contact Form）是网站中最常见的交互组件之一，用于用户输入姓名、邮箱、留言等信息，并提交到后台或存储在本地。在教学中，联系表单是学生第一次接触“前端交互 + 数据输入 + 验证”的综合案例。

运行效果：

• 页面显示标题“联系我”
• 表单包含：姓名、邮箱、主题、留言四个字段
• 提交按钮点击后，进行输入校验，并在页面显示提示或保存信息
• 提交成功后，在下方展示“提交记录”卡片（本地存储版）

二、最小可运行代码示例

contact.html

<form id="contactForm">
  <label>姓名 *</label>
  <input type="text" id="name" required minlength="2">

  <label>邮箱 *</label>
  <input type="email" id="email" required>

  <label>主题</label>
  <input type="text" id="subject">

  <label>留言 *</label>
  <textarea id="message" required minlength="10"></textarea>

  <button type="submit">发送</button>
  <p id="result"></p>
</form>

contact.js

document.getElementById('contactForm').addEventListener('submit', function(e){
  e.preventDefault();
  let name = document.getElementById('name').value.trim();
  let email = document.getElementById('email').value.trim();
  let message = document.getElementById('message').value.trim();

  if(name.length < 2){ alert("姓名至少2个字"); return; }
  if(!email.includes('@')){ alert("邮箱格式错误"); return; }
  if(message.length < 10){ alert("留言至少10个字"); return; }

  document.getElementById('result').innerText = "✅ 提交成功";
});

三、知识点映射（课程标准对照）

• HTML5 表单构建方法：使用 <form>、<input>、<textarea>