人教版信息技术五下第12课《制作表单网页》ppt课件

,12.1 交互式表单概述 12.2 创建表单 12.2.1 创建表单的文本框 12.2.2 建立表单的单选按 钮和复选框 12.2.3 创建表单的列表框 12.2.4 创建表单的提交 和重置按钮 12.2.5 其他表单域的应用 12.3 表单的应用实例,第12章 表单及其应用,表单（Form）技术可以实现浏览者与Internet服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。通过表单可以从网络的用户端收集信息，然后将收集来的信息经过服务器处理后再反馈给用户。 电子商务、网上调查，还是留言板、聊天室,(1) 由Dreamweaver MX生成的表单的页面。,表单有两个重要的组成部分：,12.1 交互式表单概述,(2) 用于处理浏览者在表单域中输入的信息的服务器端应用程序或客户端脚本。表单的应用必须依赖于服务器端脚本才能真正发挥其功能。,将光标定位在要插入表单的位置上，选择【插入】|【表单】命令。 (2) 将光标定位在要插入表单的位置上，单击【插入】浮动面板组的【表单】选项卡中的【表单】按钮。 (3) 直接将【插入】浮动面板组的【表单】选项卡中的【表单】按钮拖入网页编辑窗口的表单插入区域。,12.2 创建表单,表单主要功能是接收输入的信息。浏览者输入的信息可能多种多样，这些不同类别的信息可以由不同的表单域分别接收。因为每个表单域对应一个项目，所以每个表单域都要添加一个标识，提醒用户在这个表单域中应该输入的内容。,在网页中创建一个表单的方法有3种:,用以上3种方法创建的表单区域，在页面上用红色虚线框表示。红色虚线框确定了当前表单的边框，这种红色边框的大小是不能被编辑的。当设计者在表单区域中插入对象后，表单的区域会自动调整其大小。,在创建表单后，就可以在表单中插入各种表单域。在网页中插入表单域有两种方法： 利用网页编辑窗口的菜单命令，选择【插入】|【表单对象】命令，在其级联菜单中选择相应的命令插入表单域； 或直接单击【插入】浮动面板组的【表单】选项卡，从中选择要插入的表单域。,文本字段： 用来输入的文字或数字。插入的文本可显示为单行、多行。 隐藏域： 表单的隐藏域在浏览时是看不到的，浏览者也不能执行该操作。利用隐藏域可以实现浏览器同服务器在后台不公开地交换信息。 复选框： 复选框可以单独使用，也可以成组使用，有选中与不选中两种状态。 单选按钮： 单选按钮常用于一组互斥选项。 按钮： 表单中一般有两个按钮，一个是【提交】按钮，单击此按钮可把浏览者输入的信息发送给服务器； 另一个是【重置】按钮，用来清除表单中的内容，把当前表单还原为初始状态。,列表按钮： 常用于提交一组可供浏览者进行选择的列表选项。其表现方式是，当单击它右侧的按钮时，弹出一个下拉式列表。浏览者可单击列表中某一选项。它在功能上与单选按钮相似，可以供浏览者在多个备选项中作一个选择，它占有网页的面积比单选按钮小得多。 图片域： 用于显示图片，也可用作确认按钮。 跳转菜单： 插入一个跳转菜单，每个菜单选项都可链接到一个网页或文件。 文件域： 文件域有一个文本框和一个浏览按钮，可供浏览者从本地计算机上用表单向服务器上传文件。,文本字段 隐藏域 复选框 单选按钮 按钮,列表按钮 图片域 跳转菜单 文件域,下面介绍创建一个带有文本框的最基本的表单，通过创建这个简单的表单来了解表单创建的过程，操作步骤如下: （1） 单击【插入】浮动面板组的【表单】选项卡。 （2） 此时在【插入】浮动面板组中显示【表单】选项卡的各种对象。 （3） 在网页编辑窗口中，确定要插入的表单位置。 （4） 单击【表单】选项卡中的【表单】按钮，便可在网页编辑区中生成一个表单。此时表单被一个红色虚线框界定。单击红色虚线框，可以选中表单区域。, 在【表单名称】输入指定表单的名称,该名称必须惟一。 在【动作】文本框中可以输入一个URL，用来指定处理表单信息的服务器端程序。也可以输入“mailto： 邮件地址”，用E-mail方式来发送表单中的数据。 在【方法】下拉式列表框中指定一个处理表单数据的方法，其下拉列表中的各项意义如下所述:,表单的【属性】面板中各属性的具体意义如下:,默认： 使用浏览器的默认方式，一般为GET方式。 GET： 表示把表单值附加到URL，并发送给服务器一个GET请求。 POST： 以消息方式发送表单的值，并发送给服务器一个POST请求。,163登陆, 在【目标】下拉式列表中指定一个窗口方式，在该窗口中显示调用程序所返回的数据。 在【MIME类型】下拉式列表中可以指定对提交给服务器进行处理的数据使用 MIME 编码类型。,（5） 将光标插入到表单内，输入标识提示文字“姓名： ”。 （6） 单击【表单】选项卡中的【文本字段】按钮，就会在表 单中生成一个文本框表单域。,表单元素的提示性文字,访问键：设置表单元素的访问热键。可填入数字或字母访问表单时，先按住Alt键，然后再按该数字或字母键（注：不区分大小写）,用按Tab键的方式访问表单元素，该处数值大小决定访问次序，索引值越小越先访问。,编辑|首选参数 辅助功能,12.2.1 建立表单的文本框,表单中的文本框是网页中用得比较多的一种表单元素，网页中表单的文本框包括3种形式。 【单行文本框】是浏览者只能输入一行信息的文本区域。 【多行文本框】可由网页设计者限定文本的行数，并决定是否显示滚动条，浏览者可在其中输入多行文本信息。 【密码文本框】是一种可以让浏览者输入密码信息的文本框，输入的字符都以“*”号显示在屏幕上。,name,regist.html liuyan.html, 在【文本域】文本框中输入当前表单域的名称，系统将以此名 称保存文本框表单域中的内容。 在【字符宽度】文本框中输入当前表单域的宽度，即设置文本 框中每行所允许输入的字符数目。 在【最大字符数】文本框中设置文本框表单域中最多可允许输 入的字符数。 在【类型】区域中确定文本框的类型，3个选项选择分别是 【单行】、【多行】、【密码】。 在【初始值】文本框中输入表单域的预先设置的值。 在【换行】中设置多行文本框表单域的换行方式。当选择 【类型】为【多行】选项时，【换行】下拉式列表就被激活， 可选择设置多行文本表单域中不同的换行方式。,12.2.2 建立表单的复选框和单选按钮,1、复选框,网页表单中的复选框可以单个出现，也可以成组出现，单个复选框可用于答案为是或否的问题，成组的复选框可用于一个或多个选项选取的问题。一般情况下，复选框组的标识文字放在复选框之前，而每一个复选框的标识文字放到复选框的后面。,方法一：在【复选框名称】文本框中输入复选框的标识名； 在【选定值】文本框中输入数值1。 方法二：在【复选框名称】文本框中输入复选框组的标识文字 的缩写“关注”； 在【选定值】文本框中输入的值为 各个复选框的标识文字。,若在上述表单中选择的两个复选框分别是“篮球”和“足球” 。 第一种方法发送给服务器的信息是：关注= 1，2 第二种方法发送给服务器的信息是：关注=篮球，足球,关注,【复选框名称】文本框中，给选中的复选框起一个名字，也就是选中该复选框后向服务器发送信息时所用的变量名。 【选定值】文本框中：输入选中该复选框后要向服务器发送的内容。 【初始状态】选项组中，选中【已勾选】单选按钮表示该复选框初始状态已被选中。选中【未选中】单选按钮表示该复选框初始状态为待选状态。 复选框【属性】面板设置的参数应按照服务器端程序的约定。,选中该复选框，在复选框的【属性】面板中为其命名和赋值。,1. 创建表单的单选按钮 网页中表单的单选按钮一般都是成组出现的。在页面设计时，既要为单选按钮组定义一个标识，也要为每一个单选按钮定义一个标识。创建单选按钮的操作步骤如下。,(1) 在表单的合适位置插入光标，并输入单选按钮组的标识文字，例如“性别”。 (2) 然后单击【表单】选项卡中的按钮，并输入这个单选按钮的标识文字，例如“男”。 (3) 选中这个单选按钮，打开单选按钮的【属性】面板。,2、单选按钮,(radiobutton.html),(4) 在【单选按钮】文本框中输入单选按钮的名字“性别”。 并在【选定值】文本框中给单选按钮赋值“男”。 (5) 并为该单选按钮设置初始状态，【初始状态】为【已勾选】。 (6) 用同样的方法添加另一个标识为“女”的单选按钮。 (7) 在【单选按钮】文本框中输入单选按钮的名字“性别”。 并在选定值文本框中给单选按钮赋值“女”。 (8) 为该单选按钮设置初始状态，【初始状态】为【未选中】。,12.2.3 创建表单的列表框,1）在表单的合适位置上插入光标，然后输入下拉式列表框的标识文字，例如“您的职业： ”。 2）单击【表单】选项卡中的按钮，此时表单的光标位置上显示一个很小的下拉式列表框。 3）选中新建的下拉式列表框，打开其【属性】面板。 其各项参数的意义如下：,【列表/菜单】文本框中：设置下拉式列表框的名称。在此文本框中输入下拉式列表框的名称为work。 【类型】选项组中：设置下拉式列表框的类型为【菜单】。当下拉式列表框的类型设置为【列表】时，【高度】文本框被激活，在其中可设置该列表框可显示的行数。 【选定范围】复选框：可使下拉式列表一次选择多个选项。也可通过按Ctrl键，再单击来选择不相邻的任意多个选项，还可通过按Shift键来选中两次单击选项之间所有连续的选项。,【列表值】按钮：可以进行列表值的设置。 【初始化时选定】列表：会显示通过列表值设置的列表项目文字。,按Tab键或单击【值】按钮，在出现的文本框中输入选项的赋值。单击“+”按钮，重复步骤, 添加新的列表选项。 如果要删除某个选项，可以在【列表值】对话框中选中该项，然后单击“-”按钮即可。可用列表值对话框中按钮调整下拉式列表的选项次序。,网页中的表单必须添加【提交】按钮，才能将浏览者填写的信息上传到服务器。在表单中创建【提交】和【重置】按钮的操作步骤如下：,12.2.4 创建表单的提交和重置按钮,（1） 在表单合适的位置上确定插入点，然后2次单击【表单】选项卡中的按钮。 （2） 在表单中就会生成2个按钮。 （3） 选中第1个按钮，在按钮的【属性】面板中设置参数。在【按钮名称】文本框中输入Submit； 在【标签】文本框中输入该按钮上的文字“提交”； 在【动作】选项组中选择【提交表单】单选按钮。 （4） 选中第2个按钮，在按钮的【属性】面板中设置参数。在【按钮名称】文本框中输入Reset； 在【标签】文本框中输入该按钮上的文字“重置”； 在【动作】选项组中选择【重设表单】单选按钮。,在表单中，插入表单隐藏域的操作步骤如下： （1） 在表单合适的位置上确定插入点，然后单击【表单】选项卡中的按钮。 （2） 在网页编辑窗口的插入点处可看到一个图标。 （3） 双击图标，选中表单隐藏域，在表单隐藏域的【属性】面板中可以设置表单隐藏域的属性。,2. 表单隐藏域,隐藏域是一种在浏览器上看不到的表单域，也不用对其执行操作，利用隐藏域可以实现浏览器同服务器在后台交换信息。由于它是不可见的，所以也不需要为它添加标识文字。,利用表单文件域可以从本地计算机向服务器上传文件。表单文件域包括一个文本框和一个浏览按钮。在浏览器中单击【浏览】按钮，打开【选择文件】对话框，在对话框中选择相应的文件，然后单击表单中的【提交】按钮便可将文件发送到服务器上。,【值】:文本框中输入表单隐藏域的初始值。,表单隐藏域的名称,3. 表单文件域,（1） 在表单合适的位置上确定插入点，然后单击【表单】 选项卡中的按钮。 （2） 在网页编辑窗口的插入点处可以创建一个文本框和 【浏览】按钮。,（3） 选中表单文件域，在表单文件域的【属性】面板中可以设置表单文件域的属性。 表单文件域的【属性】面板的基本参数意义： 在【文件域名称】文本框中输入表单文件域的名称。 在【字符宽度】文本框中输入文件域的最大字符宽度。 在【最多字符数】文本框中输入文件域的最多字符数。,HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。 在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。,表单(FORM)标记,表单是网页上的一个特定区域，是由一对元素定义的。元素属性 action：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。 Method:定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。,8.3 表单应用实例,表单的基本语法: . * =GET有数据量限制，POST无以上限制,以文件形式传输。,文本框 ? 文本框的名字 * text,password * 默认值 * 长度 ? 最大输入字符数, 姓名： , 文本域 . ,留言 , 按钮 包括普通按钮、重置按钮和提交按钮 ,复选框(Checkbox) 在一个表单里的所有多选框可以有一个或多个被选中。,单选框(RadioButton) 一个表单里的所有变量名相同的单选框只能够有一个被选中。 各个选项的name必须一样才能达到预期效果,下拉列表 基本语法 说明 说明2 列表框的长度 允许多选 ,图象域 , 请选择职业 学生 IT行业 高校教师 公务员 个体户 ,一、选择题 1. 下面关于标记的说法不正确的是_。 A) 标记要填写在一对尖括号（）内 B) 书写标记的时候，英文字母的大、小写或混合使用大小 写都是允许的。 C) 标记内可以包含一些属性，属性名称出现在标记的后面， 并且以分号进行分隔。 D) HTML对属性名称的排列顺序没有特别