HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第6章 表单

网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号6授课日期月日月日月日月日授课班级课内教学内容：第6章表单课外学习任务：（1）课前：以小组为单位，讨论网页表单的相关内容并以PPT的形式记录下来。（2）课后：=1\*GB3①添加一个表单，并为表单设置链接跳转和跳转方式。=2\*GB3②使用表单标签创建一个问题调查表。=3\*GB3③在表单中添加下拉列表控件。教学目标：知识目标掌握添加表单；掌握添加表单；掌握下拉列表；掌握文本域。能力目标能够掌握表单的各种功能；能够使用下拉列表和文本域。素质目标较强的专业知识和自学能力；丰富知识结构，提升专业知识；掌握表单的使用，理解并应用专业知识。重点难点及解决方法：（1）重点：表单元素的使用解决方法：通过知识点讲解+课堂示例相结合的方法，教师讲解表单各种样式的相关内容内容，引导学生积极思考，掌握相应知识；同时通过课堂示例展示，使学生可以掌握表单的使用规则；培养学生的思维能力和分析问题解决问题的能力。（2）难点：下拉列表和文本域解决方法：通过案例解析+启发式教学讲解的方式，细致讲解下拉列表和文本域的使用。帮助学生掌握下拉列表和文本域的使用方法和技巧。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段1.添加表单表单可以用来收集用户在客户端提交的各种信息，例如，在网站登录或注册时进行的键盘和鼠标操作都是将表单作为载体传递给服务器的。表单其实是页面中的一个特定区域，由<form>标签和</form>标签定义，所有的表单元素只有在这对标签之间才有效。表单的基本语法如下。<form表单标签的各种属性设置>设置各种表单元素</form>在<form>标签中可以设置表单的属性，包括表单名称、表单处理程序等。【链接跳转】action属性用来设置链接跳转，也就是在提交表单的内容时，按照链接地址跳转到相应的页面进行处理。由于action属性用来控制整个表单的提交内容，因此action属性要写在<form>标签中。其语法格式如下。<formaction="链接跳转的地址">设置各种表单元素</form>链接跳转的地址除了可以是绝对地址和相对地址外，还可以是其他的地址形式。如果表单中没有任何表单元素，这个表单传递给处理程序的内容就是空的。如果省略action属性，则默认为提交到本页，即本页为接收并处理表单的程序。可以接收并处理表单的程序语言很多，常用的有ASP、ASPX、JSP、PHP等。【链接跳转方式】设置链接跳转以后，还需要设置链接跳转时使用的跳转方式。此时可以通过method属性来设置，它决定了表单中已收集的数据以什么样的方式发送到服务器。其语法结构如下。<formmethod="表单的链接跳转方式">表单元素</form>表单的链接跳转方式一般可以设置为get和post两种，其具体含义如表6.1所示。表6.1表单链接跳转方式跳转方式含义注意事项get表单数据会被视为参数发送，用户输入的数据会附加在URL之后，由用户端直接发送至服务器，是METHOD属性的默认值其速度较快，但数据不能太长。如果信息超过8192个字符，则可能会被截去，另外，该方式不具有保密性post表单数据与URL分开，将数据写在表单主体内发送没有字符长度的限制，可以发送较长的信息，但速度相对较慢【表单名称】表单名称主要是为了区分各个表单。因为一个页面中可能会有多个表单，或者在一个表单处理程序中需要处理多个页面的表单，这时表单名称就显得尤其重要了。设置表单名称的标签是<name>，其语法格式如下。<formname="表单名称">表单元素</form>其中，name属性的写法与超链接中name属性的写法一样。在网页中可以通过表单的name属性提取指定表单中的数据来进行使用。2.输入标签输入标签<input>是使用最广泛的表单控件标签，用于定义输入域的开始。因为<input>标签是单标签，所以在使用时，要为<input>标签加上“/”来闭合标签。<input>标签必须嵌套在表单标签中使用。<input>标签的语法格式如下。<form><inputtype=""/></form>其中，type属性的值有很多，不同的选择对应不同的输入方式（下面将详细讲解）。【文本框】文本框用来输入数字、文本及字母等，输入的内容单行显示在页面中，可以通过type="text"来设置，其语法格式如下。<form><inputtype="text"></form>【密码框】密码框用来输入密码，可以通过type="password"来设置。在密码框中输入的内容会变成小黑点或者“*”，可以用来保护密码不被第三者看见。创建密码框的语法格式如下。<form><inputtype="password"></form>【单选按钮】单选按钮是指只能选择其中一项的选项按钮。就像很多表单中的“性别”选项一样，要么是男，要么是女，不可能同时是男和女。单选按钮中选中的选项会以圆点显示。单选按钮可以通过type="radio"来设置，其语法格式如下。<form><inputtype="radio"name="名称"></form>【复选框】复选框与单选按钮类似，可以是一个单独的复选框，也可以是由多个复选框组成的复选框组。复选框可以让用户同时选择或取消多个项目，在浏览器中通常表示为一个小方框。用户选中复选框时，会在小方框里打上一个钩（某些浏览器会打上一个叉）；用户没有选中该复选框或取消该复选框时，小方框里为空。复选框可以通过type="checkbox"来设置，其语法格式如下。<form><inputtype="checkbox"name="名称"></form>需要注意的是，同一组复选框的name属性值必须相同。【“提交”按钮】“提交”按钮用于把表单中的信息提交到指定的数据库或者其他地方，可以通过type="submit"来设置，其语法格式如下。<form><inputtype="submit"name="名称"value=""></form>value属性用于设置按钮上面出现的文字，以表示该按钮是“提交”按钮。文字可以是中文，也可以是英文。【“重置”按钮】“重置””按钮用于将表单中的用户输入内容清空，以恢复到初始状态。“重置”按钮可以通过type="reset"来设置，其语法格式如下。<form><inputtype="reset"name="名称"value=""></form>value属性用于设置按钮上面出现的文字，以表示该按钮是“重置”按钮。文字可以是中文，也可以是英文。【“图像”按钮】图像”按钮是指将页面中的按钮使用图片显示外观，这样的图片具有按钮的功能，而且页面也更加美观。“图像”按钮可以通过type="image"来设置，其语法格式如下。<form><inputtype="image"src="图像源文件"></form>由于这里要使用图像，因此与插入图像一样，需要使用src属性设置图像的源文件地址。【文件域】文件域可以让用户选择存储在本地计算机上的文件，通常用于在将文件上传到服务器时选择文件。文件域在浏览器中显示为一个文本框与一个按钮，通常按钮上会显示“选择文件”字样。这两个组件同时出现在网页中，单击“选择文件”按钮，会弹出一个“选择文件”对话框，在该对话框中选择文件后，单击对话框中的“打开”按钮，就会在文本框中自动输入该文件在本地的绝对路径。文件域可以通过type="file"来设置，其语法格式如下。<form><inputtype="file"name="名称"></form>【隐藏域】前面介绍的表单元素都是可以在浏览器中看到的，在HTML中还有一种表单元素在浏览器中是看不到的，这种表单元素称为隐藏域或隐藏框。隐藏域的作用是在表单中放入一个不希望被用户看到或用户没有必要看到的内容，而这些内容往往都是在提交表单时，服务器或脚本需要获取的内容。隐藏域可以通过type="hidden"来设置，其语法格式如下。<form><inputtype="hidden"></form>3.下拉列表下拉列表是一个下拉式列表或者带有滚动条的列表，用户可以在列表中选择一个选项。创建下拉列表需要用到两个元素，首先是<select>标签，用于标记下拉列表的开始，然后是<option>标签，用于创建下拉列表中的项目。如果一个下拉列表中有多个可选项，只需要重复使用<option>标签。下拉列表的语法格式如下。<selectname="名称"><optionvalue="">选项内容</option><optionvalue="">选项内容</option><optionvalue="">选项内容</option>…</select>与单选按钮和复选框一样，<select>标签也需要使用name属性来告知服务器该表单的名称。在提交表单时，服务器通过<select>标签的name属性值来获得该下拉列表中的选项值，而<select>标签的选项值要通过<option>标签的value属性来设置。4.文本域单行文本框只能输入一行文字，大量的文字（尤其是分段的多行文字）在单行文本框中是无法输入的。使用<textarea>标签可以在网页中创建文本域。在多文本域中可以显示和输入多行文字，这在很大程度上方便用户输入和查看文字。创建文本域的语法格式如下。<textarea>输入的内容</textarea>5.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课《职业素养评价表》，组织学生自评、互评。6．上机指导1．添加一个表单，并为表单设置链接跳转和跳转方式。2．使用表单标签创建一个问题调查表。3．在表单中添加下拉列表控件。7.板书设计添加表单输入标签下拉列表文本域教学评价上机指导课外学习任务及学习指导课前：【教师布置调研任务】调研主题：《分析如何使用表单》要求：以小组为单位，分析如何在网页中添加和使用表单；同时制作汇报PPT，提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学生进行指导。【教师对各组调研成果进行评价】教师查阅学生调研结果PPT，对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。课后：【添加一个表单，并为表单设置链接跳转和跳转方式】小组成员团结协作，使用<form>标签在页面中插入一个表单，然后在表单中添加4个表单输入文本框，分别用于输入姓名、年龄、性别、住址，最后添加一个“提交”按钮。教师使用“微信群”对学生进行指导。【使用表单标签创建一个问题调查表】学生