how to align two submit button on same line
You have a mess with your html, no need in that much elements
<td>
<form>Involved: <input type="submit" value="Add from list"> or <input type="submit" value="Type a name"></form>
</td>
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" >
</form>
</div>
<div style="float: right; width: 225px">
<form id="thistoo" action="post_nrs_users.asp" method="post">
<input type="submit" name = "" value="Cancel" >
</form>
</div>
</div>
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="http://www.buffettworld.com/bw18/?na=s" 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( )
{
alert($(this).val());
alert($(this).attr('id')
...
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
Angular 5 File Upload: Failed to Set the 'Value' Property on 'Htmlinputelement'
How to Playback Mkv Video in Web Browser
How to Open Excel File in Browser, Not in Excel Application
How to Adjust the Width of the Input Field Based on the Placeholder Text
How to Remove the Extra Space in in This Search Box (Between Input Field and Button)
How to Lock Viewport to Portrait Orientation in Html5/Css3
Pressing Spacebar Scrolls Page Down
Can You Provide Some Examples of Why It Is Hard to Parse Xml and HTML With a Regex
One Flex/Grid Item Sets the Size Limit For Siblings
How to Match Width of Text to Width of Dynamically Sized Image/Title
Provide an Image for Whatsapp Link Sharing
On Hover of Child, Change Background Color of Parent Container (Css Only)
How to Prevent Desktop Browser (Chrome, Safari) from Zooming a Webpage
Nested Ngfor Looping Over an Array of Objects
Next.Js Background-Image CSS Property Cant Load the Image
How to Get an Iframe to Be Responsive in iOS Safari