mi objetivo es crear algo como esto: ingrese la descripción de la imagen aquí Así que un área donde puedo poner un formulario de autenticación o crear una cuenta. Ya creé un formulario en php que está vinculado a mi base de datos como este
<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; } }¿Hay algo en boostrap o css o incluso js que pueda hacerme crear esta área azul?
Tal vez sea suficiente hacer que el color de fondo de <form> sea el azul que desee y también agregarle un pequeño relleno para que los campos del formulario no estén justo en el borde del cuadro.
HTML p-3 será su relleno, pero solo en sitios que usan Bootstrap.
<form class="blueBox p-3" action="connection.php" method="post">CSS
.blueBox{ background: blue; }Puedes hacer esto con CSS, algo como:
.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>