How to Align Two Submit Button on Same Line

how to align two submit button on same line

You have a mess with your html, no need in that much elements

<form>Involved: <input type="submit" value="Add from list"> or <input type="submit" value="Type a name"></form>

Two different submit buttons on the same line

<div style="width:400px;">
<div style="float: left; width: 130px">
<form id="thisone" action="post_nrs_users.asp" method="post">
<input type="submit" name = "" value="OK" >
<div style="float: right; width: 225px">
<form id="thistoo" action="post_nrs_users.asp" method="post">
<input type="submit" name = "" value="Cancel" >

Align form field and submit button on same line

My prefered solution would be using a flexbox for the form.

form {  display: flex;  align-items: center; /* Vertical alignment */}
.tnp-subscription { font-size: 13px; display: block; margin: 15px auto; max-width: 500px; width: 100%;}
.tnp-subscription input.tnp-submit { background-color: #6acbdc; ; color: #fff; width: auto; height: auto;}
<div class="tnp tnp-subscription">  <form method="post" action="" onsubmit="return newsletter_check(this)">    <div class="tnp-field tnp-field-email"><input class="tnp-email" type="email" name="ne" placeholder="Enter your e-mail address" required></div>    <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe">    </div>  </form></div>

How to put two button in the same line using only html and css?

Here is my solution using flex

ul {
list-style: none;
display: flex;
align-items: center;
justify-content: center;

li {
margin: auto;

2 submit button for 2 forms - The submit button which align horizontally

You don't need Bootstrap for that.
Just simply use style="display:inline-block;" to change your design.

<form action="generate_p.php" method="post" style="display:inline-block;">             <input type="hidden" name="sdat" value="<?php echo $start; ?>"/>             <input type="hidden" name="edat" value="<?php echo  $end; ?>"/>             <input type="submit" name="submit" value="EXPORT"  class="btn btn-raised btn-success"/>            </form>
<form action="generate_pi.php" method="post" style="display:inline-block;"> <input type="hidden" name="sdat" value="<?php echo $start; ?>"/> <input type="hidden" name="edat" value="<?php echo $end; ?>"/> <input type="submit" name="submi" value="EXPO" class="btn btn-raised btn-success"/> </form>

Placing multiple submit buttons in the same line

The default theme puts form elements in table rows/cells.

Create the buttons while specifying the "simple" theme:

<s:submit value="Save" theme="simple" />
<s:submit value="Cancel" action="cancelAction" theme="simple" />
<s:submit value="Add" action="requirementValidationAction" theme="simple" />

There are a number of ways to set the theme; doing it in every element may not be the best for your circumstances--probably better to set the theme on the form itself.

If you have app needs that go beyond what's provided in the default, you may want to create your own theme.

How to align two form buttons on the same line and tell which was clicked?

Buttons don't submit, they click. Forms submit. Just use type="button". You can give the button an ID and read it back as an attribute.

$('#add_comment').live('click',function( )


Display Multiple Form Submit Buttons Inline Same Line In IE8 In Table

Your example doesn't work primarily because your HTML isn't valid. You open a td, put Submit1 and then close a form element?? Fix that and a lot of problems probably go away.

If you want two buttons side by side, you should just be able to put them in the same container.

Related Topics

Leave a reply