Can anyone please make proper alignment of HTML elements in the form(file attached) by applying CSS to it??

The problem i am having in alignment of input and select fields. html and css code is attached. I am having hard time for resolving this as i am beginner in css learning.

Select fields for choosing time       from    [hour] [minutes]              to     [hour][minutes]  should be easily understood by user. right now it is not so.
Page is divided into two parts  - > left and right side.  left side's width is 60% and right side's is 40 %.

Form is in the left side. (which is to be consider)
select.php
capture18.PNG
v sResearcherAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Md ZafarSr. Software DeveloperCommented:
please use either table or div don't mix both of them.. better option use bootstrap for responsive designing.
please see this attachment and add PHP code with this
Sample.html
0
Leonidas DosasCommented:
Check this more simplest solution.I use datetimepicker plugin.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<link rel="stylesheet" href="css/jquery.datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="js/jquery.datetimepicker.full.min.js"></script>
 <style>
               table{ 
                    font-family: arial, sans-serif;
                    border-collapse: collapse;
                    width: 100%;
                    align-self: center;
                    margin-top: 10em;
                    overflow: hidden;
                    
                    }

           td,th{
                  border: 1px solid #dddddd;
                  text-align: left;
                  padding: 8px;
                 }

tr:nth-child(even) {
                     background-color: #ddd;
                   }
             
                   div.booking
                  {
                     background-color:peachpuff;
                     size:A4;
                     width:70%;
                     border:1px solid powderblue;
                     overflow: hidden;
                     margin-left:50px;
                     margin-top: 200px;
                     margin-right: 200px;
                     margin-bottom: 200px;
                     align-self:center;
                     padding:1em;
                    }
                    
                    div.main{
                              background-color:  graytext;
                            }
                   
                    fieldset{
                        display: table;
                    } 
                    fieldset p   {
                                  display: table-row;
                                 }
                                 
                                 
                    fieldset input,
                    fieldset select,
                    fieldset label
                                  {
                                      display: table-cell;
                                      margin: 3px;
                                  }
                   
                                  fielset label {
                                                 text-align: right;
                                                }
                                               
                                               fieldset input,select.effect
                                               
                                               {
                                                   -moz-box-sizing: content-box;
                                                    box-sizing: content-box;
                                                   -webkit-box-sizing:content-box; 

                                               }
                                               
                                               
                                               select{
                                                   
                                                     }
                   
                   
                   
        </style> 
</head>
<body>
  <div style="width:100%" class="main">  <!--- main div -->
            Header
            <div style="float: left; width:60%" >
                <div class="booking">
                   <form action="" method="post"   enctype="multipart/form-data" onsubmit="return confirm('Do you really want to confirm the booking?');">
                      
                           <fieldset>
                           <p>  
                               <label> Name</label>
               <input type="text" name="name"><br><br>
                           </p>

                     <p>   
                               
                            <label> Select Room</label>
                            <select name="select_room" >
                        
                            <option value="-1">Select</option>
                        
                         
                            </select>
                    </p>
            
           
            <label>Event </label>
            <input type="text" name="event">  <br><br>              
           

              <input type="text" id="date_1">         
                       
            
            
            
            
            
            

             <div style="text-align: left">
                <input type="submit"  name="Book" value="Book" style="width: 60px; height: 35px">  
            </div>
                
                                                      
                
                
                       </fieldset>
                    </form>
            <div style="float: right; width:40%" >
                        
            </div>
        
          
                               </div>
                               </div>
                               </div>
<script>
$.datetimepicker.setLocale('en');
$('#date_1').datetimepicker({
    onSelectDate:function(){
  console.log($('#date_1').val());
}
});      
</script> 
</body>
</html>

Open in new window


---------.JPG
0
v sResearcherAuthor Commented:
hello @Leonidas Dosas
Thank you for this help. I want to ask one thing that the value of datetime we get from datetime picker will be of which type. datetime or timestamp??

 will there be any need to convert it before storing it into the database (I want to store it as "datetime" in mysql )
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Leonidas DosasCommented:
The val that return the function is a string.To convert it to unixtime then replace the script to this:
$.datetimepicker.setLocale('en');
$('#date_1').datetimepicker({    
    onSelectDate:function(){
    var dateTime=$('#date_1').val();
    dateTime=Math.round(new Date(dateTime).getTime()/1000);
    alert(dateTime);
}
}); 

Open in new window

---------.JPG
0
v sResearcherAuthor Commented:
@Leonidas Dosas
okay....
 how to access that datetime value upon submitting form. as name property on input tag is not defined

<input type="text" id="date_1">        

  $datetime= $_POST['date_1'];   ???? is it right or have to define name property
0
Leonidas DosasCommented:
Do you want to send that value to a php file?
0
v sResearcherAuthor Commented:
yes
0
Leonidas DosasCommented:
Then use the $,post Jquery   method . Replace the script with that:

$.datetimepicker.setLocale('en');
$('#date_1').datetimepicker({    
    onSelectDate:function(){
    var dateTime=$('#date_1').val();
    dateTime=Math.round(new Date(dateTime).getTime()/1000);
    $.post('myphpfile.php',{data:dateTime},function(res){
        console.log(res)
    });
}
});   

Open in new window

And the myphpfile.php is that:
<?php
if(isset($_POST['data'])){
    $datetime=$_POST['data'];
    echo json_encode($datetime);
}
?>

Open in new window


In the first page if you open the console when you select a datetime you have these string returns:
---------.JPG
Now in myphpfile.php you can manipulate the $datetime variable as you want (to send it into database etc..)
0
v sResearcherAuthor Commented:
@Leonidas Dosas

