Code du formulaire de connexion HTML

2979 webcode

Ouvrir dans l'éditeur Publiez votre code

Recommandé

19 November 2025

Code HTML de connexion Google et menu adaptatif

16 December 2024

Un code par Valcor27

18 December 2025

Code source HTML5 du jeu Monkey Mart

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

Recommandé

Code HTML de connexion Google et menu adaptatif

Un code par Valcor27

Code source HTML5 du jeu Monkey Mart

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS