[FIXED] How to align Input fields using Table

Issue

I was facing the problem in adjusting the width of Input Fields in HTML form. I Google it, and found some solutions in Stack Overflow site. I created a table and put the input fields in it. It solved my problem but I don't know why the whole table is now displaying at the bottom of the page. I am sharing a part of my program. Kindly check it and guide me.

include 'connect.php';

//      $select_query=          'Select * from category';
//      $select_query_run =     mysql_query($select_query);

        echo "<div id='line' >
               <div id='form'>";

echo "  
    <form action='insert_product.php' method='POST' enctype='multipart/form-data' ></br></br>
    <table border=1>
    <tr>
    <td>
    <label>Product Name:</label> </td>  <td><input type='text' name='product_name'  />*Required</td></tr></br> </br>

    <tr><td><label>Item No:</label></td> <td><input type='text' name='item_no' ></td></tr></br></br>

    <tr><td>Recipient   </td>   <td> <input type='text' name='recipient' ></td></tr> </br></br>

<tr><td>    Total Carat Weight</td> <td><input type='text' name= 'total_carat_weight' ></td></tr></br></br>

<tr><td>    Metal </td><td><input type='text' name='metal' ></td></tr></br></br>

<tr><td>    Stone Shape </td><td><input type='text' name='stone_shape' ></td></tr></br></br>

<tr><td>    Stone Type</td><td> <input type='text' name='stone_type'></td></tr> </br></br>

<tr><td>    Stone Setting</td><td> <input type='text' name='stone_setting'></td></tr> </br></br>

<tr><td>    Wastage </td><td><input type='text' name='wastage'></td></tr></br></br>

<tr><td>    Retail_price </td><td><input type='text' name='retail_price' ></td></tr></br></br>

<tr><td>    Actual Price: </td><td> <input type= 'text' name= 'price'  /></td></tr>*Required</br> </br>

<tr><td>    Description:</td><td><input type='text' name='description'  /></td></tr></br></br>

<tr><td>    Image1:</td><td> <input type='file' name= 'image' ></td></tr> *Required</br></br>

<tr><td>    Image2:</td><td> <input type='file' name= 'image2' ></td></tr></br></br>

<tr><td>    Image3:</td><td> <input type='file' name= 'image3' ></td></tr></br></br></table>    ";




/*------------------
Drop Down List Start
------------------  */      


        echo "<select name='category'>";

            $select_query=          'Select * from category';
            $select_query_run =     mysql_query($select_query);

            $sub_category_query=    "Select * from sub_categories";
            $sub_query_run=         mysql_query($sub_category_query);



        while   ($select_query_array=   mysql_fetch_array($select_query_run) )
        {

                echo "<option value='".$select_query_array['category_id']."' >".
                htmlspecialchars($select_query_array["name"]).

                        "<option value='".$sub_query_run['sub_category_id']."'  >" .
                        htmlspecialchars($sub_query_run['sub_category_name']).   "</option>".

                "</option>";




            }
            echo "</br>";

     $selectTag= "</br><input type='submit' value='Insert Product'  /></select></form>";

     echo "</div></div>";

     echo $selectTag;

This is my CSS File.

#line
{
height: 900px; /*Specify Height*/
width:  790px; /*Specify Width*/
border: 1px solid #d5dfea; /*Add 1px solid border, use any color you want*/
background-color: #fafbfd; /*Add a background color to the box*/
text-align:left; /*Align the text to the center*/
/*margin: auto;*/
margin:10px;

box-shadow: 10px 5px 5px  #888888;
padding:20px;
}

#form
{
    margin :auto;
    padding:inherit;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;


}

input, select, textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Solution

Your </br> items are bogus.

First of all, if you're trying to code in compliant xhtml, you want <br /> rather than what you have.

Secondly, it's not clear what purpose linebreaks serve inside a table definition between the rows.

Answered By - O. Jones

Answer Checked By - Marie Seifert (PHPFixing Admin)