HTML button group changed to forms, horizontal became vertical

Question

I am submitting the $obj['_id'] value to external pages, so I hope there is no easier way to do that than creating forms like below, or else I made a fool of myself.

In PHP code, I changed this:

echo '<td><div class="btn-group" role="group" aria-label="...">
     <a class="btn btn-success btn-xs" href="modify.php" role="button">Edit</a>
     <a class="btn btn-danger btn-xs" href="del.php" role="button">Del</a></div></td>';

into this:

echo '<td><form name="editform" action="edit.php" method="post">
     <input type="hidden" name="editthisid" value="' . $obj['_id'] . '">    
     <input type="submit" class="btn btn-success btn-xs" name="edit" value="Edit">
     </form>
     <form name="deleteform" action="del.php" method="post">
     <input type="hidden" name="deletethisid" value="' . $obj['_id'] . '">    
     <input type="submit" class="btn btn-danger btn-xs" name="" value="Del">       
     </form></td>';

With the first code, the buttons appeared horizontally, and with the second, the submit buttons appeared vertically. The width of the webpage does not matter, while I tried to adjust the table layout and failed to place the buttons horizontally.

I am looking for a class to gather forms in a group like the btn-group so they appear horizontally to save space on the webpage layout.

Is there any class grouping forms like the btn-group? Or this would not help anyway? If so, is there any other option to place them next to each other easily?

EDIT: I haven't even created any CSS layout yet.

Answer 1

Anchor tags are, by default, inline elements. So, without styling, multiple <a> tags will render horizontally. Form tags, however, default to block level elements. So your multiple <form> tags with stack vertically.

I would avoid using a <table> and associated <tr> or <td> tags for layout purposes, unless you're actually rendering a data table.

You almost definitely want to be using CSS here to control your layout. Try adding a class to your <form> tags to display them as inline-block elements, for example:

<style type="text/css">
    .inline {
        display: inline-block;
    }
</style>

<form class="inline">
    <input type="submit" class="btn btn-success btn-xs" name="edit" value="Edit">
</form>

<form class="inline">
    <input type="submit" class="btn btn-danger btn-xs" name="" value="Del">       
</form>

Update:

Ah, if you're actually rendering a table, then you should be able to render the forms in table cells within the same row. This, by default, will render the buttons horizontally:

<table>
  <tr>
    <td><form><input type="submit" value="Edit"></form></td>
    <td><form><input type="submit" value="Del"></form></td>
  </tr>
</table>

I suspect that, if in your second example above you're not seeing the submit buttons rendering horizontally, it's because you're not properly nesting the <td> elements in the same <tr> and parent <table> tags.