HTML - Ways to showcase multiple forms on a single row?

I have three forms in my Flask application that I want to display in a single line rather than one after the other. Is there a way to achieve this without using CSS? Here is the HTML snippet:

<form action="/pull_entity_by_manufacturer" method="post">
    Pull an entity by manufacturer: <input type="text" name="ev_manu"><input
        type="submit"/>
</form>

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

<form action="/pull_entity_by_range" method="post">
    <label for="cars">Range up to:</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>

Answer №1

Form tags function as a "block-level" element, similar to the Div tag.

You have the ability to apply CSS styles to modify its appearance

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

Alternatively, you can utilize flex properties for layout adjustments

Answer №2

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

<div class="container">
   <form action="/fetch_entity_by_maker" method="post">
    Fetch an entity by a specified manufacturer <input type="text" name="ev_manu"><input
        type="submit"/>
</form>

<form action="/fetch_entity_by_year" method="post">
    Fetch an entity by a specific year <input type="number" name="ev_yr"><input type="submit"/>
</form>

<form action="/fetch_entity_by_range" method="post">
    <label for="cars">Range limit:</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with message display validation in jQuery

Validation has been applied to the form, and there are div elements within the input fields with corresponding IDs. The goal is to display error messages within those divs. Specifically, if an input field is missing, the errorMessage should be set in the ...

Exploring the functionality of the SVG tag tref in Microsoft Edge

I experimented with using the svg tag tref according to the W3C SVG specification 1.1 in the following manner: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>< ...

Unable to call upon JavaScript code from an external file

Just starting out with Spring and JavaScript! I've put together a JSP file https://i.sstatic.net/XemJ5.png In my first.js, you'll find the following method: function firstmethod() { window.alert("Enter a New Number"); return true; } H ...

Is it possible to trigger a modal to open automatically after a 3-second delay?

code: <script> $(document).ready(function() { setInterval(function() { $('#contact').modal(); }, 3000); }); </script> html code: <a href="#contact"><h4><i class="fa f ...

``I'm having trouble getting the onchange event to function properly in a customized

After following a tutorial, I successfully created a custom select dropdown using the provided link. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select However, I am facing an issue with the onchange event not working for the select ...

What is the best way to set up a server-sent-events broadcast feature in totaljs?

Let's imagine this situation: Client1 and Client2 are currently in session1 Meanwhile, Client3 and Client4 are part of session2 My aim now is to send event "a" to all clients in session1 exclusively. I came across this example: https://github ...

What is the best way to make a message appear only when the browser screen is smaller?

I am struggling to make a message appear only when the screen is resized. It's puzzling me why my current approach isn't yielding the desired result. Instead of displaying the message only on a shrunk screen, it shows up all the time. I can confi ...

Is the utilization of a PHP snippet for translated content considered a beneficial practice? Are there ways to enhance or simplify this process further?

I am in the process of creating a website that will display translated content using different gTLDs. For example, example.com, example.fr, example.de. The plan is to have all these domains redirect to the same content on one server. Then, based on the gT ...

What techniques can be used to ensure an element remains visible within the viewport

I am currently working with an HTML element that is displayed when a button is clicked, similar to a popup. My goal is to determine if the element is within the browser's viewport and then position it accordingly inside the viewport. Is there a proper ...

Completing forms and tracking browser history when the document is ready

In my current webpage, I have code that automatically submits the form when the DOM is ready: $(function () { $('form').submit(); }); However, I've noticed that when a user clicks the back button on their browser on the next page, it t ...

When I include scroll-snap-type: y; in the body tag, the scroll-snapping feature does not function properly

Hey there! I've been trying to implement scroll-snapping on my project but unfortunately, I couldn't get it to work. I tested it out on both Chrome and Firefox, but no luck so far. Here's the code snippet I've been working with, would a ...

What is the best method for converting a variable with HTML content into a printable string?

In an attempt to display user-entered data from a text box to an HTML div, there seems to be an issue when the data contains HTML content. Instead of displaying the content as a string, it shows it as HTML elements. For example: let text = "<h1>Worl ...

Arranging columns with Bootstrap

I have a unique design using Bootstrap as shown below: <div class="row"> <div class="col-md-2"> 1 </div> <div class="col-md-8"> 2 </div> <div class="col-md-2"> 3 </div> </d ...

Get rid of the margins on your Wordpress theme

Currently, my Wordpress site is using the Tesseract theme which can be found at (http:// instantiwebs . com) I am interested in removing the left/right margins on all elements, similar to what has been done on this website: . Interestingly enough, they al ...

Arranging unrelated divs in alignment

http://codepen.io/anon/pen/Gxbfu <-- Here is the specific portion of the website that needs alignment. My goal is to have Onyx Design perfectly aligned with the right side of the navbar, or to have the navbar extend up to the end of "Onyx Design". The ...

What is the best way to adjust the dimensions of a textfield in Vuetify by altering its width and height?

Is there a way to adjust both the width and height of the <v-text-field>tag? I attempted to modify it using .css, but it seems to only affect certain parameters, leaving large white spaces on my page. This is the method I have tried so far: <te ...

Is there a better approach to accomplishing this task using jQuery?

http://jsfiddle.net/bGDME/ My goal is to display only the selected content within the scope and hide the rest. The method I used feels a bit cumbersome. I'm open to suggestions on how to improve this. Any guidance would be greatly appreciated. Tha ...

Problem with keyframe animations in Internet Explorer 10

My CSS animation works flawlessly in all modern browsers, except for IE10 which is causing some trouble. It appears that IE is having difficulty properly rotating 360deg. I am still searching for a workaround that won't compromise the functionality in ...

Custom Jquery function is failing to position divs correctly within ajax-loaded content

I recently coded a custom function that efficiently positions absolute divs within a container by calculating top positions and heights: $.fn.gridB = function() { var o = $(this); //UPDATED from var o = $(this[0]); o.each(function() { var ...

How can I use jQuery to automatically redirect to a different HTML page after updating a dynamic label?

When I click on a button in first.html, a function is called to update labels in second.html. However, despite being able to see second.html, I am unable to see the updated values in the labels. Can someone please advise me on how to achieve this? functi ...