?
Solved

form field formatting

Posted on 2003-03-07
9
Medium Priority
?
211 Views
Last Modified: 2010-04-09
Hi,

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,
Dan
0
Comment
Question by:CodeConfused
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +2
9 Comments
 

Expert Comment

by:webmanager
ID: 8089473
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..

<table>
<tr><form method=get>
<td>
Name: <input type="text"><br>
Phone number: <input type="text">
</td>
</form>
</tr>
</table>
0
 
LVL 17

Expert Comment

by:dorward
ID: 8089918
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;.
0
 

Expert Comment

by:webmanager
ID: 8090037
ok,

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>.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

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

 

Author Comment

by:CodeConfused
ID: 8090167
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!
0
 

Accepted Solution

by:
webmanager earned 450 total points
ID: 8090186
I might not have been that clear....

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


<html>
<head>
<title>title</title>
</head>
<body>
<form>

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


</form>
</body>
</html>
0
 
LVL 19

Expert Comment

by:webwoman
ID: 8090260
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) ;-)
0
 
LVL 17

Expert Comment

by:dorward
ID: 8091441
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8091455
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.

Cd&
0
 

Author Comment

by:CodeConfused
ID: 8121674
Thanks to everyone for answering this question!
I much appreciate all the help!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

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

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question