[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

html - display multiple button forms on same row.

Posted on 2005-05-05
14
Medium Priority
?
607 Views
Last Modified: 2011-10-03
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,
0
Comment
Question by:ibanja
  • 7
  • 4
  • 3
14 Comments
 
LVL 32

Assisted Solution

by:Batalf
Batalf earned 400 total points
ID: 13938935
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
 
LVL 5

Accepted Solution

by:
Colin_UK earned 1600 total points
ID: 13939551
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
 

Author Comment

by:ibanja
ID: 13939912
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
Independent Software Vendors: 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!

 

Author Comment

by:ibanja
ID: 13939931
Colin,

There's the elegant solution.

Thank you!
ibanja
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13939944
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
 
LVL 5

Expert Comment

by:Colin_UK
ID: 13940023
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
 
LVL 5

Expert Comment

by:Colin_UK
ID: 13940093
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
 
LVL 32

Expert Comment

by:Batalf
ID: 13940116
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
 
LVL 32

Expert Comment

by:Batalf
ID: 13940173
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
 
LVL 32

Expert Comment

by:Batalf
ID: 13940262
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
 
LVL 5

Expert Comment

by:Colin_UK
ID: 13940353
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
 
LVL 32

Expert Comment

by:Batalf
ID: 13940597
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
 

Author Comment

by:ibanja
ID: 13940695
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
 
LVL 32

Expert Comment

by:Batalf
ID: 13940717
Glad we could help!

Thanks for the assist

Batalf
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses
Course of the Month18 days, 18 hours left to enroll

834 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