表单作业

实验3.8 表单的应用

【相关知识】

1. 表单是用于申请或提交某些信息而填写的交互网页，属于网页动态元素。它是网站

管理者与浏览者之间沟通的桥梁。

2. 表单域是具有相互联系的、能够完成一定功能的表单对象的集合。一个网页中可有

多个表单域。

3. 表单对象指表单域中专门处理用户输入数据的元素。表单对象一般都添加在表单域

中。网页中的表单对象包括文本域、单选按钮、复选框、下拉列表、按钮等。

4. 表单不能嵌套，但是一个网页中可以有多个表单。

5. 提交表单的方法有两种：POST和GET。POST方法将在HTTP请求中嵌入表单数据，

通常用来传送大量数据。GET方法将表单数据附加在请求页面的URL地址后面，通常用来传送少量数据。

一、实验目的和要求

掌握使用表单设计新用户注册页面的方法。页面的设计效果如图3-8所示。

图3-8 “新用户注册”页面的效果图

二、实验步骤

1. 新建一个网页文档

启动Dreamweaver。单击【文件】→【新建】菜单命令，新建一个网页文档。

2. 插入表单域

（1）将光标放在网页上要插入表单域的位置。

（2）单击【插入】→【表单】→【表单】菜单命令，或者打开【表单插入栏】，单击上面的【表单】按钮。在网页中插入表单域。

3. 插入表格

（1）将光标放在表单域中，单击【文件】→【表格】菜单命令，打开【表格】对话框。

（2）在对话框中，设置【行数】为“13”；设置【列数】为“2”；设置【表格宽度】为“600像素”；单击【确定】按钮。插入一个13行2列的表格。

（3）选中该表格。在属性面板的【对齐】下拉列表中选择“居中对齐”。

4. 添加表单对象

（1）将光标放在第1行第1列的单元格中。单击【插入】→【表单】→【文本域】菜单命令，或者单击【表单插入栏】上面的【文本字段】按钮，插入一个文本域。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“会员号”。选中该文本域，在属性面板中，设置【字符宽度】为“20”；设置【最多字符数】为“20”；在【类型】处选择“单行”。将光标放在第1行第2列的单元格中，输入文字“（必填）”。

（2）将光标放在第2行第1列的单元格中。单击【插入】→【表单】→【文本域】菜单命令，或者单击【表单插入栏】上面的【文本字段】按钮，插入一个文本域。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“密码”。选中该文本域，在属性面板的【类型】处选择“密码”；设置【字符宽度】为“10”；设置【最多字符数】为“10”。将光标放在第2行第2列的单元格中，输入文字“（必填）”。

（3）将光标放在第3行第1列的单元格中。输入文字“性别”。单击【插入】→【表单】→【单选按钮】菜单命令，或者单击【表单插入栏】上面的【单选按钮】按钮，插入一个单选按钮。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“男”。

用同样的方法插入另一个单选按钮。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“女”。

（4）将光标放在第4行第1列的单元格中。单击【插入】→【表单】→【列表/菜单】菜单命令，或者单击【表单插入栏】上面的【列表/菜单】按钮，插入一个列表/菜单。

在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“常住地点”。选中该列表/菜单对象，在属性面板的【类型】处选择“列表”；设置【高度】为“2”；选中【允许多选】复选项。单击【列表值】按钮，打开【列表值】对话框。单击按钮，输入如表3-3所示的“常住地点”列表值数据。

表3-3 “常住地点”列表值数据

项目标签值

北京 1

上海 2

天津 3

广东 4

深圳 5

（5）将光标放在第5行第1列的单元格中，单击【插入】→【表单】→【文本域】菜单命令，或者单击【表单插入栏】上面的【文本字段】按钮，插入一个文本域。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“通讯地址”。选中该文本域，在属性面板的【类型】处选择“单行”；设置【字符宽度】为“30”；设置【最多字符数】为“50”。

（6）将光标放在第6行第1列的单元格中。单击【插入】→【表单】→【文本域】菜单命令，或者单击【表单插入栏】上面的【文本字段】按钮，插入一个文本域。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“E-Mail”。选中该文本域，在属性面板的【类型】处选择“单行”；设置【字符宽度】为“20”；设置【最多字符数】为“30”。将光标放在第6行第2列的单元格中，输入文字“（必填）”。

（7）将光标放在第7行第1列的单元格中。单击【插入】→【表单】→【列表/菜单】菜单命令，或者单击【表单插入栏】上面的【列表/菜单】按钮，插入一个列表/菜单。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“学历”。选中该列表/菜单对象，在属性面板的【类型】处选择“菜单”；单击【列表值】按钮，打开【列表值】对话框。单击按钮，输入如表3-4所示的“学历”列表值数据。

项目标签值

初中 1

高中 2

大专 3

本科 4

研究生 5

（8）将光标放在第8行第1列的单元格中。输入文字“个人爱好”。单击【插入】→【表单】→【复选框】菜单命令，或者单击【表单插入栏】上面的【复选框】按钮，插入一个复选框。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“体育运动”。用同样的方法插入另外5个复选框，在【输入标签辅助功能属性】对话框的【标签文字】文本框中分别输入“旅游”、“书画”、“写作”、“收藏”和“音乐”。（9）将光标放在第9行第1列的单元格中。单击【插入】→【表单】→【文件域】菜单命令，或者单击【表单插入栏】上面的【文件域】按钮，插入一个文件域。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“会员头像”。

（10）将光标放在第10行第1列的单元格中，单击【插入】→【表单】→【文本区域】菜单命令，或者单击【表单插入栏】上面的【文本区域】按钮，插入一个文本区域。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“备注”。选中该文本区域。在属性面板中，设置【字符宽度】为“30”；设置【行数】为“5”。

（11）将光标放在第11行第1列的单元格中，单击【插入】→【表单】→【按钮】菜单命令，或者单击【表单插入栏】上面的按钮，插入一个按钮。选中该按钮，在属性面板的【值】处输入“提交”；在【动作】处选择“提交表单”。将光标放在第11行第2列的单元格中，用同样的方法插入另一个按钮，选中该按钮，在属性面板的【值】处输入“重置”；在【动作】处选择“重设表单”。