HTML forms... Too much space between them?

Posted by: tfabris

HTML forms... Too much space between them? - 07/01/2004 18:39

If I create more than one HTML <form></form> on a page, there is a significant amount of white space between them. No matter how few line breaks I insert between the two forms, there is always a gap on the screen.

Is there any way, using regular HTML (ie, not something compllicated that requires a secondary file like a stylesheet), that I can reduce the space so that the input fields of one <form> are directly atop the input fields of the next <form>?

Example code: 


<FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">

<INPUT TYPE="hidden" NAME="Match" VALUE="And">

<INPUT TYPE="hidden" NAME="Forum" VALUE="All_Forums">

<INPUT TYPE="hidden" NAME="Old" VALUE="allposts">

<INPUT TYPE="hidden" NAME="Limit" VALUE="99">

<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48">

</FORM>

<FORM ACTION="http://www.riocar.org/searchfaq.php" METHOD="GET">

<INPUT TYPE="hidden" NAME="type" VALUE="faq">

<INPUT TYPE="TEXT" NAME="query" SIZE="10" MAXLENGTH="50">

</FORM>



In the above example, these two forms are separated by
a couple of blank lines, even though there are no blank
lines at those points in the code.

Note, this is for personal use so therefore it's OK if the
solution is IE-specific.

Anyone?
Posted by: mcomb

Re: HTML forms... Too much space between them? - 07/01/2004 19:01

Stick the forms in a table.... 


<table border="0" cellspacing="0" cellpadding="0">

<tr><td>

<FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">

<INPUT TYPE="hidden" NAME="Match" VALUE="And">

<INPUT TYPE="hidden" NAME="Forum" VALUE="All_Forums">

<INPUT TYPE="hidden" NAME="Old" VALUE="allposts">

<INPUT TYPE="hidden" NAME="Limit" VALUE="99">

<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48">

</FORM>

</td></tr>

<tr><td>

<FORM ACTION="http://www.riocar.org/searchfaq.php" METHOD="GET">

<INPUT TYPE="hidden" NAME="type" VALUE="faq">

<INPUT TYPE="TEXT" NAME="query" SIZE="10" MAXLENGTH="50">

</FORM>

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


-Mike
Posted by: tfabris

Re: HTML forms... Too much space between them? - 07/01/2004 19:21

That was the first thing I tried. No change in the amount of space between the forms. I even tried it again just now, cut and pasted your code exactly to make sure I wasn't doing it wrong. No change.

If I add border=1 to that table, I see that the white space falls immediately after the input text field. There is the text field, a white space, then the bottom border of that table cell.
Posted by: loren

Re: HTML forms... Too much space between them? - 07/01/2004 19:29

Try putting the form tag before the td tag and close it after the closing td. 


<table border="0" cellspacing="0" cellpadding="0">

<tr><FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">

<td>

<INPUT TYPE="hidden" NAME="Match" VALUE="And">

<INPUT TYPE="hidden" NAME="Forum" VALUE="All_Forums">

<INPUT TYPE="hidden" NAME="Old" VALUE="allposts">

<INPUT TYPE="hidden" NAME="Limit" VALUE="99">

<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48">

</td></FORM></tr>

<tr><FORM ACTION="http://www.riocar.org/searchfaq.php" METHOD="GET">

<td>

<INPUT TYPE="hidden" NAME="type" VALUE="faq">

<INPUT TYPE="TEXT" NAME="query" SIZE="10" MAXLENGTH="50">

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


EDIT: okay, that works.
Posted by: g_attrill

Re: HTML forms... Too much space between them? - 07/01/2004 19:31

IE always puts a line break in for a </FORM> tag. I usually stuff it inbetween the table tags (eg. after a </TR> but before a </TABLE>).

Bloody annoying it is too!

Gareth
Posted by: tfabris

Re: HTML forms... Too much space between them? - 07/01/2004 19:39

Loren, you get the brownie pin for today. That works.

Very very odd and tricky for it to work that way. You shouldn't be able to put the form tags between the TR and the TD like that, it goes against the way I understand these things to work. But if fools IE's parser and formatter quite nicely, thank you.

Rock.
Posted by: RobotCaleb

Re: HTML forms... Too much space between them? - 07/01/2004 20:13

technically, you shouldnt be able to. but html is a very loose standard
Posted by: Roger

Re: HTML forms... Too much space between them? - 07/01/2004 20:38

not something compllicated that requires a secondary file like a stylesheet

Well, it doesn't get any less complicated, but you can avoid the separate file requirement by putting the CSS from the stylesheet directly in the HTML.

Just include a <style> section inside the <head> tags, like this:

<head>
<title>differentpla.net</title>
<style>
body { font-family: Verdana; font-size: 0.9em; }
</style>
</head>
Posted by: Dignan

Re: HTML forms... Too much space between them? - 07/01/2004 20:59

you can avoid the separate file requirement by putting the CSS from the stylesheet directly in the HTML.
That's what I was thinking, too. It is simple, it does eliminate the need for a second file, and the small font size is one thing I would have tried as well. But it doesn't work for this, apparently

I'm trying various CSS methods to try to fix this, but I'm coming up short. Does anyone else have a solution to this that doesn't involve fooling the browser? How does the code work in other browsers?
Posted by: Dignan

Re: HTML forms... Too much space between them? - 07/01/2004 21:13

Okay, this makes absolutely no sense, but here you go anyway. Tony, you can use the original code you posted, which will work fine.

Then use the style definitions in the head. This is what confuses me:

These don't work: 
form { margin-top: 0px }

form { margin-bottom: 0px }

form { margin-left: 0px }

form { margin-right: 0px }
This does work: 
form { margin: 0px }
I was under the impression that "margin: 0px" was a combination of all four sides defined at once, nothing more.

So anyway, put this in the head: 
<style> 

form { margin: 0px }

</style>
That should work!
Posted by: David

Re: HTML forms... Too much space between them? - 08/01/2004 03:40

Alternatively, use CSS to hide the offending tags. This does require you to put code in the HTML, but it's less code than a table.

.hidden {display: none}

<div class="hidden"><form></div>
Posted by: Roger

Re: HTML forms... Too much space between them? - 08/01/2004 06:03

But it doesn't work for this, apparently

Yeah. You have to define the font size explicitly for <td>, so I wonder if you have to for <form> as well?
Posted by: Dignan

Re: HTML forms... Too much space between them? - 08/01/2004 08:37

This does require you to put code in the HTML, but it's less code than a table.
Not sure what you mean, though. My solution didn't require a table. Here's the whole code for Tony's page, using what I did: 

<html>

<head>

<style> 

form { margin: 0px } 

</style>

</head>



<body>

<FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">

<INPUT TYPE="hidden" NAME="Match" VALUE="And">

<INPUT TYPE="hidden" NAME="Forum" VALUE="All_Forums">

<INPUT TYPE="hidden" NAME="Old" VALUE="allposts">

<INPUT TYPE="hidden" NAME="Limit" VALUE="99">

<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48">

</FORM>

<FORM ACTION="http://www.riocar.org/searchfaq.php" METHOD="GET">

<INPUT TYPE="hidden" NAME="type" VALUE="faq">

<INPUT TYPE="TEXT" NAME="query" SIZE="10" MAXLENGTH="50">

</FORM>



</body>

</html>
Posted by: foxtrot_xray

Re: HTML forms... Too much space between them? - 08/01/2004 10:19

Hey, Tony..

Just curious, when I look at the code in a browser, I have a single text line (blank) seperating the two text boxes. You mean that line? Or when you look at it, do you have more than just a line's worth of blank space?

Without using the CSS style mentioned, there isn't a way to get rid of it, unfortunately. If you look, there's the same whitespace at the top of the first form as well. (At least, when I view it.) It's 'built-in' to the form when it's on nothing but the base document page.

May also want to consider adding SUBMIT buttons.

For an unrelated grouping effect (say, instead of tables) try this:


<FORM ACTION="http://empeg.comms.net/php/dosearch.php"METHOD="GET">
<FIELDSET><LEGEND><B>Box #1</B></LEGEND>
<INPUT TYPE="hidden" NAME="Match" VALUE="And">
<INPUT TYPE="hidden" NAME="Forum" VALUE="All_Forums">
<INPUT TYPE="hidden" NAME="Old" VALUE="allposts">
<INPUT TYPE="hidden" NAME="Limit" VALUE="99">
<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48">
</FIELDSET>
</FORM>
<FORM ACTION="http://www.riocar.org/searchfaq.php" METHOD="GET">
<FIELDSET><LEGEND><B>Box #2</B></LEGEND>
<INPUT TYPE="hidden" NAME="type" VALUE="faq">
<INPUT TYPE="TEXT" NAME="query" SIZE="10" MAXLENGTH="50">
</FIELDSET>
</FORM>


I love those things. Come in real handy when you don't want to, or can't use a table, and they look much more 'official'..

Me.
Posted by: Dignan

Re: HTML forms... Too much space between them? - 08/01/2004 10:57

Without using the CSS style mentioned, there isn't a way to get rid of it, unfortunately. If you look, there's the same whitespace at the top of the first form as well. (At least, when I view it.) It's 'built-in' to the form when it's on nothing but the base document page.
Yeah, that appears to be the problem. I'm not sure if it's IE's fault, either. Netscape (4.7, at least, it's the only other browser on my work machine) adds the space as well. I think it's just one of those things. I have no clue why they would add it, though.

It's the same with headings. All my sites have margin properties for every heading in the style sheets, because all headings have a large amount of default space underneath them. I can't imagine why they added this.
Posted by: Roger

