4.4-用电子邮件发送表单数据（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 　用电子邮件发送表单数据 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解如何使用HTML表单收集用户输入。 · 学会使用服务器端脚本（如PHP）处理表单数据。 · 掌握如何将表单数据发送到指定的电子邮件地址。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 表单数据的收集与处理。 2. 使用服务器端脚本发送电子邮件。 教学难点 1. 如何配置服务器端脚本以发送电子邮件。 2. 如何确保表单数据的安全传输。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 任务驱动法：通过具体任务引导学生主动学习。 2. 案例分析法：分析典型案例，帮助学生理解知识点。 3. 实践操作法：让学生通过实际操作巩固所学知识。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾HTML表单的基本结构和用法。 2. 介绍电子邮件发送表单数据的概念和需求。 2分钟 讲授新课 练习指导 在HTML中，表单（form）是一种用于收集用户输入的元素 ### 创建表单 1. 在HTML文档中，使用`<form>`标签创建一个表单。 2. 为表单指定一个动作（action）属性，指向服务器端脚本（如PHP文件）。 3. 设置表单的提交方法（method）属性，通常为“POST”。 ```html <form action="process_form.php" method="post"> <!-- 表单元素将放在这里 --> </form> ``` ### 添加表单元素 在表单内部，可以添加各种表单元素，如文本框、单选按钮、复选框等。以下是一些常见的表单元素示例： #### 文本框（Text Input） ```html<label for="username">用户名:</label><input type="text" id="username" name="username" required> ``` #### 密码框（Password Input） ```html<label for="password">密码:</label><input type="password" id="password" name="password" required> ``` #### 单选按钮（Radio Button） ```html<label>性别:</label><input type="radio" id="male" name="gender" value="male"><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label> ``` #### 复选框（Checkbox） ```html<label for="newsletter">订阅新闻通讯:</label><input type="checkbox" id="newsletter" name="newsletter" value="yes"> ``` #### 下拉列表（Select） ```html<label for="country">国家:</label><select id="country" name="country"> <option value="china">中国</option> <option value="usa">美国</option> <option value="uk">英国</option> </select> ``` #### 提交按钮（Submit Button） ```html<input type="submit" value="提交"> ``` ### 示例代码 ```html <!DOCTYPE html> <html> <head><title>表单示例</title> </head> <body> <form action="process_form.php" method="post"> <label for="username">用户名:</label> <input ty