• 带记忆功能的表单


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

    本实例主要是通过在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
  • 相关阅读:
    5.5团队冲刺08
    5.6团队冲刺09
    5.4团队冲刺07
    5.3团队冲刺06
    5.2团队冲刺05
    第14 周作业
    CentOS Linux release 7.4 yum 安装mariadb-5.5.65 登录报错 ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/data/mysql/mysql.sock' (2)
    第13周作业
    解析函数
    npm模块安装机制
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2805593.html
Copyright © 2020-2023  润新知