damned <form> tag creates linespace

[W8 4me]

Why does the <form> tag create an inconvenient linespace? It's very annoying, so if you know how to remedy this -short of deleting the tag- please let me know! :)

[Ribeyed]

ah, one that eluded me for about a year. You are correct it does put in an annoying link break. to fix include your form tags in a table and the line break will disapear. like so:

<table>
<form>
<tr>
<td>
all your form element go in here.
</td>
</tr>
</form>
</table>

hope this helps

[W8 4me]

I'll give it a shot.

You don't happen to know anything about XHTML do you? I converted all my pages at www.seizurecollective.cjb.net to xhtml except the form page. When I add a closing </p> after the paragraph, it forces the iframe to scroll. Needless to say, xhtml is no good to me if it screws up my website.

[Charles]

XHTML isn't significantly different from HTML, at least not in any way that's significant to your problem. The P element tends to be displayed with a blank line after it but you can use CSS to change that. You can also just rid yourself of that P element. It's supposed to be used to mark up paragraphs as paragraphs.

[SWR]Ribeyed's examply is very bad HTML and ought not to be followed.

[meow]

Originally posted by W8 4me
Why does the <form> tag create an inconvenient linespace? It's very annoying, so if you know how to remedy this -short of deleting the tag- please let me know! :)

Most browsers add a margin to it by default as they do to P. A page would be hard to read without things like that. ;)
Control it with CSS.

<style type="text/css">
form { margin: 0 }
</style>

[Stefan]

Originally posted by [SWR]Ribeyed
<table>
<form>
<tr>
<td>
all your form element go in here.
</td>
</tr>
</form>
</table>


That is Illegal nesting and if it works it is becuse browser error correction manages to work around the error.

No, the way to get rid of the linebreak is to code your forms correctly.

You most likely have something like
<form>
<input>
...
</form>

That is ALSO illegal nesting. A <form> MUST have a blocklevel element before the (inline) formcontrolls.

Ie is MUST look someting like
<form>
<p>
<input>
...
</p>
</form>

Since the errorcorrection in browsers in general add this <p></p> you get this unwanted space.
To NOT get it you either add 0 margins to this <p> or you use another blocklevel tag tath does NOT have "built in" margins, eg <div> or <table> ie

<form>
<div>
<input>
...
</div>
</form>

If you still have a form margin/padding in some browser set it to 0 as Meow showed.

[meow]

That FORM can only contain block level elements is only in Strict though. I think browsers actually apply margins to FORM itself.

[W8 4me]

Thanks for the help.

[King Pellinore]

I would go for making the form tag inline:form {
display: inline;}
and html approximately like that:<p><form><input type="text" size="50" /></form> Stefan, <br>tell me if this is illegal.</p>
In my IE6 there is no bad space between the input and the "tell me if this is illegal" line.

In any case, it's far better than the TABLE nesting method. Even WebReference uses this in their search bar.

[jdavia]

My little trick is to keep the form in a cell except the </form>, which is just outside the cell. Not in the opening or closing table tags

Forms as well as other data can go into tables. Is there anything wrong with this?

<table>
<tr>
<td>
<form>

all your form element go in here.
</td>
</form>
</tr>
</table>

[Stefan]

Originally posted by jdavia
Is there anything wrong with this?

<table>
<tr>
<td>
<form>

all your form element go in here.
</td>
</form>
</tr>
</table> [/B]

Yes, you have an incorrect nesting. That is ALWAYS wrong, but browsers errorcorrection usually manages to get past it.

If you want a <form> in a table is HAS to go inside a <td></td> pair.

[W8 4me]

yes, thanks.

[nkaisare]

What if I have two forms in the same table? Basically, its a page that displays a list of technical reports. The first form is for retrieving a report, the second form is to seek information about that report (authors, affiliations etc). Rows 2 to n (n = number of reports in the DB) have first form. First and last rows have the second form. Currently I have:

<form action="1.cgi" method="post">
<tr>
<td>...</td>
</tr>
</form>

<form action="2.cgi" method="post">
<tr>
<td>...</td>
</tr>
...
<tr>
<td>...</td>
</tr>
</form>

I think this is incorrect as the page did not validate at validator.w3.org. What are the other alternatives?

Thanks.

[Charles]

From the HTML 4.01 Specification:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

[nkaisare]

Originally posted by Charles

Why do you assume that any table used on the web is a "table misuse"? How else will I display following info

----------------------------------------------
Id Date Author Topic Keywords
----------------------------------------------

First form allows people to list reports in only one topic/author/keyword (more like search). Second form allows user to retrive "abstract", "extended abstract", "full report" for a specific tech report.

BTW, I dont have any problems even if </form> were to insert a page break. I only want a correct way to place my form so that my page validates.

The pages are on intranet. Everyone uses Mozilla on Linux. 100% of users. I only care because I like to read "Congrats, This page is valid HTML 4.01 Strict!" ;)

[meow]

What if I have two forms in the same table?
Use CSS to control the margins. :D

[Stefan]

Originally posted by nkaisare
[B]Why do you assume that any table used on the web is a "table misuse"? How else will I display following info

----------------------------------------------
Id Date Author Topic Keywords
----------------------------------------------



There is nothing wrong with marking up things that is REALLY tabular data in a table.

Thus
<form>
<table>
...
</table>
</form>

is perfectly OK (depending on content).

However if you are using something like the below, it's at least a 100:1 odds that you are abusing table for general page layout.

<table>
<tr><td>
<form>
<table>...</table>
</form>
</td>
<tr><td>
<form>
<table>...</table>
</form>
</td>
</tr>
</table>

[jdavia]

Thus
<form>
<table>
...
</table>
</form>

is perfectly OK (depending on content). I am confused here!!!

