Curso HTML – Módulo 8: Formularios en HTML

Publicada el por

Curso HTML – Módulo 8: Formularios en HTML

Los formularios no son solo una colección de cuadros de texto; son la interfaz de comunicación entre el cliente y el servidor. Un formulario mal diseñado puede hacer que pierdas una venta o un registro.

En este módulo, desglosaremos desde la arquitectura básica hasta las validaciones que evitan errores de datos.

1. La Arquitectura del Elemento <form>

El contenedor <form> define cómo se empaquetan y envían los datos. Es vital entender sus atributos de control:

  • action: La URL de destino. Si se deja vacío, el formulario se envía a la misma página.

  • method:

    • GET: Los datos viajan en la URL (ej. search?q=html). Límite de caracteres y nula seguridad para datos privados.

    • POST: Los datos viajan en el cuerpo de la petición. Es el estándar para crear contenido o iniciar sesión.

  • autocomplete: Puede ser on u off. Útil para desactivar sugerencias en campos de tarjetas de crédito.

  • novalidate: Un atributo booleano que indica al navegador que no valide el formulario al enviarlo (útil cuando queremos validar nosotros con JavaScript).

2. Elementos de Agrupación: Fieldset y Legend

Cuando un formulario es extenso, la carga cognitiva del usuario aumenta. HTML ofrece etiquetas semánticas para organizar visual y técnicamente los campos:

  • <fieldset>: Agrupa campos relacionados. Los lectores de pantalla anuncian este grupo, dando contexto al usuario.

  • <legend>: Es el pie de foto o título del fieldset. Siempre debe ser el primer hijo de un fieldset.

Tip Pro: Puedes deshabilitar un grupo entero de inputs simplemente añadiendo el atributo disabled a la etiqueta <fieldset>.

3. El Universo de los <input>

El elemento <input> es el más versátil de HTML. Su comportamiento depende totalmente del atributo type.

Entradas de Texto y Datos Básicos

Entrada de texto y datos básicos. Son los más comunes para capturar información alfanumérica.

  • text: El valor por defecto. Una caja de texto simple de una sola línea.

  • password: Los caracteres se ocultan (aparecen puntos o asteriscos) por seguridad.

  • email: Valida que el texto introducido tenga formato de correo electrónico (contenga @ y un dominio).

  • number: Solo permite números. Suele incluir flechas para subir/bajar el valor.

  • tel: Diseñado para números de teléfono (útil para que los móviles muestren el teclado numérico).

  • url: Valida que el texto tenga un formato de dirección web legal.

  • search: Optimizado para cuadros de búsqueda (a veces incluye una ‘X’ para limpiar el texto).

Selección y Opciones

Ideales para cuando el usuario debe elegir entre opciones predefinidas.

  • checkbox: Una casilla de verificación. Permite seleccionar varias opciones de un grupo.

  • radio: Botones circulares. Permite seleccionar solo una opción de un grupo (deben compartir el mismo name).

  • range: Un control deslizante (slider) para seleccionar un valor dentro de un rango numérico.

  • color: Abre un selector de colores del sistema para elegir un tono en formato hexadecimal.

Fecha y Hora

Facilitan la entrada de datos temporales sin errores de formato.

  • date: Un selector de calendario (Año, Mes, Día).

  • datetime-local: Permite elegir fecha y hora (sin zona horaria).

  • month: Selecciona un mes y un año específicos.

  • week: Selecciona una semana específica del año.

  • time: Un selector de hora (horas y minutos).

Botones y Acciones

Controlan el envío o la interacción con el formulario.

  • submit: Un botón que envía los datos del formulario al servidor.

  • button: Un botón genérico que no hace nada por defecto (se usa con JavaScript).

  • reset: Restablece todos los campos del formulario a sus valores originales.

  • image: Utiliza una imagen como botón de envío (requiere el atributo src).

Tipos Especiales

  • file: Permite al usuario seleccionar uno o varios archivos de su equipo para subirlos. Recuerda usar enctype=’multipart/form-data’ en el <form>

  • hidden: Un campo que no es visible para el usuario. Se usa para enviar datos técnicos al servidor que el usuario no necesita ver.

4. Atributos de Control y Validación Nativa

