帶記憶功能的表單


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

本實例主要是通過在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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM