CodingForums.com - Large number of HTML elements, Is there is any way to load the page faster?

Large number of HTML elements, Is there is any way to load the page faster?

I have a load page contains large number of html elements such as >150 forms and each forms having same name of elements but with different form names. E.g kindly please take a look over the attached html code. Since the requirement in such that I need to show all the 150 forms on one load. Also I try to use the yahoo YUI tab component, one tab contains 15 forms and the current screen is full already. I face a problem of very slow loading during initial load. Also I use ajax for server callings. So that I don’t have to redraw every time when I post something to the server. It works fine. Am looking a solution for initial load delay. Kindly please give me some tips over on this, how to overcome on this issue.

Thank you.

Code:

<DIV id = "divselectForm1" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">

<FORM NAME="selectForm1">

   <TABLE border="1" width="200" cellspacing="0" onMouseover="this.bgColor='gray'" onMouseout="this.bgColor='#99ccff'" bgcolor='#99ccff'>

    <TR>

      <TD>

        <INPUT type = radio Name=ts style="WIDTH: 10px" checked>

        <INPUT name=COL1 maxLength=2 value=11 style="WIDTH: 15px; BACKGROUND-COLOR: #ccff99">

        <SELECT NAME=COL2 style="WIDTH: 105px; COLOR:WHITE; BACKGROUND-COLOR: #3366CC" onchange="getagentids(this.form.name,'COL2');">

                <OPTION selected VALUE="SELECT">SELECT</OPTION>

                <OPTION VALUE="START" style="BACKGROUND-COLOR: lightgreen">START</OPTION>

        </SELECT>

        <INPUT name=COL3 maxLength=2 value=11 style="WIDTH: 15px; BACKGROUND-COLOR: #ffff99">

        <INPUT type = radio Name=ts style="WIDTH: 10px">

        <INPUT TYPE="button" value="M" style="WIDTH: 20px; HEIGHT: 22px" onclick="pageTypeone(this.form,'<M>');"></TD>

    </TR>

    <TR>

      <TD><SELECT NAME=COL4 style="WIDTH: 85px; BACKGROUND-COLOR: #ccff99"><OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT>

      <SELECT NAME=COL5 style="WIDTH: 85px; BACKGROUND-COLOR: #ffff99"><OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT></TD>

    </TR>

    <TR>

      <TD>

        <INPUT value=- style="FONT-WEIGHT: normal; WIDTH: 13px; HEIGHT: 22px" type=button size=5 width="20" onclick="scoreminus(this.form,this.form.COL6)"><INPUT name=COL6 readonly value=0 style="WIDTH: 18px; BACKGROUND-COLOR: #ccff99"><INPUT value=G1 style="WIDTH: 22px; HEIGHT: 22px" type=button onclick="scoreplus(this.form,this.form.COL6,'G1')">

        <INPUT name=COL7 value="00:00" style="WIDTH: 35px; BACKGROUND-COLOR: yellow"><INPUT name=COL25 style="WIDTH: 25px"><INPUT TYPE="button" style="WIDTH: 20px; HEIGHT: 22px" onclick="Timer(this.form,'COL7');" value="...">

        <INPUT type=button value=- style="WIDTH: 13px; HEIGHT: 22px" onclick="scoreminus(this.form,this.form.COL8)"><INPUT name=COL8 readonly value=0 style="WIDTH: 18px; BACKGROUND-COLOR: #ffff99"><INPUT type=button value=G2 style="WIDTH: 22px; HEIGHT: 22px" onclick="scoreplus(this.form,this.form.COL8,'G2')"></TD>

    </TR>

    <TR>

      <TD><SELECT NAME=COL9 style="WIDTH: 65px; BACKGROUND-COLOR: #ccff99">

        <OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT><INPUT name=COL10 style="WIDTH: 30px"><SELECT NAME=COL11 style="WIDTH: 55px; BACKGROUND-COLOR: #ffff99">

        <OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT><INPUT name=COL12 style="WIDTH: 45px">

        <SELECT NAME=COL13 style="WIDTH: 65px; BACKGROUND-COLOR: #ccff99">

            <OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT><INPUT name=COL14 style="WIDTH: 30px"><INPUT name=COL15 value=',,,,' title="HALFTIME(A-B),FULLTIME(A-B),EXTRA TIME(A-B) AND PENALTY(A-B)" style="WIDTH: 100px"><INPUT name=COL16 style="VISIBILITY: hidden; WIDTH: 30px">

        <SELECT NAME=COL17 style="WIDTH: 65px; BACKGROUND-COLOR: #ccff99">

            <OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT><INPUT name=COL18 style="WIDTH: 30px">

            <INPUT name=COL19 style="WIDTH: 50px" onkeyup="return Upper(event,this);"><SELECT NAME=COL20 style="WIDTH: 45px; BACKGROUND-COLOR: #ccff99">

            <OPTION selected VALUE="SELECT">SELECT</OPTION></SELECT>

        <SELECT NAME=COL21 style="WIDTH: 65px; BACKGROUND-COLOR: #ccff99">

            <OPTION selected VALUE="SELECT">SELECT</OPTION><OPTION VALUE="ODDS/EVENT">ODDS/EVENT</OPTION>

            </SELECT><INPUT name=COL22 style="WIDTH: 30px"><INPUT name=COL23 style="WIDTH: 30px">

            <INPUT name=COL24 style="WIDTH: 30px"><INPUT type="checkbox" name="chkGroup" checked>

        <INPUT type=hidden NAME=REFERENCE VALUE="S.B1" style="WIDTH: 30px">

      </TD>

    </TR>

   </TABLE>

</FORM>

</DIV>

<DIV id = "divselectForm2" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">

        <FORM NAME="selectForm2">

           <TABLE border="1" width="200" cellspacing="0" onMouseover="this.bgColor='gray'" onMouseout="this.bgColor='#99ccff'" bgcolor='#99ccff'>

                //same elements like the above form 1

           </TABLE>

        </FORM>        

</DIV>

<DIV id = "divselectForm3" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">

        <FORM NAME="selectForm3">

           <TABLE border="1" width="200" cellspacing="0" onMouseover="this.bgColor='gray'" onMouseout="this.bgColor='#99ccff'" bgcolor='#99ccff'>

                //same elements like the above form 1

           </TABLE>

        </FORM>        

</DIV>

<DIV id = "divselectForm4" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">

        <FORM NAME="selectForm4">

           <TABLE border="1" width="200" cellspacing="0" onMouseover="this.bgColor='gray'" onMouseout="this.bgColor='#99ccff'" bgcolor='#99ccff'>

                //same elements like the above form 1

           </TABLE>

        </FORM>        

</DIV>

.

.

.

.

<DIV id = "divselectForm151" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 20px">

</DIV>