How do I create a HTML/PHP form where the text input fields are horizontally aligned side by side
How do I create a HTML/PHP form where the text input fields are horizontally aligned side by side
I have successfully made a form however I would like the text input fields to be displayed horizontally next to each other, instead of being stacked on top of eachother.
I have supplied my code and a screenshot of how the form currently lookscurrent form.. and also a mockup made in Photoshop of how I want the form to look instead.desired form
The form has 5 text input fields, and 2 select drop down fields.
I don't need help with the color styling or PHP I can sort that, it's just the actual layout I'm stuck with.
Much appreciated if anyone can help.
<?php
// $query = "SELECT 'forename' FROM [Pulse].[dbo].[users]"; // selects the correct table
$query = "SELECT forename FROM [Test].[dbo].[users]"; // selects the correct table
$search = sqlsrv_query($conn, $query); // runs the query and fetches the data
$rows = sqlsrv_has_rows($search); // checks the table has something in it
?>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800" rel="stylesheet">
<style>
*
box-sizing: border-box;
input[type=text], select, textarea
width: 95%;
padding: 20px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
transition: 0.3s;
outline: none;
font-family: Dosis, sans-serif;
font-size: 1.5em;
margin: 7px;
input[type=text]:focus
border: 1.25px solid #ea0088;
select:focus
border: 1.25px solid #ea0088;
label
padding: 28px 12px 12px 12px;
margin-left: 5px;
display: inline-block;
font-family: Dosis, sans-serif;
font-size: 1.5em;
font-weight: 500;
color: #999;
input[type=submit]
background-color: #999;
color: white;
padding: 12px 50px;
margin-top: 15px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
transition: 0.3s;
font-family: Dosis, sans-serif;
font-size: 1.5em;
font-weight: 500;
margin-right: 3%;
input[type=submit]:hover
background-color: #ea0088;
.container
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 2.5% 20% 0 20%;
.col-25
float: left;
width: 25%;
margin-top: 6px;
.col-75
float: left;
width: 75%;
margin-top: 6px;
/* Clear floats after the columns */
.row:after
content: "";
display: table;
clear: both;
.scroll
overflow-y:visible;
body
background-image: url(proco.jpg);
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px)
.col-25, .col-75, input[type=submit]
width: 100%;
margin-top: 0;
</style>
</head>
<body>
<div class="container">
<form action="signin.php" method="post">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="* Please complete">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="company">Company</label>
</div>
<div class="col-75">
<input type="text" id="company" name="company">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="reg">Car Reg</label>
</div>
<div class="col-75">
<input type="text" id="reg" name="reg">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email">Email Address</label>
</div>
<div class="col-75">
<input type="text" id="email" name="email">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="badge">Badge</label>
</div>
<div class="col-75">
<select name="badge">
<?php
for($i=1; $i<=5; $i++)
echo "<option value=" . $i . ">" . $i . "</option>";
?>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="visiting">Visiting</label>
</div>
<div class="col-75">
<select
<option selected="selected" class="scroll">Choose one</option>
<?php
// A sample product array
if($rows === true)
//FOR EACH CUSTOMER
while ($row = sqlsrv_fetch_array($search, SQLSRV_FETCH_ASSOC))
// Iterating through the product array
foreach ($row as $name)
?>
<option value="<?php echo $name; ?>"><?php echo $name; ?></option>
<?php
?>
</select>
</div>
</div>
<div class="row">
<input type="submit" value="Sign In">
</div>
</form>
</div>
</body>
</html>
1 Answer
1
I would create two separete div's with width:50% and then use display:flex on the form
<?php
// $query = "SELECT 'forename' FROM [Pulse].[dbo].[users]"; // selects the correct table
$query = "SELECT forename FROM [Test].[dbo].[users]"; // selects the correct table
$search = sqlsrv_query($conn, $query); // runs the query and fetches the data
$rows = sqlsrv_has_rows($search); // checks the table has something in it
?>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800" rel="stylesheet">
<style>
*
box-sizing: border-box;
input[type=text], select, textarea
width: 95%;
padding: 20px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
transition: 0.3s;
outline: none;
font-family: Dosis, sans-serif;
font-size: 1.5em;
margin: 7px;
input[type=text]:focus
border: 1.25px solid #ea0088;
select:focus
border: 1.25px solid #ea0088;
label
padding: 28px 12px 12px 12px;
margin-left: 5px;
display: inline-block;
font-family: Dosis, sans-serif;
font-size: 1.5em;
font-weight: 500;
color: #999;
input[type=submit]
background-color: #999;
color: white;
padding: 12px 50px;
margin-top: 15px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
transition: 0.3s;
font-family: Dosis, sans-serif;
font-size: 1.5em;
font-weight: 500;
margin-right: 3%;
input[type=submit]:hover
background-color: #ea0088;
.container
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 2.5% 20% 0 20%;
.col-25
float: left;
width: 25%;
margin-top: 6px;
.col-75
float: left;
width: 75%;
margin-top: 6px;
/* Clear floats after the columns */
.row:after
content: "";
display: table;
clear: both;
.scroll
overflow-y:visible;
body
background-image: url(proco.jpg);
.left, .right
width:50%;
form
display:flex;
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px)
.col-25, .col-75, input[type=submit]
width: 100%;
margin-top: 0;
</style>
</head>
<body>
<div class="container">
<form action="signin.php" method="post">
<div class="left">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="company">Company</label>
</div>
<div class="col-75">
<input type="text" id="company" name="company">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="reg">Car Reg</label>
</div>
<div class="col-75">
<input type="text" id="reg" name="reg">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="visiting">Visiting</label>
</div>
<div class="col-75">
<select
<option selected="selected" class="scroll">Choose one</option>
<?php
// A sample product array
if($rows === true)
//FOR EACH CUSTOMER
while ($row = sqlsrv_fetch_array($search, SQLSRV_FETCH_ASSOC))
// Iterating through the product array
foreach ($row as $name)
?>
<option value="<?php echo $name; ?>"><?php echo $name; ?></option>
<?php
?>
</select>
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="* Please complete">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="email">Email Address</label>
</div>
<div class="col-75">
<input type="text" id="email" name="email">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="badge">Badge</label>
</div>
<div class="col-75">
<select name="badge">
<?php
for($i=1; $i<=5; $i++)
echo "<option value=" . $i . ">" . $i . "</option>";
?>
</select>
</div>
</div>
<div class="row">
<input type="submit" value="Sign In">
</div>
</div>
</form>
</div>
</body>
</html>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I would suggest using flexbox to create effectively two columns. You can see some examples here: w3schools.com/css/css3_flexbox.asp Then on a narrow screen it can wrap over to being a single column more easily than something like a table would. This question and your included markup is a bit broad for StackOverflow.
– spacer GIF
Aug 24 at 19:27