How to align form and text generated by function? - php

Question

I'm developing a webpage that has many forms with some text close to form. This form and text are generated by a function, but I get this
As you can see the forms and the text are not aligned with forms and text below. I would like to have this:
(this work because I put spaces manually). This is how I create forms.
function add_form($product,$name,$productp)
{
$productpt = "X";
echo $name;
echo '<input type="text" name="'. $product. '" id="'. $product. '" style="font-size:12pt;height:30px"/> x'.$productp. '€
price:'.$productpt.'€<br>';
}
echo '<form method="post" name="form1" id="form1" autocomplete="off">'; //start form
echo '<div class="leftpane">'; //start leftpane
echo '<h1>';
echo '<font size="6" color="red"> ALIMENTS </font><br>';
//ADD ELEMENTS IN MY MENU
//The first argument is the form name and id, the second is the name that will be printed(to the left of the form), the third argument is the price.
$menu[] = new Menu("pasta", "Pasta", 2);
$menu[] = new Menu("spaghetti", "Spaghetti", 1.50);
$menu[] = new Menu("pizza", "Pizza", 5);
$menu[] = new Menu("chicken_wings_x4", "Chicken Wings X4", 4.50);
$menu[] = new Menu("cheeseburger", "Cheeseburger", 6);
$menu[] = new Menu("Sandwich", "Sandwich", 2);
$menu[] = new Menu("hamburger", "Hamburger", 4.50);
$menu[] = new Menu("stuff", "stuff", 15.50);
//FOR EACH ELEMENT CREATE A FORM
for($i=0; $i<count($menu); $i++){
add_form($menu[$i]->form_name, $menu[$i]->name, $menu[$i]->price);
}
echo '</h1>';
echo '</div>'; //Close leftpane
...Do Others stuff in middlepane and in rightpane
To be clearer in html, for example the first form will be:
<input type="text" name="pasta" id="pasta" style="font-size:12pt;height:30px"/> x2€ price:X€<br>
I thought to divide in 3 parts my leftpane and to place $name to the left, the form to the middle and the price to the right. But the problem is that i create form in function, so I do not know how to do it.
This is my css:
<style>
input[type=text] {
width: 10%;
margin: 7.5px 0;
box-sizing: border-box;
}
input[type=submit].class1 {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit].class2 {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 33%;
height: 100%;
float: left;
border-collapse: collapse;
}
.middlepane {
width: 33%;
height: 100%;
float: left;
border-collapse: collapse;
}
.rightpane {
width: 33%;
height: 100%;
position: relative;
float: right;
border-collapse: collapse;
}
form {
display: inline-block;
}
h1 {
font-size: 19.5px;
}
</style>

Answer 1

I would suggest you to use a table. https://www.w3schools.com/html/html_tables.asp
Or you could wrap every section into a div-container and define its width.

Answer 2

I think your output code would really benefit from some additional HTML structure with classes that allow you to control their layout in a consistent way with CSS. I would update the add_form() function:
function add_form($product,$name,$productp) {
$productpt = "X";
echo '<div class="form-wrap">';
echo '<span class="form-name">' . $name . '</span>';
echo '<input type="text" name="'. $product. '" id="'. $product. '"/> <span class="form-label">x'.$productp. '€</span> <span class="form-price">price:'.$productpt.'€</span>';
echo '</div>';
}
Then with the output having more targetable HTML structure you can do this with CSS:
.form-wrap input {
font-size: 12pt;
height: 30px
}
.form-name {
display: inline-block;
width: 100px;
margin-right: 20px;
}
.form-label {
display: inline-block;
margin-left: 5px;
margin-right: 20px;
}
<div class="form-wrap">
<span class="form-name">Something</span>
<input type="text" name="something" id="somethingId" />
<span class="form-label">x1€</span>
<span class="form-price">price:1€</span>
</div>
<div class="form-wrap">
<span class="form-name">Another one</span>
<input type="text" name="anotherone" id="somethingId2" />
<span class="form-label">x2€</span>
<span class="form-price">price:2€</span>
</div>
<div class="form-wrap">
<span class="form-name">Number Three</span>
<input type="text" name="thirdone" id="somethingId3" />
<span class="form-label">x3€</span>
<span class="form-price">price:3€</span>
</div>

Answer 3

Try this.
function add_form($product,$name,$productp)
{
$productpt = "X";
echo "<table><tr>";
echo "<td width='20%'>" . $name . "</td>";
echo "<td width='20%'><input type='text' name='". $product . "' id='" . $product . "' style='font-size:12pt;height:30px;' /></td>";
echo "<td width='20%'>x" . $productp . "€</td>";
echo "<td width='20%'>price:" . $productpt . "€</td>";
echo "</tr></table>";
}