LinuxQuestions.org

LinuxQuestions.org (/questions/)
-   Programming (https://www.linuxquestions.org/questions/programming-9/)
-   -   Why does the form tag create blank bottom trailing space? (https://www.linuxquestions.org/questions/programming-9/why-does-the-form-tag-create-blank-bottom-trailing-space-50/)

Larry James 08-21-2000 09:40 PM

Can someone tell me why the <form> tag creates trailing space at the bottom of the form.
Look at the two examples. Is there a way to have a form without having the trailing bottom space as in the example below.
By the way, IE will display and process the button correctly, with an onclick command. However, Netscape won't show the button.

Sample code:
--------------------------------------

<table border><td>
<form>
<input type=button value="In a form">
</form>
</td></table>


<table border><td>
<input type=button value="No From">
</td></table>

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

Thanks in advance for any suggestions or comments.

-- L. James

jeremy 08-22-2000 09:18 AM

Larry,
To eliminate the trailing whitespace change the code to
Code:

<form>
<table border=1 cellspacing=0 cellpadding=0>
<td>
<input type=button value="In a form">
</td></table>
</form>

As for the second question Netscape is actually following the spec. The INPUT tag defines a form element that can receive user input. Strictly speaking you shouldn't be able to have a form element without a from. IE is just more lax in its rendering.

Larry James 08-22-2000 10:49 AM

Jeremy. Thanks for the quick reply and suggestion. I used the <table> tag just to display the vertical space. It's not really the button that's actually causing the space. It's the </form> that's causing the space. What I would like to do is find a method to be relieved of the space for some of my page formating.
Here is a better example that might demostrate what I'm looking for:

<hr>
<form>[various input] <input type=button value="In a Form #1" onclick=write("hello")></form>
<form>[various input] <input type=button value="In a Form #2" onclick=write("hello")></form>
<form>[various input] <input type=button value="In a Form #3" onclick=write("hello")></form>
<hr>
[various input] <input type=button value="No form #1" onclick=write("hello")><br>
[various input] <input type=button value="No form #2" onclick=write("hello")><br>
[various input] <input type=button value="No form #3" onclick=write("hello")>
<hr>


By the way, I understand that the <input> tag is part of the <form> objects. I"m not sure if the feature of IE is a component of their intentional concern to develop the <input> markup feature of "lax" as you refer. Either way, it's a great feature and I will hope it will develop into standard. It's a very standard component of many of my pages because of the way it facilitates my formating.
You use other browsers besides IE and Netscape. With the buttons show up on some of the other browsers you use?
I don't usually use GUI on my Linux machine, but I just brought up the KDE folder browser and looked at the page. It does the same as Netscape.
One of my intentions for this question is to make my pages more compatible while at the same time retaining the desired format.
Thanks.

-- L. James

jeremy 08-22-2000 11:58 AM

The buttons show up fine in Mozilla. The correct syntax for getting rid of the vertical whitespace is
Code:

<form style="margin-bottom:0;">
<input type=button value="In a Form #1" onclick=write("hello")>
</form>

Unfortunately netscape renders this wrong. For more info visit http://www.hut.fi/u/jkorpela/forms/extraspace.html.

Larry James 08-22-2000 08:25 PM

Thanks, Jeremy, for the time and attention. However, the output in IE5.5 and Netscape 4.73 is the same as the example I gave you that prints the space at the bottom of the form. It apperas as what I'm writing on the top. The desired format is the way the writing is on the bottom:


Undesired effect with Spaces at bottom:
--------------------------------------
[Button #1 - Form]

[Button #2 - Form]

[Button #3 - Form]

Desired effect without Spaces at the bottom:
--------------------------------------------
[Button #1 - no Form]
[Button #2 - no Form]
[Button #3 - no Form]

-- L. D. James

bako 09-04-2000 10:09 AM

Nasty one....

Yes it seems that whenever you close a form you get a trailing whitespace at the bottom, but here's somewhat of a workaround:

try using one form so you get only one training whitespace at the bottom.

<hr>
<form>[various input] <input type=button value="In a Form #1" onclick=write("hello")><BR>
[various input] <input type=button value="In a Form #2" onclick=write("hello")><BR>
[various input] <input type=button value="In a Form #3" onclick=write("hello")>
</form>

Not that I added breaks (<BR>) so you get the desired format.

Now you probably want to reply with, but I need three forms because all the buttons are supposed to have a diffrent action. Well here's where JavaScripting kicks in... for more details on forms and/or JavaScript look at http://developer.irt.org/faq.htm or give me a shout....

[Edited by bako on 09-04-2000 at 11:11 AM]

Larry James 09-04-2000 01:54 PM

Thanks, Bako. After a lot of observation I've come to realize that the </form> terminating directive is what always produces a vertical space. If you have a few in in a row you still seem to only get one. Studying all the forms on various pages such as Microsoft, Netscape and other major sites, I see they always carefully hide the space by situating where the last </form> appears. There's always a vertical space. Some times the </form> directiver is far away from the <input> directive, but it has been carefully situated to make the space less annoying.
I've done a lot of experimenting and found ways around the space. For instance:

code:
------------------------------------
<form>
<form>
<form>

<table><img> (and other directives>

<input type=[of any type]>
<input type=submit name=form1>

<input type=[of any type]>
<input type=submit name=form2>

<input type=[of any type]>
<input type=submit name=form3>

</table> (and any other type of various directives end)

(for isolated where the space doesn't matter)

</form></form></form>

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

-- L. James

bako 09-05-2000 03:38 AM

who needs MS-Word when we got HTML :)
 
Thats true, althoug against HTML coding standards because forms cannot be nested (it will show up on your screen but I believe only the first form action will be used upon post).

I also figured an other option out while driving home yesterday (haven't tested it yet though) you might try to place the </FORM> tag after the </BODY> (that surely will be against the HTML coding standards but it might work, although it might not in Netscape, worth a try ofcourse).
That way you could get rid of the blank space all together.

Larry James 09-05-2000 04:52 AM

You're right. The only form "action" script that is processed is the first one. The other ones are not seen. My page was doing the desired effect and working the individual text and buttons because only one of them actually had an "action=" script. The other ones have "onclick" buttons.
The pages work with the desired effect in both Netscape and IE.

-- L. James

diversityx 03-15-2001 05:10 PM

Yes... I too have chased the form tags all over the html page trying to get things to not have that annoying vertical space, and alas.... I have given up.

At least it works correctly in IE which is about 75% of our market share <sigh>

Thanks!


All times are GMT -5. The time now is 03:29 AM.