Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jan 2011
    Posts
    136
    Thanks
    101
    Thanked 0 Times in 0 Posts

    How to align two buttons in different forms

    I need two buttons, one as the "Continue", which inside the first <form action="$SELF$" method=post></form>, so that I could collect information.

    The next button is a "Go back" button, which is in another <form></form>.

    Now my "Go back" button is always below the "continue" button, because the second form is below the first form.

    What should I do to make the two buttons on a horizontal line?

    Thanks.
    Last edited by camaross; 07-25-2012 at 02:44 AM.

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Like this?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    <style type="text/css">
    .search-form form, input{
    	display:inline;
    	padding: 0px 5px 0px 5px;
    	}
    .search-form form{
    	border-bottom:1px solid #000;
    	text-align:center;
    	padding-bottom:4px;
    	width:7%;
    
    	display:inline;
    }
    .search-form{
    		width: 100%;
    
    }
    
    </style>
    </head>
    
    <body>
    <div class="search-form">
    	<form action="$SELF$" method="post">
    		<input name="Button1" type="button" value="Continue..." />
    	</form>
    	<form style="width: 55px">
    		<input name="Button2" type="button" value="Go back?" /></form>
    
    </div>
    
    </body>
    
    </html>

  • Users who have thanked tempz for this post:

    camaross (07-25-2012)

  • #3
    Regular Coder
    Join Date
    Jan 2011
    Posts
    136
    Thanks
    101
    Thanked 0 Times in 0 Posts
    Thank you very much for the example. I really appreciate the help!


    Quote Originally Posted by tempz View Post
    Like this?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    <style type="text/css">
    .search-form form, input{
    	display:inline;
    	padding: 0px 5px 0px 5px;
    	}
    .search-form form{
    	border-bottom:1px solid #000;
    	text-align:center;
    	padding-bottom:4px;
    	width:7%;
    
    	display:inline;
    }
    .search-form{
    		width: 100%;
    
    }
    
    </style>
    </head>
    
    <body>
    <div class="search-form">
    	<form action="$SELF$" method="post">
    
    		<input name="Button1" type="button" value="Continue..." />
    	</form>
    	<form style="width: 55px">
    		<input name="Button2" type="button" value="Go back?" /></form>
    
    </div>
    
    </body>
    
    </html>

  • #4
    Regular Coder
    Join Date
    Jan 2011
    Posts
    136
    Thanks
    101
    Thanked 0 Times in 0 Posts
    In the below example, how do I move the "continue" button after the "Go back" button. Considering that the "continue" button is related to a bunch of information within <table></table> (the information has to be displayed above the two buttons)


    Thank you.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    <style type="text/css">
    .search-form form, input{
    	display:inline;
    	padding: 0px 5px 0px 5px;
    	}
    .search-form form{
    	border-bottom:1px solid #000;
    	text-align:center;
    	padding-bottom:4px;
    	width:7%;
    
    	display:inline;
    }
    .search-form{
    		width: 100%;
    
    }
    
    </style>
    </head>
    
    <body>
    <div class="search-form">
    	<form action="$SELF$" method="post">
    <table>
    <tr>
    <td><b>Temperature of standardization:</b></td>
    <td style="padding-left:30px"><b>Frequency of standardization:</b></td>
    </tr>
    <tr>
    <td><input type="text" name="DICTAStdTemp0" value="$DICTAStdTemp0$" maxlength="45" style="width:294px;"/></td> 
    <td style="padding-left:30px"><input type="text" name="DICTAStdFre0" value="$DICTAStdFre0$" maxlength="45" style="width:294px;"/></td>
    </tr>
    </table>
    		<input name="Button1" type="button" value="Continue..." />
    	</form>
    	<form style="width: 55px">
    		<input name="Button2" type="button" value="Go back?" /></form>
    
    </div>
    
    </body>
    
    </html>

  • #5
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    This?


  • Users who have thanked tempz for this post:

    camaross (07-28-2012)

  • #6
    Regular Coder
    Join Date
    Jan 2011
    Posts
    136
    Thanks
    101
    Thanked 0 Times in 0 Posts
    Exactly!!! So the second button "continue" is linked to the form above?

    How did you do it? Thank you.




    Quote Originally Posted by tempz View Post
    This?


  • #7
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    No wait, one second. i'll link it


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •