实验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列的单元格中，用同样的方法插入另一个按钮，选中该按钮，在属性面板的【值】处输入“重置”；在【动作】处选择“重设表单”。
【操作技巧与注意事项】
1. 通过表单传送密码到服务器时并没有被加密。
如果需要加密需要采取其它手段。
2. 隐藏域中的内容在浏览器中不可见。
利用它可以实现浏览器和服务器在后台隐蔽地交换信息。
3. 如果要通过文件域向服务器上传文件，需要将表单域的【方法】设置为“POST”，【MIME类型】设置为“multipart/form-data”。
4. 一般来说，在表单中至少有一个提交按钮，用来向服务器提交表单。
5. 添加“检查表单”行为可以验证用户在表单中输入的数据是否符合要求。