If this is OK and what was posted below it is not, I trying to see any difference between the two. Except that this is a single form. posted below it are two forms one under the other. But the coding is the same in each table as in the single form.

What would you think if the row tag was removed making the forms side by side. Would that be proper?

[nkaisare]

Stefan
I am not using nested tables. What I have is follows

-------------------------------------------------------
Text Text Text Text Text Text
Form1 Form1 Form1 S1
-------------------------------------------------------
Text Text Text Text Form2 Form2 S2
-------------------------------------------------------
Text Text Text Text Form2 Form2 S2
-------------------------------------------------------
...

Where Form1 and Form2 represent form elements (radio/checkbox) for the two forms; S1 and S2 are submit buttons. Things work fine now. Just that I cant validate as I have

<form>
<tr>...</tr>
</form>


I can't use nested tables as that will defeat the purpose of tables: to line up excel sheet data in the HTML table. I wanted a valid way to do this.

The only way I can think of is to include Form1 and Form2 in a single form. Name S1 and S2 with different names. And in perl program, use

if ( param('submit1') ) {
...}
else if ( param('submit2') ) {
...}


The only thing is that perl programs were written by someone else, and I didn't want to do the above changes.

jdavia
Table nesting that Stefan posted is "Valid". However, in 99 out of 100 times, tables are nested to achieve a specific layout. W3C specs recommend/require contents to be separated from layout.

[meow]

Faint voice: use CSS to control the margins :(

[Stefan]

Originally posted by nkaisare
[B]I am not using nested tables. What I have is follows

-------------------------------------------------------
Text Text Text Text Text Text
Form1 Form1 Form1 S1
-------------------------------------------------------
Text Text Text Text Form2 Form2 S2
-------------------------------------------------------
Text Text Text Text Form2 Form2 S2
-------------------------------------------------------
...



Is there a specific reason you absolutely must have 2 separate forms?

The reason I ask is that if not you can do something like this


<form>
-------------------------------------------------------
Text Text Text Text Text Text
<input> <input> <input> <button>
-------------------------------------------------------
Text Text Text Text <input> <input> <button>
-------------------------------------------------------
Text Text Text Text <input> <input> <button>
-------------------------------------------------------
...
</form>

[nkaisare]

Originally posted by Stefan
Is there a specific reason you absolutely must have 2 separate forms?
Lazyness in combining the two cgi files into one. The guy who managed this has graduated. I am the only one who knows perl, so I have "taken over" since December.

Originally posted by Dave Clark
I posted an answer up a ways that is the solution to this layout you've described here
I guess thats another way. I think I'll combine the two cgis and use a single form.

Thanks all you guys for your advice.

[zorz]

I've read this thread and tried some approaches, none worked - I still have space before and after the form. Could somebody
look at this page (http://www.zorz.net/index1.html), left-side navigation bar, "News" section.

Code of that form area is:

<TR><!-- News Title -->
<TD height="16" valign="middle" align="center" bgcolor="666699">
<FONT face="Arial" size="2" color="#99CCFF">
<B>News</B></FONT><BR>
</TD>
</TR>
<TR><!-- News Scrolling Area -->
<TD bgcolor="333366" align="center" valign="middle">
<div>
<FORM name="tickform" style="margin:0; padding:0;">
<TEXTAREA name="tickfield" rows="5" cols="24"
style="background-color: #330000; color: #66FFFF;
cursor: default; font-family: Arial; font-size: 10px"
wrap="virtual"></TEXTAREA>
</FORM>
</div>
</TD>
</TR>

Here I used <div>, but the same result were with nested <table>. Thank you!

[zorz]

Dave,

Unless I missed something in the code, you suggest removing <DIV> tag. I actually inserted it to eliminate the space, as suggested in this thread earlier (played with <table>, too). So, removing it now did not help.

I have cellpadding and cellspacing set to zero from the beginning...

[jdavia]

How about this for a solution

<form style="margin-bottom:0;" action="[URL]">
<table>
<tr>
<td>
The rest of form elements go in here.
</td>
</tr>
</table>
</form>

It worked for me, but is it legal?

[zorz]

Excuse my ignorance, but what exactly did you move? Do you mean than placing </td> directly after </form> as opposed on a new line may help? Id didn't work, anyway. I copy-pasted to exclude a chance of missing your change.

Tried setting margins in <textarea>, unsuccessfully. I'll probably just give up and use another script to get dynamic text rolling, without <form>. Thank you.

[zorz]

Sure, I mentioned it in the beginning of my post:
http://www.zorz.net/index1.html

Look at the side navigation bar, "News" section.

[zorz]

Originally posted by jdavia
How about this for a solution

<form style="margin-bottom:0;" action="[URL]">
<table>
<tr>
<td>
The rest of form elements go in here.
</td>
</tr>
</table>
</form>

It worked for me, but is it legal?

Did you mean not to include the second closing <for> tag??

[jdavia]

Originally posted by Dave Clark
Are you talking about the two FORM tags you've got in there? Nesting FORMs is not "legal", no. ;)

Dave
No the whole thing. I made a mistake and edited it, One form heading

[jdavia]

Originally posted by zorz
Did you mean not to include the second closing <for> tag??
Exactly as you showed it ZORZ

[zorz]

Yes, I tried nesting <table> in the form, as well as <div>...

[zorz]

Hmmmmmm. I suspected it, too and was going to test as you did. Oh boy, that file is loaded with stuff, I'll need some time to work on it now... Thank you for the direction, Dave!

[zorz]

LOL, it didn't take a second! As soon as I looked, I noticed the bug - I set the table height to 100%! Just removed - no problem anymore. I still need to tweak it since a portion of that page is now white rather than blue... Thank you!!