Create two HTML Forms next to each other

6.1k views Asked by At

I am new to HTML. I am wondering if you could have two forms setting next to each other in parallel in HTML. I have generated this sample GUI with Tkinter and I want to generate a HTML file for the GUi with Bootstrap style.

GUI

5

There are 5 answers

5
Lance On BEST ANSWER

Something like this would do it: (The borders are just so you can see the effect.)

div
{
  border: 1px solid red;
}

#left
{
  float: left;
  width: 64%;
}

#right
{
  float: right;
  width: 35%;
}
<div id="left">Left Stuff</div>
<div id="right">Right Stuff</div>

0
ProblemChild On

Well, if you're using Bootstrap, it's very easy. Try the following :

<html>
    <head>
        <title>Sample</title>

        <link rel="stylesheet" type="text/css" href="bootstrap.css" />
    </head>

    <body>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <div class="col-md-2">
                        <label for="label-name" class="control-label">Text Here</label>
                    </div>

                    <div class="col-md-6">
                        <input type="text" class="form-control" id="some-text">
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <div class="col-md-2">
                        <label for="label-name" class="control-label">Text Here</label>
                    </div>

                    <div class="col-md-6">
                         <input type="checkbox">
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-2"></div>

            <div class="col-md-6">
                <button type="button" class="btn btn-default">Run</button>
            </div>
        </div>

        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap.min.js"></script>
    </body>
</html>
1
MGrantley On

Ok, sounds like 1 form, you just want it styled a certain way:

<div class="row">
<div class="form-group">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <p>Settings</p>
        <label for="label-name" class="control-label">Label1</label>
        <input type="text" class="form-control" id="some-text">
        <label for="label-name" class="control-label">Label2</label>
        <input type="text" class="form-control" id="some-text">
        <label for="label-name" class="control-label">Label3</label>
        <input type="text" class="form-control" id="some-text">
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <p>Options</p>
          <label for="label-name" class="control-label">Label4</label>
          <input type="checkbox"></br>
          <label for="label-name" class="control-label">Label5</label>
          <input type="checkbox"></br>
          <label for="label-name" class="control-label">Label6</label>
          <input type="checkbox">
       </div>
    </div>
</div>
<div class="row">    
    <div class="col-md-6">
        <button type="button" class="btn btn-default">Run</button>
    </div>
</div>
0
Sowemimo Bamidele On

Yea...

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
        <form action="" method="POST" class="form-horizontal" role="form">
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-default">SUBMIT</button>
            </div>
        </form>
    </div>

    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <form action="" method="POST" class="form-horizontal" role="form">
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <span class="label">Label</span>
                <input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-default">SUBMIT</button>
            </div>
        </form>
    </div>

</div>

Hope this helps

0
ufollettu On

I do not know your html file, but I think bootstrap can provide a built-in solution. Just refer to the official documentation and start with a basic template like this:

<div class="container">
    <div class="row">
        <div class="col-sm-8"> <--the big form-->
            <form id="big">
                <div class="form-group">
                ...
                </div>
            </form>
        </div>
        <div class="col-sm-4"> <--the small one-->
            <form id="small">
                <div class="form-group">
                ...
                </div>
            </form>
        </div>
    </div>
</div>

You can use many other classes and of course customize your own in your stylesheet