problem with forms inside tables

  • cdx
  • Graduate
  • Graduate
  • User avatar
  • Posts: 103
  • Loc: Israel

Post 3+ Months Ago

hi everyone.

I am trying to put in a table (780pixels) a form. When I put it inside, I have my main table become more than 780.

Is there any problem with forms when you try to put it inside tables?
or maybe it's another problem...?

Please help me out, I wasted more than 3 hours on this ... ;(

Thanks

Cdx.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Wrap the table inside the form tags.
  • cdx
  • Graduate
  • Graduate
  • User avatar
  • Posts: 103
  • Loc: Israel

Post 3+ Months Ago

joebert wrote:
Wrap the table inside the form tags.


Can you please show me a sample in HTML?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Do you have a link to your page where we can view the source code to see what you are doing?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

cdx wrote:
joebert wrote:
Wrap the table inside the form tags.


Can you please show me a sample in HTML?


As ATNO says a link to what your doing will yeild a better answer.

Basically the form tag itself seems to add weight to whatever it's in (width/height) Right now your source probably looks somthing like this,
Code: [ Select ]
<table>
<tr><td><form></form></td></tr>
</table>
  1. <table>
  2. <tr><td><form></form></td></tr>
  3. </table>

Which is adding this bloat to your table.

Depending on how complex your layout is you should be able to flip-flop the wrapping to add this bloat to the outside which won't blow the table up.
Code: [ Select ]
<form>
<table><tr><td></td></tr></table>
</form>
  1. <form>
  2. <table><tr><td></td></tr></table>
  3. </form>
  • homer simpson
  • Student
  • Student
  • homer simpson
  • Posts: 96

Post 3+ Months Ago

Is there a way around this?....

When ever I try creating a form, it takes up more space on the web page than it should. i.e. if I have a table that is 10 pixels high and the form submit box should only 8 pixels, the form makes the table alot higher than 10 and it messes with the rest of the page.

Is there something I can do to fix this? The form box is fine on its own as far as looks go, but once I make it a form in HTML, it messes everything up.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Homer I've merged your topic here, same deal.

Another example,
Code: [ Select ]
<form>
<table style="background:#123456">
    <tr>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td>text</td>
    </tr>
</table>
</form>

<BR><BR><BR><BR>

<table style="background:#123456">
    <tr>
        <td><form><input type="text"></form></td>
    </tr>
    <tr>
        <td>text</td>
    </tr>
</table>
  1. <form>
  2. <table style="background:#123456">
  3.     <tr>
  4.         <td><input type="text"></td>
  5.     </tr>
  6.     <tr>
  7.         <td>text</td>
  8.     </tr>
  9. </table>
  10. </form>
  11. <BR><BR><BR><BR>
  12. <table style="background:#123456">
  13.     <tr>
  14.         <td><form><input type="text"></form></td>
  15.     </tr>
  16.     <tr>
  17.         <td>text</td>
  18.     </tr>
  19. </table>
  • homer simpson
  • Student
  • Student
  • homer simpson
  • Posts: 96

Post 3+ Months Ago

I forgot to ask...

How do I change the submit button to a image that I already have?

<input type="submit" value="Update"> is creating the gray button - but I want it to use "button.gif"
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

<input type='image' src='yourimage.gif'>
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

THis won't submit the form though. You need to write an onClick function to deal with the submitting of the form (Javascript)
  • homer simpson
  • Student
  • Student
  • homer simpson
  • Posts: 96

Post 3+ Months Ago

Still having some difficulties....How should I rearrange this?

here is my HTML
Code: [ Select ]
<table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
               <td width="61%" align="left" valign="top">
                <div style="padding-left:35px;padding-top:5px">
                <form action="/cgi-bin/mailmachine.cgi" method=post>
                  <input name="textfield2" type="text" style="width:124px; height:16px; font-size:9px; border-style:solid; border-width:1px; border-color:E19242" value=" your e-mail">
                  <br>
                 </form>
                </div>
               </td>
               <td width="39%" rowspan="2" align="right" valign="top"><img src="images/w51.jpg" width="113" height="58"></td>
              </tr>
              <tr>
               <td align="left" valign="bottom">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                 <tr>
                  <td width="81" height="26" background="images/w52.jpg">&nbsp;</td>

                  <td><a href="#"><img src="images/w53.jpg" width="78" height="26" border="0"></a></td>
                  <td width="15" background="images/w54.jpg">&nbsp;</td>
                 </tr>
                </table>
               </td>
              </tr>
             </table>
  1. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  2.               <tr>
  3.                <td width="61%" align="left" valign="top">
  4.                 <div style="padding-left:35px;padding-top:5px">
  5.                 <form action="/cgi-bin/mailmachine.cgi" method=post>
  6.                   <input name="textfield2" type="text" style="width:124px; height:16px; font-size:9px; border-style:solid; border-width:1px; border-color:E19242" value=" your e-mail">
  7.                   <br>
  8.                  </form>
  9.                 </div>
  10.                </td>
  11.                <td width="39%" rowspan="2" align="right" valign="top"><img src="images/w51.jpg" width="113" height="58"></td>
  12.               </tr>
  13.               <tr>
  14.                <td align="left" valign="bottom">
  15.                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  16.                  <tr>
  17.                   <td width="81" height="26" background="images/w52.jpg">&nbsp;</td>
  18.                   <td><a href="#"><img src="images/w53.jpg" width="78" height="26" border="0"></a></td>
  19.                   <td width="15" background="images/w54.jpg">&nbsp;</td>
  20.                  </tr>
  21.                 </table>
  22.                </td>
  23.               </tr>
  24.              </table>
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Code: [ Select ]
<input type="image" src="images/w53.jpg" onclick="submit();">


//edit, changed it for you :wink:
  • homer simpson
  • Student
  • Student
  • homer simpson
  • Posts: 96

Post 3+ Months Ago

Also, I am trying to get the submit button/image to be "images/w53.jpg"
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Take the form tag out of the table completely, wrap the entire table inside the form tag.
Code: [ Select ]
<form action="/cgi-bin/mailmachine.cgi" method=post>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
               <td width="61%" align="left" valign="top">
                <div style="padding-left:35px;padding-top:5px">
                                  <input name="textfield2" type="text" style="width:124px; height:16px; font-size:9px; border-style:solid; border-width:1px; border-color:E19242" value=" your e-mail">
                  <br>
                 
                </div>
               </td>
               <td width="39%" rowspan="2" align="right" valign="top"><img src="images/w51.jpg" width="113" height="58"></td>
              </tr>
              <tr>
               <td align="left" valign="bottom">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                 <tr>
                  <td width="81" height="26" background="images/w52.jpg">&nbsp;</td>

                  <td><a href="#"><img src="images/w53.jpg" width="78" height="26" border="0"></a></td>
                  <td width="15" background="images/w54.jpg">&nbsp;</td>
                 </tr>
                </table>
               </td>
              </tr>
             </table></form>
  1. <form action="/cgi-bin/mailmachine.cgi" method=post>
  2. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  3.               <tr>
  4.                <td width="61%" align="left" valign="top">
  5.                 <div style="padding-left:35px;padding-top:5px">
  6.                                   <input name="textfield2" type="text" style="width:124px; height:16px; font-size:9px; border-style:solid; border-width:1px; border-color:E19242" value=" your e-mail">
  7.                   <br>
  8.                  
  9.                 </div>
  10.                </td>
  11.                <td width="39%" rowspan="2" align="right" valign="top"><img src="images/w51.jpg" width="113" height="58"></td>
  12.               </tr>
  13.               <tr>
  14.                <td align="left" valign="bottom">
  15.                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  16.                  <tr>
  17.                   <td width="81" height="26" background="images/w52.jpg">&nbsp;</td>
  18.                   <td><a href="#"><img src="images/w53.jpg" width="78" height="26" border="0"></a></td>
  19.                   <td width="15" background="images/w54.jpg">&nbsp;</td>
  20.                  </tr>
  21.                 </table>
  22.                </td>
  23.               </tr>
  24.              </table></form>


change the src attribute of my last post for the image button.
  • homer simpson
  • Student
  • Student
  • homer simpson
  • Posts: 96

Post 3+ Months Ago

I'll do this from scratch and maybe this will be easier to see:

Original HTML:

-----------------------------------------------------------

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="61%" align="left" valign="top">
<div style="padding-left:35px;padding-top:5px">
<input name="textfield2" type="text" style="width:124px; height:16px; font-size:9px; border-style:solid; border-width:1px; border-color:E19242" value=" your e-mail">
</div>
</td>
<td width="39%" rowspan="2" align="right" valign="top"><img src="images/w51.jpg" width="113" height="58"></td>
</tr>
<tr>
<td align="left" valign="bottom">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="81" height="26" background="images/w52.jpg">&nbsp;</td>

<td><a href="#"><img src="images/w53.jpg" width="78" height="26" border="0"></a></td>
<td width="15" background="images/w54.jpg">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

------------------------------------------------------
ORIGINAL FORM
--------------------------------------------------------
<form action="/cgi-bin/mailmachine.cgi" method=post>
<input type=text name="address" size=50><br>
<input type=radio name=action value=Subscribe checked>
Subscribe | Unsubscribe <input type=radio name=action value=Unsubscribe>
<br><input type="submit" value="Update">
</form>
--------------------------------------------------------

WHAT I WANT THE FORM TO BE:
-------------------------------------------------------------

<form action="/cgi-bin/mailmachine.cgi" method=post>
<input name="textfield2" type="text" style="width:124px; height:16px; font-size:9px; border-style:solid; border-width:1px; border-color:E19242" value=" your e-mail">
</form>

And I want the submit button:

<input type="image" src="images/w53.jpg" onclick="submit();">

to replace and be located where the following is:

<a href="#"><img src="images/w53.jpg" width="78" height="26" border="0"></a>

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: No registered users and 73 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.