Re: HTML forms... Too much space between them? - 08/01/2004 11:13

Oh, so that's what <fieldset> does? Cool.
Posted by: tfabris

Re: HTML forms... Too much space between them? - 08/01/2004 11:27

Wow, guys, this is a great thread. Lots of good information here, thanks!

I wanted to answer a couple specific things:

Just curious, when I look at the code in a browser, I have a single text line (blank) seperating the two text boxes. You mean that line?
 Exactly. I did not specify a blank line in my code, why should there be one on the screen? I wanted two boxes touching, one atop the other, but which were completely different forms going to two completely different web sites. Loren's first suggestion of fooling the browser works, and I'm also going to try the margin:0px trick because that's more likely going to be better forward-compatible as there are browser changes and upgrades in the future.

May also want to consider adding SUBMIT buttons.
 For the specific purpose of these boxes, I needed them to be as small and as simple as possible, and to take up as little screen real-estate as possible, since they are on a side toolbar with a bunch of other stuff. Hence my desire for less white space. A submit button takes up too much space for my intended purpose. Also, I just wanted to type the text and press the Enter key. Submit buttons are so redundant.
Posted by: tfabris

Re: HTML forms... Too much space between them? - 08/01/2004 11:35

Oh, and that Fieldset/Legend trick does work simultaneously with Loren's table trick, just tried it. Thanks! I had labeled the boxes with a small font already, but I'm going to try the fieldset thing and see if I like its looks better.
Posted by: peter

Re: HTML forms... Too much space between them? - 08/01/2004 11:49

Exactly. I did not specify a blank line in my code, why should there be one on the screen?
The interaction between IE's forms and its layout is simply insane. Sometimes, if the form is in a table cell, adding a second, invisble form to the table cell can help reduce the spacing. But the invisible form must have at least two fields, otherwise it doesn't work:
<table border><tr><td>
<FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">
<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48"><input type=submit>
</FORM><form action="wurdle" method="post" name="f3">
<input type="hidden" name="foo">
<input type="hidden" name="2foo">
</form>
</td></tr><tr><td>
<FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">
<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48"><input type=submit>
</FORM><form action="wurdle" method="post" name="f4">
<input type="hidden" name="foo">
</form>
</td></tr><tr><td>
<FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">
<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48"><input type=submit>
</FORM>
</td></tr></table>
In IE, only the top cell is free of unwanted padding. Unfortunately, in Mozilla, only the bottom cell is free of unwanted padding. Bunch of monkeys.

Peter
Posted by: tfabris

Re: HTML forms... Too much space between them? - 08/01/2004 12:11

Bunch of monkeys.
 Or crack-heads. Either way...
Posted by: andy

Re: HTML forms... Too much space between them? - 08/01/2004 12:38

...or monkeys smoking crack...
Posted by: Dignan

Re: HTML forms... Too much space between them? - 08/01/2004 12:59

Oh, and that Fieldset/Legend trick does work simultaneously with Loren's table trick
Damn, thought I'd win for sure! Oh well, maybe someday...
Posted by: tfabris

Re: HTML forms... Too much space between them? - 08/01/2004 13:03

Damn, thought I'd win for sure! Oh well, maybe someday...
Actually, your "form { margin: 0px } " works great and I'm switching to that because it's more likely to be compatible with later browser versions. So you get the brownie pin, too.
Posted by: Dignan

Re: HTML forms... Too much space between them? - 08/01/2004 13:08

Woohoo!!

Although now I want to mess around with that <fieldset> tag too
Posted by: andy

Re: HTML forms... Too much space between them? - 08/01/2004 14:23

If you like obscure bits of HTML, check out the "FOR" attribute on the "LABEL" element. It lets you associate a label with an checkbox or radiobutton element. This allows the user to click on the text in the label to toggle the option, rather than having to click on the control.

<html>
<head>
<title>Test</title>
</head>
<body>
<input type="checkbox" id="chkTest"/><label for="chkTest">blah</label>
</body>
</html>
Posted by: Dignan

Re: HTML forms... Too much space between them? - 08/01/2004 14:53

So that's how they do that!! I always love when I'm able to do that. Is the coding for Windows applications the same? I notice many programs do that and some do not.
Posted by: andy

Re: HTML forms... Too much space between them? - 08/01/2004 14:59

How it is done in a Windows app will depend entirely on what the app is coded in. Tools like Visual Basic do it for you, when ever you create a checkbox or radiobutton it makes the label clickable in the same way.
Posted by: David

Re: HTML forms... Too much space between them? - 09/01/2004 05:27

This does require you to put code in the HTML, but it's less code than a table.
Not sure what you mean, though. My solution didn't require a table.

I was just giving another alternative to using a table, not an alternative to your more elegant solution.