Crear formularios que funcionen bien y que los usuarios quieran completar es una de las responsabilidades más grandes al construir productos web. Un formulario mal diseñado puede hacer que las personas abandonen una compra o un registro, y nunca regresen. Aquí se explica paso a paso cómo construir formularios con las etiquetas correctas, los tipos de input adecuados y los atributos que mejoran la experiencia del usuario.
¿Por qué los formularios son tan importantes en productos web?
Los formularios son el puente principal de comunicación entre un producto web y sus usuarios. A través de ellos se recolecta información esencial: credenciales de acceso, datos de envío, preferencias personales. Sin embargo, un formulario extenso o confuso genera abandono [0:45]. Si alguna vez intentaste registrarte en una página y el formulario era tan largo que decidiste irte, sabes exactamente de qué se trata.
Existe una frase conocida en el mundo del desarrollo: "el mejor formulario es el que no existe" [1:17]. A nadie le gusta llenar formularios. Por eso, como desarrolladores, la meta es hacerlos lo más breves, claros y funcionales posible.
¿Cuál es la diferencia entre usar div y la etiqueta form?
Un error común es envolver los inputs dentro de un simple div [2:07]. Aunque visualmente puede parecer que funciona, esta práctica está mal hecha. La etiqueta correcta es form, que es una etiqueta semántica. Esto significa que le comunica al navegador que el contenido interno es un formulario y que el usuario va a proporcionar información destinada a un servidor [2:42].
La etiqueta form incluye un atributo llamado action, donde se define la URL o endpoint al que se enviará la información recolectada hacia una base de datos [3:05]. Aunque este atributo se aprovecha más adelante con JavaScript, es importante conocerlo desde el inicio.
¿Cómo se relacionan label, input e id?
Dentro de form, cada campo debe construirse con una estructura clara:
- La etiqueta label describe para qué sirve el campo.
- La etiqueta input es donde el usuario escribe o selecciona información.
- El atributo for del label debe coincidir con el atributo id del input [3:35].
Esta relación es fundamental. Cuando el for del label y el id del input coinciden, al hacer clic en el texto de la pregunta se activa automáticamente el campo correspondiente [4:30]. Esto mejora la accesibilidad y la experiencia de uso.
¿Qué tipos de input existen y cuándo usarlos?
El atributo type del input define qué clase de información se va a recolectar. Tres ejemplos prácticos ilustran esto con claridad:
- type="text": para capturar texto libre, como un nombre [5:00].
- type="date": muestra un selector de calendario para que el usuario elija una fecha sin tener que escribirla manualmente [5:55].
- type="time": presenta un selector de hora para indicar, por ejemplo, en qué horario prefiere estudiar una persona [6:30].
Usar el tipo correcto reduce el trabajo del usuario. En lugar de escribir "16/07/2024" a mano, el calendario integrado le permite seleccionar la fecha con clics. Eso es pensar en la experiencia.
¿Qué es el placeholder y cómo ayuda al usuario?
Cuando un formulario tiene campos vacíos, el usuario puede no saber exactamente qué información se espera. Para resolver esto existe el atributo placeholder [7:32]. Este atributo coloca un texto de ejemplo dentro del input que desaparece al comenzar a escribir.
Por ejemplo, en un campo de nombre se puede agregar placeholder="tu nombre", lo que le indica visualmente a la persona qué dato debe ingresar [7:50]. Es un detalle pequeño que marca una gran diferencia en la claridad del formulario.
El formulario resultante tiene tres campos funcionales:
- Nombre del alumno con input tipo texto y placeholder.
- Fecha de inicio en Platzi con input tipo date.
- Horario preferido de estudio con input tipo time.
Cada campo utiliza la etiqueta semántica correcta, tiene su label vinculado por id y emplea el tipo de input que mejor se adapta a la información solicitada. Hacer trabajar menos al usuario es la prioridad [8:25]. Si quieres seguir practicando, intenta construir un formulario tipo calendario con fecha de ida y regreso, como los que usan las páginas de vuelos. ¿Qué otros tipos de input crees que podrías necesitar? Compártelo en los comentarios.
