HTML+CSS组织html页面

来源：互联网发布：数据查询平台微信编辑：程序博客网时间：2024/05/02 01:01

按需求设计出所需的页面，这里还是以家庭记账信息为例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">function duihua(){alert()}</script><style type="text/css">.button{width:500px;margin: auto;}.btnDiv{width:100%;}</style></head><body><form name="Family Accent" method="post" action=""><div align="center">家庭记账系统</div><div align="right" class="button"> <input type="submit" name="submit1"  href="form2-add.html"value="添加"><input type="submit" onclick="duihua()" name="submit6" value="查询"><input type="submit" name="submit3" value="导出"><input type="submit" name="submit5" value="打印"></div><table width="500" border="2" align="center" > <tr bgcolor="#cccccc" border=1 bordercolor=black>  <th>日期</th>  <th>类别</th>  <th>价格</th>  <th>备注</th>  <th colspan="2">操作</th> </tr> <tr align=center border=1 bordercolor=black>  <td>2016-11-20</td>  <td>食物</td>  <td>5</td>  <td>土豆</td>  <td><input type="submit" name="submit2" value="删除"></td>  <td><input type="submit" name="submit4" value="编辑"></td> </tr> <tr align=center border=2 bordercolor=black>   <td>2016-11-20</td>  <td>交通</td>  <td>200</td>  <td>加油</td>  <td><input type="submit" name="submit2" value="删除"></td>  <td><input type="submit" name="submit4" value="编辑"></td> </tr></table></form></body></html>

将此页面保存为form2.html, 此时在浏览器中输入url地址http://localhost:8080/WebProject/form2.html回车后

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><form name="FamilyAccent" method="post" action="/WebProject/family/add"><table width="500" border="0" align="center" cellpadding="0"cellspacing="2"><tr><td width="243" height="25">添加信息</td></tr><tr><td height="25">日期：</td><td width="351"><input type="date" name="day" id="day"></td></tr><tr><td height="25">类别：</td><td ><select name="classification" id="classification"><option value="food">食物</option><option value="medical">医疗</option><option value="entertainment">娱乐</option><option value="house">房屋</option><option value="cloth">衣服</option><option value="travel">旅行</option><option value="study">学习</option><option value="communication">交际</option><option value="child">沈心</option><option value="telephone">手机话费</option><option value="labour">劳保</option><option value="traffic">交通</option><option value="hydroelectricity">水电气</option><option value="other">其他</option></select></td></tr><tr><td height="25">价格：</td><td ><input type="text" name="price" id="price"></td></tr><tr><td height="25">备注：</td><td><textarea rows="6" cols="10" name="remark" id="remark"></textarea></td></tr><tr><td height="25" align="center"> <input type="submit" name="submit5" id="sub" value="提交"><input type="reset" name="submit6" value="重置"></td></tr></table></form><script type="text/javascript" src="/WebProject/js/jquery-3.1.1.js"></script><script type="text/javascript">$(function(){$("#sub").bind('click',function(){console.log("sub click");var day = $("#day").val();if(day == ""){alert("日期不可为空");return false;}var price = $("#price").val();if(price == ""){alert("价格不可为空");return false;}});});</script></body></html>

将此页面保存为form2-add.html,此时在浏览器中输入url地址http://localhost:8080/WebProject/form2-add.html回车后

增加一个更新信息的页面

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><form name="familyAccent" method="post" action="/WebProject/family/update"><table width="500" border="0" align="center" cellpadding="0"cellspacing="2"><tr><td width="243" height="25">编辑信息</td></tr><tr><td height="25">Id：</td><td width="351"><input type="text" name="fid" id="fid"></td></tr><tr><td height="25">日期：</td><td width="351"><input type="date" name="day" id="day"></td></tr><tr><td height="25">类别：</td><td ><select name="classification" id="classification"><option value="food">食物</option><option value="medical">医疗</option><option value="entertainment">娱乐</option><option value="house">房屋</option><option value="cloth">衣服</option><option value="travel">旅行</option><option value="study">学习</option><option value="communication">交际</option><option value="child">沈心</option><option value="telephone">手机话费</option><option value="labour">劳保</option><option value="traffic">交通</option><option value="hydroelectricity">水电气</option><option value="other">其他</option></select></td></tr><tr><td height="25">价格：</td><td ><input type="text" name="price" id="price"></td></tr><tr><td height="25">备注：</td><td><textarea rows="3" cols="10" name="remark" id="remark"></textarea></td></tr><tr><td height="25" align="center"> <input type="submit" name="submit5" id="sub" value="更新"><input type="reset" name="submit6" value="重置"></td></tr></table></form><script type="text/javascript" src="/WebProject/js/jquery-3.1.1.js"></script><script type="text/javascript">$(function(){$("#sub").bind('click',function(){console.log("sub click");var fid = $("#fid").val();if(fid == ""){alert("Id不可为空");return false;}var day = $("#day").val();if(day == ""){alert("日期不可为空");return false;}var classification = $("#classification").val();if(classification == ""){alert("类别不可为空");return false;}var price = $("#price").val();if(price == ""){alert("价格不可为空");return false;}});});</script></body></html>

将此页面保存为form2-update.html,此时在浏览器中输入url地址http://localhost:8080/WebProject/form2-update.html回车后

0 0