制作一个图书馆新图书的数据入库页面。把新图书的各项参数准备提交给后台

最新推荐文章于 2024-06-20 14:46:50 发布

凌晨三点不睡觉1

最新推荐文章于 2024-06-20 14:46:50 发布

阅读量885

点赞数 1

分类专栏：前端学习记录文章标签： html 前端

本文链接：https://blog.csdn.net/qq_59397341/article/details/127416662

版权

前端学习记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html制作的静态页面，基础入门小作业。

界面中包括项：

ISBN, 图书名，作者、类别（自然、人文、历史、地理）、是否贷款（是，否），出版社（常用几个出版式，列表），出版日期，版次（只能介于1-5）、单价、图书简介、封面照片、提交按钮，复位取消按钮等。

要求：建议使用手机测试效果。使用表格布局，页面居中，字体和颜色搭配得当，整体界面协调和美观，实用性强。

核心代码：

<title>图书入库管理</title>
	</head>
	  <body background="image/t4.jpg">
		<form name="BookInput" action="myServlet1" method="post">
		<h1 align="center"><strong>图书馆新书入库管理系统</strong></h1>
		<hr align=center width="50%" size="4" color="white">
		<table align="center">
		<tr>
		<td>图书名：</td>
		<td><input type="text" placeholder="请输入完整图书名字" name="name" size="20" maxlength="20"></td>
        </tr>
		<tr>
		<td>ISBN：</td><td><input type="text" name="ISBN"  size="20" maxlength="20" placeholder="ISBN"></td>
		</tr>
		<tr>
		<td>作者：</td><td><input type="text" placeholder="请输入作者名字"name="name"  size="10" maxlength="10"></td>
		</tr>
		<tr>
			<td>类别：</td>
			<td>
			<input type="checkbox" name="type" value="自然" checked="checked">自然
		     <input type="checkbox" name="type" value="人文">人文
			 <input type="checkbox" name="type" value="历史">历史
			 <input type="checkbox" name="type" value="地理">地理<br>
			 </td>
	    </tr>
		<tr>
		<td>贷款与否:</td>
		<td><input type="radio" name="judje" value="是">是
		<input type="radio" name="judge" value="否">否<br>
		</td>
		</tr>
		<tr>
		<td>出版社：</td>
		<td><select name="mj">
			<option value="1">人民教育出版社</option>
			<option value="2">人民文学出版社</option>
			<option value="3" selected="selected">商务印书馆</option>
			<option value="4">中华书局</option>
			<option value="5">元月出版社</option>
			<option value="6">科学出版社</option>
			</select>
			</td>
		</tr>
		<tr>
			<td>出版日期：</td>
			<td><input type="date"></td>
		</tr>
		<tr>
			<td>版次：</td>
			<td><input type="number" name="number" max="5" min="1" value="2"></td>
		</tr>
		<tr>
			<td>单价：</td>
			<td><input type="number" name="number" step="0.01"></td>	
		</tr>
		<tr>
			<td>图书简介:</td>
			<td align="left"><textarea name="intr" cols="50" rows="4"></textarea></td>>
		</tr>
		<tr>
			<td>图书封面照片：</td><td><input type="file" name="pho"></td>
		</tr>
		</table>
		<table>
		<tr rowspan="3" align="right">
			<td width="700"><input type="submit" value="提交">
			<input type="reset" value="重置"></td>
		</tr>
		</table>
		</form>

手机测试效果：