Desarrollo Frontend Avanzado

Formularios HTML5: La Guía Técnica Definitiva

Domina la captura de datos. Desde la configuración del servidor hasta la UX en móviles con teclados virtuales y validaciones sin JavaScript.

Vista previa de interfaces de formularios optimizadas para validación en tiempo real y usabilidad móvil.

Concepto: El Motor de Interacción

Los formularios son la interfaz principal de entrada de datos en la web. Permiten capturar información del usuario (texto, archivos, selecciones) para enviarla a un servidor o API que procesará la lógica de negocio.

Frontend (User Input) -> HTTP Request -> Backend (Database/Logic)

Frontend (User Input) -> HTTP Request -> Backend (Database/Logic)

La Etiqueta Madre: form

Define el contexto del formulario. Todos los inputs deben vivir dentro de ella. Sus atributos configuran el 'viaje' de los datos: ¿A dónde van? (`action`), ¿Cómo van? (`method`) y ¿Cómo se empaquetan? (`enctype`).

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<form action="/api/save" method="POST">
  
</form>

<form action="/api/save" method="POST">
  
</form>

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<form method="GET">


<form method="POST">

<form method="GET">


<form method="POST">

Esquema comparativo de petición GET vs POST — Comparativa visual: GET expone datos en la URL, mientras que POST los encapsula de forma segura en el cuerpo de la petición.

Enctype: Manejo de Archivos

Es vital si tu formulario sube archivos. El valor por defecto (`application/x-www-form-urlencoded`) solo sirve para texto. Para enviar binarios (fotos, pdfs) debes cambiarlo obligatoriamente a `multipart/form-data`.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<form method="POST" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

<form method="POST" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

Inputs Básicos: Text, Password, Email

Los bloques de construcción fundamentales. `text` para contenido libre. `password` oculta los caracteres (pero no los encripta al enviar). `email` valida que exista un '@' y ayuda a los teclados móviles.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<input type="text" name="user">
<input type="password" name="pass">
<input type="email" name="mail">

<input type="text" name="user">
<input type="password" name="pass">
<input type="email" name="mail">

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<input type="tel" name="telefono">


<input type="date" name="fecha_nacimiento">

<input type="tel" name="telefono">


<input type="date" name="fecha_nacimiento">

Capturas de pantalla mostrando diferentes teclados móviles según el input type — La elección correcta del tipo de input transforma la experiencia de usuario en móviles al desplegar el teclado más adecuado.

Autocomplete: Optimizando el Registro

El atributo `autocomplete` permite al navegador y gestores de contraseñas rellenar datos automáticamente. Es una buena práctica crítica para reducir el abandono en formularios de registro o compra.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<input type="email" name="email" autocomplete="email">

<input type="password" name="pass" autocomplete="new-password">

<input type="tel" autocomplete="tel">

<input type="email" name="email" autocomplete="email">

<input type="password" name="pass" autocomplete="new-password">

<input type="tel" autocomplete="tel">

Textarea: Contenido Extenso

Para textos multilínea (biografías, comentarios). A diferencia del input, tiene etiqueta de cierre. El tamaño se define con `rows` (filas visibles) o mejor aún, con CSS (`height` y `resize`).

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<textarea name="bio" rows="5" placeholder="Cuéntanos sobre ti..."></textarea>

<textarea name="bio" rows="5" placeholder="Cuéntanos sobre ti..."></textarea>

Selectores: Radio y Checkbox

**Radio**: Selección única. Para que funcionen como grupo excluyente, deben compartir el mismo `name`. **Checkbox**: Selección múltiple independiente. El `value` es el dato técnico que se envía; el usuario solo ve la etiqueta de al lado.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<input type="radio" name="envio" value="express"> Rápido
<input type="radio" name="envio" value="normal"> Normal


<input type="checkbox" name="newsletter" value="si"> Suscribirme

<input type="radio" name="envio" value="express"> Rápido
<input type="radio" name="envio" value="normal"> Normal


<input type="checkbox" name="newsletter" value="si"> Suscribirme

Menús Desplegables: Select

Ideal para ahorrar espacio con listas largas. Se usa `<select>` como contenedor y `<option>` para cada ítem. Se puede preseleccionar una opción con el atributo `selected`.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<select name="pais">
  <option value="arg">Argentina</option>
  <option value="col" selected>Colombia</option>
  <option value="mex">México</option>
</select>

<select name="pais">
  <option value="arg">Argentina</option>
  <option value="col" selected>Colombia</option>
  <option value="mex">México</option>
</select>

Estados del Input: Readonly vs Disabled

Diferencia técnica crucial: * **Disabled**: El input se apaga, no se edita y **NO se envía** al servidor. * **Readonly**: El input no se edita (solo lectura), pero su valor **SÍ se envía**.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<input type="text" name="codigo" value="XYZ" disabled>


