Maquetación de Formulario para Crear Cuenta en HTML y CSS

Maquetaremos la vista que permitirá al usuario crear o editar su cuenta. Esta incluye un título, tres inputs o casillas para ingresar datos y un botón.

Cómo maquetar un formulario de registro

Para maquetar este formulario puedes revisar el código generado para la vista de login. Remueve el logo y el subtítulo de esta estructura y debería verse de esta forma:

<div class="login">
    <div class="form-container">
      <h1 class="title">My account</h1>
      <form action="/" class="form">    
       </form>
    </div>
</div>

El formulario contiene tres inputs: nombre, email y contraseña del usuario. Los encerramos en un div para poder estilizarlos después.

<form action="/" class="form">
        <div>
          <label for="name" class="label">Name</label>
          <input type="text" id="name" placeholder="Teff" class="input input-name">

          <label for="email" class="label">Email</label>
          <input type="text" id="email" placeholder="platzi@example.com" class="input input-email">

          <label for="password" class="label">Password</label>
          <input type="password" id="password" placeholder="*********" class="input input-password">
        </div>
</form>

Finalmente, antes de la etiqueta de cierre del formulario, agregamos el botón para que el usuario pueda enviar la información.

    <input type="submit" value="Create"              class="primary-button login-button">
</form>

Estilos para el formulario de registro

A los estilos que utilizamos previamente en la sección “nueva contraseña”, les agregaremos algunos más para darle formato a esta sección.

Los ajustes son:

• Aumentar el espaciado entre los inputs del formulario

    .input-name,
    .input-email,
    .input-password {
      margin-bottom: 22px;
    }

• Modificar el css de la calse “title” para alinear el título a la izquierda y distanciarlo de los inputs

    .title {
      margin-bottom: 36px;
      text-align: start;
    }

¿Cómo alinear el botón del formulario?

Tal como ocurrió en el reto anterior, esta pantalla en su versión móvil despega el botón del formulario llevándolo hasta abajo. Una de las maneras más sencillas y efectivas de hacer esto es usando Flexbox.

Comenzamos dando a nuestro contenedor y formulario un alto del 100%. Como este último ya es flexible y tiene la dirección de columnas, solo debemos agregarle en la mediquery: justify-content: space-between.

Esta propiedad posiciona el contenido horizontalmente cuando el valor de flex-direction es row. En nuestro caso, el valor es columns por lo que justify-content va a aplicar verticalmente.

Space-beetween distribuye los items uniformemente dejando el primer elemento al inicio y el último al final.

---

👉 Repasa sobre Flex.

---

---

Contribución creada por: Guadalupe Monge Barale