No necesitas JavaScript para validaciones básicas. HTML5 incluye atributos potentes:

  • required: El campo no puede estar vacío.

  • pattern: Permite usar Expresiones Regulares (Regex). Por ejemplo, pattern='[A-Z]{3}’ solo aceptará 3 letras mayúsculas.

  • minlength / maxlength: Controla la cantidad de caracteres.

  • step: Define el intervalo de salto en un type=’number’ o range.

5. Controles Multilínea y Listas

A veces, un <input> de una sola línea no es suficiente.

<textarea>: El editor de texto simple.

A diferencia del input, es una etiqueta de apertura y cierre. Su tamaño se controla con los atributos  rows (filas) y cols (columnas), aunque lo ideal es ajustarlo con CSS.

<select> y la evolución con <datalist>

  • <select>: Crea una lista cerrada de opciones.

  • <datalist>: Es una mezcla entre un <input> y un <select>. Permite al usuario escribir y, a medida que escribe, le sugiere opciones, pero también le permite ingresar un valor que no esté en la lista.

<label for="navegador">Elige tu navegador:</label>
<input list="navegadores" id="navegador" name="navegador">

<datalist id="navegadores">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

5. Accesibilidad (A11y) en Formularios

Un formulario inaccesible es un formulario roto.

  1. Asociación Explícita: Siempre usa el atributo for en el <label> apuntando al id del input.

  2. Instrucciones: Usa aria-describedby para conectar un input con un texto de ayuda adicional.

  3. Contraste: Asegúrate de que los bordes de los inputs sean visibles (mínimo 3:1 de contraste respecto al fondo).

Ejemplo Maestro: Formulario de Soporte Técnico

Este ejemplo combina estructura avanzada, validación y accesibilidad.

<form action="/api/soporte" method="POST">
   <h2>Ticket de Soporte Técnico</h2>
   <fieldset>
      <legend>Identificación</legend>
      <div class="row">
         <label for="user-id">ID de Usuario (Solo números):</label>
         <input type="number" id="user-id" name="uid" required min="1000">
      </div>
      <div class="row">
         <label for="user-pass">PIN de Seguridad (4 dígitos):</label>
         <input type="password" id="user-pass" name="pin" pattern="[0-9]{4}" title="Debe contener exactamente 4 números">
      </div>
   </fieldset>
   <fieldset>
      <legend>Detalles del Incidente</legend>
      <label for="priority">Prioridad:</label>
      <input type="range" id="priority" name="urgencia" min="0" max="10" step="1">
      <label for="issue-type">Categoría:</label>
      <select id="issue-type" name="categoria">
         <optgroup label="Hardware">
            <option value="monitor">Monitor</option>
            <option value="teclado">Teclado/Mouse</option>
         </optgroup>
         <optgroup label="Software">
            <option value="os">Sistema Operativo</option>
            <option value="app">Aplicación Web</option>
         </optgroup>
      </select>
      <label for="desc">Descripción detallada:</label>
      <textarea id="desc" name="descripcion" rows="5" placeholder="Cuéntanos qué sucedió..."></textarea>
   </fieldset>
   <div class="actions">
      <button type="submit">Enviar Reporte</button>
      <button type="reset" style="background: #ccc;">Limpiar Formulario</button>
   </div>
</form>

Ejercicios Avanzados

  1. El Inspector de Elementos: Abre un formulario de cualquier sitio web famoso (como Google o Facebook), usa la herramienta de inspección del navegador y localiza los atributos name y type. ¿Qué tipos de input están usando que no conocías?

  2. Restricción de Archivos: Crea un formulario de subida de archivos que solo acepte imágenes .jpg o .png y que permita subir varios archivos a la vez (Investiga el atributo accept y multiple).

  3. Formulario Dinámico: Crea un formulario donde uses un datalist para sugerir países, pero que el campo sea obligatorio.

Conclusión y Buenas Prácticas

  • No reinventes la rueda: Antes de usar una librería de JavaScript para validar un email, usa type=’email’, ya que los navegadores modernos ya lo hacen por ti.

  • Feedback Inmediato: Usa los pseudo-selectores de CSS :valid e :invalid para dar feedback visual (colores verdes/rojos) mientras el usuario escribe.

  • Móvil Primero: Asegúrate de que tus inputs tengan un tamaño de fuente de al menos 16px en móviles para evitar que iOS haga un zoom automático molesto al enfocar el campo.