多媒体技术与网页设计第21章表单课件.ppt

《多媒体技术与网页设计第21章表单课件.ppt》由会员分享，可在线阅读，更多相关《多媒体技术与网页设计第21章表单课件.ppt（62页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1 1第21章 表 单第21章 表 单21.1 表单创建及设置表单创建及设置 21.2 添加表单对象添加表单对象 2 2第21章 表 单表单是在网页中让浏览用户填写信息的网页元素，如用户注册、用户留言及邮箱登录等。表单通常由单选按钮、复选框、文本框以及按钮等多种表单对象组成，如图21.1所示。通过表单可以将用户填写的内容上传到网页服务器中，网页服务器对收集的信息进行处理，并做出相应的反应。3 3第21章 表 单图21.1 表单页面4 4第21章 表 单例如，用户登录表单，将用户输入的用户名和密码上传到网页服务器，网页服务器判断是否有该用户，以及密码是否正确。如果用户和密码都正确，就让用户跳转到

2、登录后的页面，否则将拒绝登录并给出错误信息。5 5第21章 表 单6 6第21章 表 单图21.2 “表单”插入栏7 7第21章 表 单创建表单的具体步骤如下：(1)将光标移到所需位置。(2)单击“表单”插入栏中的“表单”按钮或选择“插入”“表单”“表单”命令，在编辑窗口中添加表单，如图21.3所示。图21.3 创建表单8 8第21章 表 单21.1.2 设置表单属性设置表单属性将光标移到表单中，点击右键，弹出其“属性”面板，在该面板中可以设置表单属性，如图21.4所示。图21.4 表单“属性”面板9 9第21章 表 单10 10第21章 表 单其中，GET表示将表单中的信息以追加到处理程序地

3、址后面的方式进行传送，使用这种方式不能发送信息量大的表单，其内容不能超过8192个字符，适用于信息量小的表单；POST表示传送表单数据时它将表单信息嵌入到请求的处理程序中，理论上这种方式对表单的信息量不受限制；“默认”选项表示采用浏览器默认的设置对表单数据进行传送，一般的浏览器默认以GET方式传送。11 11第21章 表 单(4)目标：打开返回信息网页的方式。(5)MIME类型：指定提交给服务器进行处理的数据所使用的编码类型。默认为application/x-，通常与POST方法协同使用。12 12第21章 表 单13 13第21章 表 单21.2.1 添加文本字段添加文本字段文本字段是最常见

4、的表单对象之一，可接受文本内容的输入，有单行、多行和密码三种类型，如图21.5所示。图21.5 文本字段14 14第21章 表 单15 15第21章 表 单图21.6 “输入标签辅助功能属性”对话框 图21.7 插入的单行文本字段 16 16第21章 表 单选择添加的文本字段，点击右键，弹出其“属性”面板，在该面板中将显示单行文本域的各项参数，如图21.8所示。图21.8 选择文本字段后的“属性”面板17 17第21章 表 单18 18第21章 表 单(4)类型：选中不同的单选按钮可以在单行文本字段、多行文本字段和密码字段之间进行转换。(5)初始值：输入文本字段默认的显示内容，如“请输入用户名

5、”，若不输入内容，文本字段默认状态将显示为空白。19 19第21章 表 单2.多行文本字段的添加多行文本字段可接受多行内容的文本，通常用做用户留言、个人介绍等。插入多行文本字段的步骤为：将光标移到表单中要添加文本字段的位置，在“表单”插入栏中单击按钮，在弹出的“输入标签辅助功能属性”对话框的“标签文字”文本框中输入文本字段的标签，如“请留言：”，单击“确定”按钮即可在表单域中添加多行文本字段，如图21.9所示。2020第21章 表 单图21.9 插入的多行文本字段21 21第21章 表 单选择添加的多行文本字段，点击右键，弹出其属性面板，该面板中将显示多行文本域的参数，如图21.10所示。图2

6、1.10 选择多行文本字段后的“属性”面板2222第21章 表 单该面板中各项参数的含义如下：(1)文本域：输入文本字段的名称，该名称可以被脚本或程序所引用。(2)字符宽度：设置文本字段的宽度。(3)行数：设置多行文本字段中的可见行数。(4)类型：其中包含“单行”、“多行”和“密码”三个单选按钮，选中不同的单选按钮可以在单行文本字段、多行文本字段和密码字段之间进行转换。2323第21章 表 单2424第21章 表 单21.2.2 添加字段集添加字段集使用字段集可以在网页中显示圆角矩形方框，并在方框的右上角显示一个标题文字。这样就可以将一些相关的表单对象放置在一个字段集内，以和其它表单对象进行区

