Comment créer : Formulaire de connexion

Comment créer un formulaire de connexion

Étape 1 - Ajouter HTML :

Ajoutez une image dans le conteneur et ajoutez des contrôles de saisie pour chaque champ (et avec des étiquettes correspondantes). Utilisez l'élément <form> pour les envelopper, afin de traiter les entrées.

Vous pouvez dans notre Tutoriel PHP Pour en savoir plus sur la manière de traiter les informations d'entrée.

<form action="action_page.php" method="post">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>
  <div class="container">
    <label for="uname"><b>Nom d'utilisateur</b></label>
    <input type="text" placeholder="Entrez le nom d'utilisateur" name="uname" required>
    <label for="psw"><b>Mot de passe</b></label>
    <input type="password" placeholder="Entrez le mot de passe" name="psw" required>
    <button type="submit">Se connecter</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Se souvenir de moi
    </label>
  </div>
  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Annuler</button>
    <span class="psw">Oublié <a href="#">mot de passe?</a></span>
  </div>
</form>

Deuxième étape - Ajoutez CSS :

/* Formulaire avec bordure */
form {
  border: 3px solid #f1f1f1;
}
/* Boîtes de saisie de pleine largeur */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* Pour tous les boutons, définir les styles */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
/* Ajouter un effet de survol au bouton */
button:hover {
  opacity: 0.8;
}
/* Style supplémentaire pour le bouton de fermeture (rouge) */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}
/* Centrer l'image d'avatar dans ce conteneur */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}
/* Image d'avatar */
img.avatar {
  width: 40%;
  border-radius: 50%;
}
/* Ajouter de la marge intérieure au conteneur */
.container {
  padding: 16px;
}
/* Texte "Mot de passe oublié" */
span.psw {
  float: right;
  padding-top: 16px;
}
/* Modifier le style des span et des boutons de fermeture sur les écrans extra-grands */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

Essayer par vous-même

Comment créer un formulaire de connexion modal

Étape 1 - Ajouter HTML :

<!-- Ouvrir le formulaire de connexion modal -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<!-- 模态 -->
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Fermer le modal">×</span>
  <!-- 模态内容 -->
  <form class="modal-content animate" action="/action_page.php">
    <div class="imgcontainer">
      <img src="img_avatar2.png" alt="Avatar" class="avatar">
    </div>
    <div class="container">
      <label for="uname"><b>Nom d'utilisateur</b></label>
      <input type="text" placeholder="Entrez le nom d'utilisateur" name="uname" required>
      <label for="psw"><b>Mot de passe</b></label>
      <input type="password" placeholder="Entrez le mot de passe" name="psw" required>
      <button type="submit">Se connecter</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Se souvenir de moi
      </label>
    </div>
    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Annuler</button>
      <span class="psw">Oublié <a href="#">mot de passe?</a></span>
    </div>
  </form>
</div>

Deuxième étape - Ajoutez CSS :

/* Modale (arrière-plan) */
.modal {
  display: none; /* Par défaut, il est caché */
  position: fixed; /* Reste en place */
  z-index: 1; /* Placé en haut */
  left: 0;
  top: 0;
  width: 100%; /* Largeur complète */
  height: 100%; /* Hauteur complète */
  overflow: auto; /* Si nécessaire, activez le défilement */
  background-color: rgb(0,0,0); /* Couleur de repli */
  background-color: rgba(0,0,0,0.4); /* Couleur noire avec transparence */
  padding-top: 60px;
}
/* Contenu ou boîte modale */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* À 15% du haut et centré */
  border: 1px solid #888;
  width: 80%; /* Peut être plus ou moins, cela dépend de la taille de l'écran */
}
/* Bouton de fermeture */
.close {
  /* Positionner le tout en haut à droite en dehors du modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}
/* Bouton de fermeture au survol */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}
/* Ajouter l'animation de zoom */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}

Avis :Vous pouvez également utiliser du code JavaScript pour fermer le modal en cliquant sur la zone en dehors du contenu du modal (et non seulement en utilisant le bouton "x" ou "annuler") :

<script>
// Obtenir le modal
var modal = document.getElementById('id01');
// Lorsque l'utilisateur clique sur n'importe quel emplacement en dehors du modal, fermez-le 
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Essayer par vous-même

Pages associées

Tutoriel :Formulaire HTML

Tutoriel :Formulaire CSS