Formularios
Los formularios son el puente entre el visitante y tu negocio: un contacto, una suscripción, un pedido. Vamos a ver cómo construirlos bien desde el HTML, antes incluso de pensar en cómo se procesan esos datos por detrás.
El contenedor: <form>
Todo formulario empieza con la etiqueta <form>, que
envuelve todos los campos. Tiene dos atributos que conviene entender desde ya:
La URL a la que se envían los datos cuando el usuario pulsa "enviar".
Cómo se envían esos datos: normalmente "get" (van visibles en la URL, para búsquedas o filtros) o "post" (van ocultos en el cuerpo de la petición, para datos sensibles como contraseñas o mensajes de contacto).
De momento nos centramos en construir el formulario correctamente en HTML. Que ese formulario realmente "haga algo" al enviarse (guardar en una base de datos, mandar un email) depende de un lenguaje de servidor como PHP — lo verás cuando avances más en tu propio curso de programación.
Campos de texto: <input> y <label>
<input> es el campo más versátil de HTML: según su
atributo type, se convierte en algo completamente
distinto (texto, número, casilla, fecha...).
Etiqueta descriptiva asociada a un campo mediante el atributo for, que debe coincidir con el id del input. Al pulsar sobre la etiqueta, el campo se activa automáticamente — imprescindible para accesibilidad.
Texto de ejemplo, semitransparente, que desaparece al escribir. Nunca sustituye a un <label>: es solo una pista visual adicional.
Impide enviar el formulario si ese campo está vacío. Validación instantánea, sin necesitar JavaScript.
Para texto largo de varias líneas, como el cuerpo de un mensaje. A diferencia de <input>, sí lleva etiqueta de cierre.
Usar solo placeholder sin un
<label> real. En cuanto el usuario empieza a
escribir, el placeholder desaparece y pierde de vista qué campo es. Además, los
lectores de pantalla no siempre anuncian bien los placeholders. Usa siempre ambos.
Más tipos de input
Elegir el type correcto no es un detalle menor: en
móviles, cada tipo activa un teclado adaptado (numérico para "number", con
arroba para "email"...), y el navegador valida el formato automáticamente.
Fíjate en que todos los <input type="radio"> de
un mismo grupo comparten el mismo name
("origen"). Eso es lo que hace que el navegador los trate como un grupo
exclusivo: solo se puede marcar uno a la vez.
El botón de envío
Envía el formulario. Preferible a <input type="submit"> porque te permite meter dentro texto con formato o incluso un icono.
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Qué hace el atributo for de un <label>?
2. ¿Qué comparten varios <input type="radio"> para funcionar como grupo exclusivo?
3. ¿Por qué no basta con un placeholder en vez de un label?