Formularios

1.Qué es un formulario

Un formulario permite que el visitante escriba o elija información: iniciar sesión, buscar, registrarse, contactar, hacer un pedido. Es la forma principal de interacción entre una persona y un sitio.

En HTML, un formulario se compone de tres ideas:

1. El contenedor <form>, que agrupa todos los campos.
2. Los campos (<input>, <textarea>, <select>…), donde la persona escribe o elige.
3. El botón de envío, que manda los datos a quien los procesa.

2.La etiqueta form

<form action="/enviar" method="post">
  <!-- aquí van los campos -->
  <button type="submit">Enviar</button>
</form>

GET o POST

• GET agrega los datos a la dirección (?buscar=perros). Úsalo para búsquedas y filtros, donde la URL se puede guardar y compartir.
• POST envía los datos de forma interna. Úsalo para registros, contraseñas y pedidos; nunca para algo que quieras que quede en la URL.

3.Campos de texto y etiquetas

El campo más común es <input>. Cambia su aspecto y comportamiento con el atributo type. Pero cada campo necesita una etiqueta <label> que diga qué se espera.

<label for="nombre">Nombre completo</label>
<input type="text" id="nombre" name="nombre">

• for en el <label> debe coincidir exactamente con el id del campo. Esa unión permite hacer clic en el texto para escribir en el campo y hace que el lector de pantalla anuncie qué se pide.
• id identifica al campo dentro de la página y debe ser único.
• name es el nombre con el que viajará el dato al servidor (por ejemplo, nombre=Ana). Sin name, el campo no se envía.

▶ Ver animación

Prueba: haz clic sobre las palabras «Nombre completo». El cursor salta al campo. Ahora cambia el for por otro valor y vuelve a intentarlo: la conexión se rompe.

4.Tipos de input

El atributo type hace que el navegador adapte el campo: en el celular muestra el teclado adecuado, valida el formato y ofrece herramientas como calendarios o selectores de color.

5.Atributos útiles de los campos

<label for="cp">Código postal</label>
<input type="text" id="cp" name="cp" required
       pattern="[0-9]{5}" maxlength="5"
       inputmode="numeric" autocomplete="postal-code">

En tu propio navegador, intenta enviar el formulario con el campo vacío o con letras: verás un aviso automático, sin escribir una sola línea de JavaScript.

6.Texto largo y listas desplegables

Texto largo: textarea

<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="5" cols="40"></textarea>

A diferencia de <input>, <textarea> sí tiene etiqueta de cierre y su contenido inicial va entre las etiquetas. rows y cols fijan su tamaño aproximado.

Lista desplegable: select

<label for="pais">País</label>
<select id="pais" name="pais">
  <option value="">Elige una opción</option>
  <optgroup label="América">
    <option value="mx">México</option>
    <option value="co">Colombia</option>
  </optgroup>
  <optgroup label="Europa">
    <option value="es">España</option>
  </optgroup>
</select>

• <option value="…">: el value es lo que se envía; el texto es lo que ve la persona.
• <optgroup> agrupa opciones con un título.
• selected marca la opción inicial y multiple permite elegir varias.

7.Casillas y botones de opción

Cuando la persona debe elegir entre opciones visibles, usa dos tipos de <input>:

<fieldset>
  <legend>Talla de la camiseta</legend>
  <input type="radio" id="s" name="talla" value="s">
  <label for="s">Chica</label>
  <input type="radio" id="m" name="talla" value="m" checked>
  <label for="m">Mediana</label>
</fieldset>

<fieldset>
  <legend>Intereses</legend>
  <input type="checkbox" id="mus" name="interes" value="musica">
  <label for="mus">Música</label>
  <input type="checkbox" id="cin" name="interes" value="cine">
  <label for="cin">Cine</label>
</fieldset>

<fieldset> agrupa campos relacionados y <legend> es el título del grupo. Los lectores de pantalla anuncian la leyenda antes de cada opción, lo que da contexto a quien no ve la pantalla.

8.Botones

9.Un formulario completo

Juntemos todo en un formulario de contacto. Léelo de arriba abajo e identifica cada pieza que viste en la lección:

10.Errores frecuentes

• Campos sin <label> o con for que no coincide con el id.
• Olvidar name: el campo se ve, pero no se envía.
• Dos campos con el mismo id: los id deben ser únicos. (Los radio sí comparten name, pero no id).
• Usar placeholder como única etiqueta.
• Botones radio con distinto name: dejan de comportarse como grupo.
• Pedir más datos de los necesarios. Cada campo extra baja la tasa de personas que terminan el formulario y aumenta lo que debes proteger.
• Confiar solo en la validación del navegador.

11.Glosario