创建蓝框区域来组织表单

Question

我的目标是创建这样的东西：enter image description here 因此，我可以在其中放置验证表格或创建帐户的区域。我已经在 php 中创建了一个表单，它像这样链接到我的数据库

 <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;
  }
}

boostrap 或 css 甚至 js 中有什么东西可以让我创建这个蓝色区域吗？

Answer 1

也许将 <form> 的背景颜色变成您想要的蓝色并添加一点填充可能就足够了，这样表单字段就不会正好位于框的边缘.

HTML p-3 将是您的填充，但仅在使用 Bootstrap.

的网站上

<form class="blueBox p-3" action="connection.php" method="post">

CSS

.blueBox{
  background: blue;
}

Answer 2

您可以使用 CSS 执行此操作，例如：

.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>

创建蓝框区域来组织表单

Create blue box area to organize a form

javascript

css

php

forms

bootstrap-4