在一般情况下,用户提交表单后,将会跳转到另一个页面,同时表单中的内容也会清空。而有时为了简化操作步骤,需要保留历史信息,即当用户再返回原来页面时,还可以看到刚才所填写的信息。以下实例,当用户刷新或者单击“确定”按钮提交表单后再退回到原来页面时,文本框中的内容将保持不变。如下图所示:
本实例主要是通过在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"> 添加商品信息</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"> </td> <td height="22" colspan="3"><input type="button" name="Submit" value="确定" onClick="javascript:window.location.href='test.htm';"> <input type="reset" name="Submit2" value="重置"></td> </tr> </table> </form> </body> </html>