calm down kid, I had to learn as fast as I can to answer your question.
its kinda complex but once you get a hold of it, its easy as a pie.
<!DOCTYPE HTML>
<HTML lang="en">
<head>
<title>
Incident Report
</title>
<META name="description" content="HTML5 WebDatabase Tutorial" />
<META name="keywords" content="HTML,CSS,JavaScript" />
<META name="Author" lang="en" content="Prasanna K Yalala" />
<style type="text/css">
html,body {
border: 0;
height: 100%;
font-family: arial, helvetica, sans-serif;
}
body{
background-color: rgba(0, 0, 0, 0.6);
color: #000;
height: 100%;
margin: 0;
}
#insert_incident_div {
display: none;
margin-top: 8%;
margin-left: 16%;
width: 425px;
}
#menu{
margin-top: 23%;
margin-left: 30%;
}
#retrieve_incident_div {
display: none;
margin-top: 5%;
margin-left: 15%;
width: 425px;
}
#control {
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD));
width: 500px;
position:absolute;
top: 50%;
left: 50%;
width:38em;
height:20em;
margin-top: -10em; /*set to a negative number 1/2 of your height*/
margin-left: -20em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
-webkit-box-shadow: 2px 2px 2px #999;
}
#control button{
border: none;
color: #888;
padding: 5px;
width: 125px;
height: 30px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 1px #888;
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC));
}
#control button:hover{
color: red;
}
#result_div {
color: red;
padding-top: 20px;
padding-left: 35px;
}
#message_box{
height: 80px;
margin: 0px auto -1px auto;
width: 275px;
border-radius: 5px;
background: #fff;
color: red;
display:none;
}
</style>
<script type="text/javascript">
/**
* Prasanna K Yalala
*
* References
* .tutorialspoint.com, Stackoverflow.com,
* html5rocks.com, Tizag.com, w3schools.com,
*
* Copyleft 2012, Nothing is Reserved.
*/
/** …