ibanja
asked on
html - display multiple button forms on same row.
I have a form that uses submit buttons. The problem I am having is that I want the buttons to display on the same row. Because they each call a separate php page in the "action=" part of the form, they display over and under each other. Is there a way to display them on the same row?
Desired:
-------- ----------
| Side | bySide|
-------- ---------
Undesired:
--------
| Over |
--------
----------
| Under |
----------
The code is:
<html>
<head>
<title>Buttons Example</title>
</head>
<body>
<h1>Buttons Example</h1>
<form action='someFile.php' method='POST'>
<input type='submit' name='post' value='Side'>
<input type='submit' name='post' value='bySide'>
</form>
<form action='anotherFile.php' method='POST'>
<input type='submit' name='post' value='Over'>
</form>
<form action='anotherFile.php' method='POST'>
<input type='submit' name='post' value='Under'>
</form>
</body>
</html>
Thank you,
Desired:
-------- ----------
| Side | bySide|
-------- ---------
Undesired:
--------
| Over |
--------
----------
| Under |
----------
The code is:
<html>
<head>
<title>Buttons Example</title>
</head>
<body>
<h1>Buttons Example</h1>
<form action='someFile.php' method='POST'>
<input type='submit' name='post' value='Side'>
<input type='submit' name='post' value='bySide'>
</form>
<form action='anotherFile.php' method='POST'>
<input type='submit' name='post' value='Over'>
</form>
<form action='anotherFile.php' method='POST'>
<input type='submit' name='post' value='Under'>
</form>
</body>
</html>
Thank you,
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Colin,
There's the elegant solution.
Thank you!
ibanja
There's the elegant solution.
Thank you!
ibanja
Maybe you could use floating divs.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Buttons Example</title>
<style type="text/css">
.floatingLayer{
float:left;
}
</style>
</head>
<body>
<h1>Buttons Example</h1>
<form action='someFile.php' method='POST'>
<input type='submit' name='post' value='Side'>
<input type='submit' name='post' value='bySide'>
</form>
<div class="floatingLayer">
<form action='anotherFile.php' method='POST'>
<input type='submit' name='post' value='Over'>
</form>
</div>
<div class="floatingLayer">
<form action='anotherFile.php' method='POST'>
<input type='submit' name='post' value='Under'>
</form>
</div>
</body>
</html>
You should be careful with tables. They should primary be used for tabular data, not layout.
Batalf
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Buttons Example</title>
<style type="text/css">
.floatingLayer{
float:left;
}
</style>
</head>
<body>
<h1>Buttons Example</h1>
<form action='someFile.php' method='POST'>
<input type='submit' name='post' value='Side'>
<input type='submit' name='post' value='bySide'>
</form>
<div class="floatingLayer">
<form action='anotherFile.php' method='POST'>
<input type='submit' name='post' value='Over'>
</form>
</div>
<div class="floatingLayer">
<form action='anotherFile.php' method='POST'>
<input type='submit' name='post' value='Under'>
</form>
</div>
</body>
</html>
You should be careful with tables. They should primary be used for tabular data, not layout.
Batalf
Batalf,
Tables have been the preferred method of imposing 'layout' to a page long before style sheets, they are sound in design and now pretty uniform across browsers. I must admit I have never heard of any HTML references that advise not using tables for 'layout'. Afterall, tabular data is only data in a particular 'layout'.
What leads you to warn against the use of tables?
Tables have been the preferred method of imposing 'layout' to a page long before style sheets, they are sound in design and now pretty uniform across browsers. I must admit I have never heard of any HTML references that advise not using tables for 'layout'. Afterall, tabular data is only data in a particular 'layout'.
What leads you to warn against the use of tables?
ibanja,
If you like the solution you should mark the question as solved so it can be archived.
and thanx for your nice comment...
If you like the solution you should mark the question as solved so it can be archived.
and thanx for your nice comment...
There's a lot of reasons.
1. The modern approach to web design is that HTML should describe the content of the document. Examples:
<h1> should be used to display table on level 1
<p> Should be used to display a paragraph of text
<div> should be used to divide the page into divisions
<table> should be used to display tabular data
+++
The idea is that you separate structure from layout. The layout should be put into CSS
2. Browsers renders divs alot faster and more smoothly than tables.
3. There's less code when you use divs.
References:
The most interesting links is the one on espn, which went away from table based design:
http://www.mikeindustries.com/blog/archive/2003/06/espn-interview
Other references:
http://techrangers.cdws.ucf.edu/techtime/handouts/css03/
http://www.alistapart.com/articles/practicalcss/
http://www.mardiros.net/liquid-css-layouts.html
1. The modern approach to web design is that HTML should describe the content of the document. Examples:
<h1> should be used to display table on level 1
<p> Should be used to display a paragraph of text
<div> should be used to divide the page into divisions
<table> should be used to display tabular data
+++
The idea is that you separate structure from layout. The layout should be put into CSS
2. Browsers renders divs alot faster and more smoothly than tables.
3. There's less code when you use divs.
References:
The most interesting links is the one on espn, which went away from table based design:
http://www.mikeindustries.com/blog/archive/2003/06/espn-interview
Other references:
http://techrangers.cdws.ucf.edu/techtime/handouts/css03/
http://www.alistapart.com/articles/practicalcss/
http://www.mardiros.net/liquid-css-layouts.html
Another very insipiring and interesting page is
http://www.csszengarden.com/
On the right side of that page, you can see alot of links below the heading "Select a design".
What's so special about these pages is that the HTML of them all is identical(everything between <body> and </body>). The difference is only in the CSS. If you use the HTML tags wisely, you could use CSS as a very powerful design tool. The different designs on www.csszengarden.com would never been possible with table based layout.
Batalf
http://www.csszengarden.com/
On the right side of that page, you can see alot of links below the heading "Select a design".
What's so special about these pages is that the HTML of them all is identical(everything between <body> and </body>). The difference is only in the CSS. If you use the HTML tags wisely, you could use CSS as a very powerful design tool. The different designs on www.csszengarden.com would never been possible with table based layout.
Batalf
If the only reason for having several forms is the action attribute, then an alternative solution could be to change the action by javascript when the buttons is clicked.
example:
<input type='submit' onclick="this.form.action=
example:
<input type='submit' onclick="this.form.action=
Batalf,
I agree that CSS is of great use and allows a lot of flexibility with reduced coding for the larger scale. But I still don't agree that using tables to align a few objects is possibly a dangerous scenario.
Yes divs are rendered faster than tables (only with IE) the downside is they do increase processing consumption and memory usage. I have not found any HTML reference (real references, not someone's opinion) that urges careful use of tables for a few objects, be it images, text or, as required here, forms.
I guess we will just have to differ :)
I agree that CSS is of great use and allows a lot of flexibility with reduced coding for the larger scale. But I still don't agree that using tables to align a few objects is possibly a dangerous scenario.
Yes divs are rendered faster than tables (only with IE) the downside is they do increase processing consumption and memory usage. I have not found any HTML reference (real references, not someone's opinion) that urges careful use of tables for a few objects, be it images, text or, as required here, forms.
I guess we will just have to differ :)
In this specific example, you're probably right:-) If you only want to show two buttons side by side in a tabular way, then <table> could be the best.
<div> is probably more useful when you want to group two forms with several elements.
example from w3c
http://www.w3.org/TR/REC-html40/struct/global.html#edef-DIV
Batalf
<div> is probably more useful when you want to group two forms with several elements.
example from w3c
http://www.w3.org/TR/REC-html40/struct/global.html#edef-DIV
Batalf
ASKER
Thanks to both Batalf and Colin.
Colin, I had meant to "mark the question as solved". Although I must say - I'm a bit glad I forgot since Batalf has given some interesting points and links. I intend to study into them some more, but for now I believe for my particular situation the tables do offer the best solution.
I've added points and spit them 400/100 Colin/Batalf.
Thanks again,
ibanji
Colin, I had meant to "mark the question as solved". Although I must say - I'm a bit glad I forgot since Batalf has given some interesting points and links. I intend to study into them some more, but for now I believe for my particular situation the tables do offer the best solution.
I've added points and spit them 400/100 Colin/Batalf.
Thanks again,
ibanji
Glad we could help!
Thanks for the assist
Batalf
Thanks for the assist
Batalf
ASKER
Thanks, But I can't get that to work. In the Konqueror browser I have a blank screen. In Firefox I have the same results as without the changed display attribute setting.
ibanja