Comment créer : Formulaire d'Inscription

Apprenez à créer un Formulaire d'Inscription réactif en utilisant CSS.

Cliquez sur le bouton pour ouvrir le Formulaire d'Inscription :

亲自试一试

Comment créer un Formulaire d'Inscription

Première étape - Ajoutez HTML :

Utilisez l'élément <form> pour traiter les entrées. Vous pouvez en savoir plus sur notre tutoriel PHP.

Ensuite, ajoutez un contrôle d'entrée pour chaque champ (et avec des étiquettes correspondantes) :

<form action="action_page.php" style="border:1px solid #ccc">
  <div class="container">
    <h1>Inscription</h1>
    <p>Remplissez ce formulaire pour créer un compte.</p>
    <hr>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Entrer l'email" name="email" required>
    <label for="psw"><b>Mot de passe</b></label>
    <input type="password" placeholder="Entrer le mot de passe" name="psw" required>
    <label for="psw-repeat"><b>Répéter le mot de passe</b></label>
    <input type="password" placeholder="Répéter le mot de passe" name="psw-repeat" required>
    <label>
    <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px">Se souvenir de moi
    </label>
    <p>En créant un compte, vous acceptez nos <a href="#" style="color:dodgerblue">Conditions générales et confidentialité</a>.</p>
    <div class="clearfix">
      <button type="button" class="cancelbtn">Annuler</button>
      <button type="submit" class="signupbtn">Inscrivez-vous</button>
    </div>
  </div>
</form>

Deuxième étape - Ajoutez CSS :

* {box-sizing: border-box}
/* Champ d'entrée de largeur complète */
  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* 为所有按钮设置样式 */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
button:hover {
  opacity:1;
}
/* 设置取消按钮的额外样式 */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}
/* Faire flotter les boutons Annuler et S'inscrire et ajouter une largeur égale */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}
/* Ajouter une marge interne aux éléments de conteneur */
.container {
  padding: 16px;
}
/* Effacer les flottants */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Modifiez le style des boutons d'annulation et d'inscription sur les écrans extra-grands */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}

亲自试一试

Comment créer un Formulaire d'Inscription Modale

Première étape - Ajoutez HTML :

Utilisez l'élément <form> pour traiter les entrées. Vous pouvez en savoir plus sur notre tutoriel PHP.

Ensuite, ajoutez un contrôle d'entrée pour chaque champ (et avec des étiquettes correspondantes) :

<!-- Bouton pour ouvrir le Modale -->
<button onclick="document.getElementById('id01').style.display='block'">Inscrivez-vous</button>
<!-- Le Modale (contient le Formulaire d'Inscription) -->
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Fermer le Modale">fois;</span>
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Inscription</h1>
      <p>Remplissez ce formulaire pour créer un compte.</p>
      <hr>
      <label for="email"><b>Email</b></label>
      <input type="text" placeholder="Entrer l'email" name="email" required>
      <label for="psw"><b>Mot de passe</b></label>
      <input type="password" placeholder="Entrer le mot de passe" name="psw" required>
      <label for="psw-repeat"><b>Répéter le mot de passe</b></label>
      <input type="password" placeholder="Répéter le mot de passe" name="psw-repeat" required>
      <label>
        <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Se souvenir de moi
      </label>
      <p>En créant un compte, vous acceptez nos <a href="#" style="color:dodgerblue">Conditions générales et confidentialité</a>.</p>
      <div class="clearfix">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Annuler</button>
        <button type="submit" class="signup">Inscrivez-vous</button>
      </div>
    </div>
  </form>
</div>

Deuxième étape - Ajoutez CSS :

* {box-sizing: border-box}
/* Full-width input fields */
  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
/* 当输入框获得焦点时添加背景颜色 */
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
/* 为所有按钮设置样式 */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
button:hover {
  opacity:1;
}
/* 设置取消按钮的额外样式 */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}
/* 使取消和注册按钮浮动并设置相等的宽度 */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}
/* 向容器元素添加内边距 */
.container {
  padding: 16px;
}
/* 模态（背景） */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #474e5d;
  padding-top: 50px;
}
/* Contenu/boîte de la modal */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% du haut, 15% du bas et centré */
  border: 1px solid #888;
  width: 80%; /* Peut être plus ou moins, en fonction de la taille de l'écran */
}
/* Définissez le style de la ligne horizontale */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* Bouton de fermeture (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}
.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}
/* Effacer les flottants */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Modifiez le style des boutons d'annulation et d'inscription sur les écrans extra-grands */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}

Astuce :Vous pouvez également utiliser le code JavaScript suivant pour fermer la boîte de dialogue en cliquant sur la zone autour du contenu de la boîte de dialogue (et non seulement en utilisant le bouton "×" ou "annuler" pour fermer) :

<script>
// 获取模态
var modal = document.getElementById('id01');
// 当用户单击模式之外的任何位置时，将其关闭
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

亲自试一试

Essayer par vous-même

Pages liéesFormulaire HTML

Pages liéesFormulaire CSS