天天看點

制作一個圖書館新圖書的資料入庫頁面。把新圖書的各項參數準備送出給背景

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>
           

手機測試效果:

制作一個圖書館新圖書的資料入庫頁面。把新圖書的各項參數準備送出給背景

 電腦端測試效果:

制作一個圖書館新圖書的資料入庫頁面。把新圖書的各項參數準備送出給背景