HTML+CSS组织html页面_组织机构选择页面 html-优快云博客

本文链接：https://blog.youkuaiyun.com/Retina2016/article/details/53612977

这篇博客主要介绍如何运用HTML和CSS技术，根据家庭记账信息的需求，设计并创建一个用于更新信息的网页页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!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" οnclick="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回车后