<input type="text" name="id" value="user_123" readonly>

<input type="text" name="codigo" value="XYZ" disabled>


<input type="text" name="id" value="user_123" readonly>

Validaciones Nativas HTML5

Podemos restringir datos sin usar JavaScript: * `required`: Campo obligatorio. * `min`/`max`: Límites numéricos o de fecha. * `minlength`/`maxlength`: Cantidad de caracteres. * `pattern`: Expresión regular (RegEx) para formatos específicos.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<input type="number" name="edad" min="18" required>


<input type="text" pattern="[A-Z]+" title="Solo mayúsculas">

<input type="number" name="edad" min="18" required>


<input type="text" pattern="[A-Z]+" title="Solo mayúsculas">

Botones: Submit, Reset y Button

Los controles de acción: 1. `submit`: Envía el formulario (por defecto en `<button>`). 2. `reset`: Limpia todos los campos (usar con cuidado). 3. `button`: Botón 'muerto' para conectar con scripts JS personalizados.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<button type="submit">Enviar</button>
<button type="reset">Borrar</button>
<button type="button" onclick="alert('Hola')">Acción JS</button>

<button type="submit">Enviar</button>
<button type="reset">Borrar</button>
<button type="button" onclick="alert('Hola')">Acción JS</button>

El Camaleónico Atributo Value

Su significado cambia según el contexto: * En `text/password`: Es el valor inicial escrito. * En `button/submit`: Es el texto que muestra el botón. * En `checkbox/radio`: Es el dato oculto que viaja al backend si se marca.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<input type="text" value="Texto por defecto">
<input type="submit" value="Texto del Botón">
<input type="checkbox" value="dato_tecnico">

<input type="text" value="Texto por defecto">
<input type="submit" value="Texto del Botón">
<input type="checkbox" value="dato_tecnico">

Accesibilidad: Labels

Es OBLIGATORIO vincular cada input con un `<label>`. Mejora el SEO, la accesibilidad para ciegos y la usabilidad (aumenta el área de clic). Se vincula haciendo coincidir el `for` del label con el `id` del input.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<label for="campo-nombre">Nombre:</label>
<input type="text" id="campo-nombre" name="nombre">

<label for="campo-nombre">Nombre:</label>
<input type="text" id="campo-nombre" name="nombre">

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<fieldset>
  <legend>Datos de Facturación</legend>
  <input type="text" placeholder="Dirección">
  <input type="text" placeholder="Ciudad">
</fieldset>

<fieldset>
  <legend>Datos de Facturación</legend>
  <input type="text" placeholder="Dirección">
  <input type="text" placeholder="Ciudad">
</fieldset>

Ejemplo visual de fieldset agrupando inputs — El elemento fieldset crea un agrupamiento visual claro, ideal para segmentar formularios extensos en secciones lógicas.

Checklist de Seguridad y UX

1. Usa POST para datos sensibles. 2. Implementa `autocomplete` correcto. 3. Valida en HTML (`required`) Y en el servidor. 4. Usa inputs semánticos para móviles. 5. Nunca olvides el `name`, o el dato no viajará.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<form method="POST" action="/registro">
  <label for="mail">Email</label>
  <input type="email" id="mail" name="email" 
         autocomplete="email" required>
  <button type="submit">Entrar</button>
</form>

<form method="POST" action="/registro">
  <label for="mail">Email</label>
  <input type="email" id="mail" name="email" 
         autocomplete="email" required>
  <button type="submit">Entrar</button>
</form>

¿Qué pasa si no pongo el atributo `action`?

El navegador enviará los datos a la misma URL actual. Es el comportamiento por defecto y se usa mucho en aplicaciones que procesan datos en el mismo archivo o con JS.

¿Por qué `type="number"` es mejor que `text` para edades?

Porque en celulares abre automáticamente el teclado numérico, facilitando la escritura. Además, permite usar validaciones como `min` y `max`.

¿Cuál es la diferencia crítica entre `readonly` y `disabled`?

`disabled` NO envía el dato al servidor (el campo se ignora). `readonly` impide la edición pero SÍ envía el dato. Usa `readonly` si necesitas que el backend reciba esa información.

¿Para qué sirve el atributo `step` en inputs numéricos?

Controla los saltos de número. `step="0.5"` permite decimales (1.5, 2.0). Por defecto es 1 (solo enteros).

¿Por qué mis radio buttons se seleccionan todos a la vez?

Porque tienen diferentes valores en el atributo `name`. Para que sean excluyentes (grupo), deben compartir exactamente el mismo `name`.

¿El atributo `placeholder` sirve como etiqueta accesible?

No. El placeholder desaparece al escribir y muchos lectores de pantalla lo ignoran. Siempre debes usar una etiqueta `<label>` visible o atributos `aria-label`.

¿Cómo evito que el navegador autocomplete un campo?

