Código HTML del formulario de inicio de sesión

3,380 webcode

Abrir en el editor Publica tu código

Código HTML del formulario de inicio de sesión

Recomendado

18 October 2025

Ejemplo HTML de botón flotante de arcoíris

25 July 2025

Plantilla de página de inicio de sesión HTML

6 March 2025

Un código de lebdev

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