1. 您所在位置：
  2. 网站首页
  3. 文档分类
  4. 计算机
  5. Web服务

《Web前端开发》教学讲义 Web前端设计基础 项目五-1.docxVIP

《Web前端开发》教学讲义 Web前端设计基础 项目五-1.docx

    1. 1、本文档共6页，可阅读全部内容。
    2. 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
    3. 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
    4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
    5. 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
    6. 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
    7. 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
    8. 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
    查看更多
    教学课题 项目5 网页中的表单—5.1项目描述、5.2知识准备 授课班级 授课时间 教学目标 知识目标 1.掌握网页中表单的作用和语法格式； 2.掌握表单中各元素的作用和语法格式。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过前面知识的学习，已经掌握了代码编辑工具的使用、HTML的基本结构、图文混排的方法、网页中表格的制作方法以及如何创建超链接和制作音频、视频播放器。 本项目学习使用HTML5创建表单，这是实现动态页面的第一步，表单最重要的功能就是在客户端收集用户的信息，然后将数据传递给服务器去处理。 教学重点 1.网页中表单的作用和语法格式； 2.表单中各元素的作用和语法格式。 教学难点 1.网页中表单的语法格式； 2.表单中各元素的语法格式。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过页面中的用户与服务器之间的信息交互，导入本节课的表单内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 单元格列行单元格列行单元格列行一、表单概述 单元格 列 行 单元格 列 行 单元格 列 行 表单的标签为<form></form>，其格式如下： <form name="表单名称" action="url" method=”get/post” target=”目标显示方式” enctype=”mime”></form> 其中各属性的含义如表所示。 属性 含义 说明 name 表单名称 为了区分多个表单，用该属性给表单命名，以防止表单提交到后台程序出现混乱。 action 表单提交地址 用于指定表单数据提交到哪个地址进行处理或者以邮件形式发送到哪个邮箱。 method 传送方法 指明提交表单的HTTP方法，取值为get或post。 target 目标显示方式 目标窗口的打开位置，与超链接<a>标签一样，有四个属性值： _self：默认值，表示在当前的窗口打开页面。 _blank：表示在新的窗口打开页面（常用）。 _parent：表示在父级窗口中打开页面。 _top：页面载入到包含该链接的窗口，取代当前在窗口中的所有页面。 enctype 编码方式 用于设置表单信息提交的编码方式，有两个值： application/x-www-form-urlencoded：默认的编码方式。 multipart/form-data：MIME编码，对于“上传文件”这种表单必须选择该值。 二、表单基本元素 <input>标签用于搜集用户信息，通过设置不同的type属性值，可以有很多类型，type属性值如表所示。 type值 含义 说明 text 单行文本框 用户可在其中输入简短文本，默认宽度为 20 个字符。 password 密码 为了保证文本的安全性，该字段中的字符被掩码，以点的形式显示。 checkbox 复选框 用户在一组选项中可以选择一项或多项。 radio 单选按钮 用户在一组选项中只能选择一项。 button 普通按钮 可点击的按钮，一般用于通过 JavaScript 启动脚本。 submit 提交按钮 作用是把表单数据发送到服务器。 reset 重置按钮 作用是清除表单中的所有数据。 image 图像域 图像形式的提交按钮。 file 上传按钮 定义输入字段和浏览按钮，供文件上传。 hidden 隐藏字段 需要提交数据又不显示在浏览器中的表单元素。 【例5-1】制作一个登录框实例，代码如下所示。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>创建一个登录框</title> 6 </head> 7 <body> 8 <form method="post" action=""> 9 姓名：<input type="text" value="请输入姓名" size="20" maxlength="15"/><br/> 10 密码：<input type="password" size="20" maxlength="15"/><br/> 11 <input type="submit" value="登录" /> 12 <input type="reset" value="重置"/> 13 </form> 14 </body> 15 </html> 在Chrome浏览器中预览，效果如图所示。 【例5-2】制作一个满意度测评表单实例，代

    您可能关注的文档

    文档评论（0）

    一帆风顺 + 关注
    实名认证
    文档贡献者

    该用户很懒，什么也没介绍

    咨询Ta 进入空间

    1亿VIP精品文档

    更多 >

    相关文档

    更多 >

    最近下载