where to put <form> tag in dynamic rows?

In the below code when i write <form> tag after <BODY> i am getting weird exception.
"Internet explorer cannot open internet site ;operation aborted".you can check the code in your browser.

but when i place <form> after end </script> tag then page is coming .i dont know what is the exact problem?Is it browser problem or Coding problem?.

My only intention to read form elements at the server side.In the present code when i submit the page values are not coming to the servlet page where i need to read the values and insert into the database.

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
   <BODY>
        <form>
 
  <script language="JavaScript">
   
 table=document.createElement("table");
        table.setAttribute("id","TableA");
        table.setAttribute("border","0");
        table.setAttribute("width","50%");
        table.bgColor="lightblue"
    body = document.createElement("tbody");
    row =document.createElement("tr");
            cell11 =document.createElement("td");
    cell11.appendChild(document.createTextNode(''));
        cell11.setAttribute("width","5%");
    row.appendChild(cell11);
 
    cell0 =document.createElement("td");
    cell0.appendChild(document.createTextNode('Sno'));
        cell0.setAttribute("id","Sno");
        cell0.setAttribute("width","5%");
    row.appendChild(cell0);
 
 
    cell1 =document.createElement("td");
    cell1.appendChild( document.createTextNode('ContainerType'));
        cell1.setAttribute("width","10%");
        cell1.setAttribute("font-style" ,"italic");
    row.appendChild(cell1);
 
   cell2 =document.createElement("td");
   cell2.setAttribute("width","10%");
    cell2.appendChild( document.createTextNode('ContainerNumber'));
    row.appendChild(cell2);
 
        cell3 =document.createElement("td");
        cell3.setAttribute("width","20%");
    cell3.appendChild( document.createTextNode('ContainerDescription'));
    row.appendChild(cell3);
        body.appendChild(row);
 
	window.onload =function dynamicRows()
	{
	  
					
	 
			row1 =document.createElement("tr");
	 
	 
		cell10 =document.createElement("td");
			check= document.createElement("input");
			check.setAttribute("type","checkbox");
			check.setAttribute("name","checked");
			check.setAttribute("value","true");
	 
		cell10.appendChild(check);
		row1.appendChild(cell10);
	 
	 
		cell8 =document.createElement("td");
			cell8.appendChild(document.createTextNode(document.getElementById('TableA').rows.length));
			row1.appendChild(cell8);
	 
	 
	 
		cell4 =document.createElement("td");
			select =document.createElement("select");
			select.setAttribute("name","contype");
			select.setAttribute("id","contype0");
	 
			option =document.createElement("option");
			option.setAttribute("value","20F");
			option.appendChild(document.createTextNode("20F"));
			select.appendChild(option);
	 
			option =document.createElement("option");
			option.setAttribute("value","40H");
			option.appendChild(document.createTextNode("40H"));
			select.appendChild(option);
	 
			option =document.createElement("option");
			option.setAttribute("value","60L");
			option.appendChild(document.createTextNode("60L"));
			select.appendChild(option);
	 
			option =document.createElement("option");
			option.setAttribute("value","80M");
			option.appendChild(document.createTextNode("80M"));
			select.appendChild(option);
	 
		cell4.appendChild(select);
		row1.appendChild(cell4);
	 
		cell5 =document.createElement("td");
			ContainerInput= document.createElement("input");
			ContainerInput.setAttribute("type","text");
			ContainerInput.setAttribute("name","containerno");
			ContainerInput.setAttribute("value",'CONATIONER156');
	 
		cell5.appendChild(ContainerInput);
		row1.appendChild(cell5);
	 
	 
		cell6 =document.createElement("td");
			ContainerDesc= document.createElement("input");
			ContainerDesc.setAttribute("type","text");
			ContainerDesc.setAttribute("name","containerdesc");
			ContainerDesc.setAttribute("value",'TU');
	 
		cell6.appendChild(ContainerDesc);
		row1.appendChild(cell6);
	 
			cell7 =document.createElement("td");
			add= document.createElement("input");
			add.setAttribute("type","button");
			add.setAttribute("name","add");
			add.setAttribute("value","+");
			add.onclick = function(){ addRow(); }
		cell7.appendChild(add);
		row1.appendChild(cell7);
	 
					if(document.getElementById('TableA').rows.length >1)
					{
							 cell9 =document.createElement("td");
							remove= document.createElement("input");
							remove.setAttribute("type","button");
							remove.setAttribute("id","remove");
							remove.setAttribute("name","remove");
							remove.setAttribute("value","-");
			
							remove.onclick = function(){  
											removeRow(this);
							};
	 
	 
							cell9.appendChild(remove);
							row1.appendChild(cell9);
					}
							body.appendChild(row1);
	 
					if(document.getElementById('contype0'))
									{
					
							for (j=0;j<document.getElementById('contype0').length;j++)
													  {
															   if ('20F' == document.getElementById('contype0').options[j].value)
															   {
																			document.getElementById('contype0').options[j].selected = true;  
																		 break;
															   }
													  }
									}
	 
	 
			
	}
 
        table.appendChild(body);
    document.body.appendChild(table);
 
                        
 
 function addRow()
  {
         dynamicRows();
  }
