Hasta ahora, tu web ha sido un monólogo — tú hablas, el usuario escucha. Los formularios cambian eso. Son la forma en que el usuario te responde: su nombre, su email, su opinión, su pedido.
Cada vez que te registras en un sitio, buscas un vuelo, o envías un mensaje de contacto, hay un formulario detrás. Son el puente entre el usuario y tu aplicación.
<form>Todo formulario vive dentro de una etiqueta <form>:
El <form> es el contenedor que agrupa todos los campos relacionados.
Más adelante, cuando aprendas a enviar datos a un servidor,
el formulario será quien empaquete toda la información.
<input>: el camaleónEl <input> es probablemente el elemento más versátil de HTML.
Dependiendo de su atributo type, puede ser un campo de texto,
un selector de fecha, un control deslizante, un campo de contraseña...
Por defecto, sin especificar tipo, es un campo de texto. Estas dos líneas son equivalentes:
Observa que <input> es una etiqueta de auto-cierre — como <img>, no tiene contenido dentro.
Un campo vacío no dice mucho. El placeholder muestra un texto de ayuda
que desaparece cuando el usuario empieza a escribir:
Es útil, pero tiene un problema: cuando el usuario escribe, el placeholder desaparece. Si tiene muchos campos, puede olvidar qué se esperaba en cada uno.
Para eso existe <label> — una etiqueta descriptiva que siempre está visible:
Observa la conexión mágica:
for del label apunta al id del inputEsto no es solo conveniente — es accesibilidad. Los lectores de pantalla usan esta conexión para anunciar qué campo es cada uno. En móviles, hace que el área "tocable" sea mucho más grande.
Mi recomendación: usa ambos. El label describe, el placeholder ejemplifica:
Como tanto <label> como <input> son elementos en línea,
aparecerán uno al lado del otro. Si quieres el input debajo del label,
puedes usar un <br> para forzar un salto de línea:
El atributo type transforma completamente el comportamiento del input.
Aquí están los más comunes:
type="number" — Solo númerosAparecen flechas para incrementar/decrementar. El teclado en móviles muestra solo números.
type="range" — El control deslizantePerfecto para seleccionar un valor en un rango (volumen, brillo, precio máximo...).
type="date" — Selector de fechaEl navegador muestra un calendario nativo. Adiós a escribir fechas en formatos incorrectos.
type="time" — Selector de horaSimilar al anterior, pero para horas.
type="email" — Correo electrónicoParece un input de texto normal, pero:
type="password" — ContraseñasLos caracteres se muestran como •••••.
Nadie mirando por encima del hombro verá lo que escribes.
Usar el type correcto no es solo cosmético. Mejora:
Es un pequeño cambio que hace una gran diferencia.
Crea un mini formulario de contacto con:
type="email")Los formularios son preguntas. Asegúrate de hacerlas bien...