• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 217
  • Last Modified:

form field formatting


I'm trying to integrate an html form field into my online store. This will be a simple search field, and I already have the html form field itself working.

What I can't figure out is how to get the foratting right of this form field, as html seems to be invisibly inserting a line break underneath the form, so that there is this useless space underneath.

Anyway to get rid of this extra space under an html form field?

Thanks a million,
  • 3
  • 2
  • 2
  • +2
1 Solution
If you put the form tags into a table you should be able to remove that spacing, but you should insert the <form> and </form> tags not inside of a cell..

something like this..

<tr><form method=get>
Name: <input type="text"><br>
Phone number: <input type="text">
webmanager: That syntax is invalid. <form> elements are not allowed as children of <tr> elements, and <td> elements are not allowed as children of <form> elements. This can cause major problems in some browsers.

CodeConfused: The default rendering of <form> elements is to give them a margin, you can change this in CSS.

<form ... style="margin: 0; padding: 0;">

You could also suggest that the form be rendered as an inline element:

style="display: inline;"

However I would be reluctant to do this without making _every_ element inside the <form> also display: inline;.

you could put the <form> tag right at the beginning of the page as the first tag that follows the <body> tag, and then you can put the </form> at the end as the last tag before </body>.
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

CodeConfusedAuthor Commented:
Hi dorward,

what do you mean by "changing this in CSS"?
also, how can I do "making _every_ element inside the <form> also display: inline", as you suggested, if my form field looks as follows:

Hi webmanager,

are you saying that I could work around dorward's answer (i.e., I would not need it?), by following your following advice: "<form> tag right at the beginning of the page as the first tag that follows the <body> tag, and then you can put the </form> at the end as the last tag before </body>. "

To both of you, my thanks!
I might not have been that clear....

you can setup your page like this...  (if there's only 1 form on the page)


put all your content in here, including images, tables, form elements, etc.

It would be helpful to see your code. I suspect it's the actual form tag making the extra space, the input tag doesn't add space unless you have it in a p tag or some other tag that's causing the space.

The FORM tag, however DOES make extra space.

So without seeing the code, we're just guessing.

And if YOU'RE not looking at the actual code, you're NOT going to be able to fix it. (Web editors are WYSI(*NOT*)WYG) ;-)
CodeConfused: HTML is a language for describing the structure of the page. CSS is a language for describing the appearence of the page. The "style" attribute is a means to use CSS in an HTML document (its the worst way, but it works and is handy for examples). http://david.us-lot.org/www-css.php has some pointers to more CSS resources.

To suggest that all the content of the form be rendered inline you could add style="display: inline;" to every element, or you could do something like:

form, form * { display: inline; } in an external stylesheet.
Dorward's suggesting that the setting display:inline is the correct solution providing there are no block elements in the form.  Inputs are inline; so no problem.  However if you are using table to format the form learn to live with the limitations of misusing tables.

CodeConfusedAuthor Commented:
Thanks to everyone for answering this question!
I much appreciate all the help!

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now