El formulario básico: <form>, <input>, <label>, <button>

Los formularios son la forma en que los usuarios envían datos a un sitio web: crear una cuenta, iniciar sesión, buscar algo, dejar un mensaje. Cuatro elementos forman el núcleo de todo formulario HTML.

---

<form>: el contenedor

<form> agrupa todos los controles del formulario. Sin él, los campos y botones no están coordinados entre sí.

<!-- Formulario de contacto básico -->
<form action="/contacto" method="post">
  <!-- los campos van aquí -->
</form>

action indica la URL del servidor que recibirá los datos al enviar el formulario. Si se omite, los datos se envían a la URL actual.

method indica cómo viajarán los datos:

• method="get" — los datos van en la URL (/buscar?q=html). Para búsquedas y datos no sensibles. Se puede guardar como bookmark.
• method="post" — los datos van en el cuerpo de la petición HTTP, no en la URL. Para datos sensibles (contraseñas) o acciones que modifican algo en el servidor (crear cuenta, enviar mensaje).

Lo que hace el servidor con los datos está fuera del scope de este módulo. CAT-09 enseña el marcado HTML del formulario; el backend es una caja negra.

---

<input>: el control de entrada más versátil

<input> es un void element (como <img> — no tiene etiqueta de cierre). El atributo type cambia completamente su comportamiento y apariencia.

<input type="text" />
<!-- campo de texto libre (default) -->
<input type="email" />
<!-- valida formato de email; móvil muestra teclado con @ -->
<input type="password" />
<!-- oculta los caracteres escritos -->
<input type="number" />
<!-- solo acepta números; muestra flechas de incremento -->
<input type="checkbox" />
<!-- casilla de verificación independiente -->
<input type="radio" />
<!-- botón de opción (uno del grupo) -->
<input type="file" />
<!-- selector de archivo del sistema -->
<input type="hidden" />
<!-- campo invisible al usuario; valor fijo enviado con el form -->

El atributo name es imprescindible. El name es la clave del par clave-valor en la petición HTTP. Dicho con otras palabras, name es el nombre asignado a este input y es el que reconocera el servidor para buscar su valor. Sin name, el dato del campo no se incluye en los datos enviados al servidor.

<!-- ❌ MAL: sin name, este campo no se enviará -->
<input type="email" id="correo" />

<!-- ✅ BIEN: con name, el dato se envía como correo=usuario@ejemplo.com -->
<input type="email" id="correo" name="correo" />

Checkbox e independencia: los <input type="checkbox"> representan una opcion que el usuario puede marcar o desmarcar. Cada checkbox es independiente de los demás — no forman un grupo. Si querés que el usuario elija solo una opción de varias, usá <input type="radio"> con el mismo name (ver más abajo).

<!-- Checkbox independientes: el usuario puede marcar ambos -->
<input type="checkbox" id="opcion1" name="opcion1" />

<input type="checkbox" id="opcion2" name="opcion2" />

Radio y exclusividad mutua: los <input type="radio"> que comparten el mismo name forman un grupo — solo uno puede estar seleccionado a la vez. Si tienen name distintos, son independientes y el efecto de exclusividad mutua no ocurre — error frecuente.

<!-- Radio con name compartido: son mutuamente excluyentes -->
<input type="radio" name="color" value="rojo" id="rojo" />

<input type="radio" name="color" value="azul" id="azul" />

---

<label>: la pieza de accesibilidad central

<label> etiqueta un control de formulario con texto visible y lo vincula semánticamente. Todo input visible necesita su label.

Por qué importa — dos efectos concretos:

1. Usabilidad: clicar el texto del <label> activa el control asociado (enfoca el input o marca el checkbox). En un teléfono, esto amplía el área táctil.
2. Accesibilidad: los lectores de pantalla anuncian el texto del label cuando el foco llega al control. Sin label, anuncian “campo de texto — sin nombre”.

Forma con for/id (recomendada):

<!-- for en el label apunta al id del input (no al name) -->
<input type="radio" name="pais" value="argentina" id="argentina" />
<label for="argentina">Argentina</label>

<input type="radio" name="pais" value="uruguay" id="uruguay" />
<label for="uruguay">Uruguay</label>

El atributo for del <label> debe coincidir exactamente con el id del control. for apunta al id, NO al name — error frecuentísimo. El id identifica el elemento en el DOM; el name es la clave de envío al servidor — son dos atributos distintos con propósitos distintos.

Forma envolvente:

<!-- El input dentro del label crea la vinculación implícita -->
<label>
  Correo electrónico
  <input type="email" name="correo" />
</label>

En la forma envolvente no se necesita for ni id — la vinculación es por anidado. La forma con for/id es la recomendada cuando label e input no son adyacentes.

<!-- ❌ MAL: placeholder no reemplaza al label -->
<input type="text" placeholder="Tu nombre" name="nombre" />

<!-- ✅ BIEN: label visible + input con id vinculado -->
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" />

---

<button>: el botón de acción

<button> crea un botón interactivo. A diferencia de <input type="submit">, puede contener HTML dentro (texto formateado, íconos).

<button type="submit">Enviar formulario</button>
<!-- envía el form -->
<button type="reset">Limpiar campos</button>
<!-- borra todos los valores -->
<button type="button">Acción propia</button>
<!-- no hace nada por defecto -->

El tipo por defecto es submit. Si un <button> está dentro de un <form> y no tiene type, se comporta como type="submit" y envía el formulario al clicarlo. Este es uno de los bugs más difíciles de diagnosticar para un principiante: “mi botón hace submit sin que yo quiera” — ocurre porque olvidó poner type="button".

El texto del <button> va entre las etiquetas, no en un atributo value.

En el sandbox el formulario no se envía y la validación no se dispara, pero el check confirma que tu marcado es correcto; en un navegador real con servidor funcionaría.

---

Tu turno: armá un formulario de registro con method="post", 3 campos (nombre, correo, contraseña) cada uno con su <label for> vinculado al id, y un <button type="submit">Registrarse</button>. Luego hacé clic en “Comprobar”.