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

2456 webcode

Abrir en el editor Publica tu código

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

Recomendado

21 June 2024

Interruptor de palanca de neón

23 August 2025

Formulario de inicio de sesión y registro HTML (turco)

7 November 2024

Texto con degradado de neón

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

Recomendado

Interruptor de palanca de neón

Formulario de inicio de sesión y registro HTML (turco)

Texto con degradado de neón

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS