2.6.2表单应用示例

2.6.2　表单应用示例

下面制作一个类似于图2-39所示的登录页，学习表单、表格、表单对象的制作方法。

1. 图片准备

在图形软件(如Firworks等)中制作四张如图2-44所示的gif图片，复制到站点图像文件夹images中，为制作登录网页做好准备。

图2-44　登录网页的图像素材

2. 新建3张HTML网页

新建3张HTML网页，分别保存为：

(1)登录页login.html，用户填写登录信息页；

(2)提示页result.html，提示登录成功或失败；

(3)网站主页index.html，登录成功后自动进入网站主页。3张网页间的关系如图2-45所示。

图2-45　3张网页间的关系

3. 在登录页login.html中插入3行1列的表格1

(1)将表格边线、间距、填充都设为0，未设定表格宽度，将表格对齐属性设为居中对齐。

(2)在第一行插入图片login_main.gif。

(3)选择第三行，在HTML属性中设定其表格背景色为蓝色#3080B0(在扩展属性中)，高度为2像素，去掉单元格中的“&nbsp；”占位符，这一行就成了一条蓝色水平线段。这里利用单元格来制作水平线段。

4. 在表格1的第二行插入1行3列的表格2

(1)设置表格宽为100%，表格边框线、间距、填充都设为0。

(2)设定表格第一列和第三列背景色为颜色#3080B0，宽度为2像素，去掉单元格中的占位符“ ”，这两列就成了两根蓝色的短竖线。这里使用单元格来制作竖线段，结果如图2-46所示。

图2-46　利用单元格制作水平线段和竖直线段

与图2-43中的图像素材相比较，可看出login_main.gif图像下面多出了一长横线和两短竖线。

5. 插入表单

(1)在表格2的第二列(见图2-45中两短竖线之间的空白部分)插入表单，并设置表单的“动作”属性为：result.html，这里指定了表单提交以后的处理程序(网页)。

(2)在表单中插入4行1列的表格3，设置表格3的宽度为300像素，对齐类型为居中对齐，边框为0、间距为0、填充值为5像素。

(3)在表格3的第一行插入“用户名：”文本域，类型为“单行”，在第二行插入“密码：”文本域，类型为“密码”。

(4)在表格第三行插入复选框和文字“记住本次登录”，以及一个按钮，切换到“代码”视图，将按钮代码改为“登录”图片按钮，代码如下：

<input　type="image" src="images/login_button.gif" name="Submit"

value="提交"/>

(5)在表格的第四行插入两个按钮，与上一步类似地修改代码，将两个按钮修改为“免费注册”和“取回密码”的图片按钮(图片文件名分别为register.gif、getpass.gif)。

(6)补上合适的文字和空格。

到此，login.html网页已经完成，浏览结果如图2-38所示。

6. 修改网页result.html

(1)在网页中写入内容“登录成功！6 s后自动转跳到主页”。

(2)在 head 部分写入以下代码：

<meta http-equiv="refresh" content="6; url=index.html">

meta标签有许多功能，其中一个常用功能是设置自动转跳功能，使浏览器从一个地址转跳到另一个地址，其中content属性后的第一个整数值是延迟的秒数，第二个是表示要转跳的新地址。

7. 在主页index.html中写入适当的内容

双击login.html网页，随便输入一个用户名和密码，单击“登录”按钮，即转到result.html网页显示提示语，过6 s后自动跳转到index.html网页。

在这3张网页中，login.html是最新学习的表单网页，也是最重要的一张网页。这几张网页只实现了登录的外观与网页自动转跳，还没有真正检查用户名和密码，第7章将学习怎样判断用户名与密码是否正确。