带记忆功能的表单

在一般情况下，用户提交表单后，将会跳转到另一个页面，同时表单中的内容也会清空。而有时为了简化操作步骤，需要保留历史信息，即当用户再返回原来页面时，还可以看到刚才所填写的信息。以下实例，当用户刷新或者单击“确定”按钮提交表单后再退回到原来页面时，文本框中的内容将保持不变。如下图所示：

本实例主要是通过在css样式定义中，设置behavior确定对象的行为，并设置<meta>元信息标记中的name属性和content属性来实现保留历史信息的功能。<meta>标记是用来在HTML文件中模拟HTTP协议的响应头报文，是实现元数据的主要标记，它可以用于鉴别作者、标注内容提要和关键字、设定页面字符集、刷新页面等。在HTML文档头部可以包括任意数量的<meta>标记。

实现带记忆功能的表单的关键代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="save" content="history">
<title>带记忆功能的表单</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
input{
    font-family: "宋体";
    font-size: 9pt;
    color: #333333;
    border: 1px solid #999999;
}

.saveHistory{
behavior:url(#default#savehistory);
}
-->
</style>
</head>
<body style="font-size:12px">
<form name="form1">
  <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9900">
    <tr>
      <td height="22" colspan="4"><span class="style1" style="font-weight:bolder">&nbsp;&nbsp;添加商品信息</span></td>
    </tr>
    <tr align="left" bgcolor="#FFFFFF">
      <td height="22">商品名称:</td>
      <td height="22" colspan="3"><input name="textfield" type="text" class="wenbenkuang" size="35"></td>
    </tr>
    <tr align="left" bgcolor="#FFFFFF">
      <td height="22">商品规格:</td>
      <td height="22"><input name="textfield2" type="text" class="wenbenkuang"></td>
      <td height="22">计量单位:</td>
      <td height="22"><input name="txt_unit" type="text" class="saveHistory" id="txt_unit"></td>
    </tr>
    <tr align="left" bgcolor="#FFFFFF">
      <td height="22">供应商:</td>
      <td height="22" colspan="3"><input name="txt_co" type="text" class="saveHistory" id="txt_co" size="35"></td>
    </tr>
    <tr align="left" bgcolor="#FFFFFF">
      <td height="22">出厂日期:</td>
      <td height="22" colspan="3"><input name="textfield5" type="text" class="wenbenkuang"></td>
    </tr>
    <tr align="left" bgcolor="#FFFFFF">
      <td height="22">&nbsp;</td>
      <td height="22" colspan="3"><input type="button" name="Submit" value="确定" onClick="javascript:window.location.href='test.htm';">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="reset" name="Submit2" value="重置"></td>
    </tr>
  </table>
</form>
</body>
</html>

分类: XHTML+CSS

标签: 带记忆功能的表单, meta, history