我最近开始学习JavaScript和PHP。在我的代码中，我想以管理员身份向系统添加项目。到目前为止，我已经完成了验证。这个验证不是那么严格，但它提交的表单没有显示空字段或填写错误的字段。由于我是初学者，我无法发现错误，但代码工作正常。有任何建议可以避免这些错误并正确进行验证吗？
getImageUri(Bitmap inImage){
String path = MediaStore.Images.Media.insertImage(getApplicationContext.getContentResolver(), inImage, "Title", "");
return path;
}
function validateForm() {
var item = document.add.item.value;
var type = document.add.type.value;
var category = document.add.category.value;
var title = document.add.title.value;
var publisher = document.add.publisher.value;
var year = document.add.year.value;
var place = document.add.place.value;
var Abstract = document.add.Abstract.value;
var medium = document.add.medium.value;
var edition = document.add.edition.value;
var number = document.add.number.value;
var shelf = document.add.shelf.value;
var call = document.add.call.value;
var barcode = document.add.barcode.value;
var pages = document.add.pages.value;
var Barcode = barcode.length;
if (item == "" || type == "" || category == "" || title == "" || publisher == "" || year == "" || place == "" || Abstract == "" || medium == "" || edition == "" || number == "" || shelf == "" || call == "" || barcode == "" || pages == "") {
alert("Please fill all details");
return false;
}
if ((Barcode >= 17) || (Barcode < 12)) {
alert("Password should have 12 - 16 characters");
return false;
}
if (isNaN(barcode)) {
alert("Incorrect Bar Code Number");
return false;
}
}body {
background-color: #9cb4c0;
background-size: 100% 100%;
}
.div-1 {
float: right;
padding: 20px 10px;
}
h2 {
text-align: right;
}
a:link {
color: rgb(7, 19, 86);
background-color: transparent;
text-decoration: none;
font-size: 20px;
}
a:visited {
color: orange;
background-color: transparent;
text-decoration: none;
}
a:active {
color: rgb(216, 120, 10);
background-color: transparent;
text-decoration: underline;
}
.list-1 {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
text-align : right;
}
.list-1:active {
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.list-1 li a {
float: right;
display: block;
padding: 8px;
text-align: center;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
color: #666;
}
.list-1 li a:hover {
background-color: #ff6c00;
}
.list-2 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #228bbb;
}
.list-2 a {
border-right: 1px solid #bbb;
float: left;
display: block;
padding: 14px 16px;
color: rgb(7, 19, 86);
}
.list-2 a:hover:not(.active) {
background-color: #ff6c00;
}
.list-2 .active {
background-color: #ff6c00;
}
.button-1, .button-2 {
background-color: #2980B9;
color: white;
font-family: arial;
border: none;
padding: 10px 10px;
text-align: center;
display: inline-block;
margin: 4px 8px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
font-style: italic;
outline: none;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button-1:active, .button-2:active {
background-color: #2980B9;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
footer {
clear: both;
position: relative;
z-index: 10;
height: 1em;
text-align: center;
background-color: #228bbb;
color: black;
}
答案 0 :(得分：2)
只需替换此
var item=document.getElementById("item").value;
var type=document.getElementById("type").value;
var category=document.getElementById("category").value;
var title=document.getElementById("title").value;
var publisher=document.getElementById("publisher").value;
var year=document.getElementById("year").value;
var place=document.getElementById("place").value;
var Abstract=document.getElementById("Abstract").value;
var medium=document.getElementById("medium").value;
var edition=document.getElementById("edition").value;
var number=document.getElementById("number").value;
var shelf=document.getElementById("shelf").value;
var call=document.getElementById("call").value;
var barcode=document.getElementById("barcode").value;
var pages=document.getElementById("pages").value;
var Barcode = barcode.length;
function validateForm() {
var item=document.getElementById("item").value;
var type=document.getElementById("type").value;
var category=document.getElementById("category").value;
var title=document.getElementById("title").value;
var publisher=document.getElementById("publisher").value;
var year=document.getElementById("year").value;
var place=document.getElementById("place").value;
var Abstract=document.getElementById("Abstract").value;
var medium=document.getElementById("medium").value;
var edition=document.getElementById("edition").value;
var number=document.getElementById("number").value;
var shelf=document.getElementById("shelf").value;
var call=document.getElementById("call").value;
var barcode=document.getElementById("barcode").value;
var pages=document.getElementById("pages").value;
var Barcode = barcode.length;
if (item == "" || type == "" || category == "" || title == "" || publisher == "" || year == "" || place == "" || Abstract == "" || medium == "" || edition == "" || number == "" || shelf == "" || call == "" || barcode == "" || pages == "") {
alert("Please fill all details");
return false;
}
if ((Barcode >= 17) || (Barcode < 12)) {
alert("Password should have 12 - 16 characters");
return false;
}
if (isNaN(barcode)) {
alert("Incorrect Bar Code Number");
return false;
}
}body {
background-color: #9cb4c0;
background-size: 100% 100%;
}
.div-1 {
float: right;
padding: 20px 10px;
}
h2 {
text-align: right;
}
a:link {
color: rgb(7, 19, 86);
background-color: transparent;
text-decoration: none;
font-size: 20px;
}
a:visited {
color: orange;
background-color: transparent;
text-decoration: none;
}
a:active {
color: rgb(216, 120, 10);
background-color: transparent;
text-decoration: underline;
}
.list-1 {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
text-align : right;
}
.list-1:active {
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.list-1 li a {
float: right;
display: block;
padding: 8px;
text-align: center;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
color: #666;
}
.list-1 li a:hover {
background-color: #ff6c00;
}
.list-2 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #228bbb;
}
.list-2 a {
border-right: 1px solid #bbb;
float: left;
display: block;
padding: 14px 16px;
color: rgb(7, 19, 86);
}
.list-2 a:hover:not(.active) {
background-color: #ff6c00;
}
.list-2 .active {
background-color: #ff6c00;
}
.button-1, .button-2 {
background-color: #2980B9;
color: white;
font-family: arial;
border: none;
padding: 10px 10px;
text-align: center;
display: inline-block;
margin: 4px 8px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
font-style: italic;
outline: none;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button-1:active, .button-2:active {
background-color: #2980B9;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
footer {
clear: both;
position: relative;
z-index: 10;
height: 1em;
text-align: center;
background-color: #228bbb;
color: black;
}<!DOCTYPE HTML>
<html>
<head>
<title> SLIIT LIBRARY </title>
<link rel = "stylesheet" type = "text/css" href = "Style.css"/>
<script src = "//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type = "text/JavaScript" src = "FormValidation.js"></script>
</head>
<body>
<img src = "SLIIT.png" width = "300" height = "200" />
<div class = "div-1">
<ul class = "list-1">
<li>
<a href = "Register to the system.html" target = "_blank"> Register </a>
</li>
<li>
<a href = "Login to the system.html" target = "_blank"> Staff </a>
</li>
</ul>
<h2>
<a href = "/SLIIT LIBRARY/" target = "_blank"> SLIIT LIBRARY</a>
</h2>
</div>
<ul class = "list-2">
<li> <a href = "/Home/" target = "_blank"> Home </a> </li>
<li> <a href = "/Add Material/" target = "_blank"> Add Material </a> </li>
<li> <a href = "/Search/" target = "_blank"> Search </a> </li>
<li> <a href = "/Borrowed Books/" target = "_blank"> Borrowed Books </a> </li>
<li> <a href = "/Member Details/" target = "_blank"> Member Details </a> </li>
</ul>
<center>
<h3>Adding New Material</h3>
<form id = "add" name = "SLIIT Library" method = "POST" action = "" onsubmit = "return validateForm()">
<table>
<tr>
<td>Item Number</td>
<td><input type = "text" name = "Item Number" id = "item" placeholder = "B001"></td>
</tr>
<tr>
<td>Item Type</td>
<td>
<select name = "Item Type" id = "type">
<option>---Select One---</option>
<option>Book</option>
<option>Standard</option>
<option>Journal</option>
<option>CD</option>
<option>Article</option>
</select>
</td>
</tr>
<tr>
<td>Category </td>
<td>
<select name = "Category" id = "category">
<option>---Select One---</option>
<option>Information Technology</option>
<option>Business Management</option>
<option>Enginerring</option>
<option>General</option>
</select>
</td>
</tr>
<tr>
<td>Title </td>
<td><input type = "text" name = "Title" id = "title" placeholder = "JavaScript and PHP"></td>
</tr>
<tr>
<td>Publisher </td>
<td><input type = "text" name = "Publisher" id = "publisher" placeholder = "JavaScript and PHP"></td>
</tr>
<tr>
<td>Year of Publication </td>
<td><input type = "date" name = "Year of Publication" id = "year"></td>
</tr>
<tr>
<td>Place of Publisher</td>
<td><input type = "text" name = "Place of Publisher" id = "place" placeholder = "England"></td>
</tr>
<tr>
<td>Abstract </td>
<td><textarea name = "Abstract" id = "Abstract" rows = "3" cols = "18"></textarea>
</tr>
<tr>
<td>Medium </td>
<td>
<select name = "Medium" id = "medium">
<option>---Select One---</option>
<option>English</option>
<option>Sinhala</option>
<option>Tamil</option>
</select>
</td>
</tr>
<tr>
<td>Edition </td>
<td><select name = "Edition" id = "edition"/>
<option>---Select One---</option>
</td>
</tr>
<tr>
<td>ISBN/ISSN No </td>
<td><input type = "text" name = "ISBN/ISSN No" id = "number"></td>
</tr>
<tr>
<td>Shelf Number </td>
<td><input type = "number" name = "Shelf Number" id = "shelf" min = "1"></td>
</tr>
<tr>
<td>Call Number </td>
<td><input type = "number" name = "Call Number" id = "call" min = "1"></td>
</tr>
<tr>
<td>Bar Code No </td>
<td><input type = "number" name = "Bar Code No" id = "barcode" min = "0"></td>
</tr>
<tr>
<td>No of Pages </td>
<td><input type = "number" name = "No of Pages" id = "pages" min = "1"></td>
</tr>
<tr>
<td></td>
<td>
<input class = "button-1" type = "submit" name = "Insert" id = "submit" value = "Insert">
<input class = "button-2" type = "reset" name = "reset" value = "Reset">
</td>
</tr>
</table>
</form>
</center>
<div>
<footer>
<pre> Copyright © Sri Lanka Institute of Information Technology, 2017 - All rights Reserved. </pre>
</footer>
</div>
</body>
</html>
答案 1 :(得分：2)
function validateForm() {
var item = document.forms["myForm"]["item"].value;
var type = document.forms["myForm"]["type"].value;
var category = document.forms["myForm"]["category"].value;
var title = document.forms["myForm"]["title"].value;
var publisher = document.forms["myForm"]["publisher"].value;
var year = document.forms["myForm"]["year"].value;
var place = document.forms["myForm"]["place"].value;
var Abstract = document.forms["myForm"]["Abstract"].value;
var medium = document.forms["myForm"]["medium"].value;
var edition = document.forms["myForm"]["edition"].value;
var ISBN_number = document.forms["myForm"]["ISBN_number"].value;
var shelf = document.forms["myForm"]["shelf"].value;
var call = document.forms["myForm"]["call"].value;
var barcode = document.forms["myForm"]["barcode"].value;
var pages = document.forms["myForm"]["pages"].value;
var Barcode = barcode.length;
if (item == "" || type == "" || category == "" || title == "" || publisher == "" || year == "" || place == "" || Abstract == "" || medium == "" || edition == "" || number == "" || shelf == "" || call == "" || barcode == "" || pages == "") {
alert("All Field must be filled out");
return false;
}
if ((Barcode >= 17) || (Barcode < 12)) {
alert("Password should have 12 - 16 characters");
return false;
}
if (isNaN(barcode)) {
alert("Incorrect Bar Code Number");
return false;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<title> SLIIT LIBRARY </title>
<link rel = "stylesheet" type = "text/css" href = "Style.css"/>
<script type = "text/JavaScript" src = "FormValidation.js"></script>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src = "//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions
('forms-ext',
{
types: 'date'
}
);
webshims.polyfill
(
'forms forms-ext'
);
$.webshims.formcfg =
{
en:
{
dFormat: '-',
dateSigns: '-',
patterns:
{
d: "yy-mm-dd"
}
}
};
</script>
<style type="text/css">
body {
background-color: #9cb4c0;
background-size: 100% 100%;
}
.div-1 {
float: right;
padding: 20px 10px;
}
h2 {
text-align: right;
}
a:link {
color: rgb(7, 19, 86);
background-color: transparent;
text-decoration: none;
font-size: 20px;
}
a:visited {
color: orange;
background-color: transparent;
text-decoration: none;
}
a:active {
color: rgb(216, 120, 10);
background-color: transparent;
text-decoration: underline;
}
.list-1 {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
text-align : right;
}
.list-1:active {
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.list-1 li a {
float: right;
display: block;
padding: 8px;
text-align: center;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
color: #666;
}
.list-1 li a:hover {
background-color: #ff6c00;
}
.list-2 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #228bbb;
}
.list-2 a {
border-right: 1px solid #bbb;
float: left;
display: block;
padding: 14px 16px;
color: rgb(7, 19, 86);
}
.list-2 a:hover:not(.active) {
background-color: #ff6c00;
}
.list-2 .active {
background-color: #ff6c00;
}
.button-1, .button-2 {
background-color: #2980B9;
color: white;
font-family: arial;
border: none;
padding: 10px 10px;
text-align: center;
display: inline-block;
margin: 4px 8px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
font-style: italic;
outline: none;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button-1:active, .button-2:active {
background-color: #2980B9;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
footer {
clear: both;
position: relative;
z-index: 10;
height: 1em;
text-align: center;
background-color: #228bbb;
color: black;
}
</style>
</head>
<body>
<img src = "SLIIT.png" width = "300" height = "200" />
<div class = "div-1">
<ul class = "list-1">
<li>
<a href = "Register to the system.html" target = "_blank"> Register </a>
</li>
<li>
<a href = "Login to the system.html" target = "_blank"> Staff </a>
</li>
</ul>
<h2>
<a href = "/SLIIT LIBRARY/" target = "_blank"> SLIIT LIBRARY</a>
</h2>
</div>
<ul class = "list-2">
<li> <a href = "/Home/" target = "_blank"> Home </a> </li>
<li> <a href = "/Add Material/" target = "_blank"> Add Material </a> </li>
<li> <a href = "/Search/" target = "_blank"> Search </a> </li>
<li> <a href = "/Borrowed Books/" target = "_blank"> Borrowed Books </a> </li>
<li> <a href = "/Member Details/" target = "_blank"> Member Details </a> </li>
</ul>
<center>
<h3>Adding New Material</h3>
<form id="add" name="myForm" method="POST" action="" onsubmit="return validateForm()" novalidate>
<table>
<tr>
<td>Item Number</td>
<td><input type = "text" name = "Item Number" id = "item" placeholder = "B001"></td>
</tr>
<tr>
<td>Item Type</td>
<td>
<select name = "Item Type" id = "type">
<option>---Select One---</option>
<option>Book</option>
<option>Standard</option>
<option>Journal</option>
<option>CD</option>
<option>Article</option>
</select>
</td>
</tr>
<tr>
<td>Category </td>
<td>
<select name = "Category" id = "category">
<option>---Select One---</option>
<option>Information Technology</option>
<option>Business Management</option>
<option>Enginerring</option>
<option>General</option>
</select>
</td>
</tr>
<tr>
<td>Title </td>
<td><input type = "text" name = "Title" id = "title" placeholder = "JavaScript and PHP"></td>
</tr>
<tr>
<td>Publisher </td>
<td><input type = "text" name = "Publisher" id = "publisher" placeholder = "JavaScript and PHP"></td>
</tr>
<tr>
<td>Year of Publication </td>
<td><input type = "date" name = "Year of Publication" id = "year"></td>
</tr>
<tr>
<td>Place of Publisher</td>
<td><input type = "text" name = "Place of Publisher" id = "place" placeholder = "England"></td>
</tr>
<tr>
<td>Abstract </td>
<td><textarea name = "Abstract" id = "Abstract" rows = "3" cols = "18"></textarea>
</tr>
<tr>
<td>Medium </td>
<td>
<select name = "Medium" id = "medium">
<option>---Select One---</option>
<option>English</option>
<option>Sinhala</option>
<option>Tamil</option>
</select>
</td>
</tr>
<tr>
<td>Edition </td>
<td><select name = "Edition" id = "edition"/>
<option>---Select One---</option>
</td>
</tr>
<tr>
<td>ISBN/ISSN No </td>
<td><input type = "text" name = "ISBN/ISSN No" id = "ISBN_number"></td>
</tr>
<tr>
<td>Shelf Number </td>
<td><input type = "number" name = "Shelf Number" id = "shelf" min = "1"></td>
</tr>
<tr>
<td>Call Number </td>
<td><input type = "number" name = "Call Number" id = "call" min = "1"></td>
</tr>
<tr>
<td>Bar Code No </td>
<td><input type = "number" name = "Bar Code No" id = "barcode" min = "0"></td>
</tr>
<tr>
<td>No of Pages </td>
<td><input type = "number" name = "No of Pages" id = "pages" min = "1"></td>
</tr>
<tr>
<td></td>
<td>
<input class = "button-1" type = "submit" name = "Insert" id = "submit" value = "Insert">
<input class = "button-2" type = "reset" name = "reset" value = "Reset">
</td>
</tr>
</table>
</form>
</center>
<div>
<footer>
<pre> Copyright © Sri Lanka Institute of Information Technology, 2017 - All rights Reserved. </pre>
</footer>
</div>
</body>
</html>
答案 2 :(得分：1)
您的代码中存在语法错误。在线：
if (item == "" || type == "" || category == "" || title == "" || publisher == "" || year == "" || place == "" || Abstract == "" || medium == "" || edition == "" || number == "" || shelf == "" || cal == "" || barcode == "" || pages == "")
，您引用变量cal，而在此行中声明了一个名为call的变量：
var call = document.add.call.value;
修改：此外，您错误地使用了<select>。在您的代码中：
<select name = "Item Type" id = "type"/>
正确使用：
<form name="myForm">
<select name="selectField">
<option value="choice1">Choice 1</option>
<option value="choice2" selected="selected">Choice 2</option>
<option value="choice3">Choice 3</option>
</select>
</form>
<script type="text/javascript">
var selectField = document["myForm"].selectField; // document.myForm is correct as well
console.log(selectField.value);
</script>
AFAIK，您只能通过<form>属性引用name。 <input>和<select>元素也是如此。除非您使用document.getElementById(id)。更多例子：
<form name="my form" id="myForm">
<input type="text" name="foo bar" id="foo_bar" />
</form>
<script type="text/javascript">
var myForm = document["my form"];
var myFormById = document.getElementById("myForm");
console.log(myForm === myFormById);
var fooBar = myForm["foo bar"];
var fooBarById = document.getElementById("foo_bar");
console.log(fooBar === fooBarById);
</script>
答案 3 :(得分：1)
虽然你有一个很好的答案我想解释你的代码中发生了什么。
你定义了这个：
var item = document.add.item.value;
您正在尝试使用比较来验证：
if(item == "");
项目未定义，因此它不等于＆＃34;＆＃34; （空字符串），这就是您的代码验证的原因。
我猜你试图用这种语法来定义你的变量：
var item = document.forms.add.item.value;
您忘记包含对象表单，这就是您的变量未定义的原因。
只需在.forms之后添加document即可获得每个输入的值：
function validateForm() {
var item = document.forms.add.item.value;
var type = document.forms.add.type.value;
var category = document.forms.add.category.value;
var title = document.forms.add.title.value;
var publisher = document.forms.add.publisher.value;
var year = document.forms.add.year.value;
var place = document.forms.add.place.value;
var Abstract = document.forms.add.Abstract.value;
var medium = document.forms.add.medium.value;
var edition = document.forms.add.edition.value;
var number = document.forms.add.number.value;
var shelf = document.forms.add.shelf.value;
var call = document.forms.add.call.value;
var barcode = document.forms.add.barcode.value;
var pages = document.forms.add.pages.value;
var Barcode = barcode.length;
if (item == "" || type == "" || category == "" || title == "" || publisher == "" || year == "" || place == "" || Abstract == "" || medium == "" || edition == "" || number == "" || shelf == "" || call == "" || barcode == "" || pages == "") {
alert("Please fill all details");
return false;
}
if ((Barcode >= 17) || (Barcode < 12)) {
alert("Password should have 12 - 16 characters");
return false;
}
if (isNaN(barcode)) {
alert("Incorrect Bar Code Number");
return false;
}
}body {
background-color: #9cb4c0;
background-size: 100% 100%;
}
.div-1 {
float: right;
padding: 20px 10px;
}
h2 {
text-align: right;
}
a:link {
color: rgb(7, 19, 86);
background-color: transparent;
text-decoration: none;
font-size: 20px;
}
a:visited {
color: orange;
background-color: transparent;
text-decoration: none;
}
a:active {
color: rgb(216, 120, 10);
background-color: transparent;
text-decoration: underline;
}
.list-1 {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
text-align : right;
}
.list-1:active {
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.list-1 li a {
float: right;
display: block;
padding: 8px;
text-align: center;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
color: #666;
}
.list-1 li a:hover {
background-color: #ff6c00;
}
.list-2 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #228bbb;
}
.list-2 a {
border-right: 1px solid #bbb;
float: left;
display: block;
padding: 14px 16px;
color: rgb(7, 19, 86);
}
.list-2 a:hover:not(.active) {
background-color: #ff6c00;
}
.list-2 .active {
background-color: #ff6c00;
}
.button-1, .button-2 {
background-color: #2980B9;
color: white;
font-family: arial;
border: none;
padding: 10px 10px;
text-align: center;
display: inline-block;
margin: 4px 8px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
font-style: italic;
outline: none;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button-1:active, .button-2:active {
background-color: #2980B9;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
footer {
clear: both;
position: relative;
z-index: 10;
height: 1em;
text-align: center;
background-color: #228bbb;
color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title> SLIIT LIBRARY </title>
<link rel = "stylesheet" type = "text/css" href = "Style.css"/>
</head>
<body>
<img src = "SLIIT.png" width = "300" height = "200" />
<div class = "div-1">
<ul class = "list-1">
<li>
<a href = "Register to the system.html" target = "_blank"> Register </a>
</li>
<li>
<a href = "Login to the system.html" target = "_blank"> Staff </a>
</li>
</ul>
<h2>
<a href = "/SLIIT LIBRARY/" target = "_blank"> SLIIT LIBRARY</a>
</h2>
</div>
<ul class = "list-2">
<li> <a href = "/Home/" target = "_blank"> Home </a> </li>
<li> <a href = "/Add Material/" target = "_blank"> Add Material </a> </li>
<li> <a href = "/Search/" target = "_blank"> Search </a> </li>
<li> <a href = "/Borrowed Books/" target = "_blank"> Borrowed Books </a> </li>
<li> <a href = "/Member Details/" target = "_blank"> Member Details </a> </li>
</ul>
<center>
<h3>Adding New Material</h3>
<form id = "add" name = "SLIIT Library" method = "POST" action = "" onsubmit = "return validateForm()">
<table>
<tr>
<td>Item Number</td>
<td><input type = "text" name = "Item Number" id = "item" placeholder = "B001"></td>
</tr>
<tr>
<td>Item Type</td>
<td>
<select name = "Item Type" id = "type">
<option>---Select One---</option>
<option>Book</option>
<option>Standard</option>
<option>Journal</option>
<option>CD</option>
<option>Article</option>
</select>
</td>
</tr>
<tr>
<td>Category </td>
<td>
<select name = "Category" id = "category">
<option>---Select One---</option>
<option>Information Technology</option>
<option>Business Management</option>
<option>Enginerring</option>
<option>General</option>
</select>
</td>
</tr>
<tr>
<td>Title </td>
<td><input type = "text" name = "Title" id = "title" placeholder = "JavaScript and PHP"></td>
</tr>
<tr>
<td>Publisher </td>
<td><input type = "text" name = "Publisher" id = "publisher" placeholder = "JavaScript and PHP"></td>
</tr>
<tr>
<td>Year of Publication </td>
<td><input type = "date" name = "Year of Publication" id = "year"></td>
</tr>
<tr>
<td>Place of Publisher</td>
<td><input type = "text" name = "Place of Publisher" id = "place" placeholder = "England"></td>
</tr>
<tr>
<td>Abstract </td>
<td><textarea name = "Abstract" id = "Abstract" rows = "3" cols = "18"></textarea>
</tr>
<tr>
<td>Medium </td>
<td>
<select name = "Medium" id = "medium">
<option>---Select One---</option>
<option>English</option>
<option>Sinhala</option>
<option>Tamil</option>
</select>
</td>
</tr>
<tr>
<td>Edition </td>
<td><select name = "Edition" id = "edition"/>
<option>---Select One---</option>
</td>
</tr>
<tr>
<td>ISBN/ISSN No </td>
<td><input type = "text" name = "ISBN/ISSN No" id = "number"></td>
</tr>
<tr>
<td>Shelf Number </td>
<td><input type = "number" name = "Shelf Number" id = "shelf" min = "1"></td>
</tr>
<tr>
<td>Call Number </td>
<td><input type = "number" name = "Call Number" id = "call" min = "1"></td>
</tr>
<tr>
<td>Bar Code No </td>
<td><input type = "number" name = "Bar Code No" id = "barcode" min = "0"></td>
</tr>
<tr>
<td>No of Pages </td>
<td><input type = "number" name = "No of Pages" id = "pages" min = "1"></td>
</tr>
<tr>
<td></td>
<td>
<input class = "button-1" type = "submit" name = "Insert" id = "submit" value = "Insert">
<input class = "button-2" type = "reset" name = "reset" value = "Reset">
</td>
</tr>
</table>
</form>
</center>
<div>
<footer>
<pre> Copyright © Sri Lanka Institute of Information Technology, 2017 - All rights Reserved. </pre>
</footer>
</div>
</body>
</html>