天天看点

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

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>
           

手机测试效果:

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

 电脑端测试效果:

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