带记忆功能的表单
在一般情况下，用户提交表单后，将会跳转到另一个页面，同时表单中的内容也会清空。而有时为了简化操作步骤，需要保留历史信息，即当用户再返回原来页面时，还可以看到刚才所填写的信息。以下实例，当用户刷新或者单击“确定”按钮提交表单后再退回到原来页面时，文本框中的内容将保持不变。如下图所示：
本实例主要是通过在css样式定义中，设置behavior确定对象的行为，并设置<meta>元信息标记中的name属性和content属性来实现保留历史信息的功能。<meta>标记是用来在HTML文件中模拟HTTP协议的响应头报文，是实现元数据的主要标记，它可以用于鉴别作者、标注内容提要和关键字、设定页面字符集、刷新页面等。在HTML文档头部可以包括任意数量的<meta>标记。
实现带记忆功能的表单的关键代码如下：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://HdhCmsTestw3.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 >
分类: XHTML+CSS
标签: 带记忆功能的表单 , meta , history
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did47472