Code du formulaire de connexion HTML

3,381 webcode

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 March 2025

Un code par ytr3d3

15 October 2025

Barre latérale Glassmorphism HTML CSS Style Apple

22 June 2025

Modèle de blog Tailwind CSS : mode sombre, réactif

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>HTML Login Form</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"  />
</head>
<body>
  <div class="form-container">
    <p class="title">Login</p>
    <form class="form">
      <div class="input-group">
        <label for="username">Username</label>
        <input type="text" name="username" id="username" placeholder="">
      </div>
      <div class="input-group">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" placeholder="">
        <div class="forgot">
          <a rel="noopener noreferrer" href="#">Forgot Password ?</a>
        </div>
      </div>
      <button class="sign">Sign in</button>
    </form>
    <div class="social-message">
      <div class="line"></div>
      <p class="message">Login with social accounts</p>
      <div class="line"></div>
    </div>
    <div class="social-icons">
      <button class="icon">
        <i class="fab fa-google"></i>
      </button>
      <button class="icon">
        <i class="fab fa-twitter"></i>
      </button>
    </div>
    <p class="signup">Don't have an account?
      <a href="#" class="">Sign up</a>
    </p>
  </div>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');
body{
    font-family: 'Inter', sans-serif;
	overflow: hidden;
	background-color: #171717;
	display: flex;justify-content: center;
	align-items: center;
	height: 100vh;
}
.form-container {
	width: 320px;
	border-radius: 0.75rem;
	background-color: #1e2028;
	padding: 2rem;
	color: rgba(243, 244, 246, 1);
  }
  
  .title {
	text-align: center;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
  }
  
  .form {
	margin-top: 1.5rem;
  }
  
  .input-group {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
  }
  
  .input-group label {
	display: block;
	color: rgba(156, 163, 175, 1);
	margin-bottom: 4px;
  }
  
  .input-group input {
	width: 90%;
	border-radius: 0.375rem;
	border: 1px solid rgba(55, 65, 81, 1);
	outline: 0;
	background-color: #1e2028;
	padding: 0.75rem 1rem;
	color: rgba(243, 244, 246, 1);
  }
  
  .input-group input:focus {
	border-color: rgba(167, 139, 250);
  }
  
  .forgot {
	display: flex;
	justify-content: flex-end;
	font-size: 0.75rem;
	line-height: 1rem;
	color: rgba(156, 163, 175,1);
	margin: 8px 0 14px 0;
  }
  
  .forgot a,.signup a {
	color: rgba(243, 244, 246, 1);
	text-decoration: none;
	font-size: 14px;
  }
  
  .forgot a:hover, .signup a:hover {
	text-decoration: underline rgba(167, 139, 250, 1);
  }
  
  .sign {
	display: block;
	width: 100%;
	background-color: rgba(167, 139, 250, 1);
	padding: 0.75rem;
	text-align: center;
	color: rgba(17, 24, 39, 1);
	border: none;
	border-radius: 0.375rem;
	font-weight: 600;
  }
  
  .social-message {
	display: flex;
	align-items: center;
	padding-top: 1rem;
  }
  
  .line {
	height: 1px;
	flex: 1 1 0%;
	background-color: rgba(55, 65, 81, 1);
  }
  
  .social-message .message {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: rgba(156, 163, 175, 1);
  }
  
  .social-icons {
	display: flex;
	justify-content: center;
  }
  
  .social-icons .icon {
	border-radius: 0.125rem;
	padding: 0.75rem;
	border: none;
	background-color: transparent;
	margin-left: 8px;
	color: white;
	font-size: 20px;
	cursor: pointer;
  }

.signup {
	text-align: center;
	font-size: 0.75rem;
	line-height: 1rem;
	color: rgba(156, 163, 175, 1);
  }