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,
ibanjaAsked:
Who is Participating?
 
Colin_UKConnect With a Mentor Commented:
How about a nice simple HTML table eg:
<table width="100%" border="0" cellspacing="3">
  <tr>
    <td>
      <form action='anotherFile.php' method='POST'>
        <input type='submit' name='post' value='Under'>
     </form>
    </td>
    <td>
      <form action='anotherFile.php' method='POST'>
        <input type='submit' name='post' value='Under'>
      </form>
    </td>
  </tr>
</table>
0
 
BatalfConnect With a Mentor Commented:
One option is to change the display attribute of the form tag

form{
    display:inline;
}

example:

<!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">
form{
    display:inline;
}
</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>

<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>
0
 
ibanjaAuthor Commented:
Batalf,

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
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
ibanjaAuthor Commented:
Colin,

There's the elegant solution.

Thank you!
ibanja
0
 
BatalfCommented:
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
0
 
Colin_UKCommented:
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?
0
 
Colin_UKCommented:
ibanja,

If you like the solution you should mark the question as solved so it can be archived.
and thanx for your nice comment...
0
 
BatalfCommented:
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

0
 
BatalfCommented:
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
0
 
BatalfCommented:
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='anotherPage2.html'" name='post' value='Under'>
0
 
Colin_UKCommented:
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 :)
0
 
BatalfCommented:
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
0
 
ibanjaAuthor Commented:
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
0
 
BatalfCommented:
Glad we could help!

Thanks for the assist

Batalf
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.