7、分。添加字段集的具体步骤如下：2525第21章 表 单(1)单击“表单”插入栏中的按钮，在弹出的“字段集”对话框的“标签”文本框中输入字段集的标签，如“上传文件”，如图21.11所示。图21.11 “字段集”对话框 2626第21章 表 单(2)单击“确定”按钮插入字段集，如图21.12所示。图21.12 插入字段集2727第21章 表 单2828第21章 表 单21.2.3 添加按钮添加按钮表单中的按钮有“提交”、“重置”和编写脚本才能执行相应操作三种类型。“提交”按钮用于将表单的内容提交到服务器；“重置”按钮用于将表单中的内容恢复到初始状态；第三种按钮是需要用户编写脚本才能执行相应操作，否

8、则单击无回应。添加按钮的具体步骤如下：2929第21章 表 单(1)将光标移到表单中要添加按钮的位置。(2)单击“表单”插入栏中的按钮，在弹出的“输入标签辅助功能属性”对话框中单击“确定”按钮即可在表单中添加按钮，其中默认添加“提交”按钮，如图21.15所示。图21.15 添加的按钮3030第21章 表 单31 31第21章 表 单该面板中各项参数的含义如下：(1)按钮名称：设置按钮的名称。(2)值：设置显示在按钮上的文本。(3)动作：其中“提交表单”表示单击该按钮可提交表单；“无”表示需手动添加脚本才能执行相应操作，否则单击无回应；“重设表单”表示单击按钮可将表单中的内容恢复到默认状态。32

9、32第21章 表 单21.2.4 添加单选按钮添加单选按钮在同一组单选按钮中只能选中一个单选按钮，当选中其中一个单选按钮后，再选中其它单选按钮时，则先选中的单选按钮将会取消选中。因此，单选按钮常被用做性别、学历等的选择。添加单选按钮的具体步骤如下：3333第21章 表 单(1)将光标移到表单中要添加单选按钮的位置。(2)单击“表单”插入栏中的按钮，在弹出的“输入标签辅助功能属性”对话框的“标签文字”文本框中输入单选按钮的标签，如“男”。(3)单击“确定”按钮在表单中添加一个单选按钮，如图21.17所示。(4)重复上面的操作，添加其它单选按钮，按F12键进行预览，这时只能选中一个单选按钮，如图2

10、1.18所示。3434第21章 表 单 图21.17 添加的单选按钮 图21.18 只能选中一个单选按钮3535第21章 表 单选中添加的单选按钮，点击右键，弹出如图21.19所示的“属性”面板。图21.19 选中单选按钮后的“属性”面板3636第21章 表 单该面板中各项参数的含义如下：(1)单选按钮：输入单选按钮的名称。(2)选定值：输入选中单选按钮时发送给服务器的值。(3)初始状态：设置在浏览器中首次载入表单时单选按钮是否处于选中状态。3737第21章 表 单21.2.5 添加复选框添加复选框复选框允许在一组选项中选择一个或多个选项。添加复选框的具体步骤如下：(1)将光标移到表单中要添加

11、复选框的位置。(2)单击“表单”插入栏中的按钮，在弹出的“输入标签辅助功能属性”对话框中的“标签文字”文本框中输入复选框的标签，如“听音乐”。3838第21章 表 单(3)单击“确定”按钮，可以在表单中添加一个复选框，如图21.20所示。(4)重复上面的操作，添加其它复选框，按F12键进行预览，用户可以同时选中多个复选框，如图21.21所示。图21.20 添加的复选框 图21.21 多个复选框 3939第21章 表 单选中添加的复选框，点击右键，弹出其“属性”面板，如图21.22所示。图21.22 选中复选框后的“属性”面板4040第21章 表 单该面板中各项参数的含义如下：(1)复选框名称：

12、输入复选框名称。(2)选定值：输入该复选框被选中时发送给服务器的值。(3)初始状态：设置浏览器首次载入表单时复选框是否处于选中状态。41 41第21章 表 单21.2.6 添加列表添加列表/菜单菜单列表/菜单以列表框或下拉列表框的形式提供了多个选项。在列表中可以选择多个选项，而菜单只允许选择一项。添加列表/菜单的具体步骤如下：(1)将光标移到表单中要添加列表或菜单的位置。(2)单击“表单”插入栏中的按钮，在弹出的“输入标签辅助功能属性”对话框的“标签文字”文本框中输入列表/菜单的标签，如“软件分类”。4242第21章 表 单(3)单击“确定”按钮在表单中添加一个菜单，如图21.23所示。图21

13、.23 添加的菜单 4343第21章 表 单(4)选择添加的列表或菜单，点击右键，弹出其“属性”面板，单击其中的“列表值”按钮，弹出“列表值”对话框，如图21.24所示。图21.24 “列表值”对话框 4444第21章 表 单(5)在该对话框中可添加项目标签及相应的值。在列表框的“项目标签”栏中输入项目名称，单击“+”按钮添加下一条项目标签。重复操作直至完成整个项目标签的设置，最后单击“确定”按钮关闭对话框，完成菜单对象的添加。(6)按F12键进行预览，效果如图21.25所示。图21.25 设置后的列表4545第21章 表 单选择插入的列表/菜单，显示其“属性”面板，如图21.26所示。图21

14、.26 选择列表/菜单后的“属性”面板4646第21章 表 单该面板中各项参数的含义如下：(1)列表/菜单：输入菜单对象的名称。(2)类型：用于在列表和菜单之间进行转换。(3)初始化时选定：用于选择在菜单对象中显示的初始项。如果在“属性”面板的“类型”栏中选中“列表”单选按钮，可以将菜单转换为列表，同时“属性”面板中的“高度”文本框和“允许多选”复选框被激活，如图21.27所示。4747第21章 表 单 图21.27 选中“列表”单选按钮 4848第21章 表 单在“高度”文本框中可设置在列表中显示的选项的行数；选中“允许多选”复选框则允许用户选择多个选项。设置后的列表如图21.28所示。图2

15、1.28 列表4949第21章 表 单21.2.7 添加跳转菜单添加跳转菜单跳转菜单是一个特殊的菜单，每一个选项都有一个超级链接与之相对应。使用跳转菜单可以创建Web站点内文档的链接、其它Web站点上文档的链接、电子邮件链接以及图形链接等。添加跳转菜单的具体步骤如下：5050第21章 表 单(1)将光标移到页面中需要添加跳转菜单的位置。(2)单击“表单”插入栏中的按钮，弹出“插入跳转菜单”对话框，如图21.29所示。(3)在“文本”中输入菜单项的名称。(4)在“选择时，转到URL”中为跳转菜单添加超级链接。51 51第21章 表 单(5)在“打开URL于”选择打开链接的方式，在“菜单名称”文本

16、框中输入该菜单项的名称。(6)单击“+”按钮添加一个菜单项，用同样的方法设置其它菜单项。(7)单击“确定”按钮关闭对话框，即可在页面中添加一个跳转菜单，按F12键进行预览，效果如图21.30所示。5252第21章 表 单图21.29 “插入跳转菜单”对话框 5353第21章 表 单图21.30 跳转菜单5454第21章 表 单21.2.8 添加隐藏域添加隐藏域隐藏域用于存储需要向服务器提交的信息，但不在页面上显示，如保存一些状态信息，当用户下一次访问该网页时，自动对上一次访问的状态进行显示。添加隐藏域的具体步骤如下：5555第21章 表 单(1)将光标移到要添加隐藏域的位置。(2)单击“表单”

17、插入栏中的按钮即可在插入点处添加隐藏域，显示为图标，如图21.31所示。图21.31 添加的隐藏域5656第21章 表 单选择添加的隐藏域图标，点击右键，弹出其“属性”面板，如图21.32所示。该面板中各项参数的含义如下：(1)隐藏区域：输入隐藏域的名称，该名称可以被脚本或程序所引用。(2)值：输入隐藏域的值。图21.32 选择隐藏域后的“属性”面板5757第21章 表 单21.2.9 添加文件域添加文件域文件域可使访问者浏览本地电脑上的某个文件，实现上传文件的功能。添加文件域的具体步骤如下：(1)将光标移到表单中要添加文件域的位置。(2)单击“表单”插入栏中的按钮，在弹出的“输入标签辅助功能

18、属性”对话框的“标签文字”文本框中输入文本域的标签，如“上传附件”。5858第21章 表 单(3)单击“确定”按钮即可在表单中添加文件域，如图21.33所示。图21.33 文件域5959第21章 表 单(4)选择添加的文件域，可在“属性”面板中对其进行相应设置，各设置参数的含义与选择文字字段的“属性”面板相同，如图21.34所示。图21.34 选择文件域后的“属性”面板6060第21章 表 单21.2.10 添加图像域添加图像域网页中默认的按钮样式比较单一，如果需要制作一些漂亮的按钮，可以使用图像域插入一副图像来替代默认的按钮。添加图像域的具体步骤如下：(1)将光标移到表单中要添加图像域的位置。(2)单击“表单”插入栏中的按钮，在弹出的“选择图像源文件”对话框中选择要使用的图像，效果如图21.35所示。61 61第21章 表 单图21.35 添加的图像选择添加的图像域，点击右键弹出其“属性”面板，如图21.36所示。图21.36 选择图像域后的“属性”面板6262第21章 表 单该面板中各项参数的含义如下：(1)图像区域：设置图像区域的名称。(2)宽、高：设置图像区域的宽度和高度，直接在文本框中输入所需数值即可。(3)源文件：单击文本框后的按钮，可重新选择图像，也可直接输入图像的路径。(4)对齐：设置图像的对齐方式。(5)编辑图像：单击该按钮可启动Fireworks编辑图像。