Question 43593 in Html Question posted in
Some basic documentation can be found here.

2 submit buttons in the same line – Html

I have two submit buttons part of two different forms, How can I display them in one common line and in the middle of the line side by side?

<form action="https://google.com/search">
  <div style="display: inline;">
    <input id="google" type="text" name="q">
    <input class="button" type="submit" value="Google Search">
  </div>
</form>
<form action="https://www.google.com/doodles/">
  <input class="button" type="submit" value="I'm so lucky">
</form>

Appreciate any help.

Tags:

4

Answers


  1. 0

    Make the forms inline with CSS

    .inline {
  display:inline;
}
    <form action="https://google.com/search" class="inline">
  <div style="display: inline;">
    <input id="google" type="text" name="q">
    <input class="button" type="submit" value="Google Search">
  </div>
</form>
<form action="https://www.google.com/doodles/"  class="inline">
  <input class="button" type="submit" value="I'm so lucky">
</form>

    Other option is you can use the form id and target the form and put the button inside the other form.

    <form action="https://google.com/search">
  <input id="google" type="text" name="q">
  <input class="button" type="submit" value="Google Search">
  <input class="button" form="lucky" type="submit" value="I'm so lucky">
</form>
<form action="https://www.example.com" id="lucky"></form>
    Login or Signup to reply.
  2. 0

    Forms are block elements by default, you’ll need to make these two inline for them to be on the same line.

    Alternatively, wrap them in a flex container.

    Login or Signup to reply.
  3. 0

    You put your form on a <div></div> and on your CSS, past you div on display: flex. I after, I’ve give a margin-left on the second button to get space between the button.

    .flex {
  display: flex;
}

.ml-4 {
  margin-left: 4px;  
}
    <div class="flex">
  <form action="https://google.com/search">
    <div style="display: inline;">
      <input id="google" type="text" name="q">
      <input class="button" type="submit" value="Google Search">
    </div>
  </form>
  <form action="https://www.google.com/doodles/">
    <input class="button ml-4" type="submit" value="I'm so lucky">
  </form>
</div>

    Learn the flexbox, now, it’s really important! 🙂

    Have a good day.

    Login or Signup to reply.
  4. 0

    You can use flex box to solve your problem

    <div style="display: flex; justify-content: center; align-items: center;">
  <form action="https://google.com/search">
    <div style="display: inline;">
      <input id="google" type="text" name="q">
      <input class="button" type="submit" value="Google Search">
    </div>
  </form>
  <form action="https://www.google.com/doodles/">
    <input class="button" type="submit" value="I'm so lucky">
  </form>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search