Usando `autocomplete="off"`. Es útil para datos sensibles únicos (como códigos de verificación o captchas) que no deberían guardarse.

¿Qué es `multipart/form-data` y cuándo usarlo?

Es el tipo de codificación obligatoria para enviar archivos (imágenes, documentos). Si no lo pones en el `enctype` del form, el archivo no llegará al servidor.

¿Puedo validar con expresiones regulares en HTML?

Sí, usando el atributo `pattern`. Por ejemplo, `pattern="[0-9]{4}"` obliga a ingresar exactamente 4 dígitos.

¿Es seguro confiar solo en la validación HTML (`required`)?

Jamás. Un usuario avanzado puede modificar el HTML y quitar esas restricciones. La validación HTML es para UX; la seguridad real siempre debe estar en el servidor (Backend).

¿Cómo hago que el cursor aparezca en un input al cargar la página?

Agregando el atributo booleano `autofocus` al input deseado. Úsalo con moderación para no molestar en móviles.

¿Qué diferencia hay entre `name` e `id`?

`id` es para el Frontend (CSS, JS, vincular Labels). `name` es para el Backend (es la llave del dato en la petición HTTP).

¿Para qué sirve el input `type="hidden"`?

Para enviar datos invisibles que el usuario no debe tocar, como IDs de sesión, tokens de seguridad (CSRF) o códigos de seguimiento.

¿Puedo poner un botón fuera del form y que funcione?

Sí, usando el atributo `form="id_del_form"` en el botón. Esto lo vincula al formulario aunque esté en otra parte del HTML.

¿Cómo pre-marco un checkbox por defecto?

Añadiendo el atributo `checked` a la etiqueta input. Ejemplo: `<input type="checkbox" checked>`.

¿Qué hace el input `type="search"` diferente al `text`?

Semánticamente indica búsqueda. En muchos navegadores agrega una pequeña 'X' para borrar el texto rápidamente y cambia la tecla 'Enter' por 'Buscar' en teclados móviles.

¿Es obligatorio usar `<fieldset>`?

No, pero es muy recomendado para accesibilidad en formularios complejos, ya que permite a los lectores de pantalla anunciar el contexto del grupo (gracias a `<legend>`).

¿Por qué usar `<button type="submit">` en lugar de `<input type="submit">`?

Porque `<button>` es una etiqueta contenedor. Permite incluir iconos (`<i>`, `<img>`) o estilos complejos dentro, mientras que `<input>` solo admite texto plano en su `value`.

¿Cómo selecciono múltiples archivos a la vez?

Añadiendo el atributo `multiple` al input de tipo file: `<input type="file" multiple>`.

¿Qué pasa si uso `method="GET"` para enviar una contraseña?

La contraseña aparecerá escrita en la barra de direcciones del navegador. Es un fallo de seguridad grave.

¿Puedo cambiar el color del calendario nativo de `type="date"`?

Es difícil. El calendario nativo depende del sistema operativo (iOS, Android, Windows) y tiene opciones de estilizado muy limitadas con CSS estándar.

¿Qué es un `datalist`?

Es una etiqueta híbrida entre input y select. Permite al usuario escribir libremente pero le sugiere una lista de opciones predefinidas mientras escribe.

¿Cómo valido que dos campos sean iguales (ej: confirmar contraseña)?

HTML no puede hacer esto nativamente. Necesitas usar JavaScript para comparar los valores de ambos inputs antes de enviar.

¿El atributo `required` funciona en radio buttons?

Sí. Si pones `required` en uno de los radios del grupo, el navegador obligará al usuario a seleccionar al menos una opción del grupo.

¿Qué hace el atributo `autocomplete="new-password"`?

Le dice al navegador que este campo es para crear una contraseña nueva, evitando que autocomplete con una contraseña vieja guardada por error.

¿Cómo limito la cantidad de caracteres en un textarea?

Usando el atributo `maxlength`. Ejemplo: `maxlength="200"` impedirá escribir más allá de ese límite.

¿Puedo enviar un formulario con JavaScript (AJAX/Fetch)?

Sí. Debes escuchar el evento `submit`, usar `event.preventDefault()` para evitar la recarga y luego enviar los datos con `fetch()`.

¿Qué es el atributo `novalidate` en el form?

Desactiva las validaciones nativas del navegador (los mensajes de error automáticos). Se usa cuando quieres implementar tus propios mensajes de error visuales con JS/CSS.

¿Cómo funciona el input `type="range"`?

Muestra un deslizador (slider) para seleccionar un número dentro de un rango. No es muy preciso, pero es excelente para configuraciones visuales (volumen, brillo).

¿Es buena práctica usar el botón Reset?

Generalmente no. Es frustrante para el usuario tocarlo por accidente y perder todo su trabajo. Solo úsalo si hay una necesidad muy clara de 'empezar de cero'.