function removeRow(theRow){
 
                var tab=document.getElementById('TableA');
                index= theRow.parentNode.parentNode.rowIndex;
       tab.deleteRow(index);
 
          for (i=1;i<tab.rows.length;i++)
          {
                        tab.rows[i].cells[1].innerHTML = i;
          }
}
 
 
  </script>
 
 
 
 
 
         <input type="submit" name="submit" value="submit">
 
 </form>
 
 </BODY>
</HTML>

You can use this demo as a standard, when you are creating table element's.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="en">
<HEAD>
<META http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>DEMO</TITLE>
<SCRIPT type="text/javascript">
<!--
var createTable;

createTable = function() {
tableATT = document.createAttribute("style");
tableATT.nodeValue = "background-color : lightblue; color : white;";

form = (( document.getElementById ) ? document.getElementById("frm") : document.all.frm );

table = document.createElement("table");
tbody = document.createElement("tbody");

table.setAttributeNode( tableATT );
table.width = "100%"
table.id = "TableA";
table.border = "0";
tbody.id = "tb";
table.appendChild(tbody);
form.appendChild(table);
t = (( document.getElementById ) ? document.getElementById("tb") : document.all.tb );
cell11 = t.insertRow( 0 ).insertCell(0);
cell11.appendChild(document.createTextNode("1")); // Goes with row1 cell1

cellWidth = document.createAttribute("style");
cellWidth.nodeValue = "width: 5%;";
cell11.setAttributeNode( cellWidth ); // Setting the attribute cell11

cell0 = t.rows[0].insertCell(1);
cell0.appendChild(document.createTextNode("Sno")); // cell2

cell1 = t.rows[0].insertCell(2);
cell1.appendChild(document.createTextNode("ContainerType")); // cell3

cell2 = t.rows[0].insertCell(3);
cell2.appendChild(document.createTextNode("ContainerNumber")); // cell4

cell3 = t.rows[0].insertCell(4);
cell3.appendChild(document.createTextNode("ContainerDescription")); // cell5

cell0.id = "Sno"; // Setting the id for cell0.

cell0Width = document.createAttribe("style"); // Setting attribute with cell0
cell0Width.nodeValue = "5%";
cell0.setAttributeNode( cell0Width );
// You can simplify things, if you will code your page in this way.
 
};
window.onload = createTable;
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM id="frm" action="#" onsubmit="return false;">
<DIV> 
<INPUT type="submit" name="submit" value="submit">
</DIV>
</FORM>
</BODY>
</HTML>
This article has been dead for over six months. Start a new discussion instead.