当前位置：网站首页 > 资源显示

html搜索框（表格布局）demo

发布时间：2017/5/2 21:36:40 / 最后修改：2017-5-2 21:37:45 / 浏览：773

效果如下图：

图片1：

图片2：

图片3：

完整代码（代码框可以往下拉高显示）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body {
	margin-left: 50px;
	margin-top: 50px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.soinput{line-height: 25px;height: 25px;width: 250px;border: 0px none #FFF;outline:none;}
</style>
</head>
<body>
<div class="topso">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<form action="so.asp?act=so" method="post" name="topsofrom"  id="topsofrom" onSubmit="return CheckTopSoForm();">
  <tr>
    <td width="32" height="31" background="images/soBg.jpg"><img src="images/so.jpg" width="32" height="31" /></td>
    <td width="278" background="images/soBg.jpg"><input name="soba" type="text" id="soba" class="soinput" /></td>
    <td width="90" align="center" bgcolor="#d7151d"><input name="submit" type="image" src="images/sogo.jpg" width="85" height="29" /></td>
  </tr>
</form> 
</table>
</div>
<script language="JavaScript" type="text/JavaScript">
function CheckTopSoForm(){
   if(document.topsofrom.soba.value.length==0)
 {
   alert("请输入搜索关键字！");
   document.topsofrom.soba.focus();
   return false;
 }	
}
</script>
</body>
</html>

附件资源（免费）

您尚未登录，暂时无法查阅资源！立即登录

插播广告区

发表评论

您尚未登录，暂时无法发表评论。立即登录

暂无任何评论

推荐资源更多 >>

付费资源更多 >>

广告区