Formularios

¿Qué es Zod?

Zod es una biblioteca que proporciona declaración y validación de esquemas. Puede inferir tipos de TypeScript a partir de los esquemas, por lo que no tiene que declarar todo dos veces. También puede validar con los esquemas si tiene formularios en su página, por ejemplo.

Las funciones de Zod son muy parecidas a los tipos familiares de TypeScript, por lo que comenzar es bastante rápido y sencillo.

Empezando a trabajar con Zod (zod$())

Antes de comenzar a trabajar con esta forma de validar nuestros formularios en Qwik combinándolo con routeAction$() os recomiendo que tengáis en cuenta el siguiente bloque.

Creamos un nuevo proyecto con el nombre 13-03-forms-with-qwik-zod basándonos en el proyecto anterior.

Vamos al apartado donde se ha definido el routeAction$ definido como useNewsletterAddEmail() y añadimos el apartado de lo que corresponde a la validación del campo email con zod$ especificando lo siguiente:

• Tipo de dato: string.
• Tipo de contenido: Email válido.

Con estos datos, realizamos el siguiente cambio:

...
import {
  ...
  routeAction$,
  z,
  zod$,
} from '@builder.io/qwik-city';

export const useNewsletterAddEmail = routeAction$(
  async (data) => {
    ...

    // SI ES VÁLIDO devuelve esto
    return {
      success: true,
      data,
    };
  }, 
  // SI NO ES VÁLIDO
  // Zod schema es usado para validar datos de un formulario
  // En este caso vamos a validar que sea de tipo string, de tipo email
  zod$({
    email: z.string().email(),
  }),
);

Aplicamos la verificación si da error o no, comprobando que la propiedad failed es verdadera, cuando se de un error de validación con el correo, que no es válido, para mostrar el mensaje de alerta:

export default component$(() => {
  ...
  return (
    <div class="formbold-main-wrapper">
      <div class="formbold-form-wrapper">
        <Form action={action}>
          <div class="formbold-email-subscription-form">
            ...
          {action.value?.failed && (
            <div class="invalid-message">
              El e-mail introducido no es correcto. Debe de seguir el siguiente
              formato: contacto@qwik-book.es
            </div>
          )}
        ...
        </Form>
        ...
    </div>
  );
});

Guardamos los cambios y probamos. Recordad que antes siempre nos registraba en la consola el valor introducido en el campo e-mail independientemente si era válido o no.

Es decir, lo que corresponde a este mensaje:

Se van a dar dos nuevos escenarios:

• Correo electrónico válido (contacto@qwik-book.es). NO se muestra el mensaje de alerta y en la consola se muestra el correo como lo hacía anteriormente:

Lo registrado en la consola:

• Correo electrónico NO válido (contacto@qwik-book). SI se muestra el mensaje de alerta:

Y en consola se muestra este mensaje, donde se muestra el error de validación que nos proporciona zod$() dando toda la información del motivo porque no se valida:

Usando esa información, utilizamos lo que viene en el campo message para incrustar el mensaje de error y mostrarlo dentro de la alerta.

Cambiamos lo siguiente:

{action.value?.failed && (
  <div class="invalid-message">
    El e-mail introducido no es correcto. Debe de seguir el siguiente
    formato: contacto@qwik-book.es
  </div>
)}

Por lo siguiente:

{action.value?.failed && action.value.fieldErrors.email?.length && (
  <div class="invalid-message">
    {
      action.value.fieldErrors.email[0]
    }
  </div>
)}

Ahora lo que nos muestra, dejando el código JSX más limpio es lo siguiente cuando el EMAIL es INCORRECTO:

Y viendo esto, seguramente os estéis haciendo esta pregunta, ya que ahora queda un mensaje muy general y queremos mostrar el mensaje descriptivo de antes.

¿Podría personalizar el mensaje haciéndolo más descriptivo sin añadirlo en el código JSX?

La respuesta es SI. Mediante la redefinición del mensaje de error (Más información) podemos especificar el mensaje de error que nosotros queremos.

Aplicando lo siguiente en nuestro código, vamos a useNewsletterAddEmail y en el apartado de la validación del campo email pasamos del siguiente código:

zod$({
    email: z.string().email(),
}),

Y añadimos como primer argumento en la función email() el objeto con la propiedad message y el mensaje personalizado, pasando a lo siguiente:

zod$({
    email: z.string().email({
    message: `
      El e-mail introducido no es correcto. Debe de seguir el siguiente formato:
      contacto@qwik-book.es
    `
  }),
}),

Y ahora probando de nuevo introduciendo el correo electrónico incorrecto (p.j: conta@qwik):

Y en la consola ya aparecería con el mensaje (en message) personalizado añadido a nuestro gusto:

Ajustar los estilos de validación con el nuevo modo de validar

Seguramente os habéis dado cuenta que cuando introducimos el correo electrónico correcto siempre nos aparece el campo en color rojo indicando que es incorrecto (aunque el mensaje diga que está OK).

Esto es porque no estamos verificando el valor introducido mediante la validación.

La clase invalid-field está añadida SIEMPRE, por lo que siempre se muestra y eso no sería lo correcto, obviamente.

Teniendo en cuenta lo aprendido con el routeAction$ junto con zod$() vamos a añadir la condición para que añada esa clase invalid-field solo cuando se de el caso que el correo no es correcto.

Cambiamos lo que tenemos en el input:

<input
  type="email"
  name="email"
  placeholder="Introduzca su correo electrónico"
  class="formbold-form-input invalid-field"
  required
/>

A lo siguiente, donde ya se verifica el estado del campo, para ver si hay errores:

<input
  type="email"
  name="email"
  placeholder="Introduzca su correo electrónico"
  class={`formbold-form-input ${
    action.value?.fieldErrors?.email?.length ? 'invalid-field' : ''
  }`}
  required
/>

Al guardar y escribir un correo válido, antes de hacer click en el botón, podemos observar que los bordes rojos ya no aparecen, tanto si tenemos el foco sobre el campo como si no:

Pulsamos el botón de Suscribirme y como es un correo VÁLIDO, NO muestra el borde rojo:

Si modificamos y hacemos que el correo no sea el correcto, al ejecutar Suscribirme, podemos observar que ya SE MUESTRA el borde rojo:

Llegados a este punto, podemos decir que ya sabemos trabajar perfectamente con las bases de los formularios en Qwik haciendo uso de los Actions junto con las validaciones con zod$().

Añadir estructura del formulario

Basándonos en este boceto, vamos a añadir el código base inicial para empezar el proyecto.

Os dejo tanto el contenido del CSS como la estructura principal del componente con el contenido de la ruta con el formulario que se ha propuesto:

• css (src/routes/index.css): Código.
• tsx (src/routes/index.tsx): Código.

Una vez que añadamos en las rutas especificadas, iniciamos el proyecto y podemos observar con la siguiente apariencia que ya está todo correcto para iniciar el proyecto.

Os recomiendo que reviséis el código añadido para ver como está constituido el formulario.

Así se puede ver de que base partimos para ir completando los pasos realizados anteriormente adaptados a este proyecto.

Probar rellenando los datos

En este código que os he proporcionado ya tenemos encapsulado en el componente Form junto con la definición del routeAction$, donde recibimos la información para mostrarla en el registro de la consola del Servidor.

Rellenamos los campos del formulario (1, 2 y 3) con la siguiente información (podéis poner lo que queráis) y pulsamos en Guardar (4):

Una vez realizados estos pasos, debemos de comprobar que se muestran los datos introducidos en el registro de la consola del Servidor que corresponde al siguiente código:

...
export const useAddUrlToStoreInLocal = routeAction$(async (data) => {

  // Para ver en consola como coge los datos
  console.log('Title', data.title);
  console.log('Description', data.description);
  console.log('URL', data.url);
...
});

Esto es lo que se muestra:

