All the additional fields i am adding move out of the form box,I tried to adjust the width and padding present in the css but still its the same result
<!DOCTYPE html>
<?php require_once("configure2.php"); ?>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login and Register form</title>
<link rel="stylesheet" href="User/style.css">
<script src="https://kit.fontawesome.com/f63bb9f33d.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<script src="scripts/jquery-3.7.1.slim.min"></script>
<script src="bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<?php
if(isset($_POST['signup']))
{
$username=$_POST['username'];
$gmail=$_POST['gmail'];
$password=$_POST['password'];
if(strlen($username)<3)
{
$error[]='Please enter username using 3 characters atleast.';
}
if(!preg_match("/^^[^0-9][a-z0-9]+([_-]?[a-z0-9])*$/",$username))
{
$error[]='Invalid entry.Enter lowercase letters without any space and no number at the start';
}
if(strlen($password)<6)
{
$error[]='Password is not 6 characters long.';
}
$sql="select * from signup where (User_name='$username' or Gmail='$gmail');";
$res=mysqli_query($con,$sql);
if(mysqli_num_rows($res)>0)
{
$row=mysqli_fetch_assoc($res);
if($username==$row['User_name'])
{
$error[]='Username already exists.';
}
if($gmail==$row['Gmail'])
{
$error[]='Gmail already exists';
}
}
if(!isset($error))
{
$options=array("cost"=>4);
$password = password_hash($password, PASSWORD_BCRYPT,$options);
$result=mysqli_query($con,"insert into signup(User_name,Gmail,Psswd) values('$username','$gmail','$password')");
if($result)
{
$done=3;
}
else
{
$error[]='Failed:Something went wrong';
}
}
}
?>
</div>
<div class="col-12">
<?php
if(isset($error))
{
foreach($error as $error)
{
echo '<div class="alert alert-danger justify-content-center">';
echo '<p class="errmsg">⚠'.$error.'</p>';
echo'</div>';
}
}
?>
</div>
<?php if(isset($done))
{?>
<div class="successmsg"><span style="font-size:100px;">✅</span><br>You have registered successfully.<br><a href="User/signin.php" style="color:#fff;">Login here...</a></div>
<?php } else {?>
<div class="form-box">
<h1 id="title">Register</h1>
<form method="POST">
<div class="input-group">
<div class="input-field">
<i class="fa-solid fa-user"></i>
<input type="text" placeholder="User Name" id="uname" name="username" value="<?php if(isset($error)){ echo $_POST['username'];}?>" required>
</div>
<div class="input-field">
<i class="fa-solid fa-envelope"></i>
<input type="email" placeholder="Gmail" id="umail" name="gmail" value="<?php if(isset($error)){ echo $_POST['gmail'];}?>" required>
</div>
<div class="input-field">
<i class="fa-solid fa-lock"></i>
<input type="password" placeholder="Password" id="upsswd" name="password" value="<?php if(isset($error)){ echo $_POST['password'];}?>">
</div>
<div class="input-field">
<i class="fa-solid fa-lock"></i>
<input type="text" placeholder="House No" id="hsno" name="house" value="<?php if(isset($error)){ echo $_POST['house'];}?>">
</div>
<div class="input-field">
<i class="fa-solid fa-lock"></i>
<input type="text" placeholder="Locality" id="loc" name="localp" value="<?php if(isset($error)){ echo $_POST['localp'];}?>">
</div>
<div class="input-field">
<i class="fa-solid fa-lock"></i>
<input type="text" placeholder="Street" id="stret" name="street" value="<?php if(isset($error)){ echo $_POST['street'];}?>">
</div>
<div class="input-field">
<i class="fa-solid fa-lock"></i>
<input type="text" placeholder="Village" id="vllag" name="village" value="<?php if(isset($error)){ echo $_POST['village'];}?>">
</div>
<div class="btn-field">
<a href="User/signin.php">Already a user?</a>
<button type="submit" id="signupbtn" name="signup">Sign Up</button>
</div>
</div>
</form>
<?php }?>
</div>
</div>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
font-family:'Poppins',sans-serif;
box-sizing:border-box;
}
.container{
width:100%;
height:100vh;
background-image: url('background.jpg');
background-position:center;
background-size:cover;
position:relative;
overflow-y: auto;
}
.form-box{
width:90%;
max-width:450px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#fff;
padding:50px 60px 70px;
text-align: center;
max-height:400px;
}
.form-box h1{
font-size:30px;
margin-bottom:60px;
color: #3c00a0;
position:relative;
}
.form-box h1::after{
content: '';
width:30px;
height:4px;
border-radius:3px;
background:#3c00a0;
position:absolute;
bottom:-12px;
left:50%;
transform: translateX(-50%);
}
.input-field{
background: #eaeaea;
margin:15px 0;
border-radius:3px;
display:flex;
align-items:center;
transition: max-height 0.9s;
overflow: hidden;
}
input{
width: 100%;
background:transparent;
border: 0;
outline: 0;
padding:15px;
margin: 5px 0;
}
.input-field i{
margin-left: 15px;
color:#999;
}
form p{
text-align: left;
font-size: 13px;
}
form p a{
text-decoration: none;
color:#3c00a0;
}
.btn-field{
width:100%;
display:flex;
justify-content:space-between;
}
.btn-field button{
flex-basis:48%;
background: #3c00a0;
color:#fff;
height: 40px;
border-radius: 20px;
border: 0;
outline: 0;
cursor: pointer;
transition: background 1s;
}
.input-group{
display: flex;
flex-direction: column;
}
.btn-field button.disable{
background: #eaeaea;
color: #555;
}
.successmsg{
margin:5px auto;
border-radius:5px;
border:1px solid green;
background: #33CC00;
text-align:left;
color:white;
padding: 10px;
}