these jquery files are not working. these files contain errors. I have attached an image showing output.
Also attaching code
jquery.PNG

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
       
       <title>page division of html</title>
       <link rel="stylesheet" href="jquery.datetimepicker.min.css" />
       <script src="jquery.js"></script>
       <script src="jquery.datetimepicker.full.min.js"></script>
           <style>
               table{ 
                    font-family: arial, sans-serif;
                    border-collapse: collapse;
                    width: 100%;
                    align-self: center;
                    margin-top: 10em;
                    overflow: hidden;
                    
                    }

           td,th{
                  border: 1px solid #dddddd;
                  text-align: left;
                  padding: 8px;
                 }

tr:nth-child(even) {
                     background-color: #ddd;
                   }
             
                   div.booking
                  {
                     background-color:peachpuff;
                     size:A4;
                     width:70%;
                     border:1px solid powderblue;
                     overflow: hidden;
                     margin-left:50px;
                     margin-top: 200px;
                     margin-right: 200px;
                     margin-bottom: 200px;
                     align-self:center;
                     padding:1em;
                    }
                    
                    div.main{
                              background-color:  graytext;
                            }
                   
                    fieldset{
                        display: table;
                    } 
                    fieldset p   {
                                  display: table-row;
                                 }
                                 
                                 
                    fieldset input,
                    fieldset select,
                    fieldset label
                                  {
                                      display: table-cell;
                                      margin: 3px;
                                  }
                   
                                  fielset label {
                                                 text-align: right;
                                                }
                                               
                                               fieldset input,select.effect
                                               
                                               {
                                                   -moz-box-sizing: content-box;
                                                    box-sizing: content-box;
                                                   -webkit-box-sizing:content-box; 

                                               }
                                               
                                                                                                  
                                                 
                                         
                   
                   
        </style> 
    </head>
    <body>
        <div style="width:100%" class="main">  <!--- main div -->
            Header
            <div style="float: left; width:60%" >
                <div class="booking">
                   <form action="" method="post"   enctype="multipart/form-data" onsubmit="return confirm('Do you really want to confirm the booking?');">
                       <fieldset>
                           <p>  
                               <label> Name</label>
               <input type="text" name="name"><br><br>
                           </p>
             <?php  
        include 'config.php';
        $option="";
         $sql= mysqli_query($conn,"SELECT * FROM spacemaster");
         //$row= mysqli_num_rows($sql);
           
      while($row = mysqli_fetch_array($sql))
{
$option .= '<option value = "'.$row['Id'].'"     name = "'.$row['RoomName'].'"        >'.$row['RoomName'].'</option>';
}
         
?>
                               <p>   
                               
                               <label> Select Room</label>
                            <select name="select_room" >
                        
                       <option value="-1">Select</option>
                         <?php 
                          echo $option;
                            ?>
                         
                         </select>
                           </p>
            
            <p>
                <label>Event </label>
            <input type="text" name="event">  <br><br>              
            <p>
            <p>
                
                 <input type="text" id="date_1"> 
                
                
                       </fieldset>
            
            
            
            
            
            <br><br>

             <div style="text-align: left">
                <input type="submit"  name="Book" value="Book" style="width: 60px; height: 35px">  
            </div>
                
                </div>
            </div>  
                
         
                
                
                
            <div style="float: right; width:40%" >
                
            </div>
                           
            <script>
                $.datetimepicker.setLocale('en');
                $('#date_1').datetimepicker({    
                onSelectDate:function(){
                var dateTime=$('#date_1').val();
                dateTime=Math.round(new Date(dateTime).getTime()/1000);
                $.post('booking.php',{data:dateTime},function(res){
                console.log(res);
    });
}
});   
            
            </script>

Open in new window

0
v sResearcherAuthor Commented:
@Md Zafar
i am using netbeans as coding environment. i have not use bootstrap yet in netbeans. is there any need to add plugin for that ??

right now following output is showing (IMAGE ATTACHED)

Errors showing in code (no classes found)


error.PNG
bootstrap.PNG
0
Leonidas DosasCommented:
Use the src that I post to you:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

Open in new window

What errors do you have in console?
To help you understand when you select a datetime in the input via plugin the value "transfer" via POST method into your php file that you can fetch it.Then you can add this value into your database as you know.
0
v sResearcherAuthor Commented:
i have used that also. did not work.
then what i did is create a new js file copied that code from that url in that file then i have used:- <script  src="jquery.js"></script>
0
v sResearcherAuthor Commented:
one more thing error is in the last lines of the file  "global variable define is not declared"


if ( typeof define === "function" && define.amd ) {
      define( "jquery", [], function() {
            return jQuery;
      } );
}
0
Md ZafarSr. Software DeveloperCommented:
Hi ... i am send you full of code all jquery bootstrat and css file plz find the attachment .....feel free to contact for any issu
Sample-Page.zip
0
Md ZafarSr. Software DeveloperCommented:
no issue what environment u are using for development .. but plz check how i am using it or send me your page ..i will design for you
0
v sResearcherAuthor Commented:
@Md Zafar
I am using netbeans. i have developed an application of meeting rooms booking.
i have an issue with just designing. I have been through your page you designed. Its quite good. Now i want to integrate my coding with your page designed.

the format of datetime get from datetime picker you have used should be same as $bookingDate and $currentDate

In My project right now i am considering booking for only time interval within one day.
 i have compared datetime together in mycode.

code has been attached.You can go through my code and design page accordingly.
booking.php
0
v sResearcherAuthor Commented:
@Md Zafar

waiting for your response
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.