<style type = "text/css">



  body{background-color:#acacac;}



 form{width:250px;

	  height:120px;

	  background-color:#cccccc;

	  padding:0.5em;

	  border:1px solid #bcbcbc;

	  

	  position:absolute;

	  left:550px;

	  top:200px;}



 #btn{width:267px;

	  height:20px;

	  background-color:#cccccc;

	  

	  position:absolute;

	  left:550px;

	  top:310px;}



#list{

	width:260px;

	height:130px;



	overflow:scroll;

    visibility:hidden;



	position:absolute;

	left:550px;

	top:325px;}



 .required:after{content:"*"; color:red;}



</style>

<form action = "" method = "post">

  <table >



  <tr>

  <td><label for  = "name"  class = "required" >Name:</label></td>

  <td><input type = "text" id = "name"  autofocus/></td>

  </tr>



  <tr>

  <td><label for = "age" class = "required">Age:</label></td>

  <td><input type = "number" id = "age" /></td>

  </tr>



  <tr>

  <td><label for = "city"  class = "required" >City</label></td>

  <td><input type = "text" id = "city"  /></td>

  </table>

  </form>



  <div id = "btn">

  <input  type = "submit" id = "btnreset" value = "Reset Data"/>

  <input type = "submit" id = "btnok" value = "Insert Data"/>

  <input type = "submit" id = "btnlist" value = "List Data">

  </div>

  

<table id = "list">

   <tr><th>Name</th><th>Age</th><th>City</th></tr>

   </table>

<script type = "text/javascript">

  var db = null;

  var info = {};



        var nameNode = document.getElementById("name");

		nameNode.addEventListener("blur",function(event)

		 {

			 var curV = nameNode.value;

			 var pattern = /[a-z A-Z 0-9]+/i;

			 if (!pattern.test(curV) || curV.length < 3|| curV === null || curV ==="undefined" )

			 {

				 alert("Invalidate name, enter again...");

				 nameNode.focus();

			 }

		 },false);



		 var ageNode = document.getElementById("age");

		 ageNode.addEventListener("blur",function(event)

		 {

			 var curV&nbs