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.
Create two HTML Forms next to each other
6.1k views Asked by Hamid K At
5
There are 5 answers
0
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
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
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
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
Something like this would do it: (The borders are just so you can see the effect.)