中职高教版《网页设计与制作》3.7 表单课件

表 单 表单的应用 论坛、留言板、网络调查问卷等 2 表单的概念及功能 表单是网页的最基本组成元素之一，主要负责数据采集的功能，如可以采集访问者的名字和E-mail地址、调查表、留言簿等。 表单有三个基本组成部分： 1、表单标签：包含了处理表单数据的方法。 2、表单域：包含用于采集信息的表单对象，如文本域、隐藏域、复选框、单选按钮、列表/菜单和文件域等。 3、表单按钮：包括提交按钮、复位按钮和一般按钮。表单按纽可用于将数据传送到服务器上或者取消输入，还可以用来控制其他的处理工作。 3 表单的概念及功能 浏览器处理表单的过程一般是这样的：用户在表单中输入数据，然后提交表单，浏览器根据表单的设置处理用户输入的数据。 如果表单指定通过服务器端的脚本程序处理，则该程序处理完后将结果反馈给浏览器；若表单指定通过客户端的脚本程序处理，则处理完后会将结果反馈给用户。 POST：服务器到表单中取表单内容；GET：网页自己提交表单内容名单到服务器；默认：通常是GET 4 表单对象 1、文本域：是一种让访问者自己输入内容的表单对象，可以输入任意文本，包括字母、数字和其他字符。 类型分为：单行文本框、多行文本框和密码框。 单行文本框通常被用来填写单个字或者简短的回答，如姓名、地址等；多行文本框能让访问者填写较长的内容； 密码框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号(*)或其他符号代替，而输入的文字会被隐藏。 5 表单对象 2、隐藏域：用来收集或发送信息的不可见元素。对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用用户设置时定义的名称和值发送到服务器上。 3、复选框：是一种允许访问者在待选项中选中一项及以上的工具。 6 表单对象 4、单选按钮：是一种让访问者在待选项中选择唯一的答案的工具。 5、列表/菜单：用来供用户在列表框中选择一项或多项内容。 7 表单对象 6、文件域：允许用户上传自己的文件。它的文件上传框看上去和其他文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输人需要上传的文件的路径或者单击浏览按钮选择需要上传的文件。 7、按钮：主要用来控制表单的运作。 提交按钮用来将输入的信息提交到服务器； 复位按钮用来重置表单； 一般按钮用来控制其他定义了处理脚本的处理工作。 8 方法一：选择菜单“插入”一“表单”中“表单”选项 创建表单 方法二：“插入”面板—“表单”选项卡中 9 文档窗口将会出现一个红色的虚线框定义的表单区域。在这个区域内可以插入各个表单对象。 创建表单 如果看不到这个虚线框：1、查看—可视化助理—不可见元素；2、 10 插入文本域 选择菜单“插入”一“表单”中的“文本域” 选择 “插入”面板一“表单”中的“文本域” 11 插入文本域 选择菜单“插入”一“表单”中的“文本区域” 选择 “插入”面板一“表单”中的“文本区域” 12 文本域属性面板 文本域：定义文本框的名称，要保证数据的准确采集，必须定义一个唯一的名称。 类型：定义单行、多行或密码文本输入框。 字符宽度：定义文本框的宽度，单位是单个字符宽度。 最多字符数：定义文本框中最多可输入的字符数。 初始值：定义文本框的初始值，即未输入任何内容，第一次在网页中所呈现出来的文本内容。 13 插入复选框 选择菜单“插入”一“表单”中的“复选框” 选择 “插入”面板一“表单”中的“复选框” 复选框也称为多选按钮，允许在待选项中选中一项或多项。可以单独使用，也可以以组为单位使用；以组为单位使用时每个复选框都必须用同一个名称。 复选框的初始状态选项有“已勾选”和“未选中“两种状态，“已勾选”表示在页面加载时即已选中该选项，“未选中”正好与其相反。 14 复选框属性面板 复选框名称：输入标识复选框的名称。同一组复选框的命名，多个复选框的每一个单独复选框的名字都相同。 选定值：为复选框设定数值，该值将被发送到服务器。 初始状态：有“已勾选”和“未选中”两种状态，“已勾选”表示在页面加载时即已选中该选项，“未选中”正好与其相反。 15 插入列表/菜单 选择菜单“插入”一“表单”中的“列表/菜单” 选择 “插入”面板一“表单”中的“列表/菜单” 16 列表/菜单属性面板 列表/菜单：唯一的列表/菜单名称。 类型：“菜单”和“列表”两个选项。 高度：列表/菜单表单元素的高度，列表类型默认为1，菜单类型为菜单数量。 允许多选：勾选后可以按住Shift键或者Ctrl键来一次性选择多个项目。（列表） 列表值：列表/菜单中显示出来供用户选择的选项值。 17 插入单选按钮 选择菜单“插入”一“表单”中的“单选按钮” 选择 “插入”面板一“表单”中的“单选按钮” 18 单选按钮属性面板 单选按钮都是以组为单位使用的，在同一组中的单选按钮都必须用同一个