Probablemente hayas visto muchos formularios de inicio de sesión (Login Form) mientras navegabas por diferentes sitios. Si eres un desarrollador web principiante, ¿te has preguntado cómo crear uno usando solo HTML y CSS? Sí, ¡es posible con solo estos dos lenguajes de codificación!

En esta publicación del blog, te mostraré cómo crear un formulario de inicio de sesión (Login Form) simple pero efectivo, usando solo HTML y CSS. Comenzaremos configurando la estructura HTML y luego aplicaremos CSS para que se vea bien. También agregaremos botones de inicio de sesión de Google y Apple para darle un toque moderno.

Usaremos elementos HTML comunes como <form>, <div>, <a>, <button> y propiedades CSS simples para darle estilo a este formulario. Este proyecto es sencillo, por lo que es fácil de seguir y comprender. ¡Comencemos!

Tabla de Contenidos

Pasos para crear un formulario de inicio de sesión (Login Form) sencillo en HTML y CSS
- Conclusión y palabras finales

Para crear un formulario de inicio de sesión simple pero efectivo utilizando solo HTML y CSS, siga estas sencillas instrucciones paso a paso:

Primero, crea una carpeta con el nombre que desees, por ejemplo, login-form. Luego, crea los archivos necesarios dentro de ella.
Crea un archivo llamado index.html para que sirva como archivo principal.
Crea un archivo llamado style.css para el código CSS.
Finalmente, descarga la carpeta Images y colócala en el directorio de tu proyecto. Esta carpeta contiene los logotipos de Google y Apple utilizados en este proyecto de formulario.

Para comenzar, agregue los siguientes códigos HTML a su archivo index.html: Este código incluye marcado HTML esencial con diferentes etiquetas semánticas como <form>, <div>, <a>, <label>, <button> para crear el diseño del formulario de inicio de sesión.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Login Form in HTML and CSS | YodeimiGomez</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="login_form">
    <!-- Login form container -->
    <form action="#">
      <h3>Log in with</h3>

      <div class="login_option">
        <!-- Google button -->
        <div class="option">
          <a href="#">
            <img src="logos/google.png" alt="Google" />
            <span>Google</span>
          </a>
        </div>

        <!-- Apple button -->
        <div class="option">
          <a href="#">
            <img src="logos/apple.png" alt="Apple" />
            <span>Apple</span>
          </a>
        </div>
      </div>

      <!-- Login option separator -->
      <p class="separator">
        <span>or</span>
      </p>

      <!-- Email input box -->
      <div class="input_box">
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Enter email address" required />
      </div>

      <!-- Paswwrod input box -->
      <div class="input_box">
        <div class="password_title">
          <label for="password">Password</label>
          <a href="#">Forgot Password?</a>
        </div>

        <input type="password" id="password" placeholder="Enter your password" required />
      </div>

       <!-- Login button -->
      <button type="submit">Log In</button>

      <p class="sign_up">Don't have an account? <a href="#">Sign up</a></p>
    </form>
  </div>
</body>
</html>

HTML

A continuación, agregue los siguientes códigos CSS a su archivo style.css para darle estilo a su formulario de inicio de sesión. Experimente con diferentes propiedades CSS, como colores, fuentes y fondos, para que su formulario sea más atractivo.

/* Google Fonts Link */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Resetting default styling and setting font-family */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

body {
    width: 100%;
    min-height: 100vh;
    padding: 0 10px;
    display: flex;
    background: #626cd6;
    justify-content: center;
    align-items: center;
}

/* Login form styling */
.login_form {
    width: 100%;
    max-width: 435px;
    background: #fff;
    border-radius: 6px;
    padding: 41px 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.login_form h3 {
    font-size: 20px;
    text-align: center;
}

/* Google & Apple button styling */

.login_form .login_option {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.login_form .login_option .option {
    width: calc(100% / 2 - 12px);
}

.login_form .login_option .option a {
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: #F8F8FB;
    border: 1px solid #DADAF2;
    border-radius: 5px;
    margin: 34px 0 24px 0;
    text-decoration: none;
    color: #171645;
    font-weight: 500;
    transition: 0.2s ease;
}

.login_form .login_option .option a:hover {
    background: #ededf5;
    border-color: #626cd6;
}

.login_form .login_option .option a img {
    max-width: 25px;
}

.login_form p {
    text-align: center;
    font-weight: 500;
}

.login_form .separator {
    position: relative;
    margin-bottom: 24px;
}

/* Login option separator styling */
.login_form .separator span {
    background: #fff;
    z-index: 1;
    padding: 0 10px;
    position: relative;
}

.login_form .separator::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    height: 1px;
    background: #C2C2C2;
    display: block;
}

form .input_box label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}

/* Input field styling */
form .input_box input {
    width: 100%;
    height: 57px;
    border: 1px solid #DADAF2;
    border-radius: 5px;
    outline: none;
    background: #F8F8FB;
    font-size: 17px;
    padding: 0px 20px;
    margin-bottom: 25px;
    transition: 0.2s ease;
}

form .input_box input:focus {
    border-color: #626cd6;
}

form .input_box .password_title {
    display: flex;
    justify-content: space-between;
    text-align: center;
}

form .input_box {
    position: relative;
}

a {
    text-decoration: none;
    color: #626cd6;
    font-weight: 500;
}

a:hover {
    text-decoration: underline;
}

/* Login button styling */
form button {
    width: 100%;
    height: 56px;
    border-radius: 5px;
    border: none;
    outline: none;
    background: #626CD6;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 28px;
    transition: 0.3s ease;
}

form button:hover {
    background: #4954d0;
}

CSS

¡Eso es todo! Si has añadido el código correctamente, estás listo para ver tu formulario de inicio de sesión. Abre el archivo index.html en tu navegador preferido para ver el formulario de inicio de sesión en acción.

Mira esto Cómo Hacer Animaciones de Texto Múltiple con HTML, CSS y JavaScript

Conclusión y palabras finales

Crear un formulario de inicio de sesión es una excelente manera para que los principiantes comprendan los conceptos básicos de HTML CSS y adquieran experiencia práctica en el diseño y el estilo de formularios. Si sigues los pasos y el código que se proporcionan en esta publicación del blog, crearás con éxito tu propio formulario de inicio de sesión.

Para mejorar aún más tus habilidades de desarrollo web, especialmente con formularios, considera recrear otros formularios de inicio de sesión y registro atractivos que se muestran en este sitio web. Muchos de estos formularios usan JavaScript para agregar funciones como alternar la visibilidad de la contraseña, verificar la solidez de la contraseña y validar el formulario.

Si tienes algún problema al crear tu formulario de inicio de sesión, puedes descargar los archivos de código fuente de este proyecto de forma gratuita haciendo clic en el botón “Descargar“. También puedes ver una demostración en vivo haciendo clic en el botón “Ver en vivo“.

Descargar

Demo