HTML 05: Guía Maestra de Formularios

1. ¿Qué es un Formulario?

Un formulario en HTML es una sección de un documento que contiene controles interactivos (campos de texto, botones, checkboxes, etc.) que permiten al usuario enviar información a un servidor web. Es la vía principal de comunicación bidireccional en la web: desde un simple buscador hasta complejos sistemas de registro, compras online o configuración de perfiles.

La etiqueta contenedora es <form>, y dentro de ella colocaremos todos los elementos necesarios para recoger los datos.

2. La Etiqueta <form> y sus Atributos

El comportamiento del formulario se define mediante sus atributos en la etiqueta de apertura.

Atributos Principales

<!-- Ejemplo de formulario de registro seguro -->
<form action="registro.php" method="POST" autocomplete="on">
  ... campos del formulario ...
</form>

<!-- Ejemplo de formulario de búsqueda -->
<form action="buscar.html" method="GET">
  ... campo de búsqueda ...
</form>

3. La Importancia de las Etiquetas (Labels)

La etiqueta <label> define un rótulo para un elemento de formulario. Su uso es fundamental por dos razones:

1. Accesibilidad: Los lectores de pantalla leen el label cuando el usuario enfoca el input.
2. Usabilidad: Al hacer clic en el texto del label, el foco se va automáticamente al input asociado (muy útil en checkboxes y radios pequeños).

Agrupación de Campos: Fieldset y Legend

Para mantener el formulario organizado, especialmente si es largo, usa <fieldset> para agrupar campos relacionados. La etiqueta <legend> define el título de ese grupo.

<fieldset>
  <legend>Datos Personales</legend>
  ... inputs de nombre, edad ...
</fieldset>

Forma Explícita (Recomendada)

Usando el atributo for en el label que coincida exactamente con el id del input.

<label for="nombre_usuario">Nombre de Usuario:</label>
<input type="text" id="nombre_usuario" name="username">

Forma Implícita

Envolviendo el input dentro del label.

<label>
  Nombre de Usuario:
  <input type="text" name="username">
</label>

5. Campos de Entrada (Input Types)

La etiqueta <input> es la navaja suiza de los formularios. Su comportamiento cambia drásticamente según el atributo type.

5.1 Text y Variantes

Estos campos recogen datos alfanuméricos. Aunque visualmente parecen iguales, el atributo type cambia cómo el navegador valida el dato y, sobre todo, qué teclado muestra en móviles.

<!-- Campos de texto variados -->
<input type="text" name="texto" placeholder="Texto normal">
<input type="password" name="password" placeholder="••••••">
<input type="email" name="email" placeholder="nombre@mail.com">
<input type="tel" name="telefono" placeholder="600 123 456">
<input type="url" name="url" placeholder="https://miweb.com">
<input type="search" name="busqueda" placeholder="Buscar...">

5.2 Numéricos

Optimizados para cifras. En móviles muestran el teclado numérico. number incluye "flechitas" (spinners) para subir/bajar valor. range muestra un control deslizante visual, ideal cuando el valor exacto no es crítico.

<input type="number" name="numero" min="0" max="100" step="5">

<!-- Range con visualización de valor -->
<input type="range" name="rango" min="0" max="100" value="50"
    oninput="this.nextElementSibling.value = this.value">
<output>50</output>

5.3 Fecha y Hora

Despliegan los calendarios y selectores de hora nativos del dispositivo. Simplifican enormemente la introducción de fechas sin necesidad de librerías extrañas.

• date: Fecha completa (día, mes, año).
• month: Selecciona mes y año.
• week: Selecciona semana y año.
• time: Hora y minutos (a veces segundos).
• datetime-local: Fecha y hora (sin zona horaria).

<!-- Selectores de Fecha y Hora -->
<input type="date" name="fecha">
<input type="time" name="hora">
<input type="datetime-local" name="fecha_hora">
<input type="month" name="mes">
<input type="week" name="semana">

5.4 Especiales: Color, Archivo y Oculto

• Color: Abre el selector de color del sistema operativo.
• File: Permite subir archivos. El atributo accept filtra qué archivos se pueden elegir:
  • Extensiones: accept=".jpg, .pdf"
  • Tipos MIME (recomendado): accept="image/*" (cualquier imagen), accept="audio/*"
• Hidden: Datos invisibles.
  Truco Anti-Spam (Honeypot): Puedes poner un campo hidden (o oculto por CSS) que los bots rellenan automáticamente. Si al recibir el formulario en el servidor ese campo tiene datos, ¡es un bot! (Los humanos no lo ven).

<input type="color" name="color">
<input type="file" name="archivo" accept="image/*">
<input type="hidden" name="id_usuario" value="99">

6. Textarea (Texto Multilínea)

Para textos largos como comentarios o biografías, usamos <textarea>. A diferencia de input, este elemento tiene etiqueta de cierre y el texto inicial va entre ellas. Permite escribir en múltiples líneas. Por defecto el usuario puede cambiar su tamaño arrastrando la esquina, pero podemos evitarlo con CSS (resize: none;) si rompe nuestro diseño.

<textarea name="bio" rows="4"></textarea>

7. Elementos de Selección

7.1 Select (Menú Desplegable)

Muestra una lista de opciones. Es ideal para ahorrar espacio. Podemos agrupar opciones con <optgroup>.

Selección Múltiple: Añadiendo el atributo multiple, el usuario puede elegir varias opciones (manteniendo pulsado Ctrl o Shift).
⚠️ IMPORTANTE: Si es múltiple, el nombre debe llevar corchetes name="paises[]" para enviar un array al servidor.
Nota: Con JS podemos validar que se seleccionen un mínimo o máximo de opciones.

Para marcar una opción por defecto, añade el atributo selected a la etiqueta <option> deseada.

<select name="pais">
    <option value="" disabled>-- Elige --</option>
    <option value="es"  selected>España</option>
    <option value="mx">México</option>
    <optgroup label="Otros">
        <option value="us">USA</option>
    </optgroup>
</select>

7.2 Radio Buttons (Opción única)

Se usan cuando el usuario debe elegir una sola opción entre varias (ej: Género, Método de pago). Al contrario que el select, aquí todas las opciones están visibles.
Importante: Para que funcionen como grupo, deben compartir el exacto mismo valor en el atributo name.
Usa el atributo checked para marcar una opción por defecto.

<!-- Radio buttons: Mismo NAME para ser grupo -->
<input type="radio" id="g_mujer" name="genero" value="mujer checked">
<label for="g_mujer">Mujer</label>

<input type="radio" id="g_hombre" name="genero" value="hombre">
<label for="g_hombre">Hombre</label>

<input type="radio" id="g_otro" name="genero" value="otro">
<label for="g_otro">Otro</label>

7.3 Checkboxes (Opción múltiple)

Casillas de verificación independientes. El usuario puede marcar todas, algunas o ninguna. Ideales para aceptar términos, elegir ingredientes extra, o configuraciones on/off. También aceptan el atributo checked para aparecer marcadas inicialmente.

<input type="checkbox" id="c_terminos" name="terminos" required>
<label for="c_terminos">Acepto los términos...</label>

Elemento Datalist (Autocompletado)

Proporciona una lista de opciones predefinidas para un <input>. A diferencia del <select>, aquí el usuario puede seleccionar una opción sugerida o escribir algo totalmente nuevo.

<input list="navegadores">
<datalist id="navegadores">
  <option value="Chrome">
  <option value="Firefox">
  ...
</datalist>

8. Botones

Hay varias formas de crear botones. La recomendada en formularios clásicos es usar <input>.

<!-- Diferentes formas de hacer botones -->
<input type="submit" value="Enviar Datos" class="btn btn_primary">
<input type="reset" value="Limpiar" class="btn btn_secondary">
<input type="button" value="Click JS" class="btn btn_danger">

Atributos Globales de Validación

Permiten validar datos en el cliente (navegador) antes de enviar.

Accesibilidad y Tabindex

El atributo tabindex controla el orden de navegación con la tecla Tab. Es una herramienta potente pero peligrosa.

• tabindex="0": Incluye un elemento no interactivo (div, span) en el flujo natural de tabulación.
• tabindex="-1": Saca el elemento del flujo de teclado (pero permite foco vía JS). Útil para modales.
• tabindex="1+" (Positivo): EVITAR. Altera el orden natural y rompe la accesibilidad si la estructura cambia.

Ejemplo de Estructura Ideal

<form action="/procesar" method="POST">
  <fieldset>
    <legend>Información Personal</legend>
    
    <label for="nombre">Nombre Completo:</label>
    <input type="text" id="nombre" name="user_name" required placeholder="Ej: Juan Pérez">

    <label for="correo">Email:</label>
    <input type="email" id="correo" name="user_email" required>
  </fieldset>

  <fieldset>
    <legend>Preferencias</legend>
    
    <label>
      <input type="radio" name="genero" value="h"> Hombre
    </label>
    <label>
      <input type="radio" name="genero" value="m"> Mujer
    </label>
  </fieldset>

  <button type="submit">Enviar Registro</button>
</form>