项目十三 表单──制作注册网页（课件）-高二《网页设计与制作》同步教学（人民邮电版）

项目十三 表单──制作注册网页 创建表单 任务一 验证表单 任务二 任务一 创建表单 【操作步骤】 1.首先在Dreamweaver 8中定义一个本地静态站点，然后将“项目素材”文件夹中的内容复制到站点根文件夹下面，并打开网页文件“index.htm”。 2.将鼠标光标置于第2行单元格中，然后在菜单栏中选择【插入】／【表单】／【表单】命令，或在【插入】／【表单】面板中单击（表单）按钮插入一个空白表单，如图所示。 3.打开网页文件“index2.htm”。将其中的表格及其内容复制粘贴到网页文件“index.htm”的表单中，如图所示。 4.将鼠标光标置于“会员昵称：”右侧单元格中，然后在菜单栏中选择【插入】／【表单】／【文本域】命令，如果弹出【输入标签辅助功能属性】对话框，单击下面的链接，在弹出的【首选参数】对话框中修改首选参数，取消对【表单对象】复选框的勾选，这样再插入表单对象时就不会弹出【输入标签辅助功能属性】对话框而是直接插入表单，如图所示。 5.选中插入的文本域，在【属性】面板中设置各项属性，如图所示。 6.分别在“登陆密码：”和“密码确认：”后面的单元格中插入文本域，将它们设置为“密码”类型，如图所示。 7.在“电子邮件：”后面的单元格中插入文本域，属性设置如图所示。 8.将鼠标光标置于“性别：”后面的单元格内，然后在菜单栏中选择【插入】／【表单】／【单选按钮】命令，插入两个单选按钮，在【属性】面板中设置其属性参数，然后分别在两个单选按钮的后面输入文本“男”和“女”，如图所示。 9.将鼠标光标置于“出生年月：”后面的单元格内，然后在菜单栏中选择【插入】／【表单】／【列表／菜单】命令，插入两个【列表／菜单】域，分别代表“年”、“月”，如图所示。 10.选定代表“年”的表单域，在【属性】面板中单击 按钮，打开【列表值】对话框，添加【项目标签】和【值】，如图所示。 11.在【属性】面板中将名称设置为“dateyear”，如果有必要还可以设置初始化选项，这里不进行设置，如图所示。 12.按照相同方法设置代表“月”的菜单域，其中“月”的列表值从“1”到“12”，如图所示。 13.将鼠标光标置于“音乐：”后面的单元格内，然后在菜单栏中选择【插入】／【表单】／【复选框】命令，插入6个复选框，其中第一个复选框的参数设置如图所示，其他参数的设置依此类推。 14.将鼠标光标置于“自我介绍：”后面的单元格内，然后在菜单栏中选择【插入】／【表单】／【文本区域】命令，插入一个文本区域，如图所示。 15.将鼠标光标置于“自我介绍”下面的单元格内，然后在菜单栏中选择【插入】／【表单】／【隐藏域】命令，插入一个隐藏域来记录用户的注册时间，在【属性】面板中设置其属性参数，如图所示。 16.将鼠标光标置于“自我介绍：”下面的第2个单元格内，然后在菜单栏中选择【插入】／【表单】／【按钮】命令，插入两个按钮，并在【属性】面板中设置其属性参数，如图所示。 17.在“请阅读服务协议，并选择同意：”的后面插入一个复选框，属性设置如图所示。 18.在“请阅读服务协议，并选择同意：”下面的单元格内插入一个文本区域，属性设置如图所示 。 19.保证刚插入的文本区域处于选中状态，然后切换到【代码】视图，在“textarea”标签中加入代码“readonly=”readonly“”，设置该文本区域的内容为“只读”，如图所示。 20.将鼠标光标置于表单内，单击左下方的“<form>”标签，选中整个表单，可以在【属性】面板中设置表单属性，此处暂不设置，如图所示。 任务二 验证表单 【操作步骤】 1.将鼠标光标置于表单内，单击左下方的“<form>”标签，选中整个表单，然后在菜单栏中选择【窗口】／【行为】命令，打开【行为】面板，单击按钮，在弹出菜单中选择【检查表单】命令，打开【检查表单】对话框，如图所示。 2.将“UserName”、“E-mail”、“PassWord1”、“PassWord2”的【值】设置为“必需的”，其中“E-mail”的【可接受】选项设置为“电子邮件地址”，其他3个【可接受】选项设置为“任何东西”，并将“introduce”的【可接受】选项设置为“任何东西”，然后单击按钮，完成设置。 3.在【行为】面板中检查默认事件是否为【onSubmit】，如图所示。 4.在表单中右键单击按钮，在弹出的菜单中选择【编辑标签〔E〕<input>】命令，打开【标签编辑器－input】对话框，如图所示。 5.在对话框中选中【onClick】事件，在右侧的文本框中输入下图所示代码，然后单击 按钮，完成设置并保存网页。 6.预览网页，当两次输入的密码不相同，单击按钮时会自动弹出警示框，单击