在一般情況下,用戶提交表單后,將會跳轉到另一個頁面,同時表單中的內容也會清空。而有時為了簡化操作步驟,需要保留歷史信息,即當用戶再返回原來頁面時,還可以看到剛才所填寫的信息。以下實例,當用戶刷新或者單擊“確定”按鈕提交表單后再退回到原來頁面時,文本框中的內容將保持不變。如下圖所示:
本實例主要是通過在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>