Ya dominas los inputs básicos. Pero los formularios reales necesitan más: opciones para elegir, casillas para marcar, archivos para subir. En este episodio, ampliaremos tu arsenal.
<select>: el menú desplegableCuando tienes muchas opciones y poco espacio, el <select> es tu amigo:
Cada <option> tiene un value — el valor técnico que se envía —
y un texto visible — lo que el usuario ve.
El usuario ve "España", pero el servidor recibe "es".
Cuando el usuario debe elegir exactamente una opción de un grupo pequeño, usamos radio buttons:
Aquí está el truco: el atributo name debe ser igual en todas las opciones del grupo.
Es lo que le dice al navegador "estos radios están relacionados, solo uno puede estar activo".
Si olvidas el name o cada uno tiene un nombre diferente,
podrás seleccionar todos a la vez — y eso no es un radio button, es un desastre.
Cuando el usuario puede elegir varias opciones (o ninguna), usamos checkboxes:
A diferencia del radio, aquí sí puedes marcar varios. También sirve para confirmaciones simples:
Para que el usuario suba fotos, documentos o cualquier archivo:
El navegador muestra un botón "Seleccionar archivo". Simple pero poderoso.
Hasta ahora, tus formularios son decorativos — no hacen nada cuando pulsas "Enviar". Es hora de entender cómo funcionaría en el mundo real.
Nota importante: En nuestro editor no tenemos un servidor escuchando los datos, así que cuando pulses "Enviar", no pasará nada visible (o verás un error). Esto es normal — estamos aprendiendo la estructura, no la conexión real. Cuando trabajes en proyectos reales con un backend, todo cobrará sentido.
methodCuando navegas a una página web, tu navegador hace una petición GET — "dame esta información". Pero cuando envías un formulario, normalmente quieres crear o enviar datos. Para eso usamos POST:
name: identificando los datosPara que el servidor sepa qué dato es cuál, cada campo necesita un name:
El id conecta el label con el input. El name identifica el dato para el servidor.
Son propósitos diferentes, aunque a menudo tienen el mismo valor.
Un formulario sin botón de envío es como un coche sin volante:
El type="submit" convierte el input en un botón que envía el formulario.
action: el destinoFinalmente, ¿a dónde van los datos? El action define la URL destino:
Cuando el usuario pulse "Enviar", los datos viajarán a /api/contacto.
required: campos obligatoriosPara evitar que envíen campos vacíos:
El navegador bloqueará el envío y mostrará un mensaje de error.
min y max: rangos numéricosPara campos de tipo number:
minlength y maxlength: longitud de textoPara controlar cuántos caracteres se pueden escribir:
Todo lo que acabas de aprender sobre validación es validación del lado del cliente. Es conveniente para el usuario — le avisa de errores antes de enviar.
Pero nunca confíes solo en ella.
Un usuario técnico puede desactivar JavaScript, modificar el HTML, o enviar datos directamente al servidor saltándose el formulario. La validación real, la que protege tu aplicación, debe estar en el servidor.
La validación del cliente es cortesía. La del servidor es seguridad.
Crea un formulario de registro con:
Los formularios recogen datos. Asegúrate de recoger los correctos...