Solution 1 :

Form tag is a “Block level” element like Div tag for example.

you can add CSS to change it

<style> form{display:inline-block} </style>

Or by using flex

Solution 2 :

<style>
   .container {
     display: flex;
     justify-content: space-around;
   }
  
   input {
     display:block;
   }
   </style>

<div class="container">
   <form action="/pull_entity_by_manufacturer" method="post">
    Pull an entity by a given man <input type="text" name="ev_manu"><input
        type="submit"/>
</form>

<form action="/pull_entity_by_year" method="post">
    Pull an entity by a given year <input type="number" name="ev_yr"><input type="submit"/>
</form>

<form action="/pull_entity_by_range" method="post">
    <label for="cars">Range upto:</label>
    <select name="ev_rg" id="cars">
        <option value="600">600</option>
        <option value="500">500</option>
        <option value="400">400</option>
        <option value="300">300</option>
        <option value="200">200</option>
    </select>
    <input type="submit"/>
</form>
</div>

Problem :

I am using 3 different forms for my flask application. I want to display these forms in a single line instead of one below the other. Is there anyway to do it? Here’s my html snippet (no css used yet)

<form action="/pull_entity_by_manufacturer" method="post">
    pull an entity by a given man <input type="text" name="ev_manu"><input
        type="submit"/>
</form>

<form action="/pull_entity_by_year" method="post">
    pull an entity by a given yr <input type="number" name="ev_yr"><input type="submit"/>
</form>

<form action="/pull_entity_by_range" method="post">
    <label for="cars">Range upto:</label>
    <select name="ev_rg" id="cars">
        <option value="600">600</option>
        <option value="500">500</option>
        <option value="400">400</option>
        <option value="300">300</option>
        <option value="200">200</option>
    </select>
    <input type="submit"/>
</form>

Comments

Comment posted by Libin Thomas

That worked like charm. Thanks a lot 🙂

Comment posted by Libin Thomas

Thanks a ton @webCatDev. This is perfect. I just found another solution which fit my requirement. Appreciate the help 🙂

By