Home Products Purchase Support Examples          

Animated Border Form.

Name:   

Company:

Product:

Comments:

One day delivery.

Email:


In this example the form parts are placed in table cells. The animated gif is created from Rubber Clouds dialog without cell pattern. There are two tables, the first contain one cell and its background is the animated gif. The second table is in the first table cell. It contains the form parts and has a CellSpacing of 2 that the first table animation show through.

Here is the table Html code:

<!--First table with the backround animated gif.-->
<table width="400" height="400" border="0" cellpadding="0" cellspacing="0" background="anim1.gif">
<tr>
<td>

<!--Second table with the cellspacing property set to 2.-->
<table width="400" height="400" border="0" cellpadding="2" cellspacing="2">
<tr bgcolor="#CCCCCC">
<td align="center" colspan="2"><P>Name:&nbsp;&nbsp;&nbsp;
<INPUT type="text" name="reqname" size="20">
</P></td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCCC"><P>Company:<BR>
<SELECT name="Company" size="1">
<OPTION selected>Select Company
<OPTION>Company 1
<OPTION>Company 2
<OPTION>Company 3</OPTION>
</SELECT>
</P></td>
<td align="center" bgcolor="#CCCCCC"><P>Product:<BR>
<SELECT name="area" size="1">
<OPTION selected>Select Product
<OPTION>Product 1
<OPTION>Product 2
<OPTION>Product 3</OPTION>
</SELECT>
</P></td>
</tr>
<tr bgcolor="#CCCCCC">
<td align="center" colspan="2"><P>Comments:<br>
<TEXTAREA name="desc1" rows="5" cols="40"></TEXTAREA>
</P></td>
</tr>
<tr bgcolor="#CCCCCC">
<td align="center" colspan="2"><P>
<INPUT type="checkbox" name="email1" value="withemail" checked>
One day delivery.<BR>
<BR>
Email:
<INPUT type="text" name="emailtext" size="30">
<BR>
</P></td>
</tr>
</table>

 

</td>
</tr>
</table>