Validando datos introducidos con zod$() {#validate-data-form-using-zod}

No hemos tenido problemas de validaciones ni nada por el estilo, ya que todavía no hemos especificado como queremos tener los datos.

Tal y como hemos realizado anteriormente, usaremos zod$() y vamos a validar los datos implementando estas condiciones:

Dentro del componente principal, añadimos los elementos que necesitamos para validar como son zod$() y z que se usarán para validar en conjunto y los elementos de manera individual respectivamente:

...
import { ..., z, zod$, routeAction$ } from "@builder.io/qwik-city";
...
export const useAddUrlToShort = routeAction$(
  async (data) => {
    console.log("Title", data.title);
    console.log("Description", data.description);
    console.log("URL", data.url);
    // Devuelve esto si pasa la verificación de zod$()
    return {
      success: true,
      data,
    };
  },
  // Para verificar lo introducido
  zod$({
    title: z.string().min(6, "Se deben de añadir mínimo 6 caracteres"),
    description: z.string().min(15, "Se deben de añadir mínimo 15 caracteres"),
    url: z.string().url("Debe de añadirse una URL correcta"),
  })
);

...

Guardamos los cambios e introducimos los datos de manera incorrecta:

• title: menos 6 de longitud.
• description: menos de 15 de longitud.
• url: Contenido que NO sea una URL.

Con estos datos, añadimos un ejemplo como el siguiente:

Pulsamos Guardar y nos debería de saltar el mensaje (en la consola del Servidor) de zod$() con los errores correspondientes a los 3 campos:

Teniendo esto afianzado, podríamos pensar en añadir la funcionalidad para que se reflejen esos errores tanto en los campos modificándose el color de los bordes y a su vez que se muestre el mensaje (message) de validación tal y como hemos realizado en el proyecto anterior.

Lo primero que vamos a hacer es añadir un nuevo elemento por input para mostrar el mensaje personalizado de validación de cada campo:

<input type="text" ... />
<div class="invalid-message">
    (MENSAJE DE ERROR)
</div>

Aplicando los cambios, quedaría así:

<Form class="form" action={action}>
  ...
    <label>
      <input class="input" type="text" name="title" />
      <span>Título</span>
    </label>
    <div class="invalid-message">
        (MENSAJE DE ERROR title)
    </div>
    <label>
      <input class="input" type="text" name="description" />
      <span>Descripción</span>
    </label>
    <div class="invalid-message">
        (MENSAJE DE ERROR description)
    </div>
    <label>
      <input class="input" type="text" name="url" />
      <span>Enlace</span>
    </label>
    <div class="invalid-message">
        (MENSAJE DE ERROR url)
    </div>
  <button class="submit">Guardar</button>
</Form>

Si guardamos los cambios, como estaréis imaginando, ocurre lo siguiente, donde es obvio que no deberían de mostrarse los mensajes de error al inicio:

Para mostrar los errores, cuando se requiere debemos de hacer uso del routeAction$() que tenemos definido para coger los errores tal y como hemos hecho en el apartado anterior.

Añadimos lo siguiente dentro de component$() sin hacer cambios en otros apartados:

export default component$(() => {
  ...
  const action = useAddUrlToStoreInLocal();

  // Obtenemos los errores en general
  const fieldErrors = action.value?.fieldErrors!;
  // De manera individual
  const titleError = fieldErrors?.title;
  const descriptionError = fieldErrors?.description;
  const urlError = fieldErrors?.url;
  return (
    ...
  );
});

Y ahora teniendo esto usamos titleError, descriptionError y urlError para mostrar los mensajes de error siempre y cuando la validación falle:

 <Form class="form" action={action}>
...
    <label>
      <input class="input" type="text" name="title" />
      <span>Título</span>
    </label>
    {titleError && <div class="invalid-message">{titleError[0]}</div>}
    <label>
      <input
        class="input"
        type="text"
        name="description"
      />
      <span>Descripción</span>
    </label>
    {descriptionError && <div class="invalid-message">{descriptionError[0]}</div>}
    <label>
      <input class="input" type="text" name="url" />
      <span>Enlace</span>
    </label>
    {urlError && <div class="invalid-message">{urlError[0]}</div>}
    <button class="submit">Guardar</button>
</Form>

Al guardar los cambios podemos observar que los mensajes de error NO aparecen.

Solo aparecerán si no cumplen las condiciones especificadas anteriormente y ya aparecerán con los mensajes personalizados que hemos especificado en el routeAction$() en el apartado de los campos con zod$().

Probamos con diferentes situaciones:

1. Título NO válido.

2. Título y Descripción NO válidos.

3. Título y Enlace (url) NO válidos.

4. Todos válidos.

Tendríamos alguna combinación más, pero como se puede observar ya funciona correctamente.

Lo que si faltaría ir afinando algunos aspectos:

• Cambiar a rojo (en caso de error) el color del texto del label (que está en verde en todo momento) junto con los bordes del campo.
• Mostrar un mensaje para informar que todo está correcto, como en la última imagen.

Mostrar mensaje informando que está OK

Fuera del elemento <Form>...</Form> añadiremos lo siguiente, verificando que el estado de la operación es un 200 y que la propiedad success dentro de la propiedad value dentro de action sea true

Lo añadimos de la siguiente forma:

{ action.status === 200 && action.value?.success && <>Preparado para guardar</> }

Quedando de la siguiente forma:

Y si lo probamos, debería de mostrarse Preparado para guardar si todos los datos son correctos:

Cambiar el color de label y borde del campo si hay errores

Teniendo en cuenta que ya podemos detectar los errores en cada uno de los campos, lo que tenemos que hacer es poner una condición para añadirle una clase en el que caso de que NO sea válido un campo.

• Verificando en los elementos label:

Hacemos el ejemplo con el apartado title verificando si hay un error en ese campo y en el caso afirmativo, le asignamos la clase invalid-class:

<label>
  ...
  <span class={titleError ? 'invalid-class' : ''}>Título</span>
</label>

Lo probamos, forzando a que nos muestre un error en el campo title:

Y como se puede apreciar, al tener el error, el color del label se cambia al color rojo aunque no en los demás, ya que habrá que aplicarlo de manera individual como se ha hecho con title.

Esto lo podéis hacer sin problemas y debería de quedar en algo como lo siguiente al ejecutar y mostrar los errores:

Si el valor es correcto el color del label seguirá estando verde dándolo como válido.

Resaltar con borde rojo bordes los campos con errores

Una vez que ya hemos trabajado con el estado del label de cada campo, debemos de hacerlo con los bordes de los campos.

Añadimos lo siguiente en el archivo src/routes/index.css para resaltar con borde rojo los errores:

input.invalid-class {
    border: 1px solid red !important;
}

Y hacemos el mismo procedimiento, pero añadiéndolo en el input (por ejemplo en title):

<label>
  <input
    class={`input ${titleError ? 'invalid-class' : ''}`}
    type="text"
    name="title"
  />
  <span class={titleError ? 'invalid-class' : ''}>Título</span>
</label>

Añadimos lo que corresponde a los otros campos y probamos haciendo que salten todos los errores:

Ahora sin refrescar si validamos title y description por ejemplo:

Y llegados a este punto, ya tenemos el formulario listo para enviar únicamente los datos que van a ser válidos para almacenar los datos introducidos.

Estos datos los podemos usar para almacenarlos, para hacer operaciones o lo que necesitemos.

En este caso particular, lo interesante es almacenar, para tener nuestro propio almacén de enlaces favoritos.

Almacenando los datos en localStorage {#save-form-data-in-localstorage}

Para almacenar en el almacenamiento local de nuestro navegador, usaremos localStorage. Iremos añadiendo los datos del formulario con el que estamos trabajando mediante el hook useLocalStorage que os proporciono en el siguiente enlace:

Hook useLocalStorage

Copiamos su contenido y lo añadimos en el fichero que vamos a crear con el nombreuseLocalStorage.tsx dentro de src/hooks.

Una vez que lo tenemos añadido, vamos a src/routes/index.tsx e inicializamos el hook de la siguiente manera, desestructurando los elementos que usaremos para realizar las operaciones de gestión de la información.

Inicializando lo siguiente dentro de component$() teniendo en cuenta que añadiremos una clave como argumento. Añadiremos la inicialización con la clave que necesitemos:

const { set, clear, data, loading } = useLocalStorage(`clave-donde-se-almacena-info`);

Partiendo de la base mostrada, usamos la clave my-bookmarks quedando de la siguiente forma lo que respecta a la inicialización del hook:

...
import { useLocalStorage } from "~/utils/hooks/useLocalStorage";
...

export const useAddUrlToStoreInLocal = routeAction$(
  ...
);

export default component$(() => {
  const { set, clear, data, loading } = useLocalStorage(`my-bookmarks`);
    ...
});
...

Los elementos que obtenemos desde el hook al desestructurar harán lo siguiente:

• set: función para añadir la información dentro la clave que hemos inicializado con la actualización.
• clear: para eliminar (resetear) toda la información asignada a la clave especificada.
• loading: Para gestionar el estado de carga para situaciones en los que estemos obteniendo la información dentro de la clave seleccionada con el elemento data.
• data: Información almacenada que mostraremos cuando loading sea falso, cuando ya haya realizado la carga.

Sabiendo lo siguiente, en este mismo fichero src/routes/index.tsx añadiremos el hook useVisibleTask$ con la función track para observar los cambios que se dan dentro de action, concretamente cuando la operación es satisfactoria que lo reflejaremos con una nueva propiedad readyToStorageque será la que nos habilita la posibilidad de almacenar nuevos datos o no.

Lo primero añadimos la propiedad mencionada readyToStorage dentro del elemento del routeAction$ llamado useAddUrlToStoreInLocal:

...

export const useAddUrlToStoreInLocal = routeAction$(
  async (data) => {
    ...

    return {
        success: true,
        // Para especificar que está preparado para guardarlo en local
        readyToStorage: true, 
        data,
    };
  },
  ...
);
...

Y con esto, añadimos el hook useVisibleTask$ donde observamos los cambios que se darán en readyToStorage:

// 1
import {..., useVisibleTask$ } from '@builder.io/qwik';
...
import { useLocalStorage } from '../hooks/useLocalStorage';
...
export default component$(() => {
    ...
    // 2
    const { set, clear, data, loading } = useLocalStorage(`my-bookmarks`);   
    //3             
    useVisibleTask$(async ({ track }) => {
      // 4
      track(() => [action.value?.readyToStorage]);
    
      // 5
      if (action.value?.readyToStorage) {
        console.log("OK");

        // 6
        const saveData = [...data.value, action.value.data];

        // 7
        await set(saveData);

        // 8
        action.value.readyToStorage = false;
      }
    });
    ...
});

Funcionando de la siguiente forma:

• 1: Importamos los elementos necesarios como el custom hook useLocalStorage y el hook useVisibleTask$.
• 2: Iniciamos el hook con la clave my-bookmarks donde almacenaremos todos los marcadores favoritos.
• 3: Añadimos el hook useVisibleTask$ para guardar el nuevo registro siempre y cuando el valor readyToStorage dentro de action.value sea verdadero.
• 4: Observar los cambios en action.value.readyToStorage para reejecutar el hook.
• 5: Verifica que action.value.readyToStorage es verdadero, para realizar el almacenamiento del nuevo registro.
• 6: Cogemos los datos existentes (data.value) y añadimos el nuevo registro (action.value.data) y los añadimos en un array ya que es la estructura que guardaremos en el localStorage.
• 7: Enviamos a la función set todos los datos para actualizarlo en my-bookmarks.
• 8: false en action.value.readyToStorage para que no entre de nuevo en este apartado mientras no se notifique desde el routeAction$ cuando se validen los datos del nuevo registro.

Teniendo claro lo siguiente, lo que vamos a hacer ahora es probarlo con un ejemplo como el siguiente:

Antes de pulsar en Guardar vamos a abrir las Herramientas de desarrollador de nuestro navegador y dentro de el accedemos a los datos del localStorage:

Pulsamos en Guardar (1).

Si todo ha ido correctamente, debe de mostrarse el mensaje de que está preparado para guardarse (2) y posteriormente si nos fijamos en el localStorage, podemos observar que tenemos almacenada (3) la información que hemos añadido en el formulario dentro de la clave my-bookmarks:

Si hacemos click sobre el valor my-bookmarks (1) podemos observar con más detalle (2) los datos almacenados y como se puede apreciar, son los mismos que se han añadido en el formulario:

Con esto, ya tenemos lo principal completado.

Ultimando detalles

Para terminar vaomos a añadir los detalles para dejarlo más afinado y esto será lo que haremos:

• Mensaje de guardado (sustituyendo al actual).
• Cargar la lista de marcadores.
• Botón de eliminar los marcadores.
• Refactorizar los elementos de los input.

Realizaremos los tres primeros, lo que corresponde a la refactorización ya lo trabajaís por vuestra cuenta.

• Mensaje guardado

Pasamos de lo siguiente:

...
{action.status === 200 && action.value?.success && (
  <>Preparado para guardar</>
)}
...

A un mensaje más descriptivo:

...
{action.status === 200 && action.value?.success && (
  <>Almacenado correctamente el elemento:  {action.value.data.title} ({action.value.data.url})</>
)}
...

Y siguiendo los pasos para añadir un nuevo elemento, se mostrará de la siguiente forma:

Podríamos darle un poco de estilo al mensaje, para resaltarlo pero eso ya lo podéis hacer por vuestra cuenta.

• Cargar lista de marcadores

Debajo del formulario, vamos a añadir el apartado donde se visualizan los marcadores que vamos a ir añadiendo.

Esto podríamos hacerlo en otra ruta, pero en este caso lo hacemos en esta misma ruta con una lista.

...
export default component$(() => {
  ....
    
  return (
    <div>
      <h1>
        Repositorio de Marcadores Favoritos <span class="lightning">⚡️</span>
      </h1>
      (::FORMULARIO::)
      <hr />
      <h2>Lista de enlaces favoritos</h2>
      <ul>
        <li>
          <span>{"Hola"}</span> - <span>{"Desc"}</span> /{' '}
          <a class='btn-url' href={"url"} target='_blank'>
              Ir a enlace
          </a>
        </li>
      </ul>
      
    </div>
  );
});
...

Y en el index.css de este mismo directorio, añadimos el estilo asociado a los elementos de la lista con el selector ul:

ul {
  list-style: disc;
  margin-left: 20px;
}

Guardamos los cambios y esto es lo que vamos a observar como cambios:

Con esto, ya tenemos la estructura creada, ahora lo que tenemos que hacer es coger los datos desde el hook useLocalStorage con la propiedad data y para tener el estado de carga usamos loading siendo estos dos elementos de tipo useSignal.

Aplicamos los cambios para visualizar lo almacenado:

...
export default component$(() => {
  ....
    
  return (
    <div>
      <h1>
        Repositorio de Marcadores Favoritos <span class="lightning">⚡️</span>
      </h1>
      (::FORMULARIO::)
      <hr />
      <h2>Lista de enlaces favoritos</h2>
      { loading.value && <h2>Cargando marcadores favoritos...</h2>}
      {
        !loading.value && !data.value.length && <h2>No hay marcadores almacenados. Empieza a añadirlos desde el formulario</h2>
      }
      {
        !loading.value && data.value.length && <ul>
        {data.value.map((urlItem) => {
          const {title, url, description} = urlItem;
          return (<li>
            <span>{title}</span> - <span>{description}</span> /{' '}
            <a class='btn-url' href={url} target='_blank'>
                Ir a enlace
            </a>
        </li>)
        })}
      </ul>
      }
      
    </div>
  );
});
...

Y una vez guardado, debe de mostrarse la información que tenemos almacenada (si es el caso).

Para comprobar que se visualiza correctamente, vamos a las Herramientas del desarrollador de nuestro navegador y observamos lo que está guardado en el Almacenamiento Local que en mi caso sería lo siguiente:

Como se puede observar, tenemos un elemento guardado y viendo esos datos, se mostrará de la siguiente forma:

Ahora si añadimos otro marcador, directamente sin recargar la página se irá mostrando:

• Botón eliminar marcadores

Después de la lista de marcadores, añadimos un botón con estas propiedades CSS:

.delete-btn {
  box-shadow:inset 0px 1px 0px 0px #cf866c;
  background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
  background-color:#d0451b;
  border-radius:3px;
  border:1px solid #942911;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:13px;
  padding:6px 24px;
  text-decoration:none;
  text-shadow:0px 1px 0px #854629;
}
.delete-btn:hover {
  background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
  background-color:#bc3315;
}
.delete-btn:active {
  position:relative;
  top:1px;
}

Y el código del botón de eliminar junto con la acción de eliminar será lo siguiente:

<button class="delete-btn" onClick$={() => clear()}>Eliminar</button>

Al guardar los cambios, se verá de la siguiente forma después de la lista de marcadores y en este caso se muestra lo almacenado en local:

Si hacemos click en Eliminar desaparecerá tanto lo que se visualiza en la lista y también lo que se visualiza almacenado en el Almacenamiento local:

Y con esto ya tendríamos el funcionamiento completo de nuestra aplicación para guardar marcadores.

• Refactorizar los elementos input

Con todo lo que hemos ido aprendiendo, ya deberíamos de ser capaces de hacer este apartado.

Mi propuesta os la dejo a continuación con el resultado final del proyecto.