my goal is to create something like this :enter image description here So an area where I can put a form for authentification or create an account. I already created a form in php which is linked to my database like this
<form action="connection.php" method="post"> <div class="form-group"> <label >Nom</label> <input name = nom> </div> <div class="form-group"> <label >Prénom</label> <input name = prenom> </div> <div class="form-group"> <label >Email</label> <input name = mail> </div> <div class="form-group"> <label >Numéro de telephone</label> <input name = tel> </div> <div class="form-group"> <label >mot de passe</label> <input type=password id="inputPassword" placeholder="Password""> </div> <button type="submit" class="btn btn-primary" name="add">Creer son compte</button>
function inscription($db,$nom,$prenom,$mail,$tel,$mdp){ try{ $request_client = "INSERT INTO client (nom, prenom, mail, tel, mdp) VALUES (:nom, :prename, :email, :phone,:pass);"; $statement_client = $db->prepare($request_client); $statement_client->bindParam(':nom', $nom); $statement_client->bindParam(':prename', $prenom); $statement_client->bindParam(':email', $mail); $statement_client->bindParam(':phone', $tel); $statement_client->bindParam(':pass', $mdp); $statement_client->execute(); } catch (PDOException $exception) { error_log('Request error: '.$exception->getMessage()); return false; } }
Is there something in boostrap or css or even js which can make me creat this blue area ?
Advertisement
Answer
You can do this with CSS, something like:
.blue-box { max-width: 450px; margin: 1rem auto; padding: 1rem; background: #3b52a5; border-radius: 8px; color: #fff; } .blue-box .form-group { display: flex; justify-content: space-between; flex-direction: column; margin: 0.5rem 0; } .blue-box .form-group input { padding: 0.75rem 1rem; margin-top: 0.25rem; border: 1px solid #060537; border-radius: 8px; background: none; outline: none; color: #fff; } .blue-box button { padding: 0.75rem 1rem; margin: 0.5rem auto; background: #060537; border-radius: 8px; width: 100%; outline: none; border: none; color: #fff; } body { background: #7db9ff; font-family: sans-serif; }
<form action="connection.php" method="post" class="blue-box"> <div class="form-group"> <label >Nom</label> <input name = nom> </div> <div class="form-group"> <label >Prénom</label> <input name = prenom> </div> <div class="form-group"> <label >Email</label> <input name = mail> </div> <div class="form-group"> <label >Numéro de telephone</label> <input name = tel> </div> <div class="form-group"> <label >mot de passe</label> <input type=password id="inputPassword" placeholder="Password""> </div> <button type="submit" class="btn btn-primary" name="add">Creer